SlideShare une entreprise Scribd logo
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

Contenu connexe

En vedette

Le Profiling d'applications PHP - Blackfire.io
Le Profiling d'applications PHP - Blackfire.ioLe Profiling d'applications PHP - Blackfire.io
Le Profiling d'applications PHP - Blackfire.io
nicolas.grekas
 
Maitriser les structures de données PHP 102 - Forum Paris 2012
Maitriser les structures de données PHP 102 - Forum Paris 2012Maitriser les structures de données PHP 102 - Forum Paris 2012
Maitriser les structures de données PHP 102 - Forum Paris 2012
Patrick Allaert
 
Behat c'est plus que ça | Behat is more than that
Behat c'est plus que ça | Behat is more than thatBehat c'est plus que ça | Behat is more than that
Behat c'est plus que ça | Behat is more than that
Samuel ROZE
 
The Real Cost of Slow Time vs Downtime
The Real Cost of Slow Time vs DowntimeThe Real Cost of Slow Time vs Downtime
The Real Cost of Slow Time vs Downtime
Radware
 
Gérer ses environnements de développement avec vagrant - PHP Tour Nantes 2012
Gérer ses environnements de développement avec vagrant - PHP Tour Nantes 2012Gérer ses environnements de développement avec vagrant - PHP Tour Nantes 2012
Gérer ses environnements de développement avec vagrant - PHP Tour Nantes 2012
Jean-Marc Fontaine
 
Faster develoment with CakePHP 3
Faster develoment with CakePHP 3Faster develoment with CakePHP 3
Faster develoment with CakePHP 3
José Lorenzo Rodríguez Urdaneta
 
The Continuous PHP Pipeline
The Continuous PHP PipelineThe Continuous PHP Pipeline
The Continuous PHP Pipeline
Michelangelo van Dam
 
ng-europe: The New Router
ng-europe: The New Routerng-europe: The New Router
ng-europe: The New Router
Rob Eisenberg
 
Debugging Effectively - php[world] 2015
Debugging Effectively - php[world] 2015Debugging Effectively - php[world] 2015
Debugging Effectively - php[world] 2015
Colin O'Dell
 
The Commando Devops
The Commando DevopsThe Commando Devops
The Commando Devops
Fred de Villamil
 
Php 100k
Php 100kPhp 100k
Understanding PHP memory
Understanding PHP memoryUnderstanding PHP memory
Understanding PHP memory
julien pauli
 
Réutilisabilité du code PHP
Réutilisabilité du code PHPRéutilisabilité du code PHP
Réutilisabilité du code PHP
Nicolas Le Nardou
 
Un peu de sécurité dans ce monde de Kiwi
Un peu de sécurité dans ce monde de KiwiUn peu de sécurité dans ce monde de Kiwi
Un peu de sécurité dans ce monde de Kiwi
Laurie-Anne Bourdain
 
BEM, vos CSS sous vitamines !
BEM, vos CSS sous vitamines !BEM, vos CSS sous vitamines !
BEM, vos CSS sous vitamines !
Thomas ZILLIOX
 
PHP7 is coming
PHP7 is comingPHP7 is coming
PHP7 is coming
julien pauli
 
Getting touchy - an introduction to touch events / Sud Web / Avignon 17.05.2013
Getting touchy - an introduction to touch events / Sud Web / Avignon 17.05.2013Getting touchy - an introduction to touch events / Sud Web / Avignon 17.05.2013
Getting touchy - an introduction to touch events / Sud Web / Avignon 17.05.2013
Patrick Lauke
 
PHP 7 – What changed internally? (PHP Barcelona 2015)
PHP 7 – What changed internally? (PHP Barcelona 2015)PHP 7 – What changed internally? (PHP Barcelona 2015)
PHP 7 – What changed internally? (PHP Barcelona 2015)
Nikita Popov
 
Performances web - quoi de neuf ?
Performances web - quoi de neuf ?Performances web - quoi de neuf ?
Performances web - quoi de neuf ?
Jean-Pierre Vincent
 
Modern SQL in Open Source and Commercial Databases
Modern SQL in Open Source and Commercial DatabasesModern SQL in Open Source and Commercial Databases
Modern SQL in Open Source and Commercial Databases
Markus Winand
 

En vedette (20)

