Flex - the Open Source SDK for Rias

Adobe’s Open Source Flex SDK. : 

1 Adobe’s Open Source Flex SDK.

Slide 2: 

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

Understanding Flex : 

Understanding Flex 2 languages MXML (actually a library of ActionScript) ActionScript 3 Compilers Debuggers Rich Component Library

MXML : 

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 : 

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) : 

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 : 

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 : 

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 : 

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 : 

How Flex Works in the Browser Flex Builder IDE Flex Class Library MXML ActionScript Compile

How Flex Works on the Desktop : 

How Flex Works on the Desktop Flex Builder IDE Flex Class Library MXML ActionScript Compile & Package

Compilers : 

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

MXML Document Container : 

MXML Document Container

Slide 15: 

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

Flex SDK Source Code : 

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 : 

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 : 

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 : 

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 : 

Flex SDK Source Code Now build something!

Voila~ : 

Voila~

Adobe Flex Builder 3 – Developer Productivity : 

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

What you’ll need: : 

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/

Slide 24: 

Revolutionizinghow the world engages with ideas and information