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