Post on 07-Jul-2020
SENCHA TOUCH
Etudiants:
Thibault BALAY
Quentin BRIALI
Paul TALVAT
mardi 30 avril 2013
MIF38 – M1 informatique
De plus en plus de smartphones et de
tablettes, …
… donc comment optimiser le web
pour ces supports ?
30/04/2013
Balay Briali Talvat - Sencha Touch - MIF38
2
Problématique
Plan de présentation
1. Etat de l’art
2. Description de Sencha Touch
3. Démonstration
Balay Briali Talvat - Sencha Touch - MIF38
3 30/04/2013
Tableau de comparaison http://www.markus-falk.com/mobile-frameworks-
comparison-chart/
Rhodes (développé par Motorola)
PhoneGap (Adobe Systems)
JQueryMobile (Jquery)
IUI (Joe Hewitt)
30/04/2013
Balay Briali Talvat - Sencha Touch - MIF38
4
1.Etat de l’art
Sencha Touch (développé par Sencha)
Framework pour le développement
d’applications Web mobiles en HTML5
OS supportés:
http://www.sencha.com/products/touch
Version actuelle : 2.2.0
Développement toujours actif
30/04/2013
Balay Briali Talvat - Sencha Touch - MIF38
5
2. Description 2.1. Généralités
Quasiment que du JavaScript ( + CSS3 )
Mise à disposition de composants UI en
javascript
Architecture MVC
30/04/2013
Balay Briali Talvat - Sencha Touch - MIF38
6
2. Description 2.1. Généralités
30/04/2013
Balay Briali Talvat - Sencha Touch - MIF38
7
2. Description 2.2. Fonctionnement
Lancer un
serveur
Générer le
squelette de
l’application
Instancier des
composants
(panels, boutons,
listes, datepickers)
Paramétrer les
composants (taille,
texte, couleur, type)
et les évènements
sur les composants
Les ajouter
à la vue
stylisée
Lancer
l’application
30/04/2013
Balay Briali Talvat - Sencha Touch - MIF38
8
2. Description 2.2. Fonctionnement
Générer le squelette de l’application :
Sencha CMD http://www.sencha.com/products/sencha-cmd/download
Sencha Touch SDK http://www.sencha.com/products/touch/download/
sencha generate app AppTest ../AppTest
30/04/2013
Balay Briali Talvat - Sencha Touch - MIF38
9
2. Description 2.2. Fonctionnement
Modèle, Vue, Contrôleur, Stockage, Profil
Point d’entrée Javascript pour l’application
Fichier de configuration de l’application en
JSON
Fichier HTML pour l’application
CSS et images pour l’application
30/04/2013
Balay Briali Talvat - Sencha Touch - MIF38
10
2. Description 2.2. Fonctionnement
Lancer un
serveur
Générer le
squelette de
l’application
Instancier des
composants
(panels, boutons,
listes, datepickers)
Paramétrer les
composants (taille,
texte, couleur, type)
et les évènements
sur le composant
Les ajouter
à la vue
Lancer
l’application
Architecture simple: 1 seul fichier JS
Architecture « MVC »:
30/04/2013
Balay Briali Talvat - Sencha Touch - MIF38
11
Applications
2. Description 2.3. Architecture
Exemple 1
Exemple2
30/04/2013
Balay Briali Talvat - Sencha Touch - MIF38
12
Démonstrations
Bibliothèques JavaScript
Création d’applications Web mobile en JS
Possibilité d’implémenter le MVC
30/04/2013
Balay Briali Talvat - Sencha Touch - MIF38
13
Avantages Inconvénients
Mise en forme Prise en main de la syntaxe
Beaucoup d’exemples
MVC
Multiplateformes
Conclusion
Sources
www.sencha.com
http://blog.zenika.com/index.php?post/2011/04/06/Se
ncha-Touch-%3A-un-framework-HTML5-pour-Mobile
http://miamicoder.com/sencha-touch-tutorials/
http://www.touchsolitaire.mobi/
30/04/2013
Balay Briali Talvat - Sencha Touch - MIF38
14
Merci de votre
attention!
30/04/2013
Balay Briali Talvat - Sencha Touch - MIF38
15