HTML5 mobile avec Sencha Touch [FR]

3 865 vues

Publié le

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

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 865
Sur SlideShare
0
Issues des intégrations
0
Intégrations
7
Actions
Partages
0
Téléchargements
75
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×