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...
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
×

Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier

1 672 vues

Publié le

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

  • Soyez le premier à aimer ceci

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

Aucune remarque pour cette diapositive

Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier

  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. Personnalisation du thèmehttp://docs.sencha.com/touch/2-1/#!/guide/theming
  22. 22. Conception : Sencha Architect
  23. 23. Ext.application / Ext.Viewport
  24. 24. Ext.component
  25. 25. < Application embarquée />
  26. 26. API NativeConnexion *Notification *VibrationCamera *Orientation *GeolocalisationContact* Nécessite Adobe PhoneGaphttp://docs.sencha.com/touch/2-1/#!/guide/native_apis
  27. 27. Configuration PackagingExemple Android Exemple iOS http://docs.sencha.com/touch/2-1/#!/guide/native_packaging
  28. 28. CONTACT arnaud@wixiweb.frTwitter : @arnolem | @wixiweb.fr http://www.wixiweb.fr http://blog.wixiweb.fr

×