2006 Adobe Systems Incorporated. All Rights Reserved. 1

Adobe’s Open Source Flex SDK.

OSCON - July 2008 Portland, OR

Duane Nickull & James Ward Sr. Technology Evangelists

® ADOBE FLEX 3

A highly productive, free open source framework for building expressive web applications that deploy consistently on all major browsers and on the desktop with Adobe AIR

Flex Builder IDE

  Flex Builder IDE   Eclipse Plugin or turn-key install

  Accelerates Design

  Design view and code view

Understanding Flex

  2 languages   MXML (actually a library of ActionScript)

  ActionScript 3

  Compilers

  Debuggers

  Rich Component Library

Flex SDK

Flex Class Library

MXML ActionScript

Debuggers

MXML

<mx:Application> <mx:WebService id=“ws” wsdl=“catalog.wsdl”/> <mx:Button label=“Get Data” click=“ws.getProducts()”/> <mx:DataGrid dataProvider=“{ws.getProducts.result}”/> <mx:LineChart dataProvider=“{ws.getProducts.result}”/> </mx:Application>

MXML - Components

<mx:Application> <mx:WebService id=“ws” wsdl=“catalog.wsdl”/> <mx:Button label=“Get Data” click=“ws.getProducts()”/> <mx:DataGrid dataProvider=“{ws.getProducts.result}”/> <mx:LineChart dataProvider=“{ws.getProducts.result}”/> </mx:Application>

MXML – identifiers (references)

<mx:Application> <mx:WebService id=“ws” wsdl=“catalog.wsdl”/> <mx:Button label=“Get Data” click=“ws.getProducts()”/> <mx:DataGrid dataProvider=“{ws.getProducts.result}”/> <mx:LineChart dataProvider=“{ws.getProducts.result}”/> </mx:Application>

MXML - Properties

<mx:Application> <mx:WebService id=“ws” wsdl=“catalog.wsdl”/> <mx:Button label=“Get Data” click=“ws.getProducts()”/> <mx:DataGrid dataProvider=“{ws.getProducts.result}”/> <mx:LineChart dataProvider=“{ws.getProducts.result}”/> </mx:Application>

MXML - Events

<mx:Application> <mx:WebService id=“ws” wsdl=“catalog.wsdl”/> <mx:Button label=“Get Data” click=“ws.getProducts()”/> <mx:DataGrid dataProvider=“{ws.getProducts.result}”/> <mx:LineChart dataProvider=“{ws.getProducts.result}”/> </mx:Application>

MXML - Bindings

<mx:Application> <mx:WebService id=“ws” wsdl=“catalog.wsdl”/> <mx:Button label=“Get Data” click=“ws.getProducts()”/> <mx:DataGrid dataProvider=“{ws.getProducts.result}”/> <mx:LineChart dataProvider=“{ws.getProducts.result}”/> </mx:Application>

How Flex Works in the Browser

Flex Builder IDE

Flex SDK

Flex Class Library

MXML ActionScript

Compile

SOAP HTTP/S AMF/S RTMP/S

Web Server

Existing Applications & Infrastructure

J2EE Application Server

LC Data Services XML/HTTP REST SOAP Web Services

Browser

Flash Player

How Flex Works on the Desktop

Flex Builder IDE

Flex SDK

Flex Class Library

MXML ActionScript

Compile & Package

SOAP HTTP/S AMF/S RTMP/S

Web Server

Existing Applications & Infrastructure

J2EE Application Server

LC Data Services XML/HTTP REST SOAP Web Services

Desktop

AIR Client Runtime

Files SQLite Notifications Clipboard

® FLEX 3 SDK COMPILERS

Compilers

http://opensource.adobe.com/wiki/download/attachments/12845394/compiler.png?version=1

MXML Document Container

THE MEAT: Downloading, Building the Flex SDK Open Source! LIVE!!!

Flex SDK Source Code

  In Subversion Repository:   http://opensource.adobe.com/svn/opensource/flex/sdk/

  Prerequisites (Mac OSX, Linux):   Java 2SDK

  Apache ANT   SVN Client

  Open Terminal and enter   svn checkout http://opensource.adobe.com/svn

  Warning – this might take some time (larger files)

Flex SDK Source Code

  Sit back and have a beer while the source rolls in. We tested this and one beer is about right.

Flex SDK Source Code

  Navigate to the ~/install_directory/trunk and type “source setup.sh”

  NOTE: you have to have perms (if not try “SUDO ..”)

  Watch the fun start. This sets up all environmental variables.

  On Mac OSX/Lunix/Unix you can verify this with “printenv” (prints all variables)

Flex SDK Source Code

  When you build, two things happen:

  First the Java source code for the author-time command-line tools, which is located in the modules directory, is compiled using the J2SDK to create JAR files in the lib directory. This includes the code for the command-line tools mxmlc and compc.

  Then the ActionScript source code for the runtime framework, which is located in the frameworks/projects directory, is compiled using compc to create SWC files in the frameworks/libs and frameworks/locale directories.

  To build, type in “ant -q main”

  Go get a second beer while it compiles! If you have lots of RAM and a high speed GPU, you may need to chug it (see below). Ignore the messages about deprecated APIs

Flex SDK Source Code

  Now build something!

Voila~

Adobe Flex Builder 3 – Developer Productivity

  Eclipse based IDE   Code hinting, interactive debugging

  Visual UI design and behaviors

  Import assets from Adobe CS3

  Professional edition adds:   Memory and Performance Profilers

  Charting components, advanced datagrid

  Automated functional testing support

2008 Adobe Systems Incorporated. All Rights Reserved.

What you’ll need:

  Flex SDK or Flex Builder 3   http://www.adobe.com/products/flex/

  Fles Source Code:   http://opensource.adobe.com/svn/opensource/flex/sdk/

  Flex Skin Design Extensions for CS3:   http://www.adobe.com/go/flex3_skinning

  Flex Component Kit for Flash CS3:   http://www.adobe.com/go/flex3_cs3_swfkit

  Visit the Developer Centre for tutorials   http://developer.adobe.com/

2006 Adobe Systems Incorporated. All Rights Reserved.

Revolutionizing how the world engages with ideas and information