Ce diaporama a bien été signalé.

HTML5 mobile avec Sencha Touch [FR]

1

Partager

1 sur 29
1 sur 29

HTML5 mobile avec Sencha Touch [FR]

1

Partager

Télécharger pour lire hors ligne

Sencha Touch est un framework JS permettant de développer des applications Mobile HTML5. Hérité de ExtJS, Sencha Touch est un outil déjà très mature, profitant d'une cinquantaine de composants, d'une architecture solide et d'un modèle MVC (contrairement à Jquery Mobile).
Sencha Touch permet également de packager l'application web pour Android ou iOS grâce à Sencha CMD ou Adobe PhoneGap

Sencha Touch est un framework JS permettant de développer des applications Mobile HTML5. Hérité de ExtJS, Sencha Touch est un outil déjà très mature, profitant d'une cinquantaine de composants, d'une architecture solide et d'un modèle MVC (contrairement à Jquery Mobile).
Sencha Touch permet également de packager l'application web pour Android ou iOS grâce à Sencha CMD ou Adobe PhoneGap

Plus De Contenu Connexe

HTML5 mobile avec Sencha Touch [FR]

  1. 1. HTML5 Mobile avec Sencha Touch Arnaud Lemercier @arnolem / @wixiweb blog.wixiweb.fr www.wixiweb.fr
  2. 2. < SOMMAIRE /> ● Présentation de Sencha / ExtJS ● Fonctionnalités ● Composants Sencha Touch ● Architecture MVC ● Application embarquée: Android / iOS ● Questions
  3. 3. < Présentation />
  4. 4. Sencha Complet : ExtJS / Touch / Architect / Charts Sencha ExtJS Sencha Touch Sencha Architect Sencha Touch Charts http://www.sencha.com/products/complete/
  5. 5. Documentation http://docs.sencha.com/touch/2-1/#!/api/Ext.dataview.List
  6. 6. Licences Sencha Touch Commercial Software License Open Source License  Gratuit  Gratuit  Nb utilisateur illimité  Utilisateur illimité  Interdit de redistribuer ou de  Partage du code source créer un générateur d'apps obligatoire sous GPL3 Commercial OEM License Commercial Software License  Payant for Embedded Devices  Possibilité d'intégrer Sencha  Gratuit dans la limite de Touch dans votre SDK ou < 5.000 apps natives / an générateur d'apps mobiles  Payant au dela Support communautaire ou payant :299$ / an / dev https://www.sencha.com/store/touch/ http://www.sencha.com/products/touch/license/
  7. 7. < Fonctionnalités />
  8. 8. Principale fonctionnalités Sencha Touch Layout / Composants Button, Tab, Forms, Carousel, List, Toolbars, Overlays, Icons Animations Slide, Cover, Fade, Reveal, ... Événements tactiles Tap, Drag, Swipe, Pinch/Rotate Données Array, JSON, YQL, XML, Ajax Médias Audio, Vidéo http://www.sencha.com/products/touch/features/
  9. 9. < Composants /> ●
  10. 10. Composants : Formulaires http://docs.sencha.com/touch/2-1/#!/guide/forms
  11. 11. Composants : Carousel http://docs.sencha.com/touch/2-1/#!/guide/carousel
  12. 12. Composants : Charts http://docs.sencha.com/touch/2-1/#!/guide/drawing_and_charting
  13. 13. Composants : Liste, liste imbriquée, listes groupées http://docs.sencha.com/touch/2-1/#!/api/Ext.dataview.List
  14. 14. Composants : Tabs, TabPanel http://docs.sencha.com/touch/2-1/#!/api/Ext.tab.Panel
  15. 15. Composants : Médias, Google Map, Vidéo, ...
  16. 16. Composants : Toolbars 
  17. 17. < Architecture />
  18. 18. Anatomie Sencha Touch Store = Conteneur de données Controller = Capte les actions utilisateur Profile = Personnalisation Multi-device View = Affichage des composants Model = Entité représentant un type de données http://docs.sencha.com/touch/2-1/#!/guide/apps_intro
  19. 19. http://docs.sencha.com/touch/2-1/#!/guide/command_app
  20. 20. Sencha CMD Créer un nouveau projet sencha -sdk /sencha-sdk/ generate app MyApp /project/myapp Créer un composant MVC : Ex « nouveau model User » sencha generate model User –fields=id:int,name,email Mettre à jour Sencha Touch sencha app upgrade /sencha-sdk-new/ Déployer Sencha : Testing, production, ... cd /path/to/www/myapp sencha app build production Créer une application Android & iOS sencha package build -p packager.json http://docs.sencha.com/touch/2-1/#!/guide/command_app
  21. 21. Sencha CMD Créer un nouveau projet sencha -sdk /sencha-sdk/ generate app MyApp /project/myapp Créer un composant MVC : Ex « nouveau model User » sencha generate model User –fields=id:int,name,email Mettre à jour Sencha Touch sencha app upgrade /sencha-sdk-new/ Déployer Sencha : Testing, production, ... cd /path/to/www/myapp sencha app build production Créer une application Android & iOS sencha package build -p packager.json http://docs.sencha.com/touch/2-1/#!/guide/command_app
  22. 22. Personnalisation du thème http://docs.sencha.com/touch/2-1/#!/guide/theming
  23. 23. Conception : Sencha Architect
  24. 24. Ext.application / Ext.Viewport
  25. 25. Ext.component
  26. 26. < Application embarquée />
  27. 27. API Native Connexion * Notification * Vibration Camera * Orientation * Geolocalisation Contact * Nécessite Adobe PhoneGap http://docs.sencha.com/touch/2-1/#!/guide/native_apis
  28. 28. Configuration Packaging Exemple Android Exemple iOS http://docs.sencha.com/touch/2-1/#!/guide/native_packaging
  29. 29. CONTACT arnaud@wixiweb.fr Twitter : @arnolem | @wixiweb.fr http://www.wixiweb.fr http://blog.wixiweb.fr

×