Download - SDN Mentor Hands On - Exercise 2
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
Flex Component 101
dan mcweeney
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
What’s Flex
“…is a cross platform, open source framework for creating rich Internet applications that run identically in all major browsers and operating systems, and now the desktop with Adobe AIR”
Runs just on the Flash Player
“Flash content reaches 99.0% of Internet viewers”
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
What’s Flex
“…is a cross platform, open source framework for creating rich Internet applications that run identically in all major browsers and operating systems, and now the desktop with Adobe AIR”
Runs just on the Flash Player
“Flash content reaches 99.0% of Internet viewers”
Makes Pretty Uis easy
Integrates with SAP Web Services
Java via BlazeDS
Flash Islands
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
Point of reuse in the Flex Framework for UI components
Mostly written in AS but can be created in MXML
Skinable through CSS
Flex Components
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
Flex Applications
Created with many components
Stitched together using Actionscript
The actual run-able unit
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
Flash Islands
Allows Flex Applications to talk to the Web Dynpro Framework Set Data
Get Data
Receive and Fire Events
Why the hell are you talking about Components!?!?
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
Flex Basics
MXML (backronymed to Magic eXtensible Markup Language) XML based markup for defining UI and components
<mx:Button fillColors=“[blue,blue]”color=“red” label=“This is a button”>
</mx:Button>
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
Flex Basics
Actionscript 3 Object oriented language similar to Javascript, both adhere closely to
ECMAScript standards
package{
import mx.controls.Button;
public class MyButton extends Button{
public function MyButton(){
super();setStyle("fillColors", ["blue","blue"]);setStyle("color", "red");label = ”This is a button";
}
}}
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
Actionscript Cheat Sheet
Class Syntax
package i.could.be.useful {
public class Foo extends Bar {
public var imPublic:XML;
protected var imProtected:Number;
private var imPrivate:String;
public function Foo(){
super();
}
}
}
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
Actionscript Cheat Sheet
Traverse XML
private function traverseXML(xml:XML):Boolean{
for each(var node:XML in xml.collectionToTraverse){
trace("do something with the name");
}
return true;
}
Get an attribute of a XML Node
node.@attributeName
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
Actionscript Cheat Sheet
Binding Bindings allow you to connect a component to a data set
Data bindings are one way in Flex, from the data to the control. The control has event[s] to allow you to update the data item e.g. “changed”
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
Actionscript Cheat Sheet
Setters and Getters Flex has public properties but also setters and getters
The standard way
package{
public class Foo{
private var _myString:String;
public function Foo(){}
public function get myString():String{
return _myString;
}
public function set myString(o:String){
_myString = o;
}
}
}
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
Actionscript Cheat Sheet
Component Methods you might need
addChild(child:DisplayObject):DisplayObject
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
Actionscript Cheat Sheet
Print to Console
trace(“this will make it to the console to help you debug”);
Alert Window
Alert.show(“This is the text”,”this is the title”);