Fermer
DéveloppementMobileWeb

Sencha Touch : Introduction aux Panels (partie 2)

Suite au premier article sur Sencha Touch, nous allons voir en détail un composant essentiel de ce Framework, le Panel. Ce composant peut contenir d’autres composants, mais peut également se suffir à lui même comme nous l’avions vu dans le tutoriel “Hello World”.

Afin de mieux comprendre ce composant et ses dérivés, nous allons réaliser un CV mobile. Mais avant d’attaquer la partie pratique, je me permet d’ajouter quelques informations concernant les différents types de composant héritant de la classe Panel.

Les bases du panel

Sencha Touch, introduction aux panels - Classe panel

La classe Panel est la classe mère de différents composants :

  • Le Carousel permet de créer une galerie d’images
  • La NestedList permet de créer des listes imbriquées
  • Le TabPanel permet de gérer plusieurs panels grâce à des onglets
  • Le FormPanel permet de réaliser des formulaires

Je n’ai cité que les principaux à mon sens, mais l’image ci-dessus vous montre bien la totalité des composants descendant de la classe Panel.

Réaliser son CV mobile

Je vous propose de réaliser un CV mobile afin de mettre en œuvre les différents composants de Sencha Touch. Dans les prochains tutoriels, nous essaierons d’améliorer ce mini-projet afin d’obtenir un CV mobile complet.

Voici ce que l’on obtiendra à la fin de ce tutoriel :

Le CV mobile contiendra donc une page d’accueil, une page recensant les expériences, et une dernière page concernant les formations.

Contenu du projet

Pour ne pas vous compliquer la vie, je vous propose de récupérer directement le projet avec les librairies, les images, etc. Vous n’aurez plus qu’à compléter le fichier script.js !

L’archive du projet complet sera disponible à la fin de l’article.

Les 3 panels de base

Nous allons réaliser 3 panels hébergeant le contenu du CV. Un premier panel d’introduction, un second recensant les expériences professionnelles, et un dernier consacré aux formations. Tous les bouts de code qui vont suivre doivent être tapés dans le fichier script.js (pour ceux qui l’auraient oublié 😉 ).

Voici le panel de présentation :

[sourcecode language=”javascript”]
var presentation = new Ext.Panel({
title: ‘Accueil’,
html:"<div class=’presentation’>\
<img id=’logo’ src=’img/logo.png’ />\
<p>Actuellement étudiant en troisième année de licence MIAGE (Méthodes Informatiques Appliquées à la Gestion des Entreprises) à l’université Paul Sabatier, je suis avant tout passionné de technologies web, et notamment des solutions mobiles. Vous trouverez dans ce CV mobile, un résumé de mes compétences acquises lors de mes formations ainsi que de mes expériences professionnelles et personnelles.</p>\
<p>Ce tutoriel fait partie de l’article <i>Sencha Touch : Introduction aux Panels (partie 2)</i>, disponible sur le <a href=’https://www.blog-nouvelles-technologies.fr/5693/sencha-touch-introduction-aux-panels-partie-2/’ alt=’Sencha Touch : Introduction aux Panels (partie 2)’>Blog des Nouvelles Technologies</a>.</p>\
</div>"
});
[/sourcecode]

Le panel d’expériences :

[sourcecode language=”javascript”]
var experiences = new Ext.Panel({
title: ‘Expériences’,
scroll: ‘vertical’,
html: "<div class=’presentation’>\
<p class=’titrePres’>Expérience</p>\
<p class=’titreJob’>Développeur Web Mobile chez Ubleam</p>\
<p class=’dateJob’>Avril 2011 – Septembre 2011</p>\
<ul class=’listePres’>\
<li>Analyse des besoins et conception d’application web mobiles</li>\
<li>Utilisation du framework Sencha Touch</li>\
<li>PHP/MySQL/JavaScript</li>\
<li>Utilisation de l’API Twitter (OAuth)</li>\
<li>Documentation</li>\
</ul><br />\
<p class=’titreJob’>Développeur Mobile Android chez Graphic.ly</p>\
<p class=’dateJob’>Avril 2010 – Juillet 2010</p>\
<ul class=’listePres’>\
<li>Analyse des besoins et conception de l’application</li>\
<li>Développement de l’application mobile sous Android (JAVA/XML)</li>\
<li>Utilisation de Web Services (REST, JSON, XML)</li>\
<li>Documentation</li>\
</ul>\
</div>"
});
[/sourcecode]

