External Data עם ActionScript 3

המאמר הקודם במדריך ה-AS3input וטפסים ב-ActionScript 3

המאמר הבא במדריך ה-AS3External Interface ב-ActionScript 3

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

במאמר הקודם למדנו על טפסים וכפתורים ב-ActionScript 3 ובפעם האחרונה נותרנו עם סקריפט שמדפיס את המידע. עכשיו נשאלת השאלה איך לשלוח את המידע הזה?

ראשית בואו ונזכר באובייקט שעבדנו עליו קודם. יש בו TextField שמקבל אותיות אנגליות גדולות בלבד, יש בו כפתור שהכנתי ויש בו פונקציה שמתרחשת כאשר הכפתור נלחץ. כרגע הפונקציה הזו לוקחת את מה שיש בשדה הטקסט ומכניסה אותו לתוך משתנה.


package 
{
	import flash.text.*;
	import flash.display.*;
	import flash.events.*;
	import flash.net.*

	public class myTextField {
		private var myStage;
		private var m_myTextField:TextField = new TextField();
		
		public function myTextField(myStage) 
		{
			/*Creating textFormat Object */
			this.m_myTextField.type = "input";
			this.m_myTextField.border = true;
			this.m_myTextField.borderColor = 0x0000FF;
			this.m_myTextField.restrict = "A-Z";
			this.m_myTextField.x = 10;
			this.m_myTextField.maxChars = 11;
			this.myStage = myStage;
			
			
			/* the over state will be red, this will show when the user hovers over the button */
			var overSprite:Sprite = new Sprite();
			overSprite.graphics.beginFill(0xff0000, 1);
			overSprite.graphics.drawRect(0, 0, 100, 100);
			overSprite.graphics.endFill();
			/* the up state will be green, this will show when the user is not interacting with the button */
			var upSprite:Sprite = new Sprite();
			upSprite.graphics.beginFill(0x00ff00, 1);
			upSprite.graphics.drawRect(0, 0, 100, 100);
			upSprite.graphics.endFill();
			/* this is the down state sprite which will show when the user clicks on the  button */
			var downSprite:Sprite = new Sprite();
			downSprite.graphics.beginFill(0x000000, 1);
			downSprite.graphics.drawRect(0, 0, 100, 100);
			downSprite.graphics.endFill();
			/* now we just pass the sprites into the SimpleButton so that it has all of its
			states immediately, the last parameter describes the hitTestState, that is, the
			area that can be moused over or clicked on */
			var btnOne:SimpleButton = new SimpleButton(upSprite, overSprite, downSprite, overSprite);
			btnOne.addEventListener(MouseEvent.CLICK, getTheText)
			
			btnOne.x = 200;
			btnOne.y = 200;
			
			/* adding the textfield and the button */
			myStage.addChild(m_myTextField);
			myStage.addChild(btnOne);
		}
		function getTheText(ev:Event)
		{
				var myText = this.m_myTextField.text;
				//HERE WILL BE OUR DATA SENDING
		}
	}
}

על מנת לתרגל את התקשורת בצד השרת אני אשתמש ב-PHP די סטנדרטי שמה שהוא עושה זה לקבל אותיות באנגלית (בלבד, הוא לא יקבל משהו אחר) באמצעות GET או POST ולהפוך את סדר האותיות. הדף עצמו נמצא ב:
https://internet-israel.com/internet_files/ajax_example/ajax.php
והנה הקוד המאד מאד פשוט שלו:


< ?php
if(ctype_alpha($_REQUEST['myName']))
{
	$string =$_REQUEST['myName'];
	$result = strrev($string);
	print $result;
}
else
{
	die;
}
?>

ראשית, נתמקד בשליחת מידע פשוטה get/post ומעבר לדף שאליו אנחנו שולחים את המידע. בדיוק כמו שכל טופס HTML פשוט שבפשוטים מתנהג.

על מנת ליצור את התקשורת הזו אנו נשתמש בספרית flash.net (ולא נשכח לעשות import flash.net.*). בספריה הזו יש אובייקט שנקרא URLRequest שדרכו אנו מבצעים את התקשורת. אנו ניצור אותו, נעביר בתוכו אובייקט של הכתובת שאנו רוצים להשתמש בה ואז נמלא שתי תכונות שלו – הראשונה אם אנו רוצים לשלוח את המידע בצורת GET או POST והשניה היא המידע שאנו שולחים. לבסוף נשתמש ב-navigateToURL על מנת לעבור לעמוד החדש.

נשמע מסובך? אני תמיד מראה את הדוגמא:



package 
{
	import flash.text.*;
	import flash.display.*;
	import flash.events.*;
	import flash.net.*

	public class myTextField {
		private var myStage;
		private var m_myTextField:TextField = new TextField();
		
		public function myTextField(myStage) 
		{
			/*Creating textFormat Object */
			this.m_myTextField.type = "input";
			this.m_myTextField.border = true;
			this.m_myTextField.borderColor = 0x0000FF;
			this.m_myTextField.restrict = "A-Z";
			this.m_myTextField.x = 10;
			this.m_myTextField.maxChars = 11;
			this.myStage = myStage;
			
			
			/* the over state will be red, this will show when the user hovers over the button */
			var overSprite:Sprite = new Sprite();
			overSprite.graphics.beginFill(0xff0000, 1);
			overSprite.graphics.drawRect(0, 0, 100, 100);
			overSprite.graphics.endFill();
			/* the up state will be green, this will show when the user is not interacting with the button */
			var upSprite:Sprite = new Sprite();
			upSprite.graphics.beginFill(0x00ff00, 1);
			upSprite.graphics.drawRect(0, 0, 100, 100);
			upSprite.graphics.endFill();
			/* this is the down state sprite which will show when the user clicks on the  button */
			var downSprite:Sprite = new Sprite();
			downSprite.graphics.beginFill(0x000000, 1);
			downSprite.graphics.drawRect(0, 0, 100, 100);
			downSprite.graphics.endFill();
			/* now we just pass the sprites into the SimpleButton so that it has all of its
			states immediately, the last parameter describes the hitTestState, that is, the
			area that can be moused over or clicked on */
			var btnOne:SimpleButton = new SimpleButton(upSprite, overSprite, downSprite, overSprite);
			btnOne.addEventListener(MouseEvent.CLICK, getTheText)
			
			btnOne.x = 200;
			btnOne.y = 200;
			
			/* adding the textfield and the button */
			myStage.addChild(m_myTextField);
			myStage.addChild(btnOne);
		}
		function getTheText(ev:Event)
		{
				var myText = this.m_myTextField.text;
				
				var request:URLRequest = new URLRequest("https://internet-israel.com/internet_files/ajax_example/ajax.php");
				request.method = "GET";
				request.data = "myName="+myText;
				flash.net.navigateToURL(request);

		}
	}
}

וכך זה נראה בעולם האמיתי, שימו לב להכניס רק אותיות גדולות בטופס:

בדוגמא שהבאתי, אנו שולחים את המשתמש, יחד עם המידע שהוא הזין בפלאש לדף אחר. מה אם אנחנו רוצים את הפלט שהשרת מדפיס לנו באפליקציה שלנו? התנהגות AJAXית בעצם, למי שמכיר AJAX.

זה מאד מאד פשוט בפלאש. אנחנו עושים את זה באמצעות אובייקט URLLoader שבדומה ל-AJAX הוא זה שמנהל את התקשורת בינינו לבין השרת.

אנחנו מכינים את ה-request בדיוק כמו בדוגמא הקודמת, רק אנו משמיטים את השורה של flash.net.navigateToURL(request) כיוון שאנחנו לא שולחים את המשתמש לשום דף. במקום זה אנו יוצרים את URLLoader ושמים לו מאזינים לאירוע של PROGRESS (כל עוד התקשורת נמשכת, היא יכולה להמשך לא מעט זמן במקרה שאנו מושכים קובץ גדול) ולאירוע של COMPLETE (התקשורת נגמרה) כאשר התקשורת נגמרת, יש לנו את הפלט ואנו יכולים להדפיס אותו או לעשות איתו מה שבא לנו.

שימו לב לדוגמא הבאה, הדגשתי את החלקים שהוספתי:


package {
	import flash.text.*;
	import flash.display.*;
	import flash.events.*;
	import flash.net.*;

	public class myTextField {
		private var myStage;
		private var m_myTextField:TextField = new TextField();
		private var loader:URLLoader;

		public function myTextField(myStage) {
			/*Creating textFormat Object */
			this.m_myTextField.type = "input";
			this.m_myTextField.border = true;
			this.m_myTextField.borderColor = 0x0000FF;
			this.m_myTextField.restrict = "A-Z";
			this.m_myTextField.x = 10;
			this.m_myTextField.maxChars = 11;
			this.myStage = myStage;


			/* the over state will be red, this will show when the user hovers over the button */
			var overSprite:Sprite = new Sprite();
			overSprite.graphics.beginFill(0xff0000, 1);
			overSprite.graphics.drawRect(0, 0, 100, 100);
			overSprite.graphics.endFill();
			/* the up state will be green, this will show when the user is not interacting with the button */
			var upSprite:Sprite = new Sprite();
			upSprite.graphics.beginFill(0x00ff00, 1);
			upSprite.graphics.drawRect(0, 0, 100, 100);
			upSprite.graphics.endFill();
			/* this is the down state sprite which will show when the user clicks on the  button */
			var downSprite:Sprite = new Sprite();
			downSprite.graphics.beginFill(0x000000, 1);
			downSprite.graphics.drawRect(0, 0, 100, 100);
			downSprite.graphics.endFill();
			/* now we just pass the sprites into the SimpleButton so that it has all of its
			states immediately, the last parameter describes the hitTestState, that is, the
			area that can be moused over or clicked on */
			var btnOne:SimpleButton = new SimpleButton(upSprite, overSprite, downSprite, overSprite);
			btnOne.addEventListener(MouseEvent.CLICK, getTheText);
			btnOne.x = 200;
			btnOne.y = 200;

			/* adding the textfield and the button */
			myStage.addChild(m_myTextField);
			myStage.addChild(btnOne);
		}
		function getTheText(ev:Event) {
			var myText = this.m_myTextField.text;

			var request:URLRequest = new URLRequest("https://internet-israel.com/internet_files/ajax_example/ajax.php");
			request.method = "GET";
			request.data = "myName="+myText;
			loader = new URLLoader(request);
			loader.addEventListener(Event.COMPLETE, completeListener);
			loader.addEventListener(ProgressEvent.PROGRESS, progressListener);
		}
		private function completeListener(event:Event):void {
			trace("Finished loading. Here is the data: " + loader.data);
		}
		private function progressListener(event:Event):void {
			trace(" we're in progress, we've loaded " + loader.bytesLoaded +" out of " + loader.bytesTotal + " bytes ");
		}
	}
}

