0
Rich Desktop Applications
  PHP Québec 2008 – Montréal, Canada



          Raphaël Rougeron
     http://www.raphael-rouge...
e-tef, la version électronique du
      Test d'Evaluation de Français
    Test des compétences en compréhension et
●


   ...
Architecture e-tef

                             Serveur
                            d'examens



Client Flash + Zinc     ...
Dans quels cas utiliser une solution
            type RDA ?
    Gestion de médias lourds (audio/vidéo)
●



    Besoin d'u...
Rich Desktop Applications :
            (tentative de) définition
    Applications client / serveur
●


        fortement ...
RIA                   RDA


Librairies AJAX   Google Gears


XUL + CSS + JS       Prism          XulRunner


  Flash/Flex ...
Les plateformes les plus accessibles aux talents
    des développeurs web (et les plus cross-
      platform) : Adobe AIR ...
Adobe AIR
    Windows / Mac OS X (bientôt Linux)
●



    Flash + Actionscript ou Flex + Actionscript ou HTML + CSS +
●


...
Pourquoi AIR peut séduire les
          développeurs Ajax...
    Mêmes compétences requises
●



    Frameworks JS directe...
Hello world – part 1
application.xml
<?xml version=quot;1.0quot; encoding=quot;utf-8quot; standalone=quot;noquot;?>
<appli...
Hello world – part 2

demo.html
<html>
    <head>
        <script type=quot;text/javascriptquot;
src=quot;AIRAliases.jsquo...
Réutilisation de
   code ?
  mmmm...
Adobe AIR : API Javascript
     Windows et Chrome                       SQLLite
●                                        ●...
Adobe AIR
Adobe AIR
Adobe AIR
Adobe AIR
Adobe AIR
Adobe AIR
XulRunner
    Plateforme de développement d'applis XUL
●



    Version stable : 1.8.4 (-> Firefox 1.5)
●



    Windows, ...
XUL
    XML-based User interface Language
●



    Ensemble de balises correspondant à des éléments
●


    d'interface gr...
Hello world – part 1
application.ini


[App]
Vendor=R2
Name=demo
Version=0.1
BuildID=20070330
Copyright=Nonsense
ID=xxx