Et le panel de formations :

[sourcecode language=”javascript”]
var formations = new Ext.Panel({
title: ‘Formations’,
html: "<div class=’presentation’>\
<p class=’titrePres’>Formations</p>\
<p class=’titreJob’>Miage – Université Paul Sabatier – Toulouse</p>\
<p class=’dateJob’>2010 – 2013 (espéré)</p>\
<p class=’titreJob’>DUT Informatique – Université Paul Sabatier – Toulouse</p>\
<p class=’dateJob’>2008 – 2010</p>\
<p class=’titreJob’>Bac Scientifique – Lycée Henri Matisse – Toulouse</p>\
<p class=’dateJob’>2007 – 2008</p>\
</div>"
});
[/sourcecode]

Revenons quelques instants sur le code. Les différents panels créés sont pratiquement identiques. Ils contiennent tous une propriété html dans laquelle le contenu est défini.
Le seul changement est la propriété scroll du dernier panel. Etant donné que le contenu de ce panel peut être long, je lui autorise le scroll vertical. Dans le cas où cela n’est pas indiqué, le contenu n’est pas scrollable. Vous pouvez faire l’essai avec les autres panels pour le constater.

Le composant TabPanel

“T’es gentil, mais on voit toujours aucun résultat !”. La remarque tombe à pic ! 😉

Nous allons créer un composant TabPanel qui permettra de passer d’un panel à un autre grâce à des onglets.

Sencha Touch, introduction aux panels - Composant TabPanel

Voici le code du composant :

[sourcecode language=”javascript”]
var tabpan = new Ext.TabPanel({
fullscreen: true,
tabBar: {
dock: ‘bottom’,
layout: { pack: ‘center’}
},
cardSwitchAnimation: {
type: ‘slide’
},
items: [presentation,experiences,formations]
});
[/sourcecode]

Il commence à y avoir pas mal de nouvelles propriétés !

La propriété tabBar concerne la barre d’onglets permettant de passer d’un Panel à une autre. J’utilise ici deux propriétés de ce composant :

  • dock, qui permet de fixer la barre d’onglets en haut ou en bas (bottom, top)
  • layout, qui comme je l’ai dit, aura un chapitre à lui tout seul ! Vous pouvez tout de même essayer d’enlever cette propriété, vous constaterez que les onglets ne seront plus centrés.

La propriété cardSwitchAnimation définit l’animation lors du changement d’onglet. Plusieurs options sont disponibles : fade, slide, flip, cube, pop et wipe.

Et enfin, la dernière propriété utilisée, items. C’est cette propriété qui va ajouter au TabPanel les différents Panels créés précédemment. On mentionne donc les différents Panels entre [ ] séparés par des virgules. Il y aura autant d’onglets que de Panels ajoutés dans la propriété items.

Voici le résultat :

Au niveau de la syntaxe, je préfère créer les Panels dans des variables plutôt que des les créer directement dans le TabPanel. Ainsi, le code est plus lisible. Cependant, on peut tout à fait le faire :

