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

1,819 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
1,819
On SlideShare
0
From Embeds
0
Number of Embeds
470
Actions
Shares
0
Downloads
29
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×