[...
Hello World : part 2
/chrome/content/start.xul

<?xml version=quot;1.0quot;?>
<?xml-stylesheet href=quot;chrome://global/s...
XulRunner : quoi d'autre ?
    Localisation facile
●



    XBL : définition de composants d'interface
●


    réutilisabl...
XulRunner


var nsIFilePicker = Components.interfaces.nsIFilePicker;
var fp = Components.classes[quot;@mozilla.org/filepic...
XulRunner
XulRunner
XulRunner
XulRunner
XulRunner
RDA : recommandations

    Indicateurs d'activité ! (loading...)
●



    Raccourcis-clavier, surtout les basiques (tab,
●...
AIR vs. XULRunner
Relations client - serveur
Support des Web Services

          AIR::Flex       AIR::Ajax   XulRunner
XML-RPC   + (non-natif)   -           +
SOAP    ...
REST en résumé
    Utilisation du plein potentiel de HTTP
●



    Ressources et URIs
●



    GET, POST, PUT, DELETE, HEA...
Penser ressources plutôt qu'actions
    GET      /posts
    POST     /posts/add
    GET      /post/get/123
    POST     /p...
REST et PHP
    Difficile de trouver des outils RESTful en PHP !
●



    ZF : Zend_Rest_Server n'est pas RESTful...
●



...
The Rails way : contrôleurs RESTful
$router = new My_Controller_Router_Rewrite();
$router->addResource('bookmarks', new
My...
class BookmarksController extends My_Controller_Action
{
    // GET /users/raf/bookmarks
    public function indexAction()...
Mais attention :
class BookmarksController extends My_Controller_Action
{
    // GET /user/raf/bookmarks/xxx
    public fu...
Mais attention :
class BookmarksController extends My_Controller_Action
{
    // GET /user/raf/bookmarks/xxx
    public fu...
Responsabilités des contrôleurs
    Création d'objets associés (multiples INSERTs) ?
●



    Validation des paramètres ?
...
Couche Services Ressources
class Bookmarks extends SResource
{
    public function get() {...}

        public function po...
RADAR (Dave Thomas)
Rest Application, Dumb-Ass Recipient

                  Serveur
                   REST




          ...
Ressources




                      Controller


                                        View




                  Dispa...
Des questions ?
Use the Force of Javascript, Luke
Rich Desktop Applications
Upcoming SlideShare
Loading in...5
×

Rich Desktop Applications

1,988

Published on

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

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

No notes for slide

Transcript of "Rich Desktop Applications"

  1. 1. Rich Desktop Applications PHP Québec 2008 – Montréal, Canada Raphaël Rougeron http://www.raphael-rougeron.com goldoraf@gmail.com
  2. 2. e-tef, la version électronique du Test d'Evaluation de Français Test des compétences en compréhension et ● expression en français général Exigé dans certains cas par Citoyenneté et ● Immigration Canada (CIC) Lancement de la version électronique en mars ● 2005 De nombreux challenges dans sa mise au ● point !
  3. 3. Architecture e-tef Serveur d'examens Client Flash + Zinc SI TEF Site web e-tef
  4. 4. Dans quels cas utiliser une solution type RDA ? Gestion de médias lourds (audio/vidéo) ● Besoin d'une capacité de déconnexion et/ou ● d'accéder au système de fichiers local Besoin d'une UI plus riche (ex : traitements ● graphiques, cartographie, etc...) Plus d'efficacité pour l'utilisateur : ● moins de distractions – interface plus productive – moins de temps d'attente ? –
  5. 5. Rich Desktop Applications : (tentative de) définition Applications client / serveur ● fortement connectées (web services) – mais tirant partie des ressources locales – Cross-platform (+ ou -) ● Déployables par HTTP ● installation initiale d'un CLR – déploiement et mises à jour faciles –
  6. 6. RIA RDA Librairies AJAX Google Gears XUL + CSS + JS Prism XulRunner Flash/Flex Adobe AIR Silverlight .NET (WPF) Applets Java Java Web Start
  7. 7. Les plateformes les plus accessibles aux talents des développeurs web (et les plus cross- platform) : Adobe AIR et XulRunner
  8. 8. Adobe AIR Windows / Mac OS X (bientôt Linux) ● Flash + Actionscript ou Flex + Actionscript ou HTML + CSS + ● Javascript Moteur WebKit ● Support audio / vidéo / PDF ● IDE : Aptana, Flex Builder ● Runtime commun à toutes les applications ● Installation et mise à jour des applications ● Signature d'applications ● Propriétaire... ●
  9. 9. Pourquoi AIR peut séduire les développeurs Ajax... Mêmes compétences requises ● Frameworks JS directement exploitables ● (jQuery, extjs, dojo, ...) Réutilisation du code ● Prototypage rapide ● Intégration OS via une API JS ●
  10. 10. Hello world – part 1 application.xml <?xml version=quot;1.0quot; encoding=quot;utf-8quot; standalone=quot;noquot;?> <application xmlns=quot;http://ns.adobe.com/air/application/1.0.M5quot; appId=quot;demoquot; version=quot;1.0quot;> <name>Démo</name> <title/> <description/> <copyright/> <initialWindow> <title/> <content>demo.html</content> <systemChrome>standard</systemChrome> <transparent>false</transparent> <visible>true</visible> </initialWindow> </application>
  11. 11. Hello world – part 2 demo.html <html> <head> <script type=quot;text/javascriptquot; src=quot;AIRAliases.jsquot;></script> </head> <body> <h1>Hello world</h1> </body> </html>
  12. 12. Réutilisation de code ? mmmm...
  13. 13. Adobe AIR : API Javascript Windows et Chrome SQLLite ● ● Système de fichiers Monitoring de ● ● connexion Drag n' Drop ● Requêtes HTTP ● Copier/coller ● (classe URLRequest) var file = new air.File(); file.addEventListener(air.Event.SELECT, dirSelected); file.browseForDirectory(); function dirSelected(event) { alert(file.nativePath); }
  14. 14. Adobe AIR
  15. 15. Adobe AIR
  16. 16. Adobe AIR
  17. 17. Adobe AIR
  18. 18. Adobe AIR
  19. 19. Adobe AIR
  20. 20. XulRunner Plateforme de développement d'applis XUL ● Version stable : 1.8.4 (-> Firefox 1.5) ● Windows, Mac, Linux ● Moteur Gecko ● XUL + CSS + Javascript ● IDE : XulBooster (plugin Eclipse) ● Open Source ●
  21. 21. XUL XML-based User interface Language ● Ensemble de balises correspondant à des éléments ● d'interface graphique : Contrôles de formulaires ● Grilles, arbres ● Barres de menus ● Barres d'outils ● Démo : XUL périodic table ● http://www.hevanet.com/acorbin/xul/top.xul
  22. 22. Hello world – part 1 application.ini [App] Vendor=R2 Name=demo Version=0.1 BuildID=20070330 Copyright=Nonsense ID=xxx [Gecko] MinVersion=1.8.1 MaxVersion=1.9
  23. 23. Hello World : part 2 /chrome/content/start.xul <?xml version=quot;1.0quot;?> <?xml-stylesheet href=quot;chrome://global/skin/quot; type=quot;text/cssquot;?> <?xml-stylesheet href=quot;chrome://project/skin/main.cssquot; type=quot;text/cssquot; title=quot;Skinquot;?> <!DOCTYPE window SYSTEM quot;chrome://project/locale/start.dtdquot;> <window title=quot;&window.title;quot; xmlns:html=quot;http://www.w3.org/1999/xhtmlquot; xmlns=quot;http://www.mozilla.org/keymaster/gatekeeper/there.is.only.x ulquot; style=quot;width:900px;height:700px;margin:0px;padding:0px;quot; onload=quot;Application.init();quot;> <h1>Hello World !</h1> </window>
  24. 24. XulRunner : quoi d'autre ? Localisation facile ● XBL : définition de composants d'interface ● réutilisables XPCOM : création de composants métiers ● réutilisables en JS, C, C++, Python API JS : ● Manipulation d'images – Système de fichiers – Drag n' Drop, clipboard – SQLLite dans la version 1.9 –
  25. 25. XulRunner var nsIFilePicker = Components.interfaces.nsIFilePicker; var fp = Components.classes[quot;@mozilla.org/filepicker;1quot;] .createInstance(nsIFilePicker); fp.init(window, __(quot;chooseDir.filepicker.titlequot;), nsIFilePicker.modeGetFolder); if (fp.show() == nsIFilePicker.returnOK) { this.prefs.setComplexValue(quot;project.userDirquot;, Components.interfaces.nsILocalFile, fp.file); this.userDir = fp.file; this.start(); }
  26. 26. XulRunner
  27. 27. XulRunner
  28. 28. XulRunner
  29. 29. XulRunner
  30. 30. XulRunner
  31. 31. RDA : recommandations Indicateurs d'activité ! (loading...) ● Raccourcis-clavier, surtout les basiques (tab, ● enter, ...) Implémenter le copier/coller ● (et le drag n' drop) Survol des boutons ● Adopter le look & feel des applis desktop ●
  32. 32. AIR vs. XULRunner
  33. 33. Relations client - serveur
  34. 34. Support des Web Services AIR::Flex AIR::Ajax XulRunner XML-RPC + (non-natif) - + SOAP ++ - ++ REST +++ +++ +++
  35. 35. REST en résumé Utilisation du plein potentiel de HTTP ● Ressources et URIs ● GET, POST, PUT, DELETE, HEAD, OPTIONS ● Codes d'état : 200 OK, 201 Created, 400 Bad ● Request, etc... Représentations des ressources : XML, JSON, ● Atom, RSS, ical, CSV...
  36. 36. Penser ressources plutôt qu'actions GET /posts POST /posts/add GET /post/get/123 POST /posts/update/123 POST /posts/delete/123 vs GET /posts POST /posts GET /posts/123 PUT /posts/123 DELETE /posts/123
  37. 37. REST et PHP Difficile de trouver des outils RESTful en PHP ! ● ZF : Zend_Rest_Server n'est pas RESTful... ● Symfony, CakePHP, CodeIgniter : pas de réel ● support, même si cela reste possible de l'implémenter soi-même 2 frameworks RESTful : Konstruct et Tonic, ● mais encore bien jeunes... Faut tout faire soi-même ;) ● http://www.stato-framework.org
  38. 38. The Rails way : contrôleurs RESTful $router = new My_Controller_Router_Rewrite(); $router->addResource('bookmarks', new My_Controller_Router_Resource( '/users/:username/bookmarks', array('controller' => 'bookmarks',) )); return $router; http://monservice.com/users/raf/bookmarks/xxx.js -> retourne JSON http://monservice.com/users/raf/bookmarks/xxx.xml -> retourne XML http://monservice.com/users/raf/bookmarks/xxx -> retourne HTML
  39. 39. class BookmarksController extends My_Controller_Action { // GET /users/raf/bookmarks public function indexAction() {...} // GET /users/raf/bookmarks/add public function addAction() {...} // GET /users/raf/bookmarks/edit public function editAction() {...} // POST /users/raf/bookmarks public function doPostAction() {...} // GET /user/raf/bookmarks/xxx public function doGetAction() {...} // PUT /user/raf/bookmarks/xxx public function doPutAction() {...} // DELETE /user/raf/bookmarks/xxx public function doDeleteAction() {...} } ?>
  40. 40. Mais attention : class BookmarksController extends My_Controller_Action { // GET /user/raf/bookmarks/xxx public function getAction() { $this->view->bookmark = Bookmarks::find($this->__getParam('id')); switch ($this->getRequest()->getFormat()) { case 'xml': $this->renderXml( $this->view->bookmark->toXml() ); break; case 'atom': ... break; } } }
  41. 41. Mais attention : class BookmarksController extends My_Controller_Action { // GET /user/raf/bookmarks/xxx public function getAction() { $this->view->bookmark = Bookmarks::find($this->__getParam('id')); switch ($this->getRequest()->getFormat()) { case 'xml': $this->renderXml( $this->view->bookmark->toXml() ); break; case 'atom': Les contrôleurs peuvent ... break; devenir lourds !!! } } }
  42. 42. Responsabilités des contrôleurs Création d'objets associés (multiples INSERTs) ? ● Validation des paramètres ? ● Transactions ? ● Envoi de mail, notifications ? ● Est-ce vraiment le rôle des contrôleurs ?
  43. 43. Couche Services Ressources class Bookmarks extends SResource { public function get() {...} public function post() {...} public function put() {...} public function delete() {...} } Possibilité d'offrir des points d'entrée SOAP, XML-RPC et REST ● <methodName>bookmarks.put</methodName> Utilisation de l'API de Réflexion : ● ● Typage et validation des paramètres (type hinting) ● Génération automatique des fichiers WSDL et WADL
  44. 44. RADAR (Dave Thomas) Rest Application, Dumb-Ass Recipient Serveur REST Serveur de pages Client Riche Browser
  45. 45. Ressources Controller View Dispatcher Client riche Navigateur
  46. 46. Des questions ?
  47. 47. Use the Force of Javascript, Luke
  1. A particular slide catching your eye?

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

×