conférence #nwxtech5 : html5 mobile avec sencha touch par arnaud lemercier

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

arnaud@wixiweb.fr

Twitter : @arnolem | @wixiweb.fr

http://www.wixiweb.frhttp://blog.wixiweb.fr