Building Desktop RIAs with PHP, HTML & Javascript in AIR · 2008. 9. 18. · security restrictions...
Transcript of Building Desktop RIAs with PHP, HTML & Javascript in AIR · 2008. 9. 18. · security restrictions...
![Page 1: Building Desktop RIAs with PHP, HTML & Javascript in AIR · 2008. 9. 18. · security restrictions in app sandbox ( eval() ) Access AIR APIs Access standard Flash APIs Use compiled](https://reader035.fdocuments.in/reader035/viewer/2022071603/613eab7d69193359046d4212/html5/thumbnails/1.jpg)
Building Desktop RIAs with PHP, HTML & Javascriptin AIREd Finkler, ZendCon08, September 17, 2008
funkatron.com / [email protected]
![Page 2: Building Desktop RIAs with PHP, HTML & Javascript in AIR · 2008. 9. 18. · security restrictions in app sandbox ( eval() ) Access AIR APIs Access standard Flash APIs Use compiled](https://reader035.fdocuments.in/reader035/viewer/2022071603/613eab7d69193359046d4212/html5/thumbnails/2.jpg)
What is AIR?
For the desktop
Not a browser plugin
Build desktop apps with web technologies
![Page 3: Building Desktop RIAs with PHP, HTML & Javascript in AIR · 2008. 9. 18. · security restrictions in app sandbox ( eval() ) Access AIR APIs Access standard Flash APIs Use compiled](https://reader035.fdocuments.in/reader035/viewer/2022071603/613eab7d69193359046d4212/html5/thumbnails/3.jpg)
Zee Cloudweb server
AIR architectureA flash player + special AIR-specific APIs
HTMLLoader control
Uses WebKit – like Safari 3
Webkit(HTMLLoader)
Flash
OSWin/Mac/Linux
![Page 4: Building Desktop RIAs with PHP, HTML & Javascript in AIR · 2008. 9. 18. · security restrictions in app sandbox ( eval() ) Access AIR APIs Access standard Flash APIs Use compiled](https://reader035.fdocuments.in/reader035/viewer/2022071603/613eab7d69193359046d4212/html5/thumbnails/4.jpg)
Building apps
Flex (XML + Actionscript → SWF)
Flash (the authoring tool → SWF)
HTML (HTML + JS + CSS)
open standards!
just like regular web pages
![Page 5: Building Desktop RIAs with PHP, HTML & Javascript in AIR · 2008. 9. 18. · security restrictions in app sandbox ( eval() ) Access AIR APIs Access standard Flash APIs Use compiled](https://reader035.fdocuments.in/reader035/viewer/2022071603/613eab7d69193359046d4212/html5/thumbnails/5.jpg)
The bare essentials
Application descriptor (.xml)
Initial content (.swf or .html)
If .html detected, auto-creates Flash wrapper with HTMLLoader control
![Page 6: Building Desktop RIAs with PHP, HTML & Javascript in AIR · 2008. 9. 18. · security restrictions in app sandbox ( eval() ) Access AIR APIs Access standard Flash APIs Use compiled](https://reader035.fdocuments.in/reader035/viewer/2022071603/613eab7d69193359046d4212/html5/thumbnails/6.jpg)
App descriptor<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.0">
<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>
![Page 7: Building Desktop RIAs with PHP, HTML & Javascript in AIR · 2008. 9. 18. · security restrictions in app sandbox ( eval() ) Access AIR APIs Access standard Flash APIs Use compiled](https://reader035.fdocuments.in/reader035/viewer/2022071603/613eab7d69193359046d4212/html5/thumbnails/7.jpg)
Initial content<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>csv-example</title> <script src="assets/AIRAliases.js" type="text/javascript" charset="utf-8"></script> <script src="assets/AIRIntrospector.js" type="text/javascript" charset="utf-8"></script> <script src="assets/jquery-1.2.3.js" type="text/javascript" charset="utf-8"></script> <script src="assets/json2.js" type="text/javascript" charset="utf-8"></script> <script src="assets/dojo/dojo/dojo.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $().ready( function() { var csvstring = ''; csvstring += '1997,Ford,E350,"ac, abs, moon",3000.00\n'; csvstring += '1999,Chevy,"Venture ""Extended Edition""",,4900.00\n'; csvstring += '1996,Jeep,Grand Cherokee,"MUST SELL! air, moon roof, loaded",4799.00\n'; $('#name').text(csvstring); }); </script></head><body> <textarea name="Name" rows="8" cols="80" id="name"></textarea></body></html>
![Page 8: Building Desktop RIAs with PHP, HTML & Javascript in AIR · 2008. 9. 18. · security restrictions in app sandbox ( eval() ) Access AIR APIs Access standard Flash APIs Use compiled](https://reader035.fdocuments.in/reader035/viewer/2022071603/613eab7d69193359046d4212/html5/thumbnails/8.jpg)
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
![Page 9: Building Desktop RIAs with PHP, HTML & Javascript in AIR · 2008. 9. 18. · security restrictions in app sandbox ( eval() ) Access AIR APIs Access standard Flash APIs Use compiled](https://reader035.fdocuments.in/reader035/viewer/2022071603/613eab7d69193359046d4212/html5/thumbnails/9.jpg)
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
![Page 10: Building Desktop RIAs with PHP, HTML & Javascript in AIR · 2008. 9. 18. · security restrictions in app sandbox ( eval() ) Access AIR APIs Access standard Flash APIs Use compiled](https://reader035.fdocuments.in/reader035/viewer/2022071603/613eab7d69193359046d4212/html5/thumbnails/10.jpg)
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
![Page 11: Building Desktop RIAs with PHP, HTML & Javascript in AIR · 2008. 9. 18. · security restrictions in app sandbox ( eval() ) Access AIR APIs Access standard Flash APIs Use compiled](https://reader035.fdocuments.in/reader035/viewer/2022071603/613eab7d69193359046d4212/html5/thumbnails/11.jpg)
JavaScript frameworks
Some stuff is a huge pain without the help of a framework
Lots of choices
Must play well with AIR
eval usage
![Page 12: Building Desktop RIAs with PHP, HTML & Javascript in AIR · 2008. 9. 18. · security restrictions in app sandbox ( eval() ) Access AIR APIs Access standard Flash APIs Use compiled](https://reader035.fdocuments.in/reader035/viewer/2022071603/613eab7d69193359046d4212/html5/thumbnails/12.jpg)
jQuery pwnz yoo
jQuery is teh awesomelightweight, powerful, terse (esp DOM)
plays well with others
easily extensible
large dev community
decent docs
but you really can use almost anything…
![Page 13: Building Desktop RIAs with PHP, HTML & Javascript in AIR · 2008. 9. 18. · security restrictions in app sandbox ( eval() ) Access AIR APIs Access standard Flash APIs Use compiled](https://reader035.fdocuments.in/reader035/viewer/2022071603/613eab7d69193359046d4212/html5/thumbnails/13.jpg)
PHPtubby jedi master
AIRhyper frontman
PHP is your server-side buddy
Use 5.2 at least
adds native JSON encoding/decoding
Framework choices
![Page 14: Building Desktop RIAs with PHP, HTML & Javascript in AIR · 2008. 9. 18. · security restrictions in app sandbox ( eval() ) Access AIR APIs Access standard Flash APIs Use compiled](https://reader035.fdocuments.in/reader035/viewer/2022071603/613eab7d69193359046d4212/html5/thumbnails/14.jpg)
Example 1:PHP duz yer math
Async calls using jQuery AJAX methods
Communicate via JSON
Zee Cloudweb server
Webkit
Flash
![Page 15: Building Desktop RIAs with PHP, HTML & Javascript in AIR · 2008. 9. 18. · security restrictions in app sandbox ( eval() ) Access AIR APIs Access standard Flash APIs Use compiled](https://reader035.fdocuments.in/reader035/viewer/2022071603/613eab7d69193359046d4212/html5/thumbnails/15.jpg)
Example 2:PHP 'shops yer pics
Uploading via Flash APIs
JSON based communication
Zee Cloudweb server
Webkit
Flash
![Page 16: Building Desktop RIAs with PHP, HTML & Javascript in AIR · 2008. 9. 18. · security restrictions in app sandbox ( eval() ) Access AIR APIs Access standard Flash APIs Use compiled](https://reader035.fdocuments.in/reader035/viewer/2022071603/613eab7d69193359046d4212/html5/thumbnails/16.jpg)
Example 3:Get kicked out of ZendCon
JSON based communication
Desktop alternative to web front-end
Zee Cloudweb server
Webkit
Flash
![Page 17: Building Desktop RIAs with PHP, HTML & Javascript in AIR · 2008. 9. 18. · security restrictions in app sandbox ( eval() ) Access AIR APIs Access standard Flash APIs Use compiled](https://reader035.fdocuments.in/reader035/viewer/2022071603/613eab7d69193359046d4212/html5/thumbnails/17.jpg)
Additional resources
Adobe AIR for JavaScript Developers Pocketguide – http://www.tostring.org/
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/
Javascript Untld – http://javascript.funkatron.com
Spaz source code – http://code.google.com/p/spaz/
![Page 18: Building Desktop RIAs with PHP, HTML & Javascript in AIR · 2008. 9. 18. · security restrictions in app sandbox ( eval() ) Access AIR APIs Access standard Flash APIs Use compiled](https://reader035.fdocuments.in/reader035/viewer/2022071603/613eab7d69193359046d4212/html5/thumbnails/18.jpg)
Questions?