Your SlideShare is downloading. ×
Building Desktop RIAs with PHP, HTML & Javascript in AIR
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Building Desktop RIAs with PHP, HTML & Javascript in AIR

2,420
views

Published on

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,420
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
49
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Building Desktop RIAs with PHP, HTML & Javascript in AIR Ed Finkler, php|tek 2008, May 22 2008 funkatron.com / funkatron@gmail.com
  • 2. What is AIR? For the desktop Not a browser plugin Build desktop apps with web technologies
  • 3. AIR architecture A flash player + special AIR-specific APIs HTMLLoader control Uses WebKit – like Safari 3 Flash Zee Cloud OS web server Win/Mac/Linux Webkit (HTMLLoader)
  • 4. Building apps Flex (XML + Actionscript → SWF) Flash (the authoring tool → SWF) HTML (HTML + JS + CSS) open standards! just like regular web pages
  • 5. The bare essentials Application descriptor (.xml) Initial content (.swf or .html) If .html detected, auto-creates Flash wrapper with HTMLLoader control
  • 6. App descriptor <?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?> <application xmlns=quot;http://ns.adobe.com/air/application/1.0quot;> <id>book.csv</id> <filename>Book-CSV</filename> <version>1.0.0</version> <initialWindow> <content>example-csv.html</content> <visible>true</visible> <width>400</width> <height>600</height> <x>100</x> <y>100</y> </initialWindow> </application>
  • 7. Initial content <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;enquot; lang=quot;enquot;> <head> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot;/> <title>csv-example</title> <script src=quot;assets/AIRAliases.jsquot; type=quot;text/javascriptquot; charset=quot;utf-8quot;></script> <script src=quot;assets/AIRIntrospector.jsquot; type=quot;text/javascriptquot; charset=quot;utf-8quot;></script> <script src=quot;assets/jquery-1.2.3.jsquot; type=quot;text/javascriptquot; charset=quot;utf-8quot;></script> <script src=quot;assets/json2.jsquot; type=quot;text/javascriptquot; charset=quot;utf-8quot;></script> <script src=quot;assets/dojo/dojo/dojo.jsquot; type=quot;text/javascriptquot; charset=quot;utf-8quot;></script> <script type=quot;text/javascriptquot; charset=quot;utf-8quot;> $().ready( function() { var csvstring = ''; csvstring += '1997,Ford,E350,quot;ac, abs, moonquot;,3000.00n'; csvstring += '1999,Chevy,quot;Venture quot;quot;Extended Editionquot;quot;quot;,,4900.00n'; csvstring += '1996,Jeep,Grand Cherokee,quot;MUST SELL! air, moon roof, loadedquot;,4799.00n'; $('#name').text(csvstring); }); </script> </head> <body> <textarea name=quot;Namequot; rows=quot;8quot; cols=quot;80quot; id=quot;namequot;></textarea> </body> </html>
  • 8. JavaScript in AIR Can use (almost) any available JS libs/frameworks No cross-domain restrictions security restrictions in app sandbox ( eval() ) Access AIR APIs Access standard Flash APIs Use compiled AS3 libs
  • 9. PHP vs JavaScript JavaScript is fundamentally different JS is a functional language functions are objects anon functions define functions inside functions Object model is totally different Prototype model – not “classic” Java/PHP5 model
  • 10. PHP vs JavaScript Everything in JS is an object Arrays are not associative – objects serve as associative array equivalents No include/require statements available Event-driven model/asynchronous actions Further reading: – JavaScript: The Definitive Guide, David Flanagan – JavaScript: The Good Parts, Douglas Crockford
  • 11. JavaScript frameworks Some stuff is a huge pain without the help of a framework Lots of choices Must play well with AIR eval usage
  • 12. jQuery pwnz yoo jQuery is teh awesome lightweight, powerful, terse (esp DOM) plays well with others easily extensible large dev community decent docs but you really can use almost anything…
  • 13. PHP is your server-side buddy PHP tubby jedi master AIR hyper frontman Use 5.2 at least adds native JSON encoding/decoding Framework choices
  • 14. Example 1: PHP duz yer math Async calls using jQuery AJAX methods Communicate via JSON Flash Zee Cloud web server Webkit
  • 15. Example 2: PHP shops yer pics Uploading via Flash APIs JSON based communication Flash Zee Cloud web server Webkit
  • 16. Additional resources Developing Adobe® AIR™ Applications with HTML and Ajax – http://livedocs.adobe.com/air/1/devappshtml/ Adobe AIR Developer Center for HTML and Ajax Quick Starts – http://www.adobe.com/devnet/air/ajax/ quickstart/ Spaz source code – http://code.google.com/p/spaz/
  • 17. Questions?

×