input וטפסים ב-ActionScript 3

במאמר הקודם למדנו על שדות טקסט בפלאש עם ActionScript 3. במאמר הזה אנו נלמד על איך לייצר input. האמת היא שכפי שציינתי במאמר הקודם, TextField הוא אובייקט שמשמש אותנו גם להכנסת טקסט וגם ל-input. על מנת להפוך טקסט ל-input, כל מה שאנו צריכים לעשות זה לשנות את תכונת ה-type של אובייקט ה-TextField שלנו ל-input:

package 
{
	import flash.text.*;

	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.myStage = myStage;
			myStage.addChild(m_myTextField);
		}
	}
}

נתתי לאובייקט ה-TextField גם תכונה של גבול, אחרת לא היינו יודעים היכן נמצא ה-TextField.

וכך זה נראה:

אם אני רוצה להגביל את סוג התווים שאני מרשה למשתמשים להכניס, אני יכול לעשות את זה עם תכונת restrict של TextField. אם היא null (כמו ב-default) אז אני אוכל להכניס כל תו. אם אני רוצה להגביל אני יכול לכתוב שם “0 – 9” ובכך להגביל אותה למספרים בלבד, אני יכול לכתוב שם “0-9 A-Z” ובכך להגביל את ה-input לאותיות אנגליות גדולות ומספרים בלבד. אני יכול גם להשתמש ב-^ על מנת לאסור ספציפית על תוים מסוימים. למשל “0-9 ^” תאפשר להכניס כל תו למעט מספרים. אם רוצים להכניס את התוו – משתמשים ב: “-\\”.

דוגמא תראה כמה זה פשוט:

package 
{
	import flash.text.*;

	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 = "0-9 \\-";
			this.m_myTextField.x = 10;
			this.myStage = myStage;
			myStage.addChild(m_myTextField);
		}
	}
}

כך זה נראה בעולם האמיתי, שימו לב שאפשר להכניס רק מספרים ומקף.

טפסים

אם יש לנו שדה (אחד או יותר) אנחנו צריכים גם כפתור. באופן עקרוני, שום דבר לא מונע מאיתנו ליצור sprite עם event של קליק שגורם להרצת פונקציה שלוקחת את הטקסט משדה הטקסט ושולחת אותו הלאה. חוץ מנושא השליחה, עשינו את הכל. אבל זו הזדמנות מצויינת לעבור על אובייקט שנקרא SimpleButton. מדובר באובייקט שיעזור לנו ליצור כפתור מודרני ונחמד שיש בו כמה מצבים – מצב רגיל (כאשר אף אחד לא נוגע בכפתור), מצב של hover (כאשר העכבר הוא מעל הכפתור), מצב של down (כאשר אני לוחץ על הכפתור). נכון, באמצעות האירועים שכבר למדנו ו-sprite אפשר לעשות את כל זה. אבל SimpleButton פשוט חוסך לנו עבודה.

כל מה שעלי לעשות זה ליצור 3 סוגים של sprite ואז להכניס את כולם ל-constructor של SimpleButton שידע כבר לעשות את הכל. כך אני יוצר את הכפתור:

package 
{
	import flash.display.*;

	public class myTextField {
		private var myStage;
		
		public function myTextField(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.x = 200;
			btnOne.y = 200;
			
			/* adding the textfield and the button */
			myStage.addChild(btnOne);
		}
	}
}

וככה זה נראה, נסו לעבור וללחוץ על הכפתור. מאד פשוט ואלגנטי:

עכשיו נוסיף את שדה הטקסט שלנו ל-constructor ואני אוסיף event listener לכפתור שברגע שהוא נלחץ, הוא יקח את הטקסט שיש בשדה וידפיס אותו ב-trace.

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

	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 = "0-9 \\-";
			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;
			trace(myText);
		}
	}
}

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

במאמר הבא אנו נלמד על External data – איך לשלוח ולקבל מידע מ/אל פלאש באמצעות ActionScript 3.