2006 Adobe Systems Incorporated. All Rights Reserved. 1 Adobe’s Open Source Flex SDK. OSCON - July...

2006 Adobe Systems Incorporated. All Rights Reserved. 1

Adobe’s Open Source Flex SDK.

OSCON - July 2008Portland, OR

Duane Nickull & James WardSr. 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 ServicesXML/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 ServicesXML/HTTP

REST

SOAP Web Services

Desktop

AIR Client Runtime

Files SQLite NotificationsClipboard

®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.

Revolutionizinghow the world engages with ideas and information