Lab 3 Actionscript User Interface Lab GUI Lab
Lab 3: Actionscript User Interface Lab: GUI Lab Sep. 11 th, 2012
Hw 1 a • Due now!
Project 1 b • TBA • Uses actionscript (this lab) • Due by 9: 00 am, 9/25 (in two weeks)
Lab 3 goals • MXML: a more general perspective • Basic actionscript – Variables – Functions – Conditions
MXML Declarative language • Declare objects and layout between objects – Other example: HTML • Good for layout declaration Actionscript Imperative language • Write imperative statement that get run top to bottom – Other example: javascript • Good for interactivity Example: Creating a rectangle that is 100 x 100 <s: Rect width=“ 100” height=“ 100” /> var rect 1: Rectangle = new Rectangle; rect 1. width = 100; rect 1. height = 100; this. content. Group. add. Element(rect 1);
MXML Declarative language • Declare objects and layout between objects – Other example: HTML • Good for layout declaration Actionscript Imperative language • Write imperative statement that get run top to botttom – Other example: javascript • Good for interactivity Example: Creating a rectangle that is 100 x 100 <s: Rect width=“ 100” height=“ 100” /> var rect 1: Rectangle = new Rectangle; rect 1. width = 100; rect 1. height = 100; this. content. Group. add. Element(rect 1);
MXML Components: Namespaces • mx – Halo • s – Spark (Halo + skinning) • fx – Language (programming) • map – Google Maps
MXML syntax <s: Rect> </s: Rect> Opening tag Closing tag
MXML syntax <s: Rect width=“ 150”> Opening tag Attribute name </s: Rect> Closing tag Attribute value
MXML syntax <s: Rect width=“ 150” height=“ 150”> Opening tag </s: Rect> Closing tag Attribute
Opening tag MXML syntax Attribute <s: Rect width=“ 150” height=“ 150”> Child tag <s: fill> <s: Solid. Color color=“#FF 0000” /> </s: fill> </s: Rect> Closing tag
MXML: Layouts • Containers • Organizers • Positioning
MSML Declarative language • Declare objects and layout between objects – Other example: HTML • Good for layout declaration Actionscript Imperative language • Write imperative statement that get run top to bottom – Other example: javascript • Good for interactivity Example: Creating a rectangle that is 100 x 100 <s: Rect width=“ 100” height=“ 100” /> var rect 1: Rectangle = new Rectangle; rect 1. width = 100; rect 1. height = 100; this. content. Group. add. Element(rect 1);
Tag Don’t interpret as MXML <fx: Script> <![CDATA[ // code goes here ]]> </s: Script>
Declare a script in your application
Actionscript public var my. Int: int; public var my. Str: String= “hi”; Access control Declaration Name Type Value
Declare a date object • Name: start. Time • Type: Date • Initial value set to: new Date()
Declare a date object
Add a button, generate event handler • Label: “Click me!” • Under “On click: ”, click “Generate Event Handler”
Pop up an alert on click Test your program
Show many seconds since the app started Test your program
Show if the current time is the GUI lab time Test your program
Where to Explore? • Action. Script references http: //help. adobe. com/en_US/Flash. Platform/refere nce/actionscript/3/index. html • Example Projects: Tour de Flex http: //www. adobe. com/devnet/flex/tourdeflex. html • Google!!
- Slides: 24