[sourcecode language=”javascript”]
var tabpan = new Ext.TabPanel({
fullscreen: true,
tabBar: {
dock: ‘bottom’,
layout: { pack: ‘center’}
},
cardSwitchAnimation: {
type: ‘slide’
},
items: [
{
html: "<div class=’presentation’>\
<img id=’logo’ src=’img/logo.png’ />\
<p>Actuellement étudiant en troisième année de licence MIAGE (Méthodes Informatiques Appliquées à la Gestion des Entreprises) à l’université Paul Sabatier, je suis avant tout passionné de technologies web, et notamment des solutions mobiles. Vous trouverez dans ce CV mobile, un résumé de mes compétences acquises lors de mes formations ainsi que de mes expériences professionnelles et personnelles.</p>\
<p>Ce tutoriel fait partie de l’article <i>Sencha Touch : Introduction aux Panels (partie 2)</i>, disponible sur le <a href=’https://www.blog-nouvelles-technologies.fr/5693/sencha-touch-introduction-aux-panels-partie-2/’ alt=’Sencha Touch : Introduction aux Panels (partie 2)’>Blog des Nouvelles Technologies</a>.</p>\
</div>"
},
experiences,
formations
]
});
[/sourcecode]

Ce code est équivalent au précédent. Cependant, le Panel étant créé à la volée, il ne pourra pas être réutilisable.

Le composant Toolbar

Vous l’avez sûrement constaté, dans les applications natives, il y a souvent une barre d’outils qui apporte diverses informations (titre, logo, etc.). Sencha Touch propose également ce composant.

Le code suivant permet de créer un composant Toolbar :

[sourcecode language=”javascript”]
var header = new Ext.Toolbar({
dock: ‘top’,
ui: ‘light’,
title: ‘Florent Suc’
});
[/sourcecode]

Explication des propriétés utilisées :

  • La propriété dock permet de spécifier la position du composant. De manière générale, une toolbar est situé en haut. Top permet de le placer à cet endroit.
  • Je passerai pour l’instant sur la propriété ui. Sachez qu’elle permet de définir un style prédéfini pour un composant individuel (souvent light ou dark, vous pouvez faire l’essai).
  • Et enfin, la propriété title permet de définir un titre à notre toolbar.

Et voici notre belle ToolBar :

Sencha Touch, introduction aux panels - Composant ToolBar

La touche finale

Vous l’avez sans doute deviné, il ne nous reste plus qu’à ajouter la ToolBar au TabPanel. Pour cela, il va falloir reprendre le composant TabPanel, et ajouter une propriété permettant d’insérer la ToolBar :

[sourcecode language=”javascript”]
var tabpan = new Ext.TabPanel({
fullscreen: true,
tabBar: {
dock: ‘bottom’,
layout: { pack: ‘center’}
},
cardSwitchAnimation: {
type: ‘slide’
},
dockedItems: [header],
items: [presentation,experiences,formations]
});
[/sourcecode]

La propriété à ajouter est donc dockedItems. Elle autorise l’insertion de composants fixés sur un côté du téléphone (haut, bas, droite, gauche). Mais de manière générale, cette propriété est utilisée pour les composants ToolBar ou TabBar.

Complément d’informations

Je vous propose une vidéo (en anglais) réalisée par Sencha qui complètera cet article sur les Panels.

[samples id=”5693″]

L’option la plus intéressante est de flasher le QRCode suivant pour observer le résultat directement depuis votre smartphone.

Sencha Touch, introduction aux panels - QRCode CV Mobile

Conclusion

Nous venons donc de réaliser une première version du CV mobile. Cela fait pas mal de nouveaux composants, mais vous les maitriserez très vite ! Personnellement je réutilise souvent les mêmes. Les propriétés ne sont pas à apprendre par coeur puisque la documentation API est très fournie.

Je vous propose quelques liens utiles pour vos développements :

Comme d’habitude, si vous rencontrez des problèmes, laissez un commentaire à la suite de cet article, ou contactez moi sur Twitter.

Qu’avez-vous pensé de ce tutoriel ? Le Framework Sencha Touch vous parait-il plus clair ? L’interface vous plait-elle ? N’hésitez pas à donner vos impressions à la suite de ce billet !

Mots-clé : application web mobileSencha Touch
Florent Suc

L’auteur Florent Suc

Actuellement étudiant en MIAGE (Méthodes Informatiques Appliquées à la Gestion des Entreprises) à Toulouse, je suis avant tout passionné de technologies web, et notamment des solutions mobiles. Je suis par ailleurs un inconditionnel des sports de glisses, et vous aurez des chances de me croiser dans les Pyrénées 😉