This document provides an overview of Flex and its relationship to PHP. It discusses the background of Flex and how it combines Flash and XML. Flex offers an authoring environment and uses MXML, which is similar to XHTML, to define the structure, behavior, and presentation of applications. The document demonstrates how to download, install, and use Flex to build basic applications through writing MXML code, compiling it, and executing the resulting SWF file. It concludes by providing some useful links for learning more about Flex.

1. A Look at Flex and PHP
Central Florida PHP
1

2. A Look at Flex and PHP
• Background Information
• Flex: “Flash for Developers”
• MXML
• Building an Application
2

3. Background Information
3

4. 1985
Bill Atkinson builds HyperCard
4

5. 1991
Tim Berners-Lee Proposes HTML
5

6. 1993
Mosaic surfaces. Changes the world.
6

7. 1994
HTML 2, Netscape, W3
7

8. 1995
HTML 3, Tables, IE, Frames, Standards
8

9. 1996
Scripting Introduced
9

10. 1997
XML Introduced
10

11. Today
Flash + XML = Flex
11

12. Flex: “Flash for Developers”
12

13. Authoring
Environment
13

14. $$
14

15. Closed
Source
15

16. MXML
16

17. MXML vs. XHTML
• MXML is to Flex as XHTML is to WWW
• XHTML is interpreted
• MXML is Compiled (into SWF)
17

18. MXML vs. XHTML
• In MXML and XHTML you can
• Define structure of data and layout
• Define behavior or logic
• Define presentation of information
18

19. MXML is XML
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="#FFFFFF">
<mx:WebService id="srv"
wsdl="http://coenraets.org/services/ProductWS?wsdl"
showBusyCursor="true"/>
<mx:DataGrid dataProvider="{srv.getProducts.lastResult}"
width="100%"
height="100%">
<mx:columns>
<mx:DataGridColumn dataField="productId" headerText="Product Id">
<mx:DataGridColumn dataField="name" headerText="Name"/>
<mx:DataGridColumn dataField="price" headerText="Price"/>
</mx:columns>
</mx:DataGrid>
<mx:Button label="Get Data" click="srv.getProducts()"/>
</mx:Application>
19

20. MXML Makes Rich UIs
20

21. MXML Makes Rich UIs
21

22. MXML Makes Rich UIs
22

23. Building an Application
23

24. Step-by-Step
1. Download Flex
2. Install the Framework
3. Write the Code
4. Compile
5. Execute
24

25. Downloading Flex
• http://www.flex.org/download/
• You need the “free Flex SDK”
• FlexBuilder is cool too
25

26. Installing Flex
• Unpack the SDK to a permanent location
• Install the Debug Player
• Add the compiler to your PATH
• Windows: bin/mxmlc.exe
• Mac: bin/mxmlc
26

27. Write the Code
Binding.mxml
<?xml version="1.0" ?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="center" verticalAlign="center"
>
<mx:Panel title="{textInput.text}">
<mx:TextInput id="textInput" width="250" text="Data Binding"/>
</mx:Panel>
</mx:Application>
27

28. Compile
• mxmlc path/to/Binding.mxml
28

29. Execute
29

30. Useful Links
• Flex.org
• http://flex.org/
• Flex Documentation
• http://www.adobe.com/support/documentation/
en/flex/
30

31. Useful Links
• Flex Quickstart Tutorials
• http://www.adobe.com/devnet/flex/?
tab:quickstart=1
• Try Flex Online
• http://try.flex.org/
• Flex Labs
• http://labs.adobe.com/technologies/flex/
31

32. Useful Links
• Adobe Developers of Greater Orlando
• http://adogo.us/
• RIAPedia
• http://www.riapedia.com/
• Flex Team Blog
• http://weblogs.macromedia.com/flexteam/
32