Creating Software that Saves Lives

Introduction to Adobe Flex 3.0

Brian Mitchell

February 18, 2008

PS Reston
What is Flex?

• Group of technologies that produce SWF (Shockwave file)

binaries, a.k.a Flash movies
– Tag based XML programming language: MXML
– ActionScript 3.0 scripting language
– Flex Builder IDE
– mxmlc compiler & debugger
• Develop Rich Internet Applications, instead of traditional
page based web applications
• Direct manipulation (drag & drop) behavior
• Client side state management

2 Monday, January 21, 2008

Why Flex?

• Flex 3 Beta 3 is open source under Mozilla

Public License
• Free SDK with command line compiler and
debugger
• Support for AIR (formerly the Apollo project)
• UI Components are amazing!
– Excellent standard components
– Open source libraries like flexlib are great
• Large community of Flex developers
• Excellent documentation from Adobe
3 Monday, January 21, 2008
ActionScript 3.0

• ECMA-4 compliant
• Object oriented
– Packages
– Classes
– Inheritance
– Interfaces
• Strong and weak typing
• Online API
– http://livedocs.adobe.com/flex/201/langref/index.html

4 Monday, January 21, 2008

ActionScript 3.0 II
<mx:Panel title=“firstApplication">
<mx:TextArea id=“note1"/>
<mx:Button label=“Submit” onclick=“doSomething();"/>
</mx:Panel>

package {
import flash.media.Video;
import flash.net.NetStream;
import flash.net.NetConnection;

public class Example {

public function doSomething( event: Event ) : void {
var url:String = “homeMovie.flv";
var video:Video = new Video(width:int=500, height:int=350)
var stream:NetStream = new NetStream(new NetConnection());
video.attachNetStream(stream);
video.play(url);
addChild(video);
}
}
}

Code borrowed from: http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/media/Video.html

5 Monday, January 21, 2008

Compilation

• mxmlc compiler
1. Stage one
1. Parse MXML into ActionScript classes
2. Compile ActionScript into bytecode
3. Insert bytecode into a binary SWF file
2. Stage two (just-in-time compilation)
1. Flash Players contain an ActionScript Virtual
Machine (AVM). At runtime, the AVM turns
the bytecode into machine language code
that the particular OS can interpret.

6 Monday, January 21, 2008

Compilation II

• Compilation can be done from:

–Command line
–Ant script
–Flex Builder IDE
–Web compiler (part of LiveCycle Data Services
ES)
• Like JSP compilation model, pages are
compiled when first requested, then cached
mxmlc --show-actionscript-warnings=true
c:/myDir/firstProgram.mxml

7 Monday, January 21, 2008

 Build tools

• Free SDK includes:

– mxmlc command line compiler
– Debugger
– Component class library
– Documentation
• Flex Builder 3.0 (Beta) includes:
– Eclipse based IDE
– SDK
– Debugger
– Design view
– Flex Builder 2 is $250, no pricing on latest
version yet
8 Monday, January 21, 2008
Data

• HTTP session is unnecessary! As Flex creates an RIA, you

keep state on the client.
– Asychronous
• Remote object invocation (access Java POJO)
• Web service
• HTTP GET/POST
– Callback required to give client the response data
– User can continue working while request is processed
• HTTPService (make GET & POST requests)
– <mx:HTTPService id="srv" url=“some.jsp"/>
• WebService (access a web service)
– <mx:WebService id="srv"
wsdl="http://somesite.org/services?wsdl"
showBusyCursor="true"/>

9 Monday, January 21, 2008

Data exchange protocols: SOAP

• SOAP?
– You can use it, but passing XML is not as
efficient as using binary exchange. Adobe
claims it is 10 times slower.
http://labs.adobe.com/technologies/blazeds/

10 Monday, January 21, 2008

Data exchange protocols: AMF

• Action Media Format (AMF) data protocol

