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=quot;1.0quot; encoding=quot;utf-8quot;?>
<mx:Application xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot;
backgroundColor=quot;#FFFFFFquot;>
<mx:WebService id=quot;srvquot;
wsdl=quot;http://coenraets.org/services/ProductWS?wsdlquot;
showBusyCursor=quot;truequot;/>
<mx:DataGrid dataProvider=quot;{srv.getProducts.lastResult}quot;
width=quot;100%quot;
height=quot;100%quot;>
<mx:columns>
<mx:DataGridColumn dataField=quot;productIdquot; headerText=quot;Product Idquot;>
<mx:DataGridColumn dataField=quot;namequot; headerText=quot;Namequot;/>
<mx:DataGridColumn dataField=quot;pricequot; headerText=quot;Pricequot;/>
</mx:columns>
</mx:DataGrid>
<mx:Button label=quot;Get Dataquot; click=quot;srv.getProducts()quot;/>
</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=quot;1.0quot; ?>
<mx:Application
xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot;
horizontalAlign=quot;centerquot; verticalAlign=quot;centerquot;
>
<mx:Panel title=quot;{textInput.text}quot;>
<mx:TextInput id=quot;textInputquot; width=quot;250quot; text=quot;Data Bindingquot;/>
</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