1. HTML5 Mobile avec Sencha Touch
Arnaud Lemercier
@arnolem / @wixiweb
blog.wixiweb.fr
www.wixiweb.fr

2. < SOMMAIRE />
● Présentation de Sencha / ExtJS
● Fonctionnalités
● Composants Sencha Touch
● Architecture MVC
● Application embarquée: Android / iOS
● Questions

3. < Présentation />

4. Sencha Complet : ExtJS / Touch / Architect / Charts
Sencha ExtJS Sencha Touch
Sencha Architect Sencha Touch Charts
http://www.sencha.com/products/complete/

5. Documentation
http://docs.sencha.com/touch/2-1/#!/api/Ext.dataview.List

6. Licences Sencha Touch
Commercial 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 d'apps obligatoire sous GPL3
Commercial OEM License Commercial Software License
 Payant for Embedded Devices
 Possibilité d'intégrer Sencha  Gratuit dans la limite de
Touch dans votre SDK ou < 5.000 apps natives / an
générateur d'apps mobiles  Payant au dela
Support communautaire ou payant :299$ / an / dev
https://www.sencha.com/store/touch/
http://www.sencha.com/products/touch/license/

7. < Fonctionnalités />

8. Principale fonctionnalités Sencha Touch
Layout / Composants
Button, Tab, Forms, Carousel,
List, Toolbars, Overlays, Icons
Animations
Slide, Cover, Fade, Reveal, ...
Événements tactiles
Tap, Drag, Swipe, Pinch/Rotate
Données
Array, JSON, YQL, XML, Ajax
Médias
Audio, Vidéo
http://www.sencha.com/products/touch/features/

9. < Composants />
●

10. Composants : Formulaires
http://docs.sencha.com/touch/2-1/#!/guide/forms

11. Composants : Carousel
http://docs.sencha.com/touch/2-1/#!/guide/carousel

12. Composants : Charts
http://docs.sencha.com/touch/2-1/#!/guide/drawing_and_charting

13. Composants : Liste, liste imbriquée, listes groupées
http://docs.sencha.com/touch/2-1/#!/api/Ext.dataview.List

14. Composants : Tabs, TabPanel
http://docs.sencha.com/touch/2-1/#!/api/Ext.tab.Panel

15. Composants : Médias, Google Map, Vidéo, ...

16. Composants : Toolbars

17. < Architecture />

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ées
http://docs.sencha.com/touch/2-1/#!/guide/apps_intro

19. http://docs.sencha.com/touch/2-1/#!/guide/command_app

20. Sencha CMD
Créer un nouveau projet
sencha -sdk /sencha-sdk/ generate app MyApp /project/myapp
Créer un composant MVC : Ex « nouveau model User »
sencha generate model User –fields=id:int,name,email
Mettre à jour Sencha Touch
sencha app upgrade /sencha-sdk-new/
Déployer Sencha : Testing, production, ...
cd /path/to/www/myapp
sencha app build production
Créer une application Android & iOS
sencha package build -p packager.json
http://docs.sencha.com/touch/2-1/#!/guide/command_app

21. Personnalisation du thème
http://docs.sencha.com/touch/2-1/#!/guide/theming

22. Conception : Sencha Architect

23. Ext.application / Ext.Viewport

24. Ext.component

25. < Application embarquée />

26. API Native
Connexion *
Notification *
Vibration
Camera *
Orientation *
Geolocalisation
Contact
* Nécessite Adobe PhoneGap
http://docs.sencha.com/touch/2-1/#!/guide/native_apis

27. Configuration Packaging
Exemple Android
Exemple iOS
http://docs.sencha.com/touch/2-1/#!/guide/native_packaging

28. CONTACT
arnaud@wixiweb.fr
Twitter : @arnolem | @wixiweb.fr
http://www.wixiweb.fr
http://blog.wixiweb.fr