וכך זה נראה בעולם האמיתי, הפעילו את ה-Flash Tracer שלכם על מנת לצפות בפלט!

בדוגמא הזו אנו שולחים מידע כ-string. כיוון שבדוגמא אנו שולחים רק פרמטר אחד ששמו הוא myName, אין בעיה לחשתמש ב-string. אך אם יש לנו עשרות או מאות פרמטרים, זה יהיה קשה לארגן את כולם כ-string אחד.

דרך יותר פשוטה היא להשתמש באובייקט URLVariables. מה שנעשה זה ליצור את האובייקט ולהכניס לתוכו כתכונות את הערכים שלנו. הנה דוגמא קטנה:


package {
	import flash.text.*;
	import flash.display.*;
	import flash.events.*;
	import flash.net.*;

	public class myTextField {
		private var myStage;
		private var m_myTextField:TextField = new TextField();
		private var loader:URLLoader;

		public function myTextField(myStage) {
			/*Creating textFormat Object */
			this.m_myTextField.type = "input";
			this.m_myTextField.border = true;
			this.m_myTextField.borderColor = 0x0000FF;
			this.m_myTextField.restrict = "A-Z";
			this.m_myTextField.x = 10;
			this.m_myTextField.maxChars = 11;
			this.myStage = myStage;


			/* the over state will be red, this will show when the user hovers over the button */
			var overSprite:Sprite = new Sprite();
			overSprite.graphics.beginFill(0xff0000, 1);
			overSprite.graphics.drawRect(0, 0, 100, 100);
			overSprite.graphics.endFill();
			/* the up state will be green, this will show when the user is not interacting with the button */
			var upSprite:Sprite = new Sprite();
			upSprite.graphics.beginFill(0x00ff00, 1);
			upSprite.graphics.drawRect(0, 0, 100, 100);
			upSprite.graphics.endFill();
			/* this is the down state sprite which will show when the user clicks on the  button */
			var downSprite:Sprite = new Sprite();
			downSprite.graphics.beginFill(0x000000, 1);
			downSprite.graphics.drawRect(0, 0, 100, 100);
			downSprite.graphics.endFill();
			/* now we just pass the sprites into the SimpleButton so that it has all of its
			states immediately, the last parameter describes the hitTestState, that is, the
			area that can be moused over or clicked on */
			var btnOne:SimpleButton = new SimpleButton(upSprite, overSprite, downSprite, overSprite);
			btnOne.addEventListener(MouseEvent.CLICK, getTheText);
			btnOne.x = 200;
			btnOne.y = 200;

			/* adding the textfield and the button */
			myStage.addChild(m_myTextField);
			myStage.addChild(btnOne);
		}
		function getTheText(ev:Event) {
			var myText = this.m_myTextField.text;

			var request:URLRequest = new URLRequest("https://internet-israel.com/internet_files/ajax_example/ajax.php");
			request.method = "GET";
			var variables:URLVariables = new URLVariables();
			variables.myName = myText;
			request.data = variables;
			loader = new URLLoader(request);
			loader.addEventListener(Event.COMPLETE, completeListener);
			loader.addEventListener(ProgressEvent.PROGRESS, progressListener);
		}
		private function completeListener(event:Event):void {
			trace("Finished loading. Here is the data: " + loader.data);
		}
		private function progressListener(event:Event):void {
			trace(" we're in progress, we've loaded " + loader.bytesLoaded +" out of " + loader.bytesTotal + " bytes ");
		}
	}
}

הדגשתי את החלק החשוב, רק ליצור את האובייקט ולהכניס לתוכו מידע כאשר תכונה זה ה-key שלנו והמידע שיש בתכונה הוא ה-value – כך ש variables.myName = myText; כש-variables הוא האובייקט שלנו.

במאמר הבא אנו נלמד על externalInterface ואיך הוא יכול לעזור לנו בתקשורת של פלאש עם JavaScript שנמצא באותו דף שבו ה-JavaScript נמצא.

קרנה של פלאש ירדה בשנים האחרונות, אבל כאן תוכלו ללמוד AS3 או לשפר את הידע שלכם בשפה זו.

המדריך ללימוד Action Scrip 3

לכל המאמרים

RSS Feed

עקבו אחרי בטוויטר

ערוץ הטלגרם של אינטרנט ישראל

הפרויקטים שלי בגיטהאב