1. Flex, Adobe AIR,
and PHP:
the beginning of a
Replace with
beautiful friendship a graphic
White Master
5.5” Tall & 4.3” Wide
Mihai Corlan
Platform Evangelist, Adobe
PHP GeekMeet 2009, Cluj
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 1

2. About me
• Platform Evangelist, member of the Adobe’s European team
• Used to be a Flex Builder engineer (Java Desktop SWT, Eclipse
Platform)
• Used to be a web developer (PHP, ColdFusion, DHTML, JS, MySQL,
Sybase…)
• ~9 years experience with web related technologies
• I write articles, I do presentations, and I code
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 2

3. Today’s Agenda
• What is RIA and why RIA is a good thing
• What is Flex
• What is Adobe AIR
• Why AIR applications?
• Flex/AIR and PHP
• Q&A
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 3

4. What matters?
Experience Matters!
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 4

5. What matters?
USER
Experience Matters!
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 5

6. A shoe story…
More than 2.000 years experience in
producing shoes.
We can produce them really cheap.
20 Euro a pair, maybe?
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 6

7. A shoe story…
More than 2.000 years experience in
producing shoes.
We can produce them really cheap.
20 Euro a pair, maybe?
Wrong! Because of better user experience,
people women are willing to pay 100+ euro!
Better design, limited edition = better user
experience = greater value
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 7

8. What is RIA?
Global
2004
RICH INTERNET
WEB APPLICATIONS APPLICATIONS
REACH
1998
1992
Local
MAINFRAME CLIENT/SERVER
Text UI RICH Integrated media GUI
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 8

9. Demos time!
Let’s see what it can be done with the Flash Platform!
Flash Player
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 9

10. What is Flex?
 Flex is just another way to create a Flash application
Flash Player
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 10

11. What is Flex?
Flex SDK  Flex SDK
MXML ActionScript
 2 languages
Flex Class Library
 MXML
Debuggers
 ActionScript 3
 Compilers
 Rich Component Library
 Debuggers
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 11

12. What is Flex?
Flex SDK  Flex SDK
MXML ActionScript
 2 languages
Flex Class Library
 MXML
Debuggers
 ActionScript 3
Flex Builder IDE
 Compilers
 Rich Component Library
 Debuggers
 Flex Builder IDE
 Eclipse Plug-in or turn-key install
 Accelerates Design and
Development
 Design view and code view
Flash Player
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 12

13. What is Flex?
Flex SDK  Flex SDK
MXML ActionScript
 2 languages
Flex Class Library
 MXML
Debuggers
 ActionScript 3
Flex Builder IDE
 Compilers
Compile  Rich Component Library
 Debuggers
 Flex Builder IDE
 Eclipse Plug-in or turn-key install
 Accelerates Design and
Browser Development
 Design view and code view
Flash Player
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 13

14. What is AIR?
Adobe® AIR™ lets developers use their
existing web development skills in HTML,
AJAX, Flash and Flex to build and deploy rich
Internet applications to the desktop
on Windows, Mac or Linux.
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 14

15. Adobe AIR Application Stack
HTML Flash
Cross-OS
HTML Flex Application
JavaScript Flash ActionScript HTML Integrated
XML XML Rendering
CSS Audio
Integrated DOMs
PDF Video PDF
& Scripting
File System Network Application Drag and Local
Access Detection
Notifications
Update Drop Database
... Adobe AIR APIs
Mac, Windows, Linux & Device OS
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 15

16. RIAs can be limited by the browser
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 16

17. #1 – No offline access
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 17

18. #2 – Constrained within the browser chrome
Browser chrome &
application chrome
con ict
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 18

19. #3 – Common desktop interactions not possible
Drag & drop
not possible
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 19

20. #4 – Local system access limited
File interaction
restricted by browser
sandbox
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 20

21. #5 – Updates only delivered when browser is open
Alerts only visible
when browser open
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 21

22. Why RIAs on the desktop
Persistent connection Branded experiences
Desktop functionality Data access Efficient development
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 22

23. AIR capabilities
• Native window types (normal, utility, lightweight)
• Support for multiple monitors
• Native Menu support (App, window, dock, system tray, context)
• Full access to the local le system (read/create/delete)
• Encrypted Local Storage
• Local SQLite databases, including encrypted
• Drag and Drop
• Clipboard (read/write)
• Network activity monitor
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 23

24. Communication between Flex and PHP server
“I think this is the beginning of a beautiful friendship!”
Flex & AIR on the client, PHP on the server.
REST Services
Web browser
FLEX Apps
Web Services Server
PHP
Desktop
AIR Apps Remoting
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 24

25. Are there any Flex/AIR apps with PHP out there?
AIR & Flex apps with PHP backend:
http://corlan.org/ exair-and-php-apps/
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 25

26. What tools to use?
For Flex and PHP and Eclipse based solution:
• Flex Builder + PDT
• Flex Builder + Zend Studio
Advantages:
• You can create combined Flex and PHP or AIR and PHP projects
• That helps you with deploying, and debugging
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 26

27. Debugging
Debugging Flex applications:
1. Use a log function on the server, and save the var_dump of the PHP
variables in a at le
2. Use Charles proxy sniffer, you can inspect the traffic between client
and server
3. Use Flex Builder and Zend Studio debuggers
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 27

28. How does remoting work?
Flex/AIR Client AMF3 PHP Server
MyClass {
getData() { … }
saveData($myVO) {…}
}
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 28

29. How does remoting work?
Flex/AIR Client AMF3 PHP Server
RemoteObject Client calls MyClass {
MyClass->getData()
getData(); getData() { … }
saveData(myVO); saveData($myVO) {…}
}
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 29

30. How does remoting work?
Flex/AIR Client AMF3 PHP Server
RemoteObject Client calls MyClass {
MyClass->getData()
getData(); getData() { … }
saveData(myVO); saveData($myVO) {…}
}
MyVO { MyVO {
public var id:int; Automatic conversion public $id;
public var name:String; between PHP and public $name;
ActionScript class
} }
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 30

31. How does remoting work?
Flex/AIR Client AMF3 PHP Server
RemoteObject Client calls MyClass {
MyClass->getData()
getData(); getData() { … }
saveData(myVO); Server sends an array saveData($myVO) {…}
of MyVO objects
Client calls }
RemoteObject.saveData(myVO)
MyClass->saveData($myVO)
MyVO { MyVO {
public var id:int; Automatic conversion public $id;
public var name:String; between PHP and public $name;
ActionScript class
} }
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 31

32. REST vs. AMF?
http://www.jamesward.com/census/
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 32

33. PHP and AMF
There are four libraries for doing remoting with PHP classes:
1. Zend AMF – part of the Zend Framework
2. AMFPHP
3. WebORB for PHP (remoting and data messaging – publisher/
subscriber)
4. SabreAMF
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 33

34. Thank you!
Download Flex Builder: http://www.adobe.com/go/flex_trial
AIR: http://www.adobe.com/go/air
AIR Adobe Developer Center: http://www.adobe.com/devnet/air/
Download Tour de Flex: http://flex.org/tour
Learn Flex in one week: http://www.adobe.com/devnet/flex/videotraining/
Mihai Corlan
Blog: http://corlan.org
E-mail: mihai.corlan@adobe.com
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. 34