– Binary data exchange over HTTP
– Default protocol behind <mx:RemoteObject>,
which is used to access data using remote
object invocation
– Now open source!
• Goal is to provide AMF for all platforms

11 Monday, January 21, 2008

Remote Object Invocation

• Add Java classes to Flex app classpath

– WEB-INF/classes
– WEB-INF/lib
• Integrates with J2EE security
• Class by class exposure to Flex via
deployment descriptors
• <mx:remoteObject>
– Asynchronous method call
– Callback ‘handler’
– Fault-handling

12 Monday, January 21, 2008

Remote Object Invocation II

• Example
– <mx:RemoteObject id=“myRO” destination=“myService"
fault=“fault(arg)"
result=“result(arg)" />
– Fault handling is done by callback handler fault(arg), where
‘arg’ is the error. It can handle Java exceptions and network
failures.
– Successful results are processed by callback handler
result(arg)
• remoting-config.xml
– <destination id=“myService">
<properties>
<source>com.me.myService</source>
<scope>application</scope>
</properties>
</destination>

13 Monday, January 21, 2008

Blaze DS

• What provides access to Java objects?

– Blaze DS
• Taken from LiveCycle Data Services ES, the final
release will be open source under the LGPL v3
license
• Release Candidate became available 2.1.08
• Offers remoting and messaging capabilities
– LiveCycle Data Services ES
• Rather expensive…
• Provides remoting and messaging capabilities, data
synchronization between client and server,
publish/subscribe messaging, and PDF creation

14 Monday, January 21, 2008

Flex vs. Flash

• Flash is a great tool for developing videos,

animations, or any small application that is
well suited to be developed on a timeline, or
by layering visual elements
• Flash requires the $700 IDE
• Flex is a web application developer’s
approach to creating web applications
• Flex development can be free

15 Monday, January 21, 2008

Flash IDE

16 Monday, January 21, 2008

Cairngorm MVC framework

• Open source implementation of MVC design

patterns from J2EE and .NET
– Singleton
– Service to Worker
– ModelLocator
– Front Controller
– etcetera…
• Written in ActionScript 3.0
• Not yet for Flex 3…
• http://labs.adobe.com/wiki/index.php/Cairngorm

17 Monday, January 21, 2008

Thirty-minute Flex test-drive for Java developers

• http://www.adobe.com/devnet/flex/articles/java_testdrive.html
• A couple tips for the installation…
– Set JAVA_HOME environment variable to, for example:
C:\Program Files\Java\jdk1.5.0_11
• Do not include the \bin directory on the path!
– Your root directory may be C:\Documents and Settings, but for
simplicity, place the fds-tomcat directory in your C:\ drive.
• A class not found exception is thrown for the word “and”
because the pathname is not quoted.

18 Monday, January 21, 2008

Adobe AIR

• http://labs.adobe.com/technologies/air/
• “Adobe Integrated Runtime (AIR) is a cross-
operating system runtime being developed by
Adobe that allows developers to leverage
their existing web development skills (Flash,
Flex, HTML, JavaScript, Ajax) to build and
deploy rich Internet applications (RIAs) to the
desktop.”

19 Monday, January 21, 2008

Capital Area Flex User Group

• http://www.dc-flex.org/
• Meetings usually held at AboutWeb in
Rockville, MD
• Next meeting
– Wednesday, March 05 2008 6:00pm - 9:00pm
– 6177 Executive Blvd, Rockville MD 20852

20 Monday, January 21, 2008

Resources

• Flex Developer Center

– http://www.adobe.com/devnet/flex/
• Adobe® Flex™ 3 Language Reference
– http://livedocs.adobe.com/labs/flex3/langref/
• Flex Component Explorer
– http://www.adobe.com/devnet/flex/samples/co
de_explorer/
• FlexLib
– http://code.google.com/p/flexlib/
• www.flex.org

21 Monday, January 21, 2008

www.PlatinumSolutions.com