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

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

3. 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 MXMLActionScript Debuggers

4. MXML

5. MXML - Components

6. MXML – identifiers (references)

7. MXML - Properties

8. MXML - Events

9. MXML - Bindings

10. How Flex Works in the Browser Flex Builder IDE Flex SDK Flex Class Library MXMLActionScript Compile SOAPHTTP/SAMF/SRTMP/S Web Server Existing Applications & Infrastructure J2EE Application Server LC Data Services XML/HTTP REST SOAP Web Services Browser Flash Player

11. How Flex Works on the Desktop Flex Builder IDE Flex SDK Flex Class Library MXMLActionScript Compile & Package SOAPHTTP/SAMF/SRTMP/S Web Server Existing Applications & Infrastructure J2EE Application Server LC Data Services XML/HTTP REST SOAP Web Services Desktop AIR Client Runtime FilesSQLiteNotificationsClipboard

12. ® FLEX 3 SDK COMPILERS

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

14. MXML Document Container

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

16. Flex SDK Source Code  In Subversion Repository:  http://opensource.adobe.com/svn/opensource/flex/sdk/ 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/svnhttp://opensource.adobe.com/svn  Warning – this might take some time (larger files)

17. Flex SDK Source Code  Sit back and have a beer while the source rolls in. We tested this and one beer is about right.

18. 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)

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

20. Flex SDK Source Code  Now build something!

21. Voila~

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

23. 2008 Adobe Systems Incorporated. All Rights Reserved. What you’ll need:  Flex SDK or Flex Builder 3  http://www.adobe.com/products/flex/ http://www.adobe.com/products/flex/  Fles Source Code:  http://opensource.adobe.com/svn/opensource/flex/sdk/ http://opensource.adobe.com/svn/opensource/flex/sdk/  Flex Skin Design Extensions for CS3:  http://www.adobe.com/go/flex3_skinning http://www.adobe.com/go/flex3_skinning  Flex Component Kit for Flash CS3:  http://www.adobe.com/go/flex3_cs3_swfkit http://www.adobe.com/go/flex3_cs3_swfkit  Visit the Developer Centre for tutorials  http://developer.adobe.com/ http://developer.adobe.com/

24. 2006 Adobe Systems Incorporated. All Rights Reserved. Revolutionizing how the world engages with ideas and information