fermer
DéveloppementMobile

Prise en main de Sencha Touch

Comme l’article de Yohann le montre, les technologies web mobiles deviennent de plus en plus importantes dans le développement d’applications mobiles. Une application native apporte en effet une excellente expérience utilisateur, cependant, elle nécessite d’apprendre un langage particulier, très souvent différent d’une plateforme mobile à une autre. Déployer une application sur toutes les plateformes a donc un coût important. C’est ce point que viennent corriger les différents Framework Web mobiles dont vous avez déjà peut être entendu parler. Ils s’appellent jQuery Mobile, Sencha Touch, jQTouch, et il y a fort à parier qu’ils vont devenir de plus en plus utilisés.

Présentation de Sencha Touch

Prise en main de Sencha Touch - Sencha Touch

Sencha Touch a été le premier Framework mobile réalisé à l’aide de JavaScript et HTML5. Il permet de concevoir des applications web mobiles compatibles avec Android, BlackBerry et iOS qui ressemblent fortement à des applications natives. Vous vous en rendrez compte en visitant la page de démos de Sencha Touch.

Les outils nécessaires

Pour développer avec Sencha Touch, il n’existe pas réellement d’outils tout prêts qui vous complèteront le code. Personnellement, je travaille avec Textmate ou Coda sous Mac OS, et je suppose que j’utiliserais Notepad++ sous Windows. A noter qu’Aptana 3 commence à intégrer Sencha Touch nativement. Bref, c’est du développement web, alors vous avez le choix !

Détail du Framework

Pour obtenir le Framework, rendez-vous sur la page suivante : http://www.sencha.com/products/touch/download/

Un petit clic sur le bouton “Download” en bas (Open Source Version), et c’est parti pour 26Mo ! Vous le dézippez, et vous le placez dans votre environnement de développement.

Vous trouverez dans le Framework deux dossiers : “docs” et “examples”. Rassurez-vous ces deux dossiers très lourds (18Mo chacun), n’auront pas à être uploadés. Ils joueront par contre un rôle important dans votre apprentissage de Sencha Touch. Les nombreux autres fichiers et dossiers seront utiles pour vos futures applications.

Création d’un projet

Voici l’arborescence d’un projet simple.

Prise en main de Sencha Touch - Arborescence de Sencha Touch

Concrètement, vous aurez à créer 3 fichiers : index.html, script.js et style.css. Cela pourra vous servir de base pour vos premières applications.

Notre première application

Entrons enfin dans le vif du sujet ! Nous allons commencer par le classique “Hello World !”

Index.html

On va d’abord s’occuper de ce premier fichier. Voici le contenu à copier/coller :

[sourcecode language=”HTML”]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!– Titre de l’application –>
<title>Hello World</title>

<!– Inclusion des librairies –>
<script src="lib/sencha-touch.js" type="text/javascript"></script>

<!– Inclusion des styles –>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="lib/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />

<!– Inclusion des scripts –>
<script type="text/javascript" src="script.js"></script>

</head>
<body></body>
</html>
[/sourcecode]

Le code est commenté, il faut absolument garder cet ordre dans les inclusions de fichiers.

<script src="lib/sencha-touch.js" type="text/javascript"></script>

Grâce à cette balise script, on inclut le Framework qui est placé dans le dossier lib (se référer à l’arborescence de mon projet si ce n’est pas clair).

<link href="lib/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />

Cette balise link permet d’inclure le fichier CSS par défaut de Sencha Touch. Son fonctionnement étant complexe, on ne va pas s’attarder dessus pour l’instant.

Vous l’avez surement constaté, la balise <body> est vide. C’est tout à fait normal, puisque le site se construit à partir du fichier JavaScript. Vous comprendrez mieux tout à l’heure.

Passons maintenant au fichier Script.js.

Script.js

Ce fichier contient le code de l’application.

[sourcecode language=”Javascript”]
// Instance de l’application
HelloWorld = new Ext.Application({

// Nom de l’application
name: "Hello World",

// Une fois que la page est chargée, on la lance
launch: function()
{
new Ext.Panel({
fullscreen: true,
html:"Voici ma première application mobile sous Sencha Touch ! Merci le blog des nouvelles technologies !"
});
}
});
[/sourcecode]

Analysons le contenu de ce fichier.

HelloWorld = new Ext.Application({

On créé une nouvelle instance de la classe Application. Cette classe possède de nombreux attributs tels que le nom, l’icône, ou encore la fonction launch() utilisée ci-dessous.

[sourcecode language=”Javascript”]
name: "Hello World",
launch: function() {
[/sourcecode]

C’est au sein de cette fonction que nous allons créer notre application. Il ne manque plus qu’à ajouter du contenu.

[sourcecode language=”Javascript”]
new Ext.Panel({
fullscreen: true,
html:"Voici ma première application mobile sous Sencha Touch ! Merci le blog des nouvelles technologies !"
});
[/sourcecode]

On détaillera le fonctionnement du composant Panel dans le prochain tutoriel, retenez simplement qu’ils peuvent contenir d’autres composants, y compris d’autres Panels. Dans cette application, on utilise très peu d’options.

Vous pouvez faire des essais si vous le souhaitez, en changeant par exemple le contenu de l’option html. Tout code HTML y est accepté.

Résultat

Il est temps d’afficher le résultat ! Utilisez Chrome ou Safari pour tester, les autres navigateurs ne sont pas compatibles. Le mieux reste de tester directement sur son mobile. Pour cela vous aurez simplement à envoyer le contenu du projet sur votre FTP.

Personnellement, j’utilise l’application Mobilizer pour tester mes applications mobiles. L’avantage est que vous pourrez tester l’application sur plusieurs mobiles. Je vous conseille de visiter leur site et de télécharger l’application qui est gratuite.

Prise en main de Sencha Touch - Vue de l'application sur Mobilizer

Avant de se quitter, je voudrai aborder un dernier point. Je vous avais dit un peu plus tôt qu’il fallait laisser la balise <body> vide puisque c’était le Framework qui s’occupait de mettre en place le contenu. Pour s’en rendre compte, rendez-vous sur l’application à l’aide d’un navigateur, et affichez le code source.

Prise en main de Sencha Touch - Code source de l'application

Le contenu est bien présent !

[samples id=”5228″]

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

Prise en main de Sencha Touch

Conclusion

J’espère avoir été assez clair pour mon premier article. Si vous rencontrez un problème, n’hésitez pas à laisser un commentaire, me contacter sur Twitter ou par mail !

Le prochain tutoriel sera axé sur les Panels, composant principal de Sencha Touch.

En attendant, voici quelques liens qui pourront vous aider dans votre apprentissage de Sencha Touch :

Qu’avez-vous pensé de cette première introduction à Sencha Touch ? L’avez-vous déjà utilisé ? Quelle sont vos impressions sur ce Framework ?

Tags : developpeur websamplesSencha Touch
Florent Suc

The author 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 😉