HTML5 Mobile avec Sencha Touch                 Arnaud Lemercier               @arnolem / @wixiweb                     blog...
< SOMMAIRE />●   Présentation de Sencha / ExtJS●   Fonctionnalités●   Composants Sencha Touch●   Architecture MVC●   Appli...
< Présentation />
Sencha Complet : ExtJS / Touch / Architect / Charts              Sencha ExtJS                    Sencha Touch            S...
Documentationhttp://docs.sencha.com/touch/2-1/#!/api/Ext.dataview.List
Licences Sencha TouchCommercial Software License                 Open Source License Gratuit                             ...
< Fonctionnalités />
Principale fonctionnalités Sencha TouchLayout / ComposantsButton, Tab, Forms, Carousel,List, Toolbars, Overlays, IconsAnim...
< Composants />      ●
Composants : Formulaireshttp://docs.sencha.com/touch/2-1/#!/guide/forms
Composants : Carouselhttp://docs.sencha.com/touch/2-1/#!/guide/carousel
Composants : Chartshttp://docs.sencha.com/touch/2-1/#!/guide/drawing_and_charting
Composants : Liste, liste imbriquée, listes groupéeshttp://docs.sencha.com/touch/2-1/#!/api/Ext.dataview.List
Composants : Tabs, TabPanelhttp://docs.sencha.com/touch/2-1/#!/api/Ext.tab.Panel
Composants : Médias, Google Map, Vidéo, ...
Composants : Toolbars 
< Architecture />
Anatomie Sencha Touch Store = Conteneur de données                Controller = Capte les actions utilisateur Profile = Per...
http://docs.sencha.com/touch/2-1/#!/guide/command_app
Sencha CMDCréer un nouveau projetsencha -sdk /sencha-sdk/ generate app MyApp /project/myappCréer un composant MVC : Ex « n...
Sencha CMDCréer un nouveau projetsencha -sdk /sencha-sdk/ generate app MyApp /project/myappCréer un composant MVC : Ex « n...
Personnalisation du thèmehttp://docs.sencha.com/touch/2-1/#!/guide/theming
Conception : Sencha Architect
Ext.application / Ext.Viewport
Ext.component
< Application embarquée />
API NativeConnexion *Notification *VibrationCamera *Orientation *GeolocalisationContact* Nécessite Adobe PhoneGaphttp://do...
Configuration PackagingExemple Android                                                              Exemple iOS http://doc...
CONTACT      arnaud@wixiweb.frTwitter : @arnolem | @wixiweb.fr     http://www.wixiweb.fr     http://blog.wixiweb.fr
Prochain SlideShare
Chargement dans…5
×

HTML5 mobile avec Sencha Touch [FR]

3 915 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 915
Sur SlideShare
0
Issues des intégrations
0
Intégrations
7
Actions
Partages
0
Téléchargements
76
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

×