Introduction to Flex
Indy Nagpal
Web On The Piste
August 2007
Who am I
• Senior Developer with Straker Interactive
• Trainer -- Flex, ColdFusion, ShadoCMS
• A couple of years with Flex
• A decade of working with ColdFusion
• In New Zealand since last four years
• And loving it!
The next 45 minutes
• What is Flex
• Examples
• MXML and ActionScript
• Controls and Containers
• Events
• Work with a small application
What is a Rich Internet Application (RIA)
• Every user interaction does not require
request/web server response
• Data can be obtained from server without
redrawing entire page
• Efficiently utilize network bandwidth
transmitting only portion of the data that
changed
• Combine the best of desktop, web and
communications
What is Flex
A bunch of developer tools from
Adobe to build and deploy
Rich Internet Applications
on the Flash platform
Flex Tools
• Flex Software Development Kit (Free)
– MXML and ActionScript
– Flex Framework
– Command-line compiler and debugger
• Flex Builder 2 (based on Eclipse)
– Visual Layout
– Code Hinting
– Debugging
• Flex Charting
• LiveCycle Data Services (Flex Data Services)
In a way, Flex is…
an easy way for developers to
make SWF files!
Makes applications for:
the web (Flash Player)
and
the desktop (AIR)
http://flex.org/showcase
http://adobe.com/flex
How it all works
The slightly bigger picture
Flex Builder
Lo
ve
it
• IDE for the Flex framework
• Based on Eclipse
• Provides design, coding and debugging tools
• Built-in compiler to create SWFs from MXML
and ActionScript
• Flex Builder costs money -- and it is worth
every cent
The Goodies in Flex SDK
• MXML: XML-based language
• ActionScript: ECMAScript-compliant scripting
• Library of pre-built components
• Compiler: Create SWFs from MXML/ActionScript
MXML
• XML-based language
• Declarative way to build applications
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Button id = "myButton"
label = "Button"
click = "myLabel.text='Button clicked'"
/>
<mx:Label id="myLabel" />
</mx:Application>
ActionScript
• Core of the Flex
• ECMAScript-compliant scripting
• Familiar syntax
public class MyClass implements MyInterface {
private var myVariable:String;
public function doSomething():void {
}
The cost of Flex SDK
• Flex SDK is free
• Repeat after me… F! lex SDK is free
• You can write code in a text editor and
compile it into a Flash SWF using MXMLC --
the MXML compiler
• Download from:
http://www.adobe.com/products/flex/sdk/
Flex Controls
• Controls are user-interface components, like
Button, TextArea, ComboBox
• Placed in containers
• Customizable -- styles, skins, fonts
• MXML API to declare the control
• ActionScript API for calling methods and
setting properties
Controls
• Button • NumericStepper
• CheckBox • PopUpButton
• ColorPicker • PopUpMenuButton
• ComboBox • ProgressBar
• DataGrid • RadioButton
• DateChooser • RichTextEditor
• DateField • Text
• HSlider • TextArea
• HorizontalList • TextInput
• Image • TileList
• Label • Tree
• LinkButton • VSlider
• List • VideoDisplay
Flex Containers
• Provide a structure to layout child components
• Consist of other components, both controls
and containers
• Control sizing and positioning of all children
• Control navigation among multiple child
containers
Containers
Layout Containers Navigator Containers
• Canvas • ModuleLoader • Accordian
• ControlBar • Panel • ButtonBar
• Form • Spacer • LinkBar
• FormHeading • Tile • MenuBar
• Grid • TitleWindow • TabBar
• Hbox • Vbox • TabNavigator
• HDividedBox • VDividedBox • ToggleButtonBar
• HRule • VRule • ViewStack
mx:Application
mx:Button
mx:Panel
<mx:Application>
mx:Button <mx:Button/>
<mx:Panel width="100%"
mx:DataGrid
height="100%">
<mx:Button width="100%" />
<mx:DataGrid />
</mx:Panel>
</mx:Application>
Flex Explorer
Q
ui
http://www.adobe.com/go/flex_explorer_app
ck
Pe
ek
Co
Say hello to the world…
de
• Create a new Flex
project in Flex Builder
• Add a button
• Add a Panel
• Add a Label
Properties
• Use the <mx:Script> tag to create properties
• Properties created in ActionScript
• Access modifiers: public, private, protected,
internal
<mx:Script>
<![CDATA[
public var myProp:String = "Hello World";
]]>
</mx:Script>
Data Binding
Ve
ry
co
ol
• Properties of an object can be bound to
another
• As property value changes, the bound object
automatically reflects the changes
• Curly bracket ( {} ) notation used to indicate
binding
• Properties used in bindings specified with the
[Bindable] meta tag
Data Binding
<mx:Script>
<![CDATA[
[Bindable]
private var sLabel:String = "I am a label";
]]>
</mx:Script>
<mx:Panel>
<mx:Label text="{sLabel}"/>
</mx:Panel>
Co
Say hello with binding
de
• Create a new property
• Bind value of the label
to the property
• Change the value of the
property when the
button is clicked
Functions/Methods
• Functions written in ActionScript
• Can contain multiple lines of code
• Enable code reuse
• Cleaner code
<mx:Script>
<![CDATA[
private function handleCreationComplete():void{
var sLabel:String = "I am a label";
var oPerson:Object = new Object;
}
]]>
</mx:Script>
Events
Ve
ry
co
ol
• Events notify the developer when something
happens in a Flex application
• System Events
– Occur as a result of systemic code execution
– E.g., creationComplete, initialize
• User Events
– Occur as a result of user interaction with the
application
– E.g., click, change, mouseOver
Handling Events
• Handling an event means taking an action
when an event is broadcast/dispatched
• Handle inline -- as in the HelloWorld example
<mx:Button label = "Say hello"
click = "sLabel = 'Hello World'"/>
• Handle with functions -- preferable
<mx:Button label = "Say hello”
click = "handleClick()"/>
Handling Events
Co
de
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="handleCreationComplete()">
<mx:Script>
<![CDATA[
[Bindable]
private var sLabel:String = "";
private function handleCreationComplete():void{
sLabel = "I am a label, and exact";
}
private function handleClick():void{
sLabel = "A big loud hello to the world";
}
]]>
</mx:Script>
<mx:Button label="Say hello to the world" click="handleClick()"/>
<mx:Panel width="400" height="300” layout="vertical” title="I'm a panel">
<mx:Label fontSize="20" text="{sLabel}"/>
</mx:Panel>
</mx:Application>
The Events state of mind
• Big mind jump for most web developers
• Procedural to event-driven programming
• Different parts of an application keep firing
events
• Handlers keep handling events
asynchronously
Data Access
• Flex can work with remote data sources
• Flex applications can make asynchronous calls
to remote data services
• Three components to work with server-side
data services
– HTTPService
– WebService
– RemoteObject
HTTPService
Ea
sy
• Sends HTTP requests to specified URIs
• GET, POST, HEAD, OPTIONS, PUT, TRACE,
DELETE
• Results returned as text/XML
• Great to work REST-style services
(More on REST in my session on Web APIs)
<mx:HTTPService
id="feedRequest"
url="http://feeds.feedburner.com/indiver" />
WebService
• Access any SOAP-compliant Web Service
• Sends request to methods of a Web Service
• Results returned as XML (SOAP)
<mx:WebService id="oService"
wsdl="http://weblogs.macromedia.com/mxna/
webservices/mxna2.cfc?wsdl">
<mx:operation name="getMostPopularPosts">
<mx:request>
<daysBack>30</daysBack>
</mx:request>
</mx:operation>
</mx:WebService>
RemoteObject
Th
e
[The Force is strong with this one!]
Je
di
• Access methods of a server-side objects
without converting them into WebServices
• Data exchanged in a compressed, binary
format -- AMF - Action Message Format
<mx:RemoteObject
source="com.nagpals.wotp.yahoo.Flickr"
id="oFlickr"
destination="ColdFusion"
showBusyCursor="true"
>
<mx:method name="tagSearch"
result="handleGetResults(event)"/>
</mx:RemoteObject>
Co
Building an RSS Reader
de
• Create a new application
• Add a Panel
• Add a Datagrid
• Add a TextArea
• Add a HTTPService
• Call HTTPService
• Populate Datagrid with
results
• Populate TextArea on
clicking the Datagrid
Resources
• http://flex.org
• http://adobe.com/flex/
• http://www.adobe.com/go/flexcoders
• http://groups.google.com/nzfxug/
• http://livedocs.adobe.com/flex/
Comments / Questions?
Thanks!
Indy Nagpal
[email protected]
http://nagpals.com
