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