conférence #nwxtech5 : html5 mobile avec sencha touch par arnaud lemercier
TRANSCRIPT
HTML5 Mobile avec HTML5 Mobile avec Sencha TouchSencha Touch
Arnaud LemercierArnaud Lemercier
@arnolem / @wixiweb@arnolem / @wixiweb
blog.wixiweb.fr
www.wixiweb.fr www.wixiweb.fr
< SOMMAIRE />< SOMMAIRE />
● Présentation de Sencha / ExtJSPrésentation de Sencha / ExtJS● FonctionnalitésFonctionnalités● Composants Sencha TouchComposants Sencha Touch● Architecture MVCArchitecture MVC● Application embarquée: Android / iOSApplication embarquée: Android / iOS● QuestionsQuestions
< Présentation />
Sencha Complet : ExtJS / Touch / Architect / Charts
Sencha ExtJS Sencha Touch
Sencha Touch ChartsSencha Architect
http://www.sencha.com/products/complete/
http://docs.sencha.com/touch/2-1/#!/api/Ext.dataview.List
Documentation
Licences Sencha Touch
http://www.sencha.com/products/touch/license/
Commercial Software License Gratuit Nb utilisateur illimité Interdit de redistribuer ou de
créer un générateur d'apps
Open Source License Gratuit Utilisateur illimité Partage du code source
obligatoire sous GPL3
Commercial Software License for Embedded Devices
Gratuit dans la limite de < 5.000 apps natives / an
Payant au dela
Commercial OEM License Payant Possibilité d'intégrer Sencha
Touch dans votre SDK ou générateur d'apps mobiles
https://www.sencha.com/store/touch/
Support communautaire ou payant :299$ / an / dev
< Fonctionnalités />
Principale fonctionnalités Sencha Touch
http://www.sencha.com/products/touch/features/
Layout / ComposantsButton, Tab, Forms, Carousel,List, Toolbars, Overlays, Icons
AnimationsSlide, Cover, Fade, Reveal, ...
Événements tactilesTap, Drag, Swipe, Pinch/Rotate
DonnéesArray, JSON, YQL, XML, Ajax
MédiasAudio, Vidéo
< Composants />
●
Composants : Formulaires
http://docs.sencha.com/touch/2-1/#!/guide/forms
http://docs.sencha.com/touch/2-1/#!/guide/carousel
Composants : 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
Profile = Personnalisation Multi-device
Model = Entité représentant un type de données
Controller = Capte les actions utilisateur
View = Affichage des composants
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 projetsencha -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 Touchsencha app upgrade /sencha-sdk-new/
Déployer Sencha : Testing, production, ...cd /path/to/www/myappsencha app build production
Créer une application Android & iOSsencha 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
http://docs.sencha.com/touch/2-1/#!/guide/native_apis
Connexion *
Notification *
Vibration
Camera *
Orientation *
Geolocalisation
Contact
* Nécessite Adobe PhoneGap
Configuration PackagingExemple Android
Exemple iOS
http://docs.sencha.com/touch/2-1/#!/guide/native_packaging
CONTACT
Twitter : @arnolem | @wixiweb.fr
http://www.wixiweb.frhttp://blog.wixiweb.fr