2006 adobe systems incorporated. all rights reserved. 1 adobe’s open source flex sdk. oscon - july...
TRANSCRIPT
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