HTML5 mobile avec Sencha Touch [FR]

3,683 views
3,398 views

Published on

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

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

No Downloads
Views
Total views
3,683
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
71
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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 Chartshttp://www.sencha.com/products/complete/
  5. 5. Documentationhttp://docs.sencha.com/touch/2-1/#!/api/Ext.dataview.List
  6. 6. Licences Sencha TouchCommercial 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 dapps obligatoire sous GPL3Commercial OEM License Commercial Software License Payant for Embedded Devices Possibilité dintégrer Sencha  Gratuit dans la limite de Touch dans votre SDK ou < 5.000 apps natives / an générateur dapps mobiles  Payant au delaSupport communautaire ou payant :299$ / an / devhttps://www.sencha.com/store/touch/http://www.sencha.com/products/touch/license/
  7. 7. < Fonctionnalités />
  8. 8. Principale fonctionnalités Sencha TouchLayout / ComposantsButton, Tab, Forms, Carousel,List, Toolbars, Overlays, IconsAnimationsSlide, Cover, Fade, Reveal, ...Événements tactilesTap, Drag, Swipe, Pinch/RotateDonnéesArray, JSON, YQL, XML, AjaxMédiasAudio, Vidéohttp://www.sencha.com/products/touch/features/
  9. 9. < Composants /> ●
  10. 10. Composants : Formulaireshttp://docs.sencha.com/touch/2-1/#!/guide/forms
  11. 11. Composants : Carouselhttp://docs.sencha.com/touch/2-1/#!/guide/carousel
  12. 12. Composants : Chartshttp://docs.sencha.com/touch/2-1/#!/guide/drawing_and_charting
  13. 13. Composants : Liste, liste imbriquée, listes groupéeshttp://docs.sencha.com/touch/2-1/#!/api/Ext.dataview.List
  14. 14. Composants : Tabs, TabPanelhttp://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éeshttp://docs.sencha.com/touch/2-1/#!/guide/apps_intro
  19. 19. http://docs.sencha.com/touch/2-1/#!/guide/command_app
  20. 20. Sencha CMDCréer un nouveau projetsencha -sdk /sencha-sdk/ generate app MyApp /project/myappCréer un composant MVC : Ex « nouveau model User »sencha generate model User –fields=id:int,name,emailMettre à jour Sencha Touchsencha app upgrade /sencha-sdk-new/Déployer Sencha : Testing, production, ...cd /path/to/www/myappsencha app build productionCréer une application Android & iOSsencha package build -p packager.jsonhttp://docs.sencha.com/touch/2-1/#!/guide/command_app
  21. 21. Sencha CMDCréer un nouveau projetsencha -sdk /sencha-sdk/ generate app MyApp /project/myappCréer un composant MVC : Ex « nouveau model User »sencha generate model User –fields=id:int,name,emailMettre à jour Sencha Touchsencha app upgrade /sencha-sdk-new/Déployer Sencha : Testing, production, ...cd /path/to/www/myappsencha app build productionCréer une application Android & iOSsencha package build -p packager.jsonhttp://docs.sencha.com/touch/2-1/#!/guide/command_app
  22. 22. Personnalisation du thèmehttp://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 NativeConnexion *Notification *VibrationCamera *Orientation *GeolocalisationContact* Nécessite Adobe PhoneGaphttp://docs.sencha.com/touch/2-1/#!/guide/native_apis
  28. 28. Configuration PackagingExemple Android Exemple iOS http://docs.sencha.com/touch/2-1/#!/guide/native_packaging
  29. 29. CONTACT arnaud@wixiweb.frTwitter : @arnolem | @wixiweb.fr http://www.wixiweb.fr http://blog.wixiweb.fr

×