Créer sa première webapp iOS et Android avec Sencha Touch

Depuis l’explosion du nombre de smartphones et l’émergence des deux systèmes mobiles Android et iOS, puis WP7, développer pour mobile devient, en même temps que leurs capacités augmentent, de plus en plus dur à cause du nombre d’appareils différents.
C’est pourquoi Sencha Inc, ayant racheté récemment l’entreprise qui faisait Ext-Js un framework très avancé d’application web, ont lancé leur framework mobile : Sencha Touch. La première version stable 1.0 est sortie début Novembre 2010, gratuitement sous licence commerciale et gratuite à utiliser sous licence GPL.

1) Présentation du framework Sencha Touch

Sencha Touch est le premier framework mobile JavaScript & HTML5. Il permet de développer des applications web entièrement optimisées pour mobile, c’est à dire gérant les évènements des nouveaux smartphone tactile comme le multitouch, les mouvements de doigts, tout en ayant un affichage adapté à leur écran.

2) Créer l’environnement pour développer avec Sencha Touch

Pour pouvoir importer le framework Sencha Touch dans votre application, vous devez d’abord créer un fichier HTML de base.
Ensuite, il faut insérer les composants Ext, c’est à dire le fichier sencha-touch.js et le fichier sencha-touch.js pour les styles.
My First Mobile WebApp - Florent Lamoureux


Voilà ! Le framework Sencha Touch est maintenant intégré à votre page, vous pouvez commencer à l’utiliser 😉

3) Création de la structure de notre application

Nous allons maintenant modifier notre script, c’est à dire notre application. Pour cela, nous devons créer une nouvelle instance de Ext, soit Sencha, pour lui déclarer notre application.

Ext.setup({
     phoneStartupScreen: 'yourImageForTablet.png',
     icon: 'yourIcon.png',
     glossOnIcon: true,
     onReady: function() {

    }
});

Nous allons maintenant voir ligne par ligne ce que l’on a écris. La partie Ext.setup est l’instance Singleton de notre application. Celle-ci sers à définir les paramètres de celle-ci, ainsi que l’action à exécuter lorsque l’application est prête à démarrer (event onReady). Comme paramètres, nous avons ici spécifié « phoneStartupScreen » qui, comme son nom l’indique, permet de définir une image lorsque on lance l’application (fonctionne quand la web-app est ajouté au springboard sur iPhone, pour la faire réagir comme une vrai appli). Nous aurions pu ajouter tabletStartupScreen par exemple si nous voulions définir une image pour les tablettes (Galaxy Tab, iPad…). Ensuite, le paramètre « glossOnIcon » ajoute simplement un effet d’ombre sur l’icone de l’application sur ‘iPhone/iPad.
Nous avons défini les paramètres de config de notre application. Maintenant, nous allons ajouter des éléments dans notre application, et sous Sencha, l’élément coeur est le Panel, dérivé en tabPanel, FormPanel etc.

4) Création de la navigation par onglet et du TabPanel

La première chose que nous voulons faire sur notre application est une navigation par onglet, comme cela se fait pour les applications Cocoa sur iPhone.
Pour ça, nous insérons un tabPanel dans l’évènement onReady de notre application. Concrètement, lorsque le DOM sera chargé, Sencha va alors insérer le tabPanel.

Ext.setup({
     phoneStartupScreen: 'yourImageForTablet.png',
     icon: 'yourIcon.png',
     glossOnIcon: true,
     onReady: function() {
              var onglets;

              onglets = new Ext.TabPanel({
                        animation:'slide',
                        fullscreen:true,
                        items:[
                              { title:'Accueil'},
                              { title:'Onglet 2'}
                        ]
               });
    }
});

Analysons maintenant le code. Le TabPanel est un objet du framework Sencha Touch qui permet de créer une navigation par onglet. Celui-ci peux prendre beaucoup de paramètres, nous avons ici spécifié seulement le fullscreen (on ne divise pas notre écran) et l’animation « slide » entre les changements d’onglets. Comme autre paramètre, celui ci prend deux objets, définis dans items.
Ces objets sont implicitement pas nommés, mais nous aurions pu faire un new Ext.Panel() ou tout autre objet. Comme ces deux onglets sont des objets, ils ont chacun leur lots de paramètres, pour l’instant nous ne définissons que leur titre.
Voici le résultat visuel :

First Sencha Touch Mobile App

Comme vous pouvez le voir, l’application est très sommaire mais fonctionne. Deux onglets en haut.
Pour l’agrémenter très légèrement, nous allons mettre le tabPanel en bas en le « dockant » à l’écran en bas. Puis ajouter des icones pour nos deux onglets. Pour ça, nous redéfinissons le paramètre tabBar de la TabPanel.
Le code :

Ext.setup({
     phoneStartupScreen: 'yourImageForTablet.png',
     icon: 'yourIcon.png',
     glossOnIcon: true,
     onReady: function() {
              var onglets;

              onglets = new Ext.TabPanel({
			tabBar: {
				dock: 'bottom',
				layout: {
				   pack: 'center'
				}
			},
                        animation:'slide',
                        fullscreen:true,
                        items:[
                              { title:'Accueil', iconCls:'favorites'},
                              { title:'Info', iconCls:'info'}
                        ]
               });
    }
});

Le résultat est quand même un peu mieux !

First Sencha Touch Mobile App

5) Ajout du contenu à l’intérieur des onglets

Maintenant que nous avons notre menu par onglet, on va voir comment ajouter du contenu très simple à l’intérieur de ces onglets. Comme vous vous en doutez surement, ça va se définir la ou nous ajoutons nos « items » de TabPanel. C’est en fait l’architecture en cascade de Sencha qui est utile ici. Nous avons d’abord un TabPanel avec deux items, deux onglets. Puis chaque items (onglet) va contenir lui aussi des items (Panel) qui seront le contenu de cette onglet. Pour faire simple, nous n’allons pas insérer d’objet dans nos onglets, mais simplement du html.
Pour cela, rien de très compliqué, nous redéfinissons le paramètre « html » de nos onglets, afin d’insérer dans le DOM notre html.

Ext.setup({
     phoneStartupScreen: 'yourImageForTablet.png',
     icon: 'yourIcon.png',
     glossOnIcon: true,
     onReady: function() {
              var onglets;

              onglets = new Ext.TabPanel({
						tabBar: {
							dock: 'bottom',
							layout: {
								pack: 'center'
							}
						},
                        animation:'slide',
                        fullscreen:true,
                        items:[
                              {
								title:'Accueil',
								iconCls:'favorites',
								cls:'tab1',
								html:'

SUPINFO

Bienvenue sur la web-app du Laboratoire RIA de l\’école Supérieure d\’Informatique SUPINFO. ‘, }, { title:’Info’, cls:’tab2′, iconCls:’info’, html:’

www.labo-ria.com

Tutoriel par Florent Lamoureux, www.florentlamoureux.fr ‘, } ] }); } });

Maintenant on ajoute un peu de CSS, et ça nous donne une bien jolie application !

6) Conclusion

Voilà, vous avez créé une webapp optimisée pour iOS, et qui fonctionne sous Android (écrans larges comme le Samsung Galaxy S ou le HTC Desire). Vous avez maintenant de petites bases pour comprendre comment ça fonctionne.
Je ferai ensuite d’autres tutoriel plus poussé, en présentant plus en détail le framework Sencha Touch et ces objets très nombreux, ainsi que la réalisation d’une application utile !
N’hésitez pas à commenter pour toute remarque ou aide 😉