Le document présente Sencha Touch, un framework pour le développement d'applications mobiles, en détaillant ses fonctionnalités, composants et architecture MVC. Il aborde la création d'applications pour Android et iOS, ainsi que les aspects de licensing et de support. La documentation inclut également des ressources pour la conception, le testing et le déploiement des applications mobile.

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

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

23. Conception : Sencha Architect

24. Ext.application / Ext.Viewport

25. Ext.component

26. < Application embarquée />

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

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

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