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

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

< Présentation />

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

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

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/

< Fonctionnalités />

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/

< Composants />
●

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

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

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

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

Composants : Tabs, TabPanel
http://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 = 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

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

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

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

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

Conception : Sencha Architect

Ext.application / Ext.Viewport

Ext.component

< Application embarquée />

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

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

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