Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier
-
Upload
normandie-web-xperts -
Category
Technology
-
view
1.018 -
download
1
Transcript of Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier
![Page 1: Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier](https://reader034.fdocuments.us/reader034/viewer/2022052621/558bccced8b42aa60b8b45df/html5/thumbnails/1.jpg)
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
![Page 2: Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier](https://reader034.fdocuments.us/reader034/viewer/2022052621/558bccced8b42aa60b8b45df/html5/thumbnails/2.jpg)
< 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
![Page 3: Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier](https://reader034.fdocuments.us/reader034/viewer/2022052621/558bccced8b42aa60b8b45df/html5/thumbnails/3.jpg)
< Présentation />
![Page 4: Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier](https://reader034.fdocuments.us/reader034/viewer/2022052621/558bccced8b42aa60b8b45df/html5/thumbnails/4.jpg)
Sencha Complet : ExtJS / Touch / Architect / Charts
Sencha ExtJS Sencha Touch
Sencha Touch ChartsSencha Architect
http://www.sencha.com/products/complete/
![Page 5: Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier](https://reader034.fdocuments.us/reader034/viewer/2022052621/558bccced8b42aa60b8b45df/html5/thumbnails/5.jpg)
http://docs.sencha.com/touch/2-1/#!/api/Ext.dataview.List
Documentation
![Page 6: Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier](https://reader034.fdocuments.us/reader034/viewer/2022052621/558bccced8b42aa60b8b45df/html5/thumbnails/6.jpg)
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
![Page 7: Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier](https://reader034.fdocuments.us/reader034/viewer/2022052621/558bccced8b42aa60b8b45df/html5/thumbnails/7.jpg)
< Fonctionnalités />
![Page 8: Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier](https://reader034.fdocuments.us/reader034/viewer/2022052621/558bccced8b42aa60b8b45df/html5/thumbnails/8.jpg)
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
![Page 9: Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier](https://reader034.fdocuments.us/reader034/viewer/2022052621/558bccced8b42aa60b8b45df/html5/thumbnails/9.jpg)
< Composants />
●
![Page 10: Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier](https://reader034.fdocuments.us/reader034/viewer/2022052621/558bccced8b42aa60b8b45df/html5/thumbnails/10.jpg)
Composants : Formulaires
http://docs.sencha.com/touch/2-1/#!/guide/forms
![Page 11: Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier](https://reader034.fdocuments.us/reader034/viewer/2022052621/558bccced8b42aa60b8b45df/html5/thumbnails/11.jpg)
http://docs.sencha.com/touch/2-1/#!/guide/carousel
Composants : Carousel
![Page 12: Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier](https://reader034.fdocuments.us/reader034/viewer/2022052621/558bccced8b42aa60b8b45df/html5/thumbnails/12.jpg)
Composants : Charts
http://docs.sencha.com/touch/2-1/#!/guide/drawing_and_charting
![Page 13: Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier](https://reader034.fdocuments.us/reader034/viewer/2022052621/558bccced8b42aa60b8b45df/html5/thumbnails/13.jpg)
Composants : Liste, liste imbriquée, listes groupées
http://docs.sencha.com/touch/2-1/#!/api/Ext.dataview.List
![Page 14: Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier](https://reader034.fdocuments.us/reader034/viewer/2022052621/558bccced8b42aa60b8b45df/html5/thumbnails/14.jpg)
Composants : Tabs, TabPanel
http://docs.sencha.com/touch/2-1/#!/api/Ext.tab.Panel
![Page 15: Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier](https://reader034.fdocuments.us/reader034/viewer/2022052621/558bccced8b42aa60b8b45df/html5/thumbnails/15.jpg)
Composants : Médias, Google Map, Vidéo, ...
![Page 16: Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier](https://reader034.fdocuments.us/reader034/viewer/2022052621/558bccced8b42aa60b8b45df/html5/thumbnails/16.jpg)
Composants : Toolbars
![Page 17: Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier](https://reader034.fdocuments.us/reader034/viewer/2022052621/558bccced8b42aa60b8b45df/html5/thumbnails/17.jpg)
< Architecture />
![Page 18: Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier](https://reader034.fdocuments.us/reader034/viewer/2022052621/558bccced8b42aa60b8b45df/html5/thumbnails/18.jpg)
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
![Page 19: Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier](https://reader034.fdocuments.us/reader034/viewer/2022052621/558bccced8b42aa60b8b45df/html5/thumbnails/19.jpg)
http://docs.sencha.com/touch/2-1/#!/guide/command_app
![Page 20: Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier](https://reader034.fdocuments.us/reader034/viewer/2022052621/558bccced8b42aa60b8b45df/html5/thumbnails/20.jpg)
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
![Page 21: Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier](https://reader034.fdocuments.us/reader034/viewer/2022052621/558bccced8b42aa60b8b45df/html5/thumbnails/21.jpg)
Personnalisation du thème
http://docs.sencha.com/touch/2-1/#!/guide/theming
![Page 22: Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier](https://reader034.fdocuments.us/reader034/viewer/2022052621/558bccced8b42aa60b8b45df/html5/thumbnails/22.jpg)
Conception : Sencha Architect
![Page 23: Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier](https://reader034.fdocuments.us/reader034/viewer/2022052621/558bccced8b42aa60b8b45df/html5/thumbnails/23.jpg)
Ext.application / Ext.Viewport
![Page 24: Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier](https://reader034.fdocuments.us/reader034/viewer/2022052621/558bccced8b42aa60b8b45df/html5/thumbnails/24.jpg)
Ext.component
![Page 25: Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier](https://reader034.fdocuments.us/reader034/viewer/2022052621/558bccced8b42aa60b8b45df/html5/thumbnails/25.jpg)
< Application embarquée />
![Page 26: Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier](https://reader034.fdocuments.us/reader034/viewer/2022052621/558bccced8b42aa60b8b45df/html5/thumbnails/26.jpg)
API Native
http://docs.sencha.com/touch/2-1/#!/guide/native_apis
Connexion *
Notification *
Vibration
Camera *
Orientation *
Geolocalisation
Contact
* Nécessite Adobe PhoneGap
![Page 27: Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier](https://reader034.fdocuments.us/reader034/viewer/2022052621/558bccced8b42aa60b8b45df/html5/thumbnails/27.jpg)
Configuration PackagingExemple Android
Exemple iOS
http://docs.sencha.com/touch/2-1/#!/guide/native_packaging
![Page 28: Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier](https://reader034.fdocuments.us/reader034/viewer/2022052621/558bccced8b42aa60b8b45df/html5/thumbnails/28.jpg)
CONTACT
Twitter : @arnolem | @wixiweb.fr
http://www.wixiweb.frhttp://blog.wixiweb.fr