Le document présente Sencha Touch, un framework pour le développement d'applications mobiles sur Android et iOS, y compris ses fonctionnalités principales, composants, et architecture MVC. Il aborde également les licences disponibles, la création d'applications, et l'intégration d'API natives via Adobe PhoneGap. Des liens vers la documentation et les ressources pertinentes sont fournis pour approfondir chaque sujet.

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