Your SlideShare is downloading. ×
0
Building Desktop RIAs with
PHP, HTML & Javascript
in AIR
Ed Finkler, php|tek 2008, May 22 2008
funkatron.com / funkatron@g...
What is AIR?

For the desktop
Not a browser plugin
Build desktop apps with web technologies
AIR architecture
   A flash player + special AIR-specific APIs
      HTMLLoader control
         Uses WebKit – like Safari 3...
Building apps

Flex (XML + Actionscript → SWF)
Flash (the authoring tool → SWF)
HTML (HTML + JS + CSS)
  open standards!
 ...
The bare essentials

 Application descriptor (.xml)
 Initial content (.swf or .html)
   If .html detected, auto-creates Fl...
App descriptor
 <?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?>
 <application xmlns=quot;http://ns.adobe.com/air/ap...
Initial content
<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot;
  quot;http://www.w3.org/TR/xhtml1/...
JavaScript in AIR
 Can use (almost) any available JS libs/frameworks
   No cross-domain restrictions
   security restricti...
PHP vs JavaScript
JavaScript is fundamentally different
JS is a functional language
  functions are objects
  anon functio...
PHP vs JavaScript
Everything in JS is an object
Arrays are not associative – objects serve as
associative array equivalent...
JavaScript frameworks

Some stuff is a huge pain without the help of a
framework
Lots of choices
Must play well with AIR
 ...
jQuery pwnz yoo

jQuery is teh awesome
lightweight, powerful, terse (esp DOM)
plays well with others
easily extensible
lar...
PHP is your server-side buddy

        PHP
    tubby jedi master




                  AIR
              hyper frontman


...
Example 1:
PHP duz yer math
Async calls using jQuery AJAX methods
Communicate via JSON



            Flash
              ...
Example 2:
PHP shops yer pics
Uploading via Flash APIs
JSON based communication



             Flash
                    ...
Additional resources

 Developing Adobe® AIR™ Applications with HTML and
 Ajax – http://livedocs.adobe.com/air/1/devappsht...
Questions?
Upcoming SlideShare
Loading in...5
×

Building Desktop RIAs with PHP, HTML & Javascript in AIR

2,440

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide

Transcript of "Building Desktop RIAs with PHP, HTML & Javascript in AIR"

  1. 1. Building Desktop RIAs with PHP, HTML & Javascript in AIR Ed Finkler, php|tek 2008, May 22 2008 funkatron.com / funkatron@gmail.com
  2. 2. What is AIR? For the desktop Not a browser plugin Build desktop apps with web technologies
  3. 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. 4. Building apps Flex (XML + Actionscript → SWF) Flash (the authoring tool → SWF) HTML (HTML + JS + CSS) open standards! just like regular web pages
  5. 5. The bare essentials Application descriptor (.xml) Initial content (.swf or .html) If .html detected, auto-creates Flash wrapper with HTMLLoader control
  6. 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. 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. 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. 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. 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. 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. 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. 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. 14. Example 1: PHP duz yer math Async calls using jQuery AJAX methods Communicate via JSON Flash Zee Cloud web server Webkit
  15. 15. Example 2: PHP shops yer pics Uploading via Flash APIs JSON based communication Flash Zee Cloud web server Webkit
  16. 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. 17. Questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×