HTML5 Mobile avec Sencha Touch

Arnaud Lemercier@arnolem / @wixiweb

blog.wixiweb.fr

www.wixiweb.fr

< SOMMAIRE />

Prsentation de Sencha / ExtJS

Fonctionnalits

Composants Sencha Touch

Architecture MVC

Application embarque: Android / iOS

Questions

< Prsentation />

Sencha Complet: ExtJS / Touch / Architect / Charts

Sencha ExtJS

Sencha Touch

Sencha Touch Charts

Sencha Architecthttp://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 LicenseGratuit

Nb utilisateur illimit

Interdit de redistribuer ou de crer un gnrateur d'apps

Open Source LicenseGratuit

Utilisateur illimit

Partage du code source obligatoire sous GPL3

Commercial Software License for Embedded DevicesGratuit dans la limite de
< 5.000 apps natives / an

Payant au dela

Commercial OEM LicensePayant

Possibilit d'intgrer Sencha Touch dans votre SDK ou gnrateur d'apps mobiles

https://www.sencha.com/store/touch/

Support communautaire ou payant:299$ / an / dev

< Fonctionnalits />

Principale fonctionnalits Sencha Touch

http://www.sencha.com/products/touch/features/

Layout / ComposantsButton, Tab, Forms, Carousel,List, Toolbars, Overlays, Icons

AnimationsSlide, Cover, Fade, Reveal, ...

vnements tactilesTap, Drag, Swipe, Pinch/Rotate

DonnesArray, JSON, YQL, XML, Ajax

MdiasAudio, Vido

< 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 imbrique, listes groupes

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: Mdias, Google Map, Vido, ...

Composants: Toolbars

< Architecture />

Anatomie Sencha Touch

Store= Conteneur de donnes

Profile= Personnalisation Multi-device

Model= Entit reprsentant un type de donnes

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

Crer un nouveau projetsencha -sdk /sencha-sdk/ generate app MyApp /project/myapp

Crer un composant MVC: Ex nouveau model Usersencha generate model User fields=id:int,name,email

Mettre jour Sencha Touchsencha app upgrade /sencha-sdk-new/

Dployer Sencha: Testing, production, ...cd /path/to/www/myappsencha app build production

Crer une application Android & iOSsencha package build -p packager.json

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

Sencha CMD

Crer un nouveau projetsencha -sdk /sencha-sdk/ generate app MyApp /project/myapp

Crer un composant MVC: Ex nouveau model Usersencha generate model User fields=id:int,name,email

Mettre jour Sencha Touchsencha app upgrade /sencha-sdk-new/

Dployer Sencha: Testing, production, ...cd /path/to/www/myappsencha app build production

Crer une application Android & iOSsencha package build -p packager.json

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

Personnalisation du thme

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

Conception: Sencha Architect

Ext.application / Ext.Viewport

Ext.component

< Application embarque />

API Native

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

Connexion *

Notification *

Vibration

Camera *

Orientation *

Geolocalisation

Contact

* Ncessite Adobe PhoneGap

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.frhttp://blog.wixiweb.fr