Le Profiling d'applications PHP - Blackfire.io
Le Profiling d'applications PHP - Blackfire.ioLe Profiling d'applications PHP - Blackfire.io
Le Profiling d'applications PHP - Blackfire.io
 
Maitriser les structures de données PHP 102 - Forum Paris 2012
Maitriser les structures de données PHP 102 - Forum Paris 2012Maitriser les structures de données PHP 102 - Forum Paris 2012
Maitriser les structures de données PHP 102 - Forum Paris 2012
 
Behat c'est plus que ça | Behat is more than that
Behat c'est plus que ça | Behat is more than thatBehat c'est plus que ça | Behat is more than that
Behat c'est plus que ça | Behat is more than that
 
The Real Cost of Slow Time vs Downtime
The Real Cost of Slow Time vs DowntimeThe Real Cost of Slow Time vs Downtime
The Real Cost of Slow Time vs Downtime
 
Gérer ses environnements de développement avec vagrant - PHP Tour Nantes 2012
Gérer ses environnements de développement avec vagrant - PHP Tour Nantes 2012Gérer ses environnements de développement avec vagrant - PHP Tour Nantes 2012
Gérer ses environnements de développement avec vagrant - PHP Tour Nantes 2012
 
Faster develoment with CakePHP 3
Faster develoment with CakePHP 3Faster develoment with CakePHP 3
Faster develoment with CakePHP 3
 
The Continuous PHP Pipeline
The Continuous PHP PipelineThe Continuous PHP Pipeline
The Continuous PHP Pipeline
 
ng-europe: The New Router
ng-europe: The New Routerng-europe: The New Router
ng-europe: The New Router
 
Debugging Effectively - php[world] 2015
Debugging Effectively - php[world] 2015Debugging Effectively - php[world] 2015
Debugging Effectively - php[world] 2015
 
The Commando Devops
The Commando DevopsThe Commando Devops
The Commando Devops
 
Php 100k
Php 100kPhp 100k
Php 100k
 
Understanding PHP memory
Understanding PHP memoryUnderstanding PHP memory
Understanding PHP memory
 
Réutilisabilité du code PHP
Réutilisabilité du code PHPRéutilisabilité du code PHP
Réutilisabilité du code PHP
 
Un peu de sécurité dans ce monde de Kiwi
Un peu de sécurité dans ce monde de KiwiUn peu de sécurité dans ce monde de Kiwi
Un peu de sécurité dans ce monde de Kiwi
 
BEM, vos CSS sous vitamines !
BEM, vos CSS sous vitamines !BEM, vos CSS sous vitamines !
BEM, vos CSS sous vitamines !
 
PHP7 is coming
PHP7 is comingPHP7 is coming
PHP7 is coming
 
Getting touchy - an introduction to touch events / Sud Web / Avignon 17.05.2013
Getting touchy - an introduction to touch events / Sud Web / Avignon 17.05.2013Getting touchy - an introduction to touch events / Sud Web / Avignon 17.05.2013
Getting touchy - an introduction to touch events / Sud Web / Avignon 17.05.2013
 
PHP 7 – What changed internally? (PHP Barcelona 2015)
PHP 7 – What changed internally? (PHP Barcelona 2015)PHP 7 – What changed internally? (PHP Barcelona 2015)
PHP 7 – What changed internally? (PHP Barcelona 2015)
 
Performances web - quoi de neuf ?
Performances web - quoi de neuf ?Performances web - quoi de neuf ?
Performances web - quoi de neuf ?
 
Modern SQL in Open Source and Commercial Databases
Modern SQL in Open Source and Commercial DatabasesModern SQL in Open Source and Commercial Databases
Modern SQL in Open Source and Commercial Databases
 

Similaire à HTML5 mobile avec Sencha Touch [FR]

Test flight et les outils de distribution continue par simone civetta de xebia
Test flight et les outils de distribution continue par simone civetta de xebiaTest flight et les outils de distribution continue par simone civetta de xebia
Test flight et les outils de distribution continue par simone civetta de xebia
CocoaHeads France
 
Introduction à Samsung bada
Introduction à Samsung badaIntroduction à Samsung bada
Introduction à Samsung bada
BeMyApp
 
1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy
1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy
1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy
Meetup Mobile Montpellier
 
Android introvf
Android introvfAndroid introvf
Android introvf
Anne-Marie Pinna-Dery
 
Silverlight 4
Silverlight 4Silverlight 4
Silverlight 4
Frédéric Queudret
 
Kinect en moins de 10 Minutes
Kinect en moins de 10 MinutesKinect en moins de 10 Minutes
Kinect en moins de 10 Minutes
Microsoft
 
La recette graphique
La recette graphiqueLa recette graphique
La recette graphique
Idean France
 
defuzeme_documentation_technique.pdf
defuzeme_documentation_technique.pdfdefuzeme_documentation_technique.pdf
defuzeme_documentation_technique.pdf
Sami Asmar
 
Niji_Rapport prévention_2023.pptx
Niji_Rapport prévention_2023.pptxNiji_Rapport prévention_2023.pptx
Niji_Rapport prévention_2023.pptx
Gabriel DUPONT
 
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Philippe Beraud
 
Développement Windows 8 METRO App
Développement Windows 8 METRO AppDéveloppement Windows 8 METRO App
Développement Windows 8 METRO App
Clément Hallet
 
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Microsoft
 
Cv dridi-lotfi
Cv dridi-lotfiCv dridi-lotfi
Cv dridi-lotfi
Lotfi Dridi
 
Apache Cordova 3.3 de zéro
Apache Cordova 3.3 de zéroApache Cordova 3.3 de zéro
Apache Cordova 3.3 de zéro
Alexandre Pereira
 
Apple Watch par Benoit Capallere et Joeffrey Bocquet
Apple Watch par Benoit Capallere et Joeffrey BocquetApple Watch par Benoit Capallere et Joeffrey Bocquet
Apple Watch par Benoit Capallere et Joeffrey Bocquet
CocoaHeads France
 
Conférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG MontpellierConférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG Montpellier
Damien Laureaux
 
Actionscript: du web au mobile
Actionscript: du web au mobileActionscript: du web au mobile
Actionscript: du web au mobile
Martin Arvisais
 

Similaire à HTML5 mobile avec Sencha Touch [FR] (20)

Test flight et les outils de distribution continue par simone civetta de xebia
Test flight et les outils de distribution continue par simone civetta de xebiaTest flight et les outils de distribution continue par simone civetta de xebia
Test flight et les outils de distribution continue par simone civetta de xebia
 
Introduction à Samsung bada
Introduction à Samsung badaIntroduction à Samsung bada
Introduction à Samsung bada
 
1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy
1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy
1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy
 
Android introvf
Android introvfAndroid introvf
Android introvf
 
Silverlight 4
Silverlight 4Silverlight 4
Silverlight 4
 
Kinect en moins de 10 Minutes
Kinect en moins de 10 MinutesKinect en moins de 10 Minutes
Kinect en moins de 10 Minutes
 
La recette graphique
La recette graphiqueLa recette graphique
La recette graphique
 
Meetup sencha
Meetup senchaMeetup sencha
Meetup sencha
 
defuzeme_documentation_technique.pdf
defuzeme_documentation_technique.pdfdefuzeme_documentation_technique.pdf
defuzeme_documentation_technique.pdf
 
Niji_Rapport prévention_2023.pptx
Niji_Rapport prévention_2023.pptxNiji_Rapport prévention_2023.pptx
Niji_Rapport prévention_2023.pptx
 
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
 
titre
titretitre
titre
 
Développement Windows 8 METRO App
Développement Windows 8 METRO AppDéveloppement Windows 8 METRO App
Développement Windows 8 METRO App
 
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
 
Cv dridi-lotfi
Cv dridi-lotfiCv dridi-lotfi
Cv dridi-lotfi
 
Apache Cordova 3.3 de zéro
Apache Cordova 3.3 de zéroApache Cordova 3.3 de zéro
Apache Cordova 3.3 de zéro
 
Apple Watch par Benoit Capallere et Joeffrey Bocquet
Apple Watch par Benoit Capallere et Joeffrey BocquetApple Watch par Benoit Capallere et Joeffrey Bocquet
Apple Watch par Benoit Capallere et Joeffrey Bocquet
 
Conférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG MontpellierConférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG Montpellier
 
Actionscript: du web au mobile
Actionscript: du web au mobileActionscript: du web au mobile
Actionscript: du web au mobile
 
.NET DotNet CF - 1
.NET DotNet CF - 1.NET DotNet CF - 1
.NET DotNet CF - 1
 

HTML5 mobile avec Sencha Touch [FR]