Vous êtes sur la page 1sur 86

Dvelopper des applications pour BlackBerry OS

Par Guillaume.

www.siteduzero.com

Licence Creative Commons BY-NC-SA 2.0 Dernire mise jour le 29/08/2012

2/87

Sommaire
Sommaire ........................................................................................................................................... 2 Partager .............................................................................................................................................. 2 Dvelopper des applications pour BlackBerry OS ............................................................................. 4 Partie 1 : Les bases du dveloppement BlackBerry ............................................................................ 5
Un petit mot sur BlackBerry .............................................................................................................................................. 5
Introduction .................................................................................................................................................................................................................. 5 Les applications .......................................................................................................................................................................................................... 5 Le dveloppement ....................................................................................................................................................................................................... 6

Installation des outils de dveloppement .......................................................................................................................... 8


Installer le Java SE JDK .............................................................................................................................................................................................. 8 Tlchargement du JDK ............................................................................................................................................................................................. 8 Installation du JDK ...................................................................................................................................................................................................... 8 Eclipse et son plugin pour BlackBerry ....................................................................................................................................................................... 10 Tlchargement du plugin ......................................................................................................................................................................................... 11 Installation sous Windows ......................................................................................................................................................................................... 11 L'interface d'Eclipse ................................................................................................................................................................................................... 13

Votre premire application .............................................................................................................................................. 15


Cration du projet ...................................................................................................................................................................................................... Analyse du contenu ................................................................................................................................................................................................... La classe MyApp ....................................................................................................................................................................................................... La classe MyScreen .................................................................................................................................................................................................. Lancement de l'application ........................................................................................................................................................................................ 16 18 19 21 22

Partie 2 : Les interfaces graphiques .................................................................................................. 26


La constitution des vues .................................................................................................................................................. 26
Introduction ................................................................................................................................................................................................................ 26 Les classes fondamentales ....................................................................................................................................................................................... 27 Les Fields .................................................................................................................................................................................................................. 27 Les Managers ............................................................................................................................................................................................................ 27 Les Screens .............................................................................................................................................................................................................. 28 Les diffrentes techniques ........................................................................................................................................................................................ 29 Utilisation de composants prdfinis ......................................................................................................................................................................... 29 Les vues personnalises ........................................................................................................................................................................................... 29

Les composants de base ................................................................................................................................................ 31


Les champs de texte ................................................................................................................................................................................................. 31 Introduction ................................................................................................................................................................................................................ 31 Afficher du texte ........................................................................................................................................................................................................ 31 Les autres champs de texte ...................................................................................................................................................................................... 34 Les boutons ............................................................................................................................................................................................................... 36 Les boutons classiques ............................................................................................................................................................................................. 36 Les boutons droulants ............................................................................................................................................................................................. 38 Les images ................................................................................................................................................................................................................ 39 Prparation des images ............................................................................................................................................................................................ 39 Chargement des images ........................................................................................................................................................................................... 40 Affichage d'images .................................................................................................................................................................................................... 41

Un peu d'ordre avec les conteneurs ............................................................................................................................... 42


Le principe des conteneurs ....................................................................................................................................................................................... 43 Introduction ................................................................................................................................................................................................................ 43 Le principe de hirarchie ........................................................................................................................................................................................... 43 Les diffrents conteneurs .......................................................................................................................................................................................... 44 Les conteneurs .......................................................................................................................................................................................................... 44 Quelques proprits .................................................................................................................................................................................................. 47 Un album photo ......................................................................................................................................................................................................... 49 Version avec boutons ................................................................................................................................................................................................ 50 Version avec miniatures ............................................................................................................................................................................................ 53

La gestion des vnements ............................................................................................................................................ 55


Les vnements de boutons ..................................................................................................................................................................................... La thorie .................................................................................................................................................................................................................. La gestion des boutons de l'album photo .................................................................................................................................................................. Les vnements "tactiles" ......................................................................................................................................................................................... La thorie .................................................................................................................................................................................................................. La gestion des miniatures de l'album photo .............................................................................................................................................................. Un peu plus loin... ..................................................................................................................................................................................................... 56 56 56 58 58 59 61

Les vues personnalises ................................................................................................................................................. 63


La structure de base .................................................................................................................................................................................................. 63 Insrer des contours .................................................................................................................................................................................................. 66 Les bases .................................................................................................................................................................................................................. 66 Les formes elliptiques ............................................................................................................................................................................................... 66 Les rectangles ........................................................................................................................................................................................................... 67 Quelques plus ........................................................................................................................................................................................................... 68 Insrer des remplissages .......................................................................................................................................................................................... 68 Les essentiels ........................................................................................................................................................................................................... 68 Un peu de couleur ..................................................................................................................................................................................................... 70 Les images ................................................................................................................................................................................................................ 70

www.siteduzero.com

Sommaire

3/87

TP : un taquin .................................................................................................................................................................. 71
Le cahier des charges ............................................................................................................................................................................................... 72 Spcifications du projet ............................................................................................................................................................................................. 72 Avant de commencer ................................................................................................................................................................................................ 72 La correction .............................................................................................................................................................................................................. 73 La classe MonApp ..................................................................................................................................................................................................... 73 La classe MonDessin ................................................................................................................................................................................................ 74 La classe Vignette ..................................................................................................................................................................................................... 76 La classe Partie ......................................................................................................................................................................................................... 77 La classe Mouvement ............................................................................................................................................................................................... 79 Les explications ......................................................................................................................................................................................................... 80 La structure du jeu ..................................................................................................................................................................................................... 80 Le traage l'cran ................................................................................................................................................................................................... 84

www.siteduzero.com

Sommaire

4/87

Dvelopper des applications pour BlackBerry OS

Par

Guillaume.

Mise jour : 07/06/2012 Difficult : Intermdiaire

Dure d'tude : 3 mois

3 842 visites depuis 7 jours, class 41/792

Vous avez envie d'apprendre dvelopper des applications pour BlackBerry ?


Mais vous ne trouvez aucun cours qui vous explique comment procder ? Bienvenue dans un cours qui va justement vous apprendre dvelopper pas pas des applications pour BlackBerry OS ! V ous remarquerez qu'il est relativement facile de se procurer des ouvrages et tutoriels qui traitent du dveloppement d'applications pour iPhone ou smartphones Android. En revanche sous BlackBerry OS, il est beaucoup plus difficile de trouver des cours la fois complets et progressifs. Dans ce cours, nous essaierons donc de progresser petit petit pour vous permettre de raliser les applications de vos rves. qui ce cours s'adresse-t-il ? Ce cours s'adresse aux initis en Java, vous ne pourrez pas suivre ce cours si vous tes dbutant en programmation. Aucune connaissance supplmentaire n'est exige : vous pouvez tout fait raliser des applications sans connatre quoi que ce soit sur les requtes SQL par exemple, tout dpend du type d'applications que vous souhaitez dvelopper. Enfin, sachez qu'il ne vous est pas demand de possder un smartphone BlackBerry pour suivre ce cours. En effet, il n'est pas indispensable de possder un tel appareil pour pouvoir dvelopper, tester et publier ses applications. Tout au long du tutoriel, nous essaierons de mettre en pratique les diverses notions qui auront t mises en vidence. Nous essaierons au cours de ces travaux pratiques de raliser des applications intressantes et varies. Je vous laisse dcouvrir le genre d'applications que nous dvelopperons dans ce cours :

Je vous invite donc sans plus attendre, vous lancer dans cet apprentissage !

www.siteduzero.com

Dvelopper des applications pour BlackBerry OS

5/87

Partie 1 : Les bases du dveloppement BlackBerry


Au cours de cette partie, nous dcouvrirons petit petit les bases ncessaires la programmation d'applications pour BlackBerry OS, le systme d'exploitation utilis sur les clbres smartphones.

Un petit mot sur BlackBerry


Dans ce chapitre, nous ferons une brve introduction l'univers BlackBerry. Nous parlerons des smartphones du mme nom ainsi que de la compagnie qui en est l'origine. Nous verrons galement les diffrents moyens de dveloppement d'applications pour leur systme d'exploitation BlackBerry OS . Ds le prochain chapitre, nous mettrons en place les outils ncessaires au dveloppement de ces applications. La lecture de ce cours suppose que vous avez dj quelques connaissances en programmation. C'est pourquoi nous ne reviendrons pas sur des notions de base de l'informatique telles que la dfinition d'un systme d'exploitation ou encore sur la signification d'un langage de programmation.

Introduction

BlackBerry est la base une ligne de smartphones dveloppe par la socit canadienne Research In Motion (RIM). Cette compagnie a t fonde en 1984 par Mike Lazaridis. Son sige social est Waterloo en Ontario mais la firme possde des bureaux en Europe, en Asie et en Amrique du Nord. Elle est l'heure actuelle compose de plus de 13 000 collaborateurs pour un chiffre d'affaires d'environ 16 milliards de $ en 2011. C'est en 1999 qu'elle a commercialis le premier BlackBerry. Pour plus d'informations, consultez leur site web l'adresse www.rim.com. Les smartphones BlackBerry sont rputs pour leur service de messages et courriels en temps rel. Ces tlphones utilisent le systme d'exploitation propritaire BlackBerry OS . Il existe de nos jours, prs d'une vingtaine de modles diffrents de smartphones BlackBerry, et environ 50 millions d'utilisateurs travers le monde. Depuis peu, la compagnie canadienne a dvelopp sa premire tablette nomme BlackBerry PlayBook . Nanmoins, cette tablette ne fonctionne pas sur le mme systme d'exploitation que les smartphones. Celui-ci est nomm BlackBerry Tablet OS .

Les applications
Dans ce cours nous apprendrons pas pas, raliser des applications fonctionnant sous BlackBerry OS. Mais avant de se lancer dans plus de dtails sur la manire de les dvelopper, nous verrons un peu ce qu'il est possible de raliser. Une application c'est quoi ?

Pour apprhender la notion d'applications, nous allons faire une analogie avec les ordinateurs. Windows 7, par exemple, est un systme d'exploitation. Celui-ci possde beaucoup de fonctionnalits intgres, mais il n'est pas rare qu'on ait besoin d'encore

www.siteduzero.com

Partie 1 : Les bases du dveloppement BlackBerry


plus. Pour cela, nous installons des programmes supplmentaires pour augmenter les fonctionnalits de notre ordinateur. V une liste de programmes ou logiciels : oici Word : logiciel de traitement de texte Photoshop : logiciel de retouche d'images Blender : logiciel d'infographie 3D Eclipse : IDE pour crire du code

6/87

Le systme d'exploitation BlackBerry fonctionne sur le mme principe. Cependant ici on va parler d'applications. On retrouvera des applications diverses qui servent un tas de trucs. V une liste d'applications : oici Navigateur Web : application pour naviguer sur Internet Calculatrice : la calculatrice intgre BlackBerry OS est aussi une application Monopoly : le clbre jeu de socit disponible sur BlackBerry App World Quelques applications sont prsentes dans le tableau ci-dessous : Navigateur Web Monopoly Fruit Ninja

Les outils mis disposition par RIM nous permettent de crer des applications de toutes sortes. Nous pourrons y intgrer de belles interfaces en utilisant des composants proposs (boutons, menus, etc.), mais galement des interfaces graphiques entirement personnalises avec des images ou encore utiliser la 3D. Nous aurons aussi tous les outils ncessaires pour par exemple crire des fichiers dans le terminal ou encore avoir accs aux services de localisation.

Avoir de belles interfaces graphiques est toujours agrable dans une application. La ralisation de telles interfaces demande du travail ! Cependant, beaucoup d'entre vous souhaiteront raliser des jeux aux graphismes sensationnels. Nous tudierons donc un maximum d'outils permettant la cration d'interfaces complexes, qui rpondront vos besoins. La ralisation d'interfaces graphiques peut ncessiter l'utilisation de logiciels de graphisme tels que Photoshop ou encore Blender, qui ne sont pas l'objet de ce cours. V ous trouverez sur le Site du Zro des tutoriels correspondant ces logiciels.

Le dveloppement
La compagnie Research In Motion propose tout un tas d'outils pour raliser vos applications sur BlackBerry OS et BlackBerry Tablet OS. Le dveloppement d'applications peut tre ralis dans diffrents langages de programmation. V oici tout ce que la socit nous propose :

www.siteduzero.com

Partie 1 : Les bases du dveloppement BlackBerry


V les possibilits de dveloppement : oici

7/87

Adobe AIR : Il est possible de raliser des applications l'aide des outils de dveloppement Adobe Flex, AIR et Flash. Si vous tes intresss, Programmez en Actionscript 3 grce au tutoriel du Site du Zro. C/C++ : Grce au dveloppement en C/C++, il est possible de crer des applications de hautes performances et d'intgrer des bibliothques open source telles que Qt ou OpenAL. Android : BlackBerry Tablet OS intgre une machine virtuelle qui permet d'excuter des applications Android. HTML5 : Grce au BlackBerry WebWorks, vous pouvez dvelopper des applications compatibles sur smartphones et tablettes. Java : En utilisant un plugin pour le clbre IDE nomm Eclipse, vous pourrez raliser des applications en Java. En ce qui concerne BlackBerry OS, le dveloppement peut tre ralis uniquement en Java ou en HTML5. Dans notre cas, nous programmerons nos applications en Java tout au long du cours. Ds le prochain chapitre, nous commencerons nous quiper des outils ncessaires au dveloppement BlackBerry en Java.

Dans ce cours, nous raliserons des applications pour BlackBerry en Java. Pour suivre ce cours, il est donc requis de connatre les bases du Java et de la Programmation Oriente Objet. Pour cela, veuillez suivre au moins les parties I et II du cours sur Java propos par le Site du Zro. Nous voil arrivs au bout de ce chapitre d'introduction dont l'objectif tait de prsenter les diffrentes manires de raliser des applications. Dans le prochain chapitre, nous installerons les outils ncessaires au dveloppement d'applications pour BlackBerry OS en Java. Les autres moyens de dveloppement d'applications ne seront pas traits dans ce cours.

www.siteduzero.com

Partie 1 : Les bases du dveloppement BlackBerry

8/87

Installation des outils de dveloppement


Pour raliser des applications pour BlackBerry, nous aurons besoin de diffrents outils. L'Environnement de Dveloppement Intgr (ou IDE) conseill pour le dveloppement d'application BlackBerry en Java est Eclipse. Cet environnement de dveloppement est libre, gratuit et multi-plateforme. Nous installerons donc le Plugin Java BlackBerry pour Eclipse. Dans ce chapitre, nous dtaillerons toutes les tapes d'installation pas pas pour ne perdre personne. Une fois termin, nous aurons alors tout ce qu'il faut pour crire nos applications, les compiler et les tester travers un simulateur. Pour ceux qui ne connatraient pas l'environnement de dveloppement, nous prsenterons rapidement son interface. Les outils de dveloppement Java BlackBerry fournis par RIM sont disponibles uniquement sous Windows et Mac.

Installer le Java SE JDK


Si vous possdez dj Java SE JDK 6 update 14 ou une version ultrieure sur votre machine, vous pouvez passer directement au tlchargement des outils BlackBerry et de l'IDE Eclipse au paragraphe suivant.

Tlchargement du JDK
Les programmes crits en Java ont la particularit d'tre portables, c'est--dire qu'ils peuvent fonctionner sur diffrents systmes d'exploitation. Ceci vient du fait que les programmes Java sont compils en Byte Code et vont s'excuter sur une machine virtuelle. Cette machine virtuelle est appele JRE (ou Java Runtime Environment). Nous en aurons besoin car Eclipse est luimme principalement crit en Java. tant donn que les applications BlackBerry sont crites en Java, nous aurons aussi besoin du JDK (ou Java Development Kit) qui intgre les outils pour dvelopper et compiler du Java. Notez que le JRE est inclus dans le JDK. Pour tlcharger la dernire version du JDK, rendez-vous sur le site d'Oracle la page suivante. Cliquez alors sur le bouton Download du JDK pour passer l'tape suivante.

Avant de lancer le tlchargement vous devrez accepter la licence en cliquant sur la case cocher Accept License Agreement, et spcifier votre systme d'exploitation dans la liste propose. Enfin, slectionnez l'emplacement et enregistrez le fichier d'installation sur votre disque dur.

Installation du JDK
www.siteduzero.com

Partie 1 : Les bases du dveloppement BlackBerry

9/87

Pour lancer l'installation, double-cliquez sur le fichier d'installation tlcharg prcdemment, puis suivez les tapes ci-dessous. Pour ma part, j'ai cr un dossier BlackBerry, qui contiendra toutes les installations que nous allons raliser. Je vous conseille vivement de faire la mme chose pour viter d'en semer de partout.

tape 1 sur 4 : Cliquez sur Next>.

tape 2 sur 4 : Spcifiez le dossier d'installation et cliquez sur Next>.

www.siteduzero.com

Partie 1 : Les bases du dveloppement BlackBerry

10/87

tape 3 sur 4 : Patientez pendant la dure d'installation.

tape 4 sur 4 : Terminez l'installation en cliquant sur Continue. Le JDK est maintenant install. Nous allons pouvoir installer notre environnement de dveloppement, ainsi que le plugin Java BlackBerry.

Eclipse et son plugin pour BlackBerry


Eclipse est un IDE qui a t dvelopp pour faciliter l'ajout de plugins. Il est la base configur pour crire des programmes en Java, mais il est possible de lui ajouter des modules d'extension pour apporter de nouvelles fonctionnalits au logiciel. Il faut alors tlcharger individuellement les plugins dsirs et les installer.

www.siteduzero.com

Partie 1 : Les bases du dveloppement BlackBerry

11/87

Le dveloppement d'applications BlackBerry sous Eclipse IDE ncessite l'ajout d'un plugin. Cependant, Research In Motion propose un kit d'installation qui intgre dj l'IDE, le plugin ainsi que toutes les bibliothques de classes. Grce lui, une seule installation est suffisante pour avoir un IDE configur et prt l'emploi.

Tlchargement du plugin
Pour tlcharger Eclipse et son plugin Java BlackBerry intgr, nous devons nous rendre sur leur site l'adresse www.blackberry.com/developers/java, puis suivre les tapes suivantes :

tape 1 sur 2 : Dans la rubrique Development tools and downloads, slectionnez votre systme d'exploitation.

tape 2 sur 2 : Cliquez sur Download. Une fois le tlchargement termin, vous devriez donc avoir un fichier excutable si vous tes sous Windows, ou une archive Zip si vous tes sous Mac. Dans la suite, je dtaillerai les tapes d'installation de l'IDE sous Windows. Je laisse le soin aux initis Mac de dcompresser leur archive et de mettre en place leur IDE.

Installation sous Windows


Double-cliquez sur le fichier excutable pour dmarrer l'installation. Une fois celle-ci termine, nous aurons alors notre environnement de dveloppement Eclipse qui intgre dj le plugin Java BlackBerry. Les tapes suivre durant la procdure d'installation sont dtailles ci-dessous.

www.siteduzero.com

Partie 1 : Les bases du dveloppement BlackBerry

12/87

tapes 1 4 sur 7 : Choisissez les diffrentes options que vous souhaitez.

tape 5 sur 7 : Vrifiez les informations puis cliquez sur Install.

www.siteduzero.com

Partie 1 : Les bases du dveloppement BlackBerry

13/87

tape 6 sur 7 : Patientez pendant l'installation...

tape 7 sur 7 : Cochez la case Start Eclipse Java Plug-in puis cliquez sur Done pour dmarrer Eclipse.

www.siteduzero.com

Partie 1 : Les bases du dveloppement BlackBerry

14/87

L'interface d'Eclipse
Nous avons maintenant tous les outils ncessaires au dveloppement d'applications BlackBerry. Ds le prochain chapitre, nous commencerons crire nos premires lignes de code. Mais avant cela, nous allons faire un petit tour d'horizon de l'interface d'Eclipse. En effet, il se peut que certains d'entre vous n'aient pas l'habitude de programmer avec Eclipse. Normalement, vous devriez dj avoir ouvert Eclipse aprs l'installation, mais vous pouvez galement lancer l'environnement de dveloppement en double-cliquant sur eclipse.exe dans le dossier d'installation du logiciel. Nous ne ferons ici qu'un rapide tour de l'interface, nous ne verrons donc pas l'intgralit des fonctionnalits du logiciel. Mais je vous conseille grandement de fouiller dans les recoins de l'IDE. V donc ce qui apparat au lancement du logiciel : oici

Dans le Workspace Launcher, il vous est demand de renseigner le dossier de destination de l'ensemble de vos projets. Si vous souhaitez conserver le mme dossier pour tous vos projets, vous pouvez cocher la case Use this as default and do not ask again puis cliquer sur le bouton OK. Nous voil enfin dans notre environnement de dveloppement. Celui-ci est divis en plusieurs zones dcoupes dans la figure ci-dessous.

www.siteduzero.com

Partie 1 : Les bases du dveloppement BlackBerry

15/87

V une liste des fonctionnalits correspondant aux encadrs ci-dessus : oici Tout d'abord en haut, dans l'encadr violet, nous avons la barre de navigation. Nous y retrouvons les commandes les plus courantes prsentes dans les diffrents menus au-dessus. Notamment, nous pouvons crer un nouveau projet, l'enregistrer, ou encore l'excuter travers un simulateur. Ces commandes sont rgulirement utilises, et possdent pour la plupart des raccourcis clavier. V ous trouverez ces raccourcis dans les menus correspondants. gauche, dans l'encadr vert, nous avons un explorateur de projet. Nous y trouverons les diffrents dossiers des projets ainsi que leurs contenus : codes sources, images, etc. Au centre, dans l'encadr rouge, nous avons un diteur de code source. C'est ici que nous crirons nos diffrentes classes du projet. droite, dans l'encadr orange, nous retrouverons une liste des attributs et mthodes prsents dans la classe en cours d'dition. Enfin dans l'encadr bleu, en bas, nous avons principalement la console de sortie des programmes ainsi qu'une liste des erreurs ventuelles de vos programmes. Nous voil donc fin prts pour nous lancer dans la programmation pour BlackBerry. Dans le prochain chapitre, nous crerons notre premier projet. Nous verrons la structure et les bases d'un projet BlackBerry.

www.siteduzero.com

Partie 1 : Les bases du dveloppement BlackBerry

16/87

Votre premire application


La cration du premier projet est une tape importante dans l'apprentissage de la programmation. C'est en gnral l'occasion de se familiariser avec son environnement de dveloppement et avec les bases du langage utilis. Ce chapitre n'est pas destin raliser une application complexe, nous aurons tout le temps pour perfectionner nos applications plus tard. Dans ce chapitre, nous allons : Crer notre premier projet BlackBerry dans Eclipse Analyser le contenu du projet et le code source de base d'une application Lancer notre application dans un simulateur Au cours de ce chapitre, il ne vous est pas demand de comprendre toutes les subtilits du code. Tout deviendra plus clair au fur et mesure, la lecture des chapitres.

Cration du projet
Maintenant que nous avons un environnement de dveloppement configur, nous allons pouvoir crer notre premier projet. Nous verrons quels sont les diffrents paramtres qui le dfinissent. Puis nous dcortiquerons son contenu en termes de fichiers et de code source. Lanons-nous donc dans la cration du nouveau projet. Pour cela, suivez les tapes suivantes :

tape 1 sur 2 : Cliquez sur File > New puis sur BlackBerry Project. Il est galement possible de crer un nouveau projet en cliquant sur l'icne New BlackBerry Project de la barre de navigation. Il s'agit du bouton de gauche prsent sur l'image ci-dessous.

Pour voir quoi correspondent les boutons de la barre de navigation, il suffit de survoler les icnes avec la souris pour faire apparatre la lgende.

www.siteduzero.com

Partie 1 : Les bases du dveloppement BlackBerry

17/87

tape 2 sur 2 : Dans le champ Project name, entrez le nom du projet : "Hello World" puis cliquez sur Finish. Grce cette interface, nous pouvons crer un projet de plusieurs manires. Nous allons nous attarder un peu sur les diffrents champs. Dans Project name nous devons renseigner le nom du projet. Il ne s'agit pas forcment du nom dfinitif de l'application, mais uniquement du nom du projet dans Eclipse. Dans Contents nous avons deux possibilits : crer un nouveau projet partir de rien ou importer des sources existantes. Enfin dans JRE est spcifie la version du JRE BlackBerry avec laquelle nous crerons le projet. Il se peut que vous deviez redmarrer Eclipse pour que celui-ci reconfigure l'espace de travail. V ous aurez alors le message suivant :

www.siteduzero.com

Partie 1 : Les bases du dveloppement BlackBerry

18/87

Une fois le projet cr, vous devriez normalement le voir apparatre dans l'onglet Package Explorer avec le nom que vous avez choisi. Nous tudierons son contenu dans le paragraphe suivant, mme si celui-ci est trs proche d'un projet Eclipse quelconque. Au centre de l'IDE est ouvert le fichier XML de description de l'application. Nous reviendrons sur ce type de fichier plus tard, et nous tudierons les diffrents champs qui le composent. L'environnement de dveloppement devrait donc ressembler ceci :

Analyse du contenu
Dans ce paragraphe, nous tudierons le contenu de notre projet. En premier lieu, nous allons analyser son arborescence dans l'onglet Package Explorer. Pour cela, droulez les diffrents dossiers en cliquant sur la petite flche gauche de ceux-ci.

www.siteduzero.com

Partie 1 : Les bases du dveloppement BlackBerry

19/87

V donc les deux dossiers principaux que nous trouvons dans le projet : oici src : Il s'agit du dossier source, qui contiendra le code source crit avec diffrentes classes ranges en package. Nous avons pour l'instant deux classes nommes MyApp et MyScreen, dont nous tudierons le contenu juste aprs. res : Dans ce rpertoire, nous mettrons l'ensemble de nos ressources. Actuellement, il ne contient qu'une seule ressource, qui est une image. Il s'agit de l'icne de notre application telle qu'elle apparatra sur le smartphone. Si vous visualisez le fichier icon.png, vous devriez voir cette image :

Maintenant nous allons tudier le code source de ce projet de base. Nous verrons alors le code minimal requis pour lancer une application dans BlackBerry OS.

La classe MyApp
Je vous propose d'ouvrir le fichier MyApp.java dans l'diteur de code en double-cliquant dessus. Code : Java - MyApp.java package mypackage; import net.rim.device.api.ui.UiApplication; /** * This class extends the UiApplication class, providing a * graphical user interface. */ public class MyApp extends UiApplication { /** * Entry point for application * @param args Command line arguments (not used) */ public static void main(String[] args) { // Create a new instance of the application and make the currently // running thread the application's event dispatch thread. MyApp theApp = new MyApp(); theApp.enterEventDispatcher(); } /** * Creates a new MyApp object */

www.siteduzero.com

Partie 1 : Les bases du dveloppement BlackBerry


public MyApp() { // Push a screen onto the UI stack for rendering. pushScreen(new MyScreen()); }

20/87

Pour comprendre ce code, nous l'analyserons ligne par ligne. Tout d'abord, nous dclarons que notre programme se situe dans le package mypackage. Code : Java package mypackage;

Pour crer une interface utilisateur (ou UI), nous devons crer une classe qui hrite de la classe UiApplication. Nous pourrons ainsi afficher des choses l'cran et interagir avec l'utilisateur. V donc le code correspondant : oici Code : Java public class MyApp extends UiApplication { ... }

Pour pouvoir utiliser la classe UiApplication, nous devons l'importer. Celle-ci se trouve dans le package net.rim.device.api.ui. Pour importer cette classe, il nous faudra crire la ligne de code suivante : Code : Java import net.rim.device.api.ui.UiApplication;

Le point d'entre de l'application est la mthode main. l'intrieur de celle-ci, nous devrons crer une instance de notre application MyApp. Au lancement de l'application, un Thread (ou pile d'excution) sera lanc. Ce dernier fera appel la mthode enterEventDispatcher et deviendra l'event-dispatching Thread . Ce qu'il faut comprendre, c'est que nous pourrons ainsi dessiner l'cran et grer les vnements. Tout ceci est peut-tre un peu vague pour l'instant, mais nous reviendrons sur ces notions dans la partie suivante. En attendant, utilisez la mthode main telle qu'elle vous est propose : Code : Java public static void main(String[] args) { MyApp theApp = new MyApp(); theApp.enterEventDispatcher(); }

Enfin pour finir, nous devons crer un constructeur notre classe MyApp. Dans ce constructeur, nous allons tout simplement afficher un cran dfini par une nouvelle classe MyScreen, crite dans le fichier MyScreen.java. V le code correspondant : oici Code : Java public MyApp() { pushScreen(new MyScreen()); }

www.siteduzero.com

Partie 1 : Les bases du dveloppement BlackBerry

21/87

Cependant avant de la "pousser" sur l'cran avec la mthode pushScreen, l'interface devra avoir t totalement dfinie. Il faudra donc la dcrire entirement l'intrieur du constructeur de la classe MyScreen.

La classe MyScreen
Nous allons dtailler maintenant le fichier MyScreen.java qui va nous servir dcrire notre interface affiche l'cran. Celui-ci se situe galement dans le package mypackage. V le code complet de cette classe : oici Code : Java - MyScreen.java package mypackage; import net.rim.device.api.ui.container.MainScreen; /** * A class extending the MainScreen class, which provides default standard * behavior for BlackBerry GUI applications. */ public final class MyScreen extends MainScreen { /** * Creates a new MyScreen object */ public MyScreen() { // Set the displayed title of the screen setTitle("MyTitle"); } }

Pour crer des interfaces, notre classe MyScreen doit hriter de la classe MainScreen. Celle-ci doit tre importe du package net.rim.device.api.ui.container. V le code correspondant : oici Code : Java package mypackage; import net.rim.device.api.ui.container.MainScreen; public final class MyScreen extends MainScreen { ... }

Comme nous l'avons dit prcdemment, l'ensemble de l'interface doit tre dfini dans le constructeur de la classe MyScreen. Cette dernire contiendra donc uniquement son constructeur que voici : Code : Java public MyScreen() { setTitle("MyTitle"); }

Actuellement, l'application se contente uniquement d'afficher son titre : "MyTitle". Nous pourrions peut-tre essayer de faire un peu mieux en ajoutant un petit texte de bienvenue. V donc le constructeur que je vous propose : oici

www.siteduzero.com

Partie 1 : Les bases du dveloppement BlackBerry


Code : Java public MyScreen() { setTitle("Site du Zro"); add(new RichTextField("Salut les zros!")); }

22/87

Il ne faudra pas oublier d'importer la classe RichTextField. Je vous propose donc le code complet de la classe modifie : Code : Java package mypackage; import net.rim.device.api.ui.component.RichTextField; import net.rim.device.api.ui.container.MainScreen; public final class MyScreen extends MainScreen { public MyScreen() { setTitle("Site du Zro"); add(new RichTextField("Salut les zros!")); } }

Lancement de l'application
Maintenant que notre projet est prt, nous allons pouvoir le tester. Il est bien entendu possible de le faire sur un appareil physique, cependant il n'est pas ncessaire de possder un smartphone BlackBerry pour lancer ses applications. Dans ce cours nous utiliserons un simulateur ou mulateur. Pour lancer votre application dans le simulateur BlackBerry, suivez les instructions ci-dessous :

tape 1 sur 4 : Cliquez sur Run > Run As > BlackBerry Simulator .

tape 2 sur 4 : Patientez le temps que l'OS dmarre. V ous l'aurez srement remarqu, mais le simulateur met un certain temps dmarrer. C'est pourquoi, si vous avez

www.siteduzero.com

Partie 1 : Les bases du dveloppement BlackBerry

23/87

plusieurs tests raliser, il peut tre prfrable de laisser le simulateur en marche. Ainsi vous ferez l'conomie du temps de dmarrage du systme d'exploitation.

tape 3 sur 4 : Une fois dmarr, allez dans la catgorie Downloads prsente ci-dessous.

tape 4 sur 4 : Dans Downloads, cliquez sur l'icne de votre application. V ous l'aurez remarqu, l'icne de votre application correspond l'image icon.png du rpertoire res prsente plus haut. Aprs avoir cliqu sur votre application dans le dossier Downloads, celle-ci devrait se lancer dans votre simulateur. V oici ce que vous devriez avoir sur l'cran :

www.siteduzero.com

Partie 1 : Les bases du dveloppement BlackBerry

24/87

Le simulateur BlackBerry possde un certain nombre de paramtres et l'mulateur peut avoir des apparences diverses suivant la version de votre plugin BlackBerry. Nous ne dtaillerons pas la manire d'utiliser le simulateur, je pense que vous devriez tre capable de vous en sortir tout seul. Naviguez dans les diffrents menus, et vous verrez l'ensemble des possibilits du simulateur BlackBerry. Maintenant que nous avons vu le code minimal ncessaire, nous allons pouvoir le modifier et ajouter de nouvelles fonctionnalits notre application. Ainsi nos projets vont commencer prendre forme petit petit.

www.siteduzero.com

Partie 1 : Les bases du dveloppement BlackBerry


Au programme dans la prochaine partie, nous verrons comment raliser de belles interfaces graphiques partir d'objets prconus ou partir de nos propres graphismes personnaliss.

25/87

Maintenant que nous avons acquis les bases, nous allons pouvoir nous lancer dans la conception d'applications beaucoup plus passionnantes.

www.siteduzero.com

Partie 1 : Les bases du dveloppement BlackBerry

26/87

Partie 2 : Les interfaces graphiques


Dans cette partie nous apprendrons raliser des interfaces graphiques, c'est--dire comment afficher diffrents lments l'cran.

La constitution des vues


Nous voici arrivs dans le premier chapitre de la partie portant sur les UI pour User Interface ou interface utilisateur. Nous allons tout au long de cette partie dcouvrir comment afficher des objets sur l'cran et ainsi pouvoir crer des applications correspondant visuellement vos attentes. Pour dmarrer en douceur dans ce chapitre, nous allons dcouvrir les principes de base des interfaces utilisateur. Sans plus attendre, dmarrons cette partie passionnante !

Introduction
Comme promis nous allons dmarrer en douceur cette partie. Au cours de ce chapitre nous n'entrerons pas vraiment dans les lignes de code, mais nous verrons plutt les grands principes de cration d'interfaces graphiques. Lorsque nous crons des applications, une grosse partie du dveloppement peut tre tourne vers le graphisme. Principalement dans les jeux, vous aurez besoin de crer une interface graphique complexe que l'utilisateur aura l'cran. Suivant le type d'applications, ces interfaces seront diffrentes et pourront tre ralises de diffrentes faons. Pour illustrer tout ce qui vient d'tre dit, voici quelques exemples d'interfaces graphiques :

Notez les diffrences de contenu de ces diffrentes applications. La premire est une calculatrice, vous constaterez qu'elle est principalement constitue d'un "affichage numrique" ainsi que de boutons. Cette interface graphique a t conue l'aide de composants prdfinis, ce qui facilite la cration de telles interfaces. Nous retrouvons parmi ces composants des boutons, des champs de texte, des listes et pleins d'autres ; nous y reviendrons ! Juste ct le menu des rglages intgre galement des composants de base comme des champs de texte, des images et diffrents types de boutons.

www.siteduzero.com

Partie 2 : Les interfaces graphiques

27/87

Enfin les deux derniers sont des jeux, vous remarquerez que ces interfaces sont "dessines", principalement l'aide d'images. Ainsi chaque style d'interface graphique est ralis avec une technique spcifique, que nous verrons avant la fin de ce chapitre.

Les classes fondamentales


Nous allons prsent voir les diffrentes classes la base de tous les composants graphiques. Celles-ci sont contenues dans le package net.rim.device.api.ui. En particulier nous verrons les trois classes prsentes ci-dessous. Tout ce que nous verrons par la suite dcoule de ces classes par hritage : Field Manager Screen Commenons tout de suite par la premire : la classe Field.

Les Fields
La classe Field est la classe fondamentale de tout composant graphique d'une application. En effet tous les composants graphiques tels que les boutons, les champs de texte ou autres hritent de cette classe. Nous pourrions voir ceci comme une zone rectangulaire traable l'cran l'intrieur de ce que nous appelons des conteneurs. La classe Field est une classe abstraite, dans le sens o elle ne peut pas tre utilise directement. En gnral, il est prfrable d'utiliser les composants prdfinis qui hritent de cette classe. Toutefois, il peut tre envisageable de crer un composant personnalis en crant une nouvelle classe hritant de la classe Field. Comme cela vient d'tre dit, nous utiliserons donc jamais en pratique cette classe telle quelle. En revanche, ce qu'il intressant de noter c'est que tous les lments graphiques sont donc des classes filles de cette classe Field. Celles-ci hriteront donc de toutes ses proprits et mthodes. Ainsi nous pourrons par exemple utiliser les proprits FIELD_LEFT , FIELD_HCENTER ou FIELD_RIGHT pour positionner l'objet l'cran. Bien videmment nous ne dtaillerons pas ici toutes les proprits et mthodes de cette classe. Notez cependant les mthodes getHeight et getWidth qui permettent de rcuprer la largeur et la hauteur de l'objet Field. Je pense en avoir assez dit sur cette classe, nous allons donc prsent nous intresser aux classes Manager et Screen qui ellesmmes hritent de la classe Field.

Les Managers
Grce la classe Field, nous avons pu mettre en vidence les bases de tout composant graphique. Ceux-ci peuvent tre des champs de texte, de saisie de texte ou encore des boutons, d'ailleurs le prochain chapitre vous introduira les composants les plus utiliss. Ces composants sont indispensables pour crer des vues mais ne suffisent pas. C'est l qu'entrent en jeu les Managers ou conteneurs. Comme son nom l'indique, un conteneur sert contenir d'autres lments, c'est--dire des composants mais galement d'autres conteneurs. Nous aurons galement le temps de revenir sur le concept de conteneur dans un chapitre qui leur est ddi. En attendant, sachez que ces conteneurs permettent de mettre en place les diffrents composants l'cran tels que vous pouvez le voir sur cette application que vous connaissez trs certainement :

www.siteduzero.com

Partie 2 : Les interfaces graphiques

28/87

L'application Facebook Pour ceux qui auraient dj ralis de la programmation d'interfaces graphiques en Java, sachez que le principe est ici exactement le mme. Les objets graphiques que nous verrons sont trs similaires ceux utiliss en Java. Nous retrouverons donc les mmes composants basiques, cependant ceux-ci peuvent avoir un nom lgrement diffrent.

Les Screens
Enfin pour finir sur le ct "technique" de ce chapitre, nous allons tudier la classe Screen ainsi que des classes hritant de celle-ci. Il s'agit de llment principal de l'affichage, c'est--dire que c'est lui qui englobe l'ensemble des lments tracer. D'ailleurs il s'agit d'une classe fille de la classe Manager vue prcdemment ; en effet puisqu'elle sert de conteneur pour l'ensemble des lments. Pour vous prouver que cette classe Screen est la base de tout affichage, sachez que nous l'avons dj utilis. Effectivement, si vous regardez bien nos codes prcdents, vous verrez apparatre une classe fille de celle-ci qui se nomme MainScreen : Code : Java /** * A class extending the MainScreen class, which provides default standard * behavior for BlackBerry GUI applications. */ public final class MyScreen extends MainScreen { public MyScreen() { } }

Comme nous venons de le voir, il existe diffrentes classes pour crer un cran. V les trois principales : MainScreen hritant oici de la classe FullScreen elle-mme hritant de la classe Screen. Celles-ci se distinguent principalement par leur contenu par dfaut. V une brve description de chacune d'entre elles : oici Classe Screen FullScreen Description Il s'agit de la classe de base : vous pouvez crer des crans en utilisant un conteneur. Elle permet galement de crer une vue partir d'un cran vide, mais avec ici un conteneur de type vertical. Cette classe permet de crer des crans possdant dj quelques lments standards : MainScreen un titre d'cran un conteneur de type vertical avec dfilement (nous reviendrons l-dessus dans le chapitre consacr aux conteneurs)

www.siteduzero.com

Partie 2 : Les interfaces graphiques


un menu par dfaut

29/87

En pratique, nous utiliserons principalement la classe MainScreen : il s'agit de la classe privilgie pour un premier cran, cependant rien ne vous empche d'utiliser l'une des deux autres prsentes ci-dessus. Maintenant que nous connaissons les diffrents lments de base, je vais vous prsenter les diffrentes mthodes que nous tudierons dans ce cours pour concevoir des interfaces graphiques.

Les diffrentes techniques


Comme nous avons vu, la conception d'interfaces graphiques peut tre ralise de diffrentes manires. Nous distinguerons tout d'abord l'utilisation de composants prdfinis et prts l'emploi, mais il nous est galement possible de dessiner directement l'cran pour crer des vues personnalises. Nous allons prsenter ici brivement la mise en uvre de ces techniques. Puis nous les dtaillerons davantage tout au long de cette partie.

Utilisation de composants prdfinis


La premire chose que nous allons apprendre dans cette partie est l'utilisation des composants prdfinis ainsi que leur disposition l'cran. C'est l'objet des deux prochains chapitres de ce cours. Grce cette technique, vous pourrez raliser des interfaces graphiques telles que celle de la calculatrice prsente plus haut. Pour rappel, voici l'interface graphique en question :

Une calculatrice intgre Sachez qu'une application n'est pas forcment compose d'une unique interface. Il est tout fait possible de travailler avec plusieurs crans que l'on fait dfiler les uns aprs les autres. Cependant, un seul cran peut tre affich la fois, les autres se contentent d'tre ouverts en arrire-plan. Pour concevoir ce type d'interfaces nous devrons utiliser des conteneurs, que nous pouvons voir comme des gestionnaires de positionnement. Pour cela nous utiliserons donc notre classe principale MainScreen, puis nous insrerons des conteneurs qui contiendront eux-mmes des composants. Nous aurons tout le temps pour bien comprendre, mais saisissez qu'il s'agit uniquement dlments imbriqus les uns dans les autres. Il n'y aura donc aucune difficult dans le code source.

Les vues personnalises


Enfin pour finir nous allons brivement prsenter la conception de vues personnalises. Ceci devrait ravir les futurs programmeurs de jeux vido ! Dans ce cas nous n'utiliserons pas de composants mais nous allons tracer diffrents lments l'cran. Nous utiliserons galement la classe MainScreen qui est indispensable. Cependant nous allons ici nous servir de la mthode paint de cette classe. Grce cette mthode nous pourrons utiliser la classe Graphics qui regorge de mthodes permettant de tracer des lignes, des cercles, des rectangles, etc, mais galement afficher diffrentes images pour recrer tout ce qui vous passe par la tte.

www.siteduzero.com

Partie 2 : Les interfaces graphiques


l'aide de cette technique, nous pourrons en fin de partie raliser un jeu de taquin que voici :

30/87

Un jeu de taquin ralis en fin de partie ! Je pense que certains sont dj impatients de voir tout a. Je vous invite donc sans plus attendre passer au chapitre suivant ! Maintenant que nous avons introduit cette partie et que nous avons fait le tour de ce qui nous attend, lanons-nous dans le chapitre suivant sur les composants de base.

www.siteduzero.com

Partie 2 : Les interfaces graphiques

31/87

Les composants de base


Dans ce chapitre nous allons prsenter les composants les plus simples, mais surtout les plus utiliss, savoir : les champs de texte les boutons les images. Ce chapitre est long, mais il n'y a aucune difficult si vous prenez bien le temps de tout lire.

Les champs de texte Introduction


Pour dmarrer ce chapitre, nous allons reprendre notre classe MyScreen crite pour notre premier projet Hello World. Si vous vous souvenez bien, nous avions utilis la classe RichTextField pour pouvoir afficher un message l'cran. Il s'agit du premier composant que nous tudierons dans ce chapitre. Pour rappel, voici le code nous avions pour notre classe MyScreen : Code : Java package mypackage; import net.rim.device.api.ui.component.RichTextField; import net.rim.device.api.ui.container.MainScreen; public final class MyScreen extends MainScreen { public MyScreen() { setTitle("Site du Zro"); add(new RichTextField("Salut les zros!")); } }

V ous aurez certainement remarqu la prsence de la mthode add que nous avions introduit dans la premire partie sans explications. Cette mthode de la classe MainScreen est une mthode commune tous les conteneurs, qui permet d'ajouter un lment ce conteneur. Pour l'utiliser il suffit de lui indiquer en paramtre l'instance du composant ajouter. Nous reparlerons plus amplement des conteneurs dans le prochain chapitre. Pour l'instant nous nous contenterons encore d'crire notre code l'intrieur du constructeur de la classe MyScreen. Sans plus attendre, je vous propose de faire un vaste tour des diffrents composants disponibles pour la cration d'interfaces graphiques. Commenons tout de suite avec RichTextField !

Afficher du texte
Pour afficher du texte l'cran, nous disposons des deux classes RichTextField et LabelField. Ces deux composants sont trs similaires, et il est tout fait possible d'utiliser l'un ou l'autre. Peut-tre la classe LabelField est plutt utilise en tant qu'tiquette pour d'autres contrles, alors que l'utilisation d'un RichTextField permet plus de paramtrages. Ceci dit, dans la plupart des cas les deux feront tout fait l'affaire.

RichTextField
Dans notre projet Hello World, nous avions cr une instance de la classe RichTextField directement l'intrieur de la mthode add. Toutefois il est possible de crer une instance de cette classe en la stockant dans une variable. C'est en effet la solution que je vous recommande dans la majorit des cas. Nous pourrions alors rcrire le code prcdent de la manire suivante : Code : Java

www.siteduzero.com

Partie 2 : Les interfaces graphiques


RichTextField monTexte = new RichTextField("Salut les zros!"); add(monTexte);

32/87

Les champs de texte de type RichTextField sont multilignes, vous pouvez donc insrer un long texte qui s'talera sur plusieurs lignes si besoin. Nous allons essayer ceci en utilisant la mthode setText qui permet de modifier le texte de notre RichTextField. Pour cela crivez le code suivant : Secret (cliquez pour afficher) Code : Java monTexte.setText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a metus justo. Aliquam erat volutpat. Proin molestie mauris id erat mattis consequat. Nulla ut mi ipsum. Suspendisse tempor sollicitudin magna, ac blandit sapien commodo ut. Etiam mattis dolor non dui bibendum at sollicitudin risus fringilla. Praesent placerat orci ut est egestas commodo. Aenean vehicula rhoncus leo a ornare.");

V ous obtiendriez alors un champ de texte sur plusieurs lignes comme prsent sur l'cran ci-dessous :

La classe RichTextField possde de nombreuses autres mthodes telles que getText pour rcuprer son texte ou encore la mthode setFont hrite de TextField qui permet de changer la police de celui-ci. Je vous laisserai le soin de les dcouvrir par vous-mmes, en revanche nous parlerons des polices de caractres juste aprs la classe LabelField.

LabelField
Comme dit prcdemment, la classe LabelField s'utilise principalement de la mme manire que RichTextField. Nous pourrons donc dclarer une instance de cette classe comme ceci : Code : Java LabelField monTexte = new LabelField("Votre texte ici."); add(monTexte);

Notez galement qu'il n'est pas ncessaire de renseigner le texte afficher ds la dclaration, et il en est de mme pour la classe RichTextField. Si vous le dsirez vous pouvez procder de la manire suivante : Code : Java

www.siteduzero.com

Partie 2 : Les interfaces graphiques

33/87

LabelField monTexte = new LabelField(); monTexte.setText("Votre texte ici."); add(monTexte);

N'oubliez pas d'importer les diffrentes classes que vous utilisez. Pour viter de les importer une par une, il est possible d'importer tout le package en insrant la ligne suivante : Code : Java import net.rim.device.api.ui.component.*;

Utilisation des polices


L'utilisation des polices de caractres est toujours un peu dlicate, c'est pourquoi nous allons prsenter ici la manire de faire. Pour appliquer une police et un style un champ de texte nous devrons utiliser les deux classes Font et FontFamily. Une fois ces classes instancies, il est alors possible de faire passer la police de type Font en paramtre de la mthode setFont d'un champ de texte. V un exemple d'utilisation de ces classes : oici Code : Java FontFamily typeCaracteres = FontFamily.forName("Comic Sans MS"); Font maPolice = typeCaracteres.getFont(Font.BOLD, 26); monTexte.setFont(maPolice);

Cependant si vous utilisez ce code tel quel, vous aurez des problmes de compilation. En effet, ce code pourrait gnrer une exception. Pour grer ces exceptions, il faudra donc utiliser le bloc try{....} catch{...} du langage Java. Pour rappel, ce bloc d'instructions permet de grer des morceaux de code pouvant gnrer des exceptions ; par exemple une division par zro. Dans notre cas, voici comment l'utiliser : Code : Java try { FontFamily typeCaracteres = FontFamily.forName("Comic Sans MS"); Font maPolice = typeCaracteres.getFont(Font.BOLD, 26); monTexte.setFont(maPolice); } catch (ClassNotFoundException e) { System.out.println(e.getMessage()); }

Enfin pour que personne ne soit perdu, je vous propose un code reprenant la classe MySreen intgralement. Ce code affichera donc un champ de texte de type RichTextField utilisant la police Comic Sans MS en gras et de taille 26. V donc la classe MySreen crite au complet : oici Code : Java package mypackage; import import import import net.rim.device.api.ui.component.RichTextField; net.rim.device.api.ui.container.MainScreen; net.rim.device.api.ui.Font; net.rim.device.api.ui.FontFamily;

public final class MyScreen extends MainScreen {

www.siteduzero.com

Partie 2 : Les interfaces graphiques


public MyScreen() { RichTextField monTexte = new RichTextField(); try { FontFamily typeCaracteres = FontFamily.forName("Comic Sans MS"); Font maPolice = typeCaracteres.getFont(Font.BOLD, 26); monTexte.setFont(maPolice); } catch (ClassNotFoundException e) { System.out.println(e.getMessage()); } monTexte.setText("Ce texte utilise la police \"Comic Sans MS\", style gras, taille 26"); add(monTexte); } }

34/87

Je rappelle galement que pour insrer des guillemets dans votre texte, vous devez insrer un antislash '\' avant le caractre. Lancez votre projet et vous devriez voir apparatre ceci l'cran :

Les autres champs de texte


Nous allons maintenant voir diffrents champs de texte spcifiques qui permettent notamment l'utilisateur de saisir du texte sous diffrentes formes depuis son clavier. Dans ce cours nous verrons ceux qui s'avrent les plus utiles et performants.

EditField
Pour la saisie de texte, nous possdons diverses classes telles que TextField, BasicEditField, EditField et AutoTextEditField. Nous verrons uniquement les champs de type EditField qui sont les plus utiliss. Nanmoins l'utilisation d'un champ de saisie de texte de type BasicEditField est quasiment identique celle que nous allons voir. Je vous propose donc de dcouvrir le constructeur de ce nouveau type de champ de texte : Code : Java EditField monTexte = new EditField("Etiquette: ", "");

V ous remarquerez l'apparition d'une seconde chane de caractres dans le constructeur. En effet contrairement aux champs de texte LabelField ou RichTextField, les champs de saisie de texte possdent deux champs distincts : un label ou tiquette : il s'agit de l'tiquette ou du nom associ la saisie la saisie : il s'agit du texte renseign par l'utilisateur l'aide du clavier. Celui-ci peut tre vide au dpart mais peut galement possder une valeur initiale. V ous trouverez donc des mthodes diffrentes pour chacun des champs. Par exemple la mthode setLabel permettra de modifier l'tiquette alors que les mthodes setText et getText permettent de traiter la saisie. Aprs quelques frappes au clavier, vous pourriez avoir ceci :

Les saisies de texte peuvent avoir des finalits trs diffrentes et leur gestion peut entraner facilement des erreurs ou des choses inattendues. C'est pourquoi la saisie de texte peut tre facilite l'aide d'un filtre. Par exemple, nous pourrions forcer l'utilisateur renseigner uniquement des nombres entiers :

www.siteduzero.com

Partie 2 : Les interfaces graphiques


Code : Java EditField monTexte = new EditField("Etiquette: ", "", 10, EditField.FILTER_INTEGER);

35/87

Ou encore, nous pourrions imposer un texte en majuscules : Code : Java EditField monTexte = new EditField("Etiquette: ", "", 10, EditField.FILTER_UPPERCASE);

Il existe de nombreux filtres mais voici les principaux et certainement les plus utiliss : FILTER_DEFAULT , FILTER_INTEGER, FILTER_LOWERCASE, FILTER_NUMERIC, FILTER_PHONE, FILTER_UPPERCASE et FILTER_URL. Enfin vous pouvez utiliser les champs de type AutoTextEditField plus "intelligents". Par exemple ils permettent d'insrer un point, un espace et une majuscule par double pression de la barre d'espace. Leur utilisation est trs similaire celle des EditField.

DateField
V ous pourriez galement avoir besoin d'afficher la date, et heureusement il existe un champ spcial nomm DateField. Grce lui vous pouvez afficher date et heure selon le format dsir. V comment crer un composant de type DateField : oici Code : Java DateField monTexte = new DateField("Date: ", System.currentTimeMillis(), DateField.DATE_TIME);

La mthode currentTimeMillis permet de rcuprer la date et l'heure exacte actuelle. Celle-ci renvoie le nombre de millisecondes coules depuis un point de dpart : le 1er Janvier 1970 00:00:00 GMT. Ainsi cette valeur en millisecondes nous donne en mme temps l'heure exacte ainsi que la date. Pour en revenir notre champ de texte, voici ce que donne un DateField l'cran :

Ces champs sont galement ditables, ainsi si vous cliquez sur une partie de la date vous verrez apparatre un nouveau contrle que voici :

Bien videmment l'heure est ditable au mme titre que la date. Si vous cliquez sur l'heure, vous verrez galement apparatre ceci :

www.siteduzero.com

Partie 2 : Les interfaces graphiques

36/87

Le format d'heure en millisecondes est spcial et dur utiliser. D'autre part pour ceux qui penseraient que la milliseconde n'est pas trs adapte, sachez qu'avec une variable de type long nous pouvons comptabiliser plusieurs millions d'annes en millisecondes !

PasswordEditField
Pour finir avec les champs de texte, nous allons maintenant voir la classe PasswordEditField. Comme son nom l'indique, ce type de champs de texte est rserv aux mots de passe ou aux saisies caches. C'est--dire que lors de la saisie, chaque caractre est remplac par un astrisque '*' sur l'cran, comme ceci :

Mise part l'affichage qui est diffrent, ces champs de texte sont identiques aux EditField vus prcdemment. Je vous montre tout de mme le constructeur pour viter d'en perdre quelques-uns : Code : Java PasswordEditField monTexte = new PasswordEditField("Mot de Passe: ", "");

Ainsi nous retrouverons donc les mthodes setLabel, setText et getText pour grer notre tiquette et notre texte ditable.

Les boutons
Nous allons prsent examiner les diffrents types de boutons proposs pour les interfaces. Nous y retrouvons tous les grands classiques, savoir boutons simples, cases cocher, boutons radios et d'autres. Dans ce chapitre nous ne prsenterons que la mise en page de ces lments. C'est--dire que nous ne verrons pas comment grer une action sur un bouton ; ceci sera trait dans le chapitre sur les vnements. Sans plus attendre, dcouvrons ces composants graphiques.

Les boutons classiques


ButtonField
Pour dmarrer, voyons les boutons simples de type ButtonField. Ce sont les boutons les plus utiliss, ils permettent de raliser une action lorsqu'on clique dessus. V leur apparence dans les oil interfaces graphiques BlackBerry :

Pour crer des boutons, la dmarche est la mme que pour les champs de texte. Nous allons donc instancier un lment de type ButtonField en appelant son constructeur. Le plus simple est de renseigner le texte qui s'affichera sur le bouton. V oici donc la manire de faire : Code : Java ButtonField monBouton = new ButtonField("Button");

www.siteduzero.com

Partie 2 : Les interfaces graphiques


add(monBouton);

37/87

Il est possible de modifier le texte ou tiquette ou encore label du bouton en utilisant la mthode setLabel. Pour ceux qui auraient dj pens mettre une icne la place du texte ou encore combiner icne et texte, nous verrons comment faire la fin du chapitre. Pour raliser cela nous devrons utiliser la mthode setImage qui prend en paramtre un objet de type Image que nous introduirons un peu plus loin.

CheckboxField
Les composants de type CheckboxField sont des cases cocher. Ces composants sont trs utiliss, notamment pour activer ou non certains paramtres dans des menus d'options quelconques ou bien pour des acceptations de licences et de conditions. Ces composants possdent deux tats : actif par la valeur true, ou inactif par un false. V comment utiliser un composant de la classe CheckboxField : oici Code : Java CheckboxField monBouton = new RadioButtonField("Checkbox",true); add(monBouton);

V quoi ressemblent ces cases cocher : oici

Les mthodes setLabel et getLabel nous permettent de saisir ou de rcuprer l'tiquette de la case cocher, de la mme manire que pour un ButtonField. Enfin vous pouvez grer l'tat de la case cocher soit en rcuprant sa valeur par la mthode getChecked, soit imposer un tat par setChecked.

RadioButtonField
Les boutons RadioButtonField sont des boutons radios. Ils sont proches des cases cocher sauf qu'un seul bouton ne peut tre actif la fois dans un mme groupe. Je m'explique : pour crer ce genre de boutons, nous devons au pralable dfinir un groupe RadioButtonGroup, puis nous ajouterons alors des boutons ce groupe. Pour mieux comprendre nous allons prendre un exemple dont voici le code : Code : Java RadioButtonGroup monGroupe = new add(new RadioButtonField("Option add(new RadioButtonField("Option add(new RadioButtonField("Option RadioButtonGroup(); 1",monGroupe,true)); 2",monGroupe,false)); 3",monGroupe,true));

Nous avons ici dclar trois boutons de type RadioButtonField que nous avons ajout au mme groupe. Je vous propose alors de tester ce code, vous devriez alors voir apparatre ceci sur votre cran :

Remarquez alors que dans notre code nous avons dfini plusieurs boutons l'tat actif. Or seul le dernier l'est vraiment. Ainsi si vous activez un bouton, tous les autres seront alors dsactivs, c'est la particularit de ce type de boutons.

www.siteduzero.com

Partie 2 : Les interfaces graphiques

38/87

Bien videmment en temps normal vous aurez besoin de rcuprer l'tat d'un bouton avec la mthode isSelected, c'est pourquoi vous devrez dclarer une variable pour chacun de vos boutons : Code : Java RadioButtonGroup monGroupe = new RadioButtonGroup(); RadioButtonField monBouton = new RadioButtonField("Option 1",monGroupe,true); add(monBouton);

Les boutons droulants


Nous avons dj vu les cases cocher et les boutons radios qui servent faire des choix parmi plusieurs options. Ces boutons sont trs utiles mais possdent l'inconvnient de prendre de la place surtout lorsqu'il y a beaucoup de choix. Ceci est d'autant plus vrai que les crans des terminaux mobiles sont petits. C'est pourquoi il existe une alternative : les listes droulantes.

ObjectChoiceField
La premire liste droulante est de type ObjectChoiceField qui est propice l'affichage de texte. Pour faire cela nous devons au pralable dfinir l'ensemble de nos diffrents choix l'intrieur d'un tableau. La liste sera alors cre partir des diffrents lments de votre tableau, c'est aussi simple que cela. V comment procder : oici Code : Java String mesChoix[] = {"Option 1","Option 2","Option 3","Option 4"}; ObjectChoiceField maListe = new ObjectChoiceField("Label :",mesChoix,2); add(maListe);

V ous remarquerez que les listes droulantes possdent galement une tiquette renseigner dans le constructeur. Enfin le dernier paramtre correspond tout simplement l'lment slectionn initialement l'apparition de l'cran. V quoi ressemble oici le composant l'cran :

Notez que les lments de la liste possdent les mmes indices que le tableau. Ainsi l'lment d'indice 2 est en fait le troisime lment. Si vous faites drouler la liste vous verrez alors apparaitre l'ensemble des choix disponibles :

Les mthodes retenir pour cette classe sont setChoices, getSelectedIndex et getChoice. La premire sert dfinir ou redfinir la liste de choix, la deuxime rcuprer l'indice de l'lment slectionn et la dernire rcuprer la valeur de l'lment dont l'indice est renseign en paramtre. Nous avons ici utilis des lments de type String comme vous le ferez souvent, mais sachez qu'il est possible d'y insrer toutes sortes d'objets.

www.siteduzero.com

Partie 2 : Les interfaces graphiques

39/87

NumericChoiceField
Il existe une classe spcifique pour des listes droulantes valeurs numriques qui est NumericChoiceField. Pour dfinir la liste voici les paramtres renseigner dans l'ordre : premier lment dernier lment valeur d'incrmentation indice de l'lment initialement slectionn Ce qui nous donne par exemple : Code : Java NumericChoiceField maListe = new NumericChoiceField("Label",1,12,1,4); add(maListe);

V ous obtiendrez alors une liste trs similaire la prcdente :

Puis en cliquant :

V ous pourrez galement rcuprer l'lment slectionn l'aide de la mthode getSelectedValue.

Les images Prparation des images


Nous allons maintenant nous attaquer aux images que vous attendiez certainement avec impatience. Nous verrons comment charger une image partir de son nom, puis nous apprendrons les afficher. Avant de continuer, nous avons besoin d'une image. Je vous propose donc cette image de Zozor au format PNG, directement tire de la page d'accueil du Site du Zro.

Pour pouvoir charger une image, celle-ci doit se trouver dans le dossier du projet. Pour cela copier l'image dans res/img au mme endroit que l'icne de l'application, puis rafraichissez le projet dans Eclipse pour voir apparatre votre image :

www.siteduzero.com

Partie 2 : Les interfaces graphiques

40/87

Nous voil fin prts pour dmarrer !

Chargement des images


Pour afficher des images, celles-ci doivent tre stockes l'intrieur de variables. Nous en avons trois types qui sont : Bitmap, EncodedImage, Image.

Bitmap
Le chargement d'une image se fait ici l'aide de la mthode getBitmapResource de cette classe, en renseignant le nom de l'image charger. V comment charger une image dans une variable de type Bitmap : oici Code : Java Bitmap monImage = Bitmap.getBitmapResource("zozor.png");

EncodedImage
La classe EncodedImage permet galement de charger une image, et c'est la classe que je vous recommande d'utiliser. Le chargement d'une image se fait de manire similaire que prcdemment : Code : Java EncodedImage monImage = EncodedImage.getEncodedImageResource("zozor.png");

Les images de type EncodedImage ont l'avantage d'tre facilement manipulables, notamment si vous souhaitez redimensionner votre image. Pour cela utilisez la mthode scaleImage32 : Secret (cliquez pour afficher) Code : Java int taille = (int) Math.ceil(10000/echelle); EncodedImage monImage = EncodedImage.getEncodedImageResource("zozor.png").scaleImage32(Fixed32.tenThouToFP Fixed32.tenThouToFP(taille));

Attention, les valeurs rentres pour la mise l'chelle sont un peu particulires. Il s'agit en ralit de renseigner la valeur 10000/chelle, c'est pourquoi il est prfrable de faire le calcul avant.

Image
Enfin pour finir, la classe Image ne permet pas de charger directement une image. Cependant le format Image est parfois utilis la place du format EncodedImage pour afficher l'image. Cependant il est trs facile de passer de l'un l'autre grce la mthode

www.siteduzero.com

Partie 2 : Les interfaces graphiques

41/87

createImage de la classe ImageFactory. Cette mthode nous renvoie alors une image de type Image, utilisez donc l'expression : Code : Java ImageFactory.createImage(EncodedImage.getEncodedImageResource("zozor.png"))

Affichage d'images
Maintenant que les images sont charges, nous allons pouvoir les afficher l'cran. Nous verrons donc comment afficher directement l'image, puis nous verrons comment l'insrer en tant qu'icne dans un bouton de type ButtonField.

BitmapField
Le composant graphique BitmapField permet d'afficher une image l'cran partir d'une variable Bitmap ou EncodedImage. Pour un Bitmap, la manipulation est simple puisqu'il suffit de mettre l'image en question en paramtre du constructeur comme ceci : Code : Java Bitmap monImage = Bitmap.getBitmapResource("zozor.png"); BitmapField monBitmap = new BitmapField(monImage); add(monBitmap);

En revanche aucun constructeur ne prend en paramtre des images de type EncodedImage, c'est pourquoi nous devrons procder autrement. Nous utiliserons alors la mthode setImage aprs avoir dclar notre BitmapField : Code : Java EncodedImage monImage = EncodedImage.getEncodedImageResource("zozor.png"); BitmapField monBitmap = new BitmapField(); monBitmap.setImage(monImage); add(monBitmap);

Dans les deux cas vous verrez apparatre Zozor dans l'angle suprieur gauche de votre cran, comme ceci :

Retour sur les ButtonField

www.siteduzero.com

Partie 2 : Les interfaces graphiques

42/87

Rappelez-vous je vous avais dit qu'il tait possible de mettre une icne avec ou la place d'un texte sur un bouton de type ButtonField. Maintenant que nous savons charger une image, nous allons pouvoir le faire. Pour cela nous nous servirons de la mthode setImage de la classe ButtonField, qui prend en paramtre une image de type Image. Pour faire cela, il suffit simplement de raliser les diffrentes oprations dans l'ordre : Code : Java

ButtonField monBouton = new ButtonField("Zozor"); monBouton.setImage(ImageFactory.createImage(EncodedImage.getEncodedImageResource("zozor add(monBouton);

V ous verrez alors l'image de Zozor insre dans le bouton ct du texte :

Il est possible de choisir de placer le texte gauche ou droite de l'image grce aux mthodes setLabelLeft et setLabelRight. Enfin si vous ne dsirez pas de texte mais uniquement l'icne, il suffit de n'en renseigner aucun dans le constructeur de la classe ButtonField. Nous avons dans ce chapitre prsent diffrents composants permettant de mettre en place une interface graphique. Chaque composant est associ une classe avec diffrentes mthodes pour le manipuler. Dans ce cours nous survolons brivement les mthodes disponibles, c'est pourquoi je vous invite fortement visiter la documentation officielle pour vous perfectionner. Notamment vous pouvez visiter la rubrique Documentation pour plus de renseignements ou encore la rubrique API reference pour visualiser l'ensemble des classes disponibles.

www.siteduzero.com

Partie 2 : Les interfaces graphiques

43/87

Un peu d'ordre avec les conteneurs


Maintenant que nous avons appris crer diffrents composants, nous allons maintenant apprendre les disposer suivant nos envies grce aux conteneurs !

Le principe des conteneurs Introduction


Nous avions vu que la classe Mainscreen tait un conteneur, qui est de type vertical. En effet, essayez d'y mettre plusieurs composants, vous vous apercevrez que ceux-ci sinsrent verticalement. C'est pourquoi il existe diffrents types de conteneurs qui permettent d'aligner les lments autrement. Ainsi en combinant divers conteneurs, nous pourrons positionner les composants suivant nos envies. V oici par exemple une mise en page de conteneurs de types vertical et horizontal :

Chaque conteneur peut accueillir la fois d'autres conteneurs ou bien des composants tels que ceux vus dans le chapitre prcdent. Pour insrer un nouvel objet un conteneur, nous devons utiliser une mthode dj bien connue : add. Bien entendu il existe d'autres manires d'aligner les composants que verticalement et horizontalement. Nous dtaillerons tous les types de conteneurs qui vous permettront de raliser les mises en pages que vous souhaitez.

Le principe de hirarchie
Pour bien comprendre la philosophie des conteneurs, il est ncessaire de bien saisir la manire dont ceux-ci sont hirarchiss. Pour cela, reprenons la mise en page prcdente sous la forme d'un arbre, pour bien comprendre comment les diffrents conteneurs sont lis entre eux :

www.siteduzero.com

Partie 2 : Les interfaces graphiques

44/87

V comment analyser cet arbre : oici Les deux conteneurs horizontaux sont placs dans le MainScreen de type vertical. Ainsi ces deux conteneurs seront donc l'un en dessous de l'autre. Les deux conteneurs verticaux en bas de la hirarchie sont l'intrieur d'un conteneur horizontal. Ceux-ci seront donc cte cte dans le sens horizontal. Enfin, il faut noter que les conteneurs se remplissent suivant l'ordre dans lequel sont ajouts les objets. C'est un point important lors de l'organisation de votre mise page l'aide de la mthode add. V oyons maintenant les diffrents types de conteneurs proposs !

Les diffrents conteneurs


Dans cette sous-partie, nous allons travailler sur les diffrents conteneurs proposs. Pour comprendre leur fonctionnement nous devrons utiliser plusieurs lments afficher. C'est pourquoi je vous propose de nous servir de ces images de Zozor :

Nous utiliserons donc ici trois composants de type BitmapField contenant chacun une des trois images. Maintenant que vous savez utiliser cet lment, nous ne rcrirons pas chaque fois le code servant charger les images. Toutefois, je le vous donne quand mme une fois pour que nous partions sur de bonnes bases : Code : Java BitmapField zozor1 = new BitmapField(); BitmapField zozor2 = new BitmapField(); BitmapField zozor3 = new BitmapField(); zozor1.setImage(EncodedImage.getEncodedImageResource("Zozor1.png")); zozor2.setImage(EncodedImage.getEncodedImageResource("Zozor2.png")); zozor3.setImage(EncodedImage.getEncodedImageResource("Zozor3.png"));

Les conteneurs
VerticalFieldManager
Les conteneurs de type VerticalFieldManager servent ajouter les lments verticalement. Pour l'utiliser nous devrons donc l'ajouter au MainScreen, lui-mme de type vertical. Puis nous lui insrerons alors les lments les uns aprs les autres dans l'ordre d'affichage. Sans plus attendre, voici comment l'utiliser : Code : Java VerticalFieldManager monManager = new VerticalFieldManager();

www.siteduzero.com

Partie 2 : Les interfaces graphiques


add(monManager); monManager.add(zozor1); monManager.add(zozor2); monManager.add(zozor3);

45/87

Sans grande surprise, vous verrez les trois images traces les unes en dessous des autres :

HorizontalFieldManager
Comme son nom l'indique, ce conteneur permet d'aligner les lments horizontalement. L'utilisation de ce type de conteneur est identique que prcdemment. V donc le code correspondant : oici Code : Java HorizontalFieldManager monManager = new HorizontalFieldManager(); add(monManager); monManager.add(zozor1); monManager.add(zozor2); monManager.add(zozor3);

L encore pas de surprise, les composants sont affichs horizontalement :

www.siteduzero.com

Partie 2 : Les interfaces graphiques

46/87

FlowFieldManager
Les conteneurs de type FlowFieldManager sont un mixe des deux prcdents : les lments sont rangs horizontalement puis verticalement. C'est--dire que les composants vont s'ajouter horizontalement jusqu'au bord de l'cran, puis sur une nouvelle ligne, etc. Encore une fois, seul le nom du conteneur change l'intrieur du code : Code : Java FlowFieldManager monManager = new FlowFieldManager(); add(monManager); monManager.add(zozor1); monManager.add(zozor2); monManager.add(zozor3);

Ce type de conteneur n'est pas trs recommand dans la majorit des cas. En effet, il est trs difficile de matriser la mise en page qui peut varier normment d'un cran un autre.

GridFieldManager
Les GridFieldManager sont des conteneurs sous forme de grilles, organises en lignes et colonnes. V ous dfinissez le nombre de lignes et colonnes dans le constructeur, puis vous remplissez la grille par lignes. V par exemple, une grille de dimension 2x2 contenant nos trois images : oici Code : Java GridFieldManager monManager = new GridFieldManager(2,2,GridFieldManager.FIELD_LEFT); add(monManager); monManager.add(zozor1); monManager.add(zozor2); monManager.add(zozor3);

Pour l'instant ne vous souciez pas du GridFieldManager.FIELD_FIELD_LEFT, nous reviendrons dessus plus tard. tant donn que la grille possde uniquement deux colonnes, la troisime image sera place dans la premire colonne de la deuxime ligne :

www.siteduzero.com

Partie 2 : Les interfaces graphiques

47/87

AbsoluteFieldManager
Pour finir nous allons voir les conteneurs de type AbsoluteFieldManager. Ceux-ci permettent de placer les lments suivant leur position absolue par rapport l'origine qui est l'angle suprieur gauche. Cette distance est exprime en pixels suivant les axes X horizontal et Y vertical. V nos trois images places en diffrents points de l'cran : oici Code : Java AbsoluteFieldManager monManager = new AbsoluteFieldManager() ; add(monManager); monManager.add(zozor1,0,0); monManager.add(zozor2,50,100); monManager.add(zozor3,200,200);

Ce type de conteneur permet de placer les lments plus "alatoirement" ou disons plutt de manire moins gomtrique :

Attention, suivant la rsolution de l'cran la mme distance en pixel ne produira pas le mme effet l'cran. Il est donc ncessaire de prendre en compte un facteur d'chelle suivant la rsolution de l'cran : nous reparlerons de ceci plus tard !

Quelques proprits
L'arrire-plan
Il est probable que la couleur blanche en arrire-plan ne vous convienne pas. C'est pourquoi nous allons voir comment changer la couleur de fond d'un conteneur. Pour cela nous devrons charger une couleur l'aide de la classe BackgroundFactory puis la stocker dans une variable de type Background. V comment procder pour le MainScreen : oici Code : Java VerticalFieldManager monManager = (VerticalFieldManager)getMainManager(); Background maCouleur = BackgroundFactory.createSolidBackground(Color.GRAY); monManager.setBackground(maCouleur);

V ous remarquerez qu'il est ncessaire de rcuprer le conteneur MainScreen avant de lui affecter sa couleur de fond. V le rsultat : oici

www.siteduzero.com

Partie 2 : Les interfaces graphiques

48/87

Pour tout autre conteneur, procdez comme suit : Code : Java HorizontalFieldManager monManager = new HorizontalFieldManager(); Background maCouleur = BackgroundFactory.createSolidBackground(Color.RED); monManager.setBackground(maCouleur);

La classe Color est une classe servant uniquement utiliser des couleurs prdfinies. Celle-ci ne possde aucune mthode propre mais uniquement de nombreuses couleurs dfinies en proprits que je vous invite regarder ici.

L'alignement
Les conteneurs et les composants possdent des proprits qui servent les aligner. En voici une liste non exhaustive de ces proprits : Field.FIELD_LEFT : align gauche Field.FIELD_HCENTER : centr horizontalement Field.FIELD_RIGHT : align droite Field.FIELD_TOP : align en haut Field.FIELD_VCENTER : centr verticalement Field.FIELD_BOTTOM : align en bas. Ces proprits sont renseignes dans le constructeur de l'lment lui-mme. V oici un exemple reprenant nos trois images de Zozor : Code : Java BitmapField zozor1 = new BitmapField(Bitmap.getBitmapResource("Zozor1.png"),BitmapField.FIELD_RIGHT); BitmapField zozor2 = new BitmapField(Bitmap.getBitmapResource("Zozor2.png"),BitmapField.FIELD_HCENTER); BitmapField zozor3 = new BitmapField(Bitmap.getBitmapResource("Zozor3.png"),BitmapField.FIELD_LEFT);

l'intrieur d'un conteneur vertical tel que le MainScreen, les alignements prcdents nous donnent alors un cran dans ce style :

www.siteduzero.com

Partie 2 : Les interfaces graphiques

49/87

Notez qu'il n'est pas possible d'aligner horizontalement des composants l'intrieur d'un conteneur horizontal et inversement.

Un album photo
Aprs ces deux longs chapitres, nous allons pouvoir renter dans le concret. Pour cela, je vous propose de raliser un petit album photo simplifi ! Ds prsent nous allons raliser la mise en page de celui-ci, puis nous finirons l'application dans le chapitre suivant qui porte sur la gestion des vnements. Pour cet album photo nous concevrons deux versions ; la premire comportant des boutons "Suivante" et "Prcdente" pour faire dfiler les photos, et la seconde sera compose de miniatures des photos pour accder directement la photo dsire. Pour vous mettre l'eau la bouche, voici un aperu des deux versions de l'album photo :

www.siteduzero.com

Partie 2 : Les interfaces graphiques

50/87

Pour raliser cet album photo, j'ai utilis des photos gratuites et libres disponibles sur le site stockvault.net. V ous pouvez bien entendu utiliser vos propres photos, cependant pour simplifier le code il est prfrable que celles-ci aient toutes les mmes dimensions. Autrement voici les photos que j'ai slectionn :

Sans plus attendre, lanons-nous dans la conception de cet album photo !

Version avec boutons


En premier nous devons crer un nouveau projet que j'ai nomm AlbumPhoto, qui est donc identique au HelloWorld de dpart :

Ensuite insrez-y les diffrentes photos de votre album dans le rpertoire res/img. De mon ct j'y ai galement mis deux icnes pour les boutons "Suivante" et "Prcdente".

Un ButtonField personnalis
Tout d'abord nous allons crer un composant personnalis partir d'un ButtonField. Ce que nous voulons ici c'est redfinir la largeur des boutons pour que ceux-ci prennent la totalit de la largeur de l'cran. Pour faire cela nous devrons rcrire la mthode getPreferredWidth, qui permet galement de rcuprer la largeur d'un composant. Je vous propose donc de crer une nouvelle classe hritant de ButtonField comme ceci : Code : Java package mypackage;

www.siteduzero.com

Partie 2 : Les interfaces graphiques


import net.rim.device.api.system.Display; import net.rim.device.api.ui.component.ButtonField; public class Bouton extends ButtonField{ public Bouton(String nom){ super(nom); } public int getPreferredWidth() { return (Display.getWidth()/2 - 35); } }

51/87

Pour rcuprer la hauteur et la largeur de l'cran, utilisez les expressions Display.getHeight() et Display.getWidth(). Ces mthodes renvoient ces donnes en pixels, ce qui vous permet d'adapter votre mise en page en fonction des diffrents crans de BlackBerry.

La mise en page
Nous allons maintenant nous intresser la classe MyScreen qui hrite de MainScreen. Tout d'abord, insrez ces attributs qui nous servirons pour le chapitre suivant : Code : Java int photoActuelle; EncodedImage[] mesImages; BitmapField maPhoto; int echelle;

Nous avons donc un tableau d'EncodedImage nomm mesImages qui regroupe l'ensemble de nos photos. Ensuite nous avons un entier photoActuelle qui contiendra l'indice dans le tableau de la photo affiche en grand ainsi que le BitmapField maPhoto qui la contiendra. Enfin l'entier echelle retiendra l'chelle de l'image que nous pourrons rutiliser pour la mise jour de l'affichage. Maintenant concentrons-nous sur ce que nous allons crire l'intrieur du constructeur MyScreen. Commenons par dfinir la couleur d'arrire-plan en noir comme nous avons appris le faire : Code : Java VerticalFieldManager monEcran = (VerticalFieldManager)getMainManager(); Background maCouleur = BackgroundFactory.createSolidBackground(Color.BLACK); monEcran.setBackground(maCouleur);

Ensuite nous allons initialiser nos attributs sauf l'entier echelle qui ncessite au pralable d'avoir effectu quelques tracs. Pour cela nous allons prendre la premire image du tableau comme image de dpart. Ensuite nous allons charger nos EncodedImage dans le tableau l'aide d'une boucle, puis nous initialiserons notre BitmapField avec la premire photo. V l'ensemble de ces oprations : oici Code : Java photoActuelle = 0; mesImages = new EncodedImage[6]; for(int i=0;i<6;i++){ mesImages[i] = EncodedImage.getEncodedImageResource("photo"+(i+1)+".jpeg"); }

www.siteduzero.com

Partie 2 : Les interfaces graphiques


maPhoto = new BitmapField(new Bitmap(0,0),FIELD_HCENTER); maPhoto.setImage(mesImages[photoActuelle]);

52/87

Occupons-nous prsent de nos boutons personnaliss crs dans la classe Bouton. Ayant dj redfini la largeur du composant dans la classe Bouton, nous pouvons maintenant utiliser ce composant de la mme faon qu'un ButtonField. Nous allons donc dclarer nos deux boutons "Prcdente" et "Suivante", puis nous y ajouterons une icne grce la mthode setImage. Pour finir nous dplacerons le texte gauche de l'icne pour le deuxime bouton, voici ce que cela donne : Code : Java Bouton boutonPrec = new Bouton(" Prcdente"); boutonPrec.setImage(ImageFactory.createImage(EncodedImage.getEncodedImageResource( Bouton boutonSuiv = new Bouton(" Suivante "); boutonSuiv.setImage(ImageFactory.createImage(EncodedImage.getEncodedImageResource( boutonSuiv.setLabelLeft();

Comme vous le voyez, les boutons sont aligns horizontalement, nous aurons donc besoin d'un conteneur de type HorizontalFieldManager. Nous pourrons alors ajouter nos diffrents lments aux divers conteneurs dans un ordre prcis : Code : Java HorizontalFieldManager mesBoutons = new HorizontalFieldManager(FIELD_HCENTER); add(maPhoto); add(new SeparatorField()); add(mesBoutons); mesBoutons.add(boutonPrec); mesBoutons.add(boutonSuiv);

L'lment SeparatorField n'a pas t prsent, il sert sparer facilement des composants de manire plus propre et are. N'hsitez pas les utiliser galement dans vos mises en page. Il ne nous reste plus qu' redimensionner l'image centrale en fonction de la hauteur des boutons. Pour cela, nous initialiserons notre variable echelle dans un premier temps, puis nous mettrons jour le BitmapField : Code : Java echelle = (int) Math.ceil(10000*mesImages[0].getHeight()/(Display.getHeight() mesBoutons.getPreferredHeight() - 35)); maPhoto.setImage(mesImages[photoActuelle].scaleImage32(Fixed32.tenThouToFP(echelle Fixed32.tenThouToFP(echelle)));

tant donn que ce code sera indispensable pour la suite, je vous ai rcrit l'ensemble de la classe MyScreen : Secret (cliquez pour afficher) Code : Java package mypackage; import import import import import import net.rim.device.api.math.Fixed32; net.rim.device.api.system.Bitmap; net.rim.device.api.system.Display; net.rim.device.api.system.EncodedImage; net.rim.device.api.ui.Color; net.rim.device.api.ui.Field;

www.siteduzero.com

Partie 2 : Les interfaces graphiques


import import import import import import import net.rim.device.api.ui.FieldChangeListener; net.rim.device.api.ui.TouchEvent; net.rim.device.api.ui.component.*; net.rim.device.api.ui.container.*; net.rim.device.api.ui.decor.Background; net.rim.device.api.ui.decor.BackgroundFactory; net.rim.device.api.ui.image.ImageFactory;

53/87

public final class MyScreen extends MainScreen { int photoActuelle; EncodedImage[] mesImages; BitmapField maPhoto; int echelle; public MyScreen() { //Couleur d'arrire-plan VerticalFieldManager monEcran = (VerticalFieldManager)getMainManager(); Background maCouleur = BackgroundFactory.createSolidBackground(Color.BLACK monEcran.setBackground(maCouleur); //Initialisation des attributs photoActuelle = 0; mesImages = new EncodedImage[6]; for(int i=0;i<6;i++){ mesImages[i] = EncodedImage.getEncodedImageResource("photo"+(i+1)+".jpeg" } maPhoto = new BitmapField(new Bitmap(0,0),FIELD_HCENTER); maPhoto.setImage(mesImages[photoActuelle]); //Prparation des boutons Bouton boutonPrec = new Bouton(" Prcdente"); boutonPrec.setImage(ImageFactory.createImage(EncodedImage.getEncodedImageResource Bouton boutonSuiv = new Bouton(" Suivante "); boutonSuiv.setImage(ImageFactory.createImage(EncodedImage.getEncodedImageResource boutonSuiv.setLabelLeft(); //Mise en page des conteneurs HorizontalFieldManager mesBoutons = new HorizontalFieldManager(FIELD_HCENTER add(maPhoto); add(new SeparatorField()); add(mesBoutons); mesBoutons.add(boutonPrec); mesBoutons.add(boutonSuiv); //Redimensionnement de l'image en cours d'affichage echelle = (int) Math.ceil(10000*mesImages[0].getHeight()/(Display.getHeight mesBoutons.getPreferredHeight() - 35)); maPhoto.setImage(mesImages[photoActuelle].scaleImage32(Fixed32.tenThouToFP Fixed32.tenThouToFP(echelle))); } }

Version avec miniatures


Pour concevoir l'album photo avec miniatures, nous allons reprendre le code prcdent sur un certain nombre de points. Pour commencer, ici nous n'aurons pas besoin de la classe Bouton. Dans la classe MyScreen, nous garderons exactement les mmes attributs. Ensuite nous allons dans un premier temps garder les deux premiers blocs d'instructions du constructeur, savoir : Code : Java

www.siteduzero.com

Partie 2 : Les interfaces graphiques


//Couleur d'arrire-plan VerticalFieldManager monEcran = (VerticalFieldManager)getMainManager(); Background maCouleur = BackgroundFactory.createSolidBackground(Color.BLACK); monEcran.setBackground(maCouleur); //Initialisation des attributs photoActuelle = 0; mesImages = new EncodedImage[6]; for(int i=0;i<6;i++){ mesImages[i] = EncodedImage.getEncodedImageResource("photo"+(i+1)+".jpeg"); } maPhoto = new BitmapField(new Bitmap(0,0),FIELD_HCENTER); maPhoto.setImage(mesImages[photoActuelle]);

54/87

N'ayant plus de boutons ici, nous reprendrons directement la mise en page des conteneurs. Mettons en place le conteneur horizontal que j'ai renomm mesMiniatures, ainsi que le BitmapField et le SeparatorField, ce qui nous donne : Code : Java //Mise en page des conteneurs HorizontalFieldManager mesMiniatures = new HorizontalFieldManager(FIELD_HCENTER); add(maPhoto); add(new SeparatorField()); add(mesMiniatures);

Nous arrivons maintenant la partie intressante de cette version : l'affichage des miniatures ! Pour raliser cela nous allons utiliser une boucle. l'intrieur, nous crerons pour chaque miniature un BitmapField partir des EncodedImage de notre tableau mesImages. En considrant que ces photos ont toutes les mmes dimensions, nous les remettrons l'chelle de manire ce que chacune d'elles fasse 1/6 de la largeur de l'cran. Puis nous les ajouterons une une dans notre conteneur horizontal. V le code qui rsume tout a : oici Code : Java //Affichage des vignettes int taille = (int) Math.ceil(10000*6*mesImages[0].getWidth()/Display.getWidth()); for(int i=0;i<6;i++){ BitmapField maMiniature = new BitmapField(new Bitmap(0,0),FIELD_HCENTER); maMiniature.setImage(mesImages[i].scaleImage32(Fixed32.tenThouToFP(taille) , Fixed32.tenThouToFP(taille))); mesMiniatures.add(maMiniature); }

Enfin, nous n'avons plus qu' redimensionner l'image centrale en fonction de la hauteur des miniatures de la mme manire que prcdemment. Pour rcapituler tout cela, je vous propose la classe MyScreen dans son intgralit : Secret (cliquez pour afficher) Code : Java package mypackage; import net.rim.device.api.math.Fixed32; import net.rim.device.api.system.Bitmap;

www.siteduzero.com

Partie 2 : Les interfaces graphiques


import import import import import import import import import import import net.rim.device.api.system.Display; net.rim.device.api.system.EncodedImage; net.rim.device.api.ui.Color; net.rim.device.api.ui.Field; net.rim.device.api.ui.FieldChangeListener; net.rim.device.api.ui.TouchEvent; net.rim.device.api.ui.component.*; net.rim.device.api.ui.container.*; net.rim.device.api.ui.decor.Background; net.rim.device.api.ui.decor.BackgroundFactory; net.rim.device.api.ui.image.ImageFactory;

55/87

public final class MyScreen extends MainScreen { int photoActuelle; EncodedImage[] mesImages; BitmapField maPhoto; int echelle; public MyScreen() { //Couleur d'arrire-plan VerticalFieldManager monEcran = (VerticalFieldManager)getMainManager(); Background maCouleur = BackgroundFactory.createSolidBackground(Color.BLACK); monEcran.setBackground(maCouleur); //Initialisation des attributs photoActuelle = 0; mesImages = new EncodedImage[6]; for(int i=0;i<6;i++){ mesImages[i] = EncodedImage.getEncodedImageResource("photo"+(i+1)+".jpeg"); } maPhoto = new BitmapField(new Bitmap(0,0),FIELD_HCENTER); maPhoto.setImage(mesImages[photoActuelle]); //Mise en page des conteneurs HorizontalFieldManager mesMiniatures = new HorizontalFieldManager(FIELD_HCENTER add(maPhoto); add(new SeparatorField()); add(mesMiniatures); //Affichage des vignettes int taille = (int) Math.ceil(10000*6*mesImages[0].getWidth()/Display.getWidth()); for(int i=0;i<6;i++){ BitmapField maMiniature = new BitmapField(new Bitmap(0,0),FIELD_HCENTER maMiniature.setImage(mesImages[i].scaleImage32(Fixed32.tenThouToFP(taille), Fixed32.tenThouToFP(taille))); mesMiniatures.add(maMiniature); } //Redimensionnement de l'image en cours d'affichage echelle = (int) Math.ceil(10000*mesImages[0].getHeight()/(Display.getHeight - mesMiniatures.getPreferredHeight() - 35)); maPhoto.setImage(mesImages[photoActuelle].scaleImage32(Fixed32.tenThouToFP(echelle Fixed32.tenThouToFP(echelle))); } }

V ous avez prsent toutes les cartes en main pour raliser des interfaces graphiques grce aux conteneurs et aux composants prdfinis prsents ces deux derniers chapitres. Nous verrons dans le prochain chapitre comment grer les diffrents vnements. Puis nous finaliserons cet album photo dans ses deux versions !

www.siteduzero.com

Partie 2 : Les interfaces graphiques

56/87

La gestion des vnements


Qu'est-ce qu'un vnement ? C'est peut-tre une question que vous vous tes dj pos, je vais donc essayer de vous expliquer ce concept ! Lorsqu'on conoit une application, il est intressant d'avoir de l'interaction avec l'utilisateur. Par exemple dans notre album photo, nous voudrions que l'image centrale soit mise jour si on clique sur un des boutons ou encore si on touche une miniature sur l'cran. H bien les vnements servent justement dclencher une fonction lorsqu'une action s'est produite.

Les vnements de boutons La thorie


Pour excuter une fonction l'appui d'un bouton, nous utilisons ce que l'on appelle un couteur. Comme son nom l'indique, il va "couter" d'ventuels vnements associs un bouton. Pour cela nous allons utiliser la classe FieldChangeListener, et plus particulirement nous allons redfinir la mthode fieldChanged. Ensuite il ne restera plus qu' associer l'couteur au composant grce la mthode setChangeListener disponible pour tout type de bouton : Code : Java monBouton.setChangeListener(new FieldChangeListener() { public void fieldChanged(Field field, int context) { // Instructions } });

Notez qu'il est tout fait possible de crer une nouvelle classe dans le projet qui hrite de FieldChangeListener et d'y rcrire la mthode fieldChanged l'intrieur. Cette pratique peut tre utile pour sparer et structurer votre projet, le rendant ainsi plus ar.

La gestion des boutons de l'album photo


Pour mieux comprendre, je vous propose de paramtrer nos boutons "Prcdente" et "Suivante" de notre album photo. Pour changer l'image affiche en fonction des boutons, il suffit de mettre jour la variable photoActuelle, puis le BitmapField correspondant. Par exemple pour le bouton "Prcdente", nous allons dcrmenter photoActuelle puis appeler la mthode setImage de la mme manire que dans le chapitre prcdent. V ce que donne la gestion des vnements des deux boutons de l'album photo : oici Code : Java // Ecouteur du bouton "Prcdente" boutonPrec.setChangeListener(new FieldChangeListener() { public void fieldChanged(Field field, int context) { if(photoActuelle > 0){ photoActuelle--; maPhoto.setImage(mesImages[photoActuelle].scaleImage32(Fixed32.tenThouToFP(echelle Fixed32.tenThouToFP(echelle))); } } }); // Ecouteur du bouton "Suivante" boutonSuiv.setChangeListener(new FieldChangeListener() { public void fieldChanged(Field field, int context) { if(photoActuelle < 5){ photoActuelle++; maPhoto.setImage(mesImages[photoActuelle].scaleImage32(Fixed32.tenThouToFP(echelle Fixed32.tenThouToFP(echelle))); }

www.siteduzero.com

Partie 2 : Les interfaces graphiques


}); }

57/87

galement je vous redonne l'intgralit de la classe MyScreen pour que tout le monde puisse tester cet album photo : Secret (cliquez pour afficher) Code : Java package mypackage; import import import import import import import import import import import import net.rim.device.api.math.Fixed32; net.rim.device.api.system.Bitmap; net.rim.device.api.system.Display; net.rim.device.api.system.EncodedImage; net.rim.device.api.ui.Color; net.rim.device.api.ui.Field; net.rim.device.api.ui.FieldChangeListener; net.rim.device.api.ui.component.*; net.rim.device.api.ui.container.*; net.rim.device.api.ui.decor.Background; net.rim.device.api.ui.decor.BackgroundFactory; net.rim.device.api.ui.image.ImageFactory;

public final class MyScreen extends MainScreen { // Attributs int photoActuelle; EncodedImage[] mesImages; BitmapField maPhoto; int echelle; public MyScreen() { //Couleur d'arrire-plan VerticalFieldManager monEcran = (VerticalFieldManager)getMainManager(); Background maCouleur = BackgroundFactory.createSolidBackground(Color.BLACK); monEcran.setBackground(maCouleur); //Initialisation des attributs photoActuelle = 0; mesImages = new EncodedImage[6]; for(int i=0;i<6;i++){ mesImages[i] = EncodedImage.getEncodedImageResource("photo"+(i+1)+".jpeg"); } maPhoto = new BitmapField(new Bitmap(0,0),FIELD_HCENTER); maPhoto.setImage(mesImages[photoActuelle]); //Prparation des boutons Bouton boutonPrec = new Bouton(" Prcdente"); boutonPrec.setImage(ImageFactory.createImage(EncodedImage.getEncodedImageResource Bouton boutonSuiv = new Bouton(" Suivante "); boutonSuiv.setImage(ImageFactory.createImage(EncodedImage.getEncodedImageResource boutonSuiv.setLabelLeft(); //Mise en page des conteneurs HorizontalFieldManager mesBoutons = new HorizontalFieldManager(FIELD_HCENTER); add(maPhoto); add(new SeparatorField()); add(mesBoutons); mesBoutons.add(boutonPrec); mesBoutons.add(boutonSuiv); //Redimensionnement de l'image en cours d'affichage echelle = (int) Math.ceil(10000*mesImages[0].getHeight()/(Display.getHeight()

www.siteduzero.com

Partie 2 : Les interfaces graphiques

58/87

mesBoutons.getPreferredHeight() - 35)); maPhoto.setImage(mesImages[photoActuelle].scaleImage32(Fixed32.tenThouToFP( Fixed32.tenThouToFP(echelle)));

// Ecouteur du bouton "Prcdente" boutonPrec.setChangeListener(new FieldChangeListener() { public void fieldChanged(Field field, int context) { if(photoActuelle > 0){ photoActuelle--; maPhoto.setImage(mesImages[photoActuelle].scaleImage32(Fixed32.tenThouToFP Fixed32.tenThouToFP(echelle))); } } });

// Ecouteur du bouton "Suivante" boutonSuiv.setChangeListener(new FieldChangeListener() { public void fieldChanged(Field field, int context) { if(photoActuelle < 5){ photoActuelle++; maPhoto.setImage(mesImages[photoActuelle].scaleImage32(Fixed32.tenThouToFP Fixed32.tenThouToFP(echelle))); } } }); } }

Pour l'instant nous n'avons parl de la mthode setChangeListener uniquement pour les boutons. Mais sachez que cette mthode appartient en ralit la classe Field, elle est donc disponible pour tout composant notamment les champs de texte ditables et autres.

Les vnements "tactiles" La thorie


Les crans tactiles sont maintenant omniprsents sur les terminaux mobiles. Nous allons maintenant dcouvrir comment grer les vnements gnrs par l'utilisateur sur l'cran. Pour grer ces vnements nous allons devoir redfinir la mthode touchEvent de notre MainScreen. Pour cela je vous propose de dcouvrir directement la mthode en question que nous analyserons juste aprs : Code : Java protected boolean touchEvent(TouchEvent message) { // Rcupration des informations lies l'vnement int eventCode = message.getEvent(); int touchX = message.getX(1); int touchY = message.getY(1); // Gestion des diffrents vnements if(eventCode == TouchEvent.DOWN) { // Instructions } if(eventCode == TouchEvent.UP) { // Instructions } if(eventCode == TouchEvent.MOVE) { // Instructions } return true;

Dans un premier temps nous devons rcuprer les informations lies l'vnement. Pour cela nous utilisons la mthode getEvent

www.siteduzero.com

Partie 2 : Les interfaces graphiques

59/87

de la classe TouchEvent pour obtenir le type de l'vnement. galement nous allons rcuprer la position de l'vnement par les mthodes getX et getY comme prsent ci-dessus. Une fois ces informations connues, il est alors possible d'excuter des instructions suivant l'vnement apparu ou la position de celui-ci l'cran.

La gestion des miniatures de l'album photo


Revenons-en notre album photo ! Dans le cas des miniatures, la gestion des vnements est galement assez simple. Ici, nous nous occuperons uniquement du cas o l'utilisateur pose son doigt sur l'cran soit l'vnement TouchEvent.DOWN. L'opration consiste alors dans un premier temps vrifier si la zone de l'cran touche correspond celle des miniatures. Pour cela il nous suffit de tester si la variable touchY est suprieure la hauteur de l'image maPhoto.getPreferredHeight(). Ensuite nous devons rcuprer le numro de l'image slectionn en faisant un petit calcul. Enfin nous n'aurons plus qu' mettre jour le BitmapField comme nous l'avons toujours fait jusqu' prsent : Code : Java protected boolean touchEvent(TouchEvent message) { // Rcupration des informations lies l'vnement int eventCode = message.getEvent(); int touchX = message.getX(1); int touchY = message.getY(1); // Gestion de l'vnement if(eventCode == TouchEvent.DOWN) { if(touchY > maPhoto.getPreferredHeight()){ photoActuelle = (int) Math.ceil(6*touchX/Display.getWidth()); maPhoto.setImage(mesImages[photoActuelle].scaleImage32(Fixed32.tenThouToFP(echelle Fixed32.tenThouToFP(echelle))); } } return true; }

Pour ceux qui seraient intresss, voici l'intgralit de la classe MyScreen : Secret (cliquez pour afficher) Code : Java package mypackage; import import import import import import import import import import import import net.rim.device.api.math.Fixed32; net.rim.device.api.system.Bitmap; net.rim.device.api.system.Display; net.rim.device.api.system.EncodedImage; net.rim.device.api.ui.Color; net.rim.device.api.ui.Field; net.rim.device.api.ui.FieldChangeListener; net.rim.device.api.ui.TouchEvent; net.rim.device.api.ui.component.*; net.rim.device.api.ui.container.*; net.rim.device.api.ui.decor.Background; net.rim.device.api.ui.decor.BackgroundFactory;

public final class MyScreen extends MainScreen { int photoActuelle; EncodedImage[] mesImages; BitmapField maPhoto; int echelle;

www.siteduzero.com

Partie 2 : Les interfaces graphiques

60/87

public MyScreen() { //Couleur d'arrire-plan VerticalFieldManager monEcran = (VerticalFieldManager)getMainManager(); Background maCouleur = BackgroundFactory.createSolidBackground(Color.BLACK); monEcran.setBackground(maCouleur); //Initialisation des attributs photoActuelle = 0; mesImages = new EncodedImage[6]; for(int i=0;i<6;i++){ mesImages[i] = EncodedImage.getEncodedImageResource("photo"+(i+1)+".jpeg"); } maPhoto = new BitmapField(new Bitmap(0,0),FIELD_HCENTER); maPhoto.setImage(mesImages[photoActuelle]); //Mise en page des conteneurs HorizontalFieldManager mesMiniatures = new HorizontalFieldManager(FIELD_HCENTER); add(maPhoto); add(new SeparatorField()); add(mesMiniatures); //Affichage des vignettes int taille = (int) Math.ceil(10000*6*mesImages[0].getWidth()/Display.getWidth()); for(int i=0;i<6;i++){ BitmapField maMiniature = new BitmapField(new Bitmap(0,0),FIELD_HCENTER maMiniature.setImage(mesImages[i].scaleImage32(Fixed32.tenThouToFP(taille Fixed32.tenThouToFP(taille))); mesMiniatures.add(maMiniature); } //Redimensionnement de l'image en cours d'affichage echelle = (int) Math.ceil(10000*mesImages[0].getHeight()/(Display.getHeight() mesMiniatures.getPreferredHeight())); maPhoto.setImage(mesImages[photoActuelle].scaleImage32(Fixed32.tenThouToFP(echelle Fixed32.tenThouToFP(echelle))); } protected boolean touchEvent(TouchEvent message) { //Rcupration des informations lies l'vnement int eventCode = message.getEvent(); int touchX = message.getX(1); int touchY = message.getY(1); // Gestion de l'vnement if(eventCode == TouchEvent.DOWN) { if(touchY > maPhoto.getPreferredHeight()){ photoActuelle = (int) Math.ceil(6*touchX/Display.getWidth()); maPhoto.setImage(mesImages[photoActuelle].scaleImage32(Fixed32.tenThouToFP(echelle Fixed32.tenThouToFP(echelle))); } } return true; } }

Je vous invite maintenant tester cet album photo. Pour ceux qui voudraient aller plus loin, n'hsitez pas ajouter de nouvelles fonctionnalits ou de retravailler l'interface votre guise. V le visuel final de cette application : oici

www.siteduzero.com

Partie 2 : Les interfaces graphiques

61/87

Un peu plus loin...


Pour terminer ce chapitre sur les vnements, nous allons introduire un dernier point qui peut vous tre utile dans vos futures applications. Pour cela, revenons sur les instructions de rcupration de position de l'vnement. Rappelez-vous : Code : Java int touchX = int touchY = message.getX(1); message.getY(1);

Je vous avais introduit ces mthodes getX et getY sans vous expliquer pourquoi nous passions en paramtre le nombre 1. En ralit ce chiffre correspond au numro de l'vnement, je m'explique. Sur les crans tactiles il est possible d'utiliser deux doigts en mode multipoints, et donc de grer deux vnements simultans l'cran. Ainsi, un deuxime vnement peut tre trait en utilisant le code suivant : Code : Java protected boolean touchEvent(TouchEvent message) { switch(message.getEvent()) {

www.siteduzero.com

Partie 2 : Les interfaces graphiques


case TouchEvent.MOVE: if(message.getX(1) // Instructions } if(message.getX(2) // Instructions } return true; } return false; > 0 && message.getY(1) > 0) { pour la premire position > 0 && message.getY(2) > 0) { pour la seconde position

62/87

Comme vous avez d le remarquer, un vnement est actif lorsque chacune de ses coordonnes est non nulle. V ous pouvez alors grer chacun des vnements sparment pour ajouter toujours plus de fonctionnalits votre application. Pour tester des vnements multiples sur le simulateur BlackBerry, vous devrez utiliser le Multitouch Mode en allant dans la rubrique Simulate ou en appuyant sur Alt + M. Si vous utilisez ce type de codage, il est prfrable que vous le testiez un terminal physique. galement, soyez vigilants avec ce type de gestion car l'utilisation de plusieurs vnements simultanment peut surcharger l'cran de votre appareil et ne laisser que trs peu de place au visuel. Durant ce court chapitre, vous avez pu voir tout ce qu'il faut savoir pour grer bon nombre de situations. Soyez encore un peu attentif, nous arrivons trs bientt au TP pour mettre tout ceci en pratique.

www.siteduzero.com

Partie 2 : Les interfaces graphiques

63/87

Les vues personnalises


Nous avons vu jusqu' maintenant comment raliser des interfaces graphiques l'aide de composants prdfinis. prsent nous allons dcouvrir comment crer une vue partir de zro, pour crer une vue personnalise.

La structure de base
Nous allons ici voir le code minimal ncessaire pour crer des interfaces graphiques personnalises. Pour cela nous allons crer une nouvelle classe nomme MaClasseDessin qui hritera de la classe MainScreen. Sans plus attendre, je vous laisse dcouvrir la structure de base que nous utiliserons pour notre nouvelle classe : Code : Java - MaClasseDessin.java import net.rim.device.api.ui.Graphics; import net.rim.device.api.ui.TouchEvent; import net.rim.device.api.ui.container.MainScreen; public class MaClasseDessin extends MainScreen{ //Attributs public MaClasseDessin(){ //Initialisations des attributs } public void paint(Graphics g){ super.paint(g); //Mise en place des lments l'cran } protected boolean touchEvent(TouchEvent message) { //Rcupration des informations lies l'vnement int eventCode = message.getEvent(); int touchX = message.getX(1); int touchY = message.getY(1); if(eventCode == TouchEvent.DOWN) { //Instructions lorsque l'utilisateur pose son doigt sur } invalidate();

l'cran

l'cran

if(eventCode == TouchEvent.UP) { //Instructions lorsque l'utilisateur retire son doigt de } invalidate();

if(eventCode == TouchEvent.MOVE) { //Instructions lorsque l'utilisateur bouge son doigt de l'cran invalidate(); } return true; } }

Pour ceux qui l'auraient dj utilise, vous constaterez que cette structure est trs proche de celle utilise en Java : Secret (cliquez pour afficher) Code : Java package monpackage;

www.siteduzero.com

Partie 2 : Les interfaces graphiques


import java.awt.*; import javax.swing.*; public class JPanelDessin extends JPanel { //Attributs public JPanelDessin() { super(); //Initialisations des attributs } public void paintComponent(Graphics g) { super.paintComponent(g); //Mise en place des lments l'cran }

64/87

Pour tudier la structure de cette classe, je vous propose d'y aller tape par tape. Pour commencer, voyons les attributs. Les attributs correspondent aux variables que nous manipulerons l'intrieur de nos mthodes. Nous pourrons y trouver des variables de tous types, cependant nous y trouverons en particulier tous les lments ou paramtres permettant de tracer l'interface. Par exemple nous pourrions stocker une image tracer ainsi que ses coordonnes l'cran : Code : Java Bitmap monImage; int[] position;

N'oubliez pas d'importer les classes que vous utilisez : Code : Java import net.rim.device.api.system.Bitmap;

Qui dit attributs dit initialisations, et pour cela nous avons le constructeur. Lorsque vous crez une classe qui hrite d'une autre, n'oubliez pas d'appeler le constructeur de la classe parente : ici la classe MainScreen. V donc notre constructeur : oici Code : Java public MaClasseDessin(){ super(); monImage = Bitmap.getBitmapResource("image.png"); position = new int[2]; position[0] = 0; position[1] = 0; }

La mthode suivante est la plus importante : il s'agit de la mthode paint. C'est l'intrieur de celle-ci que nous dfinirons comment tracer les diffrents lments l'cran. Lorsque nous voudrons rafrachir l'cran, c'est cette mthode qui sera appele. C'est nous de faire en sorte que l'lment soit affich selon nos dsirs. Dans notre exemple nous allons tracer l'image la position souhaite, c'est--dire aux coordonnes dfinies dans le tableau position. Pour tracer nos lments nous utiliserons des mthodes de la classe Graphics : Code : Java public void paint(Graphics g){

www.siteduzero.com

Partie 2 : Les interfaces graphiques


super.paint(g); g.drawImage(position[0], position[1], 200, 200, monImage, 0, 0);

65/87

Enfin pour que notre application est de l'utilit, il va falloir grer les vnements. Pour cela, je vous propose de tracer l'image monImage la position o l'utilisateur pose le doigt. V donc la mthode touchEvent propose : oici Code : Java protected boolean touchEvent(TouchEvent message) { int eventCode = message.getEvent(); int touchX = message.getX(1); int touchY = message.getY(1); if(eventCode == TouchEvent.DOWN) { position[0] = touchX; position[1] = touchY; invalidate(); } return true;

Dans cette mthode, on reoit le paramtre de type TouchEvent grce auquel nous allons pouvoir rcuprer toutes les informations lies l'vnement. Ainsi si l'utilisateur pose un doigt sur l'cran, alors nous mettons jour la position de l'image. La mthode invalidate est trs importante. C'est elle qui va appeler la mthode paint et permettre de retracer les lments l'cran. V oil, nous avons fait le tour de cette classe. Pour finir, je vous ai donn la classe entire : Secret (cliquez pour afficher) Code : Java - MaClasseDessin.java import import import import net.rim.device.api.ui.Graphics; net.rim.device.api.ui.TouchEvent; net.rim.device.api.ui.container.MainScreen; net.rim.device.api.system.Bitmap;

public class MaClasseDessin extends MainScreen{ Bitmap monImage; int[] position; public MaClasseDessin(){ super(); monImage = Bitmap.getBitmapResource("image.png"); position = new int[2]; position[0] = 0; position[1] = 0; } public void paint(Graphics g){ super.paint(g); g.drawImage(position[0], position[1], 200, 200, monImage, 0, 0); } protected boolean touchEvent(TouchEvent message) { int eventCode = message.getEvent(); int touchX = message.getX(1); int touchY = message.getY(1); if(eventCode == TouchEvent.DOWN) { position[0] = touchX; position[1] = touchY;

www.siteduzero.com

Partie 2 : Les interfaces graphiques


invalidate(); } return true;

66/87

} }

Insrer des contours


Nous allons prsent dcouvrir les diffrentes mthodes qui permettent de tracer diffrentes formes et contours. Toutes les dimensions sont ici exprimes en pixels.

Les bases
drawPoint
Rien de plus classique qu'un point ! Pour tracer un point utilisez la mthode drawPoint en spcifiant les coordonnes du point, comme ceci : Code : Java g.drawPoint(10, 10);

drawLine
Comme son nom l'indique, cette mthode sert tracer des lignes. Pour l'utiliser, renseignez les coordonnes du point de dpart puis celles du point d'arrive. V un exemple : oici Code : Java g.drawLine(0, 0, 100, 50);

Les formes elliptiques


drawArc
La mthode drawArc permet de tracer des arcs de cercle ou des cercles complets. Les diffrents paramtres dans l'ordre sont : les coordonnes x et y du centre du cercle, la largeur et la hauteur du cercle, et enfin l'angle de dpart et celui de fin du trac. L'exemple ci-dessous trace un cercle presque complet entre 0 et 300 : Code : Java g.drawArc(100, 100, 50, 50, 0, 300);

www.siteduzero.com

Partie 2 : Les interfaces graphiques

67/87

drawEllipse
Cette mthode trace galement un arc mais de forme elliptique. Pour l'utiliser, spcifiez dans l'ordre : les coordonnes du centre, les coordonnes d'un point appartenant l'arc, les coordonnes d'un second point appartenant l'arc, puis les angles de dpart et d'arrive. Code : Java g.drawEllipse(100, 200, 50, 200, 100, 225, 0, 270);

Les rectangles
drawRect
Pour la mthode drawRect, il n'y a rien de compliqu. Placez en paramtres les coordonnes de l'angle suprieur gauche ainsi que la largeur et la hauteur du rectangle, comme ceci : Code : Java g.drawRect(100, 10, 100, 50);

drawRoundRect
Cette mthode est identique la prcdente, simplement rajoutez la largeur et la hauteur de l'arrondi. Code : Java g.drawRoundRect(100, 10, 100, 50, 30, 30);

www.siteduzero.com

Partie 2 : Les interfaces graphiques

68/87

Quelques plus
drawText
Il est galement possible d'crire du texte grce la mthode drawText. Renseignez votre texte afficher ainsi que sa position. Code : Java g.drawText("Texte", 100, 25);

setColor
La mthode setColor permet de choisir la couleur des contours mais galement celle des remplissages. La couleur s'crit sous la forme : 0xAARRVVBB, o AA est la valeur hexadcimale de la transparence et RR, VV, BB celles des couleurs rouge, vert et bleu. V un exemple qui modifie la couleur des tracs en bleu : oici Code : Java g.setColor(0x000000FF); g.drawText("Texte", 100, 25);

clear
Enfin, notez l'existence de la mthode clear qui sert effacer l'cran, c'est--dire le rafrachir entirement de la couleur d'arrireplan. Code : Java g.clear();

Insrer des remplissages Les essentiels


fillArc
Cette mthode fonctionne identiquement drawArc, cependant celle-ci remplit l'intrieur de l'arc de la couleur actuelle de dessin. Code : Java g.fillArc(50, 100, 50, 50, 0, 180);

www.siteduzero.com

Partie 2 : Les interfaces graphiques

69/87

fillEllipse
La mthode fillEllipse fonctionne galement comme drawEllipse. Code : Java g.fillEllipse(300, 100, 280, 100, 280, 140, 0, 360);

fillRect
Pour crer des remplissages de rectangles, utilisez la mthode fillRect. Code : Java g.fillRect(100, 10, 100, 50);

fillRoundRect
Enfin pour finir, voici la mthode fillRoundRect : Code : Java g.fillRoundRect(100, 10, 100, 50, 30, 30);

www.siteduzero.com

Partie 2 : Les interfaces graphiques

70/87

Un peu de couleur
drawGradientFilledRect
La mthode drawGradientFilledRect permet de crer un remplissage de couleur dgrade l'intrieur d'un rectangle. Celle-ci s'utilise de la mme manire que fillRect, en prcisant en plus les couleurs de dpart et d'arrive du dgrad. V un exemple de dgrad du bleu au rouge : oici Code : Java g.drawGradientFilledRect(100, 10, 100, 50, 0x000000FF, 0x00FF0000);

drawGradientFilledRoundedRect
Cette mthode est similaire la prcdente, en y ajoutant les arrondis : Code : Java g.drawGradientFilledRoundedRect(100, 10, 100, 50, 0x00FFFF00, 0x00FF00FF, 30, 30);

setBackbroungColor
Pendant que nous sommes dans les couleurs, nous allons prsenter la mthode setBackbroungColor qui sert choisir la couleur d'arrire-plan. Celle-ci s'utilise simplement en renseignant la couleur dsire. V par exemple comment crer un fond noir : oici Code : Java g.setBackgroundColor(0x00000000);

Les images
Pour terminer ce chapitre, nous allons voir comment vous pouvez tracer des images grce la classe Graphics. Pour cela, vous disposez de deux mthodes qui dpendent du type d'image que vous avez charg.

drawBitmap

www.siteduzero.com

Partie 2 : Les interfaces graphiques


Si vous avez charg votre image avec la classe Bitmap, vous devrez alors utiliser la mthode drawBitmap, comme ceci : Code : Java Bitmap monImage = Bitmap.getBitmapResource("zozor.png"); g.drawBitmap(100, 50, 200, 200, monImage, 0, 0);

71/87

Les deux premiers paramtres correspondent la position de l'image. Nous reviendrons sur les autres paramtres dans trs peu de temps. V ous devriez donc voir apparatre Zozor la position spcifie :

drawImage
Si vous utilisez des images de type EncodedImage, vous devrez alors utiliser la mthode drawImage pour afficher cette image l'cran. Celle-ci est quasiment identique la mthode prcdente : Code : Java EncodedImage monImage = EncodedImage.getEncodedImageResource("zozor.png"); g.drawImage(100, 50, 200, 200, monImage, 0, 0, 0);

Le rendu est donc le mme :

Rogner l'image
Dans les deux mthodes, diffrents paramtres permettent de rogner l'image selon vos dsirs. Ainsi dans la mthode drawImage, les troisime et quatrime paramtres permettent de dfinir les dimensions de l'image. Si celles-ci sont infrieures la taille de l'image, alors l'image est rogne. Il est galement possible de dcaler ce rognage grce aux deux derniers paramtres. Pour mieux comprendre comment cela fonctionne, n'hsitez pas tester diffrentes valeurs. V un exemple que je vous propose : oici Code : Java g.drawImage(100, 30, 20, 50, monImage, 0, 20, 0);

Cet exemple va donc rogner l'image gauche, droite ainsi qu'en bas comme montr ci-dessous :

Nous avons vu quelques-unes de ses mthodes, cependant la classe Graphics regorge encore de plein de mthodes que je vous invite dcouvrir sur cette page.

www.siteduzero.com

Partie 2 : Les interfaces graphiques

72/87

TP : un taquin
Il est temps pour vous de pratiquer un peu ! Nous allons donc dans ce TP raliser un jeu de taquin depuis zro. Pour la correction, nous procderons tape par tape pour vous permettre de comprendre au mieux !

Le cahier des charges


Qu'est-ce qu'un taquin ?

Le taquin est un jeu solitaire cr il y a environ 150 ans. l'origine, ce jeu tait compos de 15 carreaux numrots de 1 15 glissant dans un cadre prvu pour 16. La pice manquante sappelait le "blanc". Il fallait alors dplacer une pice adjacente au blanc pour rorganiser le jeu. Dans un taquin, le but du jeu consiste alors remettre les carreaux dans l'ordre d'aprs une configuration initiale quelconque. De nos jours, le taquin est souvent reprsent sous la forme d'une image reconstituer. On en retrouve de partout, notamment sur internet.

Spcifications du projet
Au cours de ce TP, nous allons raliser un taquin aux couleurs du site. V ous pourrez utiliser vos propres images ou bien rcuprer les miennes plus bas. Nous devrons donc crer une application qui sera soumise certaines contraintes. Je vous propose de faire un rapide tour de ce que nous devrons prendre en compte lors de sa conception : au dmarrage, le jeu doit tre mlang mais doit tre faisable. Il ne faudra pas mlanger les vignettes n'importe comment. l'utilisateur doit pouvoir dplacer les cases, mais uniquement celles qui sont ct du blanc. la partie est termine une fois que toutes les vignettes sont en place, une petite bote de dialogue avertira alors l'utilisateur. Enfin, voici un aperu de ce que nous pourrions avoir l'cran lors du droulement du jeu :

tant donn que ce n'est pas vident, je me permets de prciser que le blanc correspond ici la premire case en haut gauche. Pourquoi avoir choisi ce jeu ?

Pour commencer le taquin est un jeu assez populaire, vous y avez probablement tous jou ! Ce jeu est intressant, je vous assure que vous y jouerez un sacr moment une fois le TP termin. Les rgles sont simples, ce qui facilite la mise en place du cahier des charges. De plus, la logique simple du jeu facilitera la conception de l'application, bien qu'il nous faudra plusieurs classes pour parvenir au bout du TP. D'autre part, je trouve qu'un jeu "manuel" tel que le taquin s'intgre trs bien sur les plateformes tactiles. En effet, comme sur un vrai jeu nous dplacerons les cases l'aide des doigts. Bien grer ces dplacements rendra le jeu plus interactif et plus fluide, c'est ce qui fait la popularit de ce genre d'applications.

www.siteduzero.com

Partie 2 : Les interfaces graphiques

73/87

Avant de commencer
Ce jeu peut tre cod de plusieurs manires diffrentes, c'est pourquoi je vous invite fortement essayer de le raliser par vousmme. V ous pourrez alors comparer votre faon dapprhender le problme avec la mienne. Ma mthode n'est pas meilleure qu'une autre, il est possible que vous trouviez une mthode plus simple et demandant moins de lignes de code. Quoi qu'il en soit, pour raliser ce TP il se peut que vous soyez oblig d'y passer plusieurs jours. N'hsitez pas prendre votre temps ! V les vignettes que j'ai utilis pour raliser mon taquin : oici

Vignette 1

Vignette 2

Vignette 3

Vignette 4

Vignette 5

Vignette 6

Vignette 7

Vignette 8

Vignette 9

Vignette 10

Vignette 11

Allons-y !

La correction
Avant de passer de plus amples explications, je vous ai ici mis l'ensemble du code source. Cela me permettra dans un premier temps, de vous prsenter les diffrentes classes que j'ai utilis. Pour raliser cette application, je me suis servi de cinq classes dont la fonction vous est prsente juste aprs. N'hsitez pas tester cette application en copiant-collant le code source des diffrentes classes ci-dessous ! Le code que je vous propose pour chacune des classes ne possde aucun commentaire. En effet, les classes sont relativement consquentes, c'est pourquoi je les ai allg au maximum. De toute manire les explications seront donnes plus bas et rien ne vous empche de commenter le code vous-mme.

La classe MonApp
La classe MonApp est comme depuis le dbut, la classe de dpart de notre programme. Elle n'est pas diffrente des prcdentes, c'est pourquoi nous n'y reviendrons pas dans les explications. Celle-ci se contente simplement de faire appel la classe MonDessin dcrite plus bas. V ous trouverez nanmoins le code source de cette classe ci-dessous : Secret (cliquez pour afficher) Code : Java - MonApp.java package sdz.taquin; import net.rim.device.api.ui.UiApplication; public class MonApp extends UiApplication { public static void main(String[] args) { MonApp theApp = new MonApp(); theApp.enterEventDispatcher(); } public MonApp() { pushScreen(new MonDessin()); }

www.siteduzero.com

Partie 2 : Les interfaces graphiques


}

74/87

La classe MonDessin
La classe MonDessin reprend la syntaxe de la classe MaClasseDessin dcrite dans le chapitre sur les vues personnalises. Nous utilisons dans cette classe tout ce qui avait t vu dans ce prcdent chapitre. Nous la dtaillerons plus bas, mais en attendant voici le code correspondant : Secret (cliquez pour afficher) Code : Java - MonDessin.java package sdz.taquin; import import import import import net.rim.device.api.system.Display; net.rim.device.api.ui.Graphics; net.rim.device.api.ui.TouchEvent; net.rim.device.api.ui.component.Dialog; net.rim.device.api.ui.container.MainScreen;

public class MonDessin extends MainScreen{ private private private private int echelle; Vignette[] mesVignettes; Partie maPartie; Mouvement monMouvement;

public MonDessin(){ super(); echelle = Math.min(Display.getWidth()/320, Display.getHeight()/240); maPartie = new Partie(); monMouvement = new Mouvement(); mesVignettes = new Vignette[11]; for(int i=0; i<4; i++){ for(int j=0; j<3; j++){ if(maPartie.getVignette(i,j)!=0){ mesVignettes[maPartie.getVignette(i,j)-1] = new Vignette(maPartie.getVignette(i,j),echelle, i, j); } } } } public void paint(Graphics g){ super.paint(g); g.setBackgroundColor(0x00000000); g.setColor(0x00FFFFFF); g.clear(); for(int i=0; i<4; i++){ for(int j=0; j<3; j++){ if(maPartie.getVignette(i,j)!=0){ int x = mesVignettes[maPartie.getVignette(i,j)-1].getX(); int x = mesVignettes[maPartie.getVignette(i,j)-1].getY(); EncodedImage img = mesVignettes[maPartie.getVignette(i,j)-1].getImage(); g.drawImage(x, y, 80*echelle, 80*echelle, img, 0, 0, 0); g.drawText(""+maPartie.getVignette(i, j), x+10, y+10); }else{ g.drawText(""+maPartie.getVignette(i, j), i*80*echelle+10, j*80*echelle+10 } } } } protected boolean touchEvent(TouchEvent message) {

www.siteduzero.com

Partie 2 : Les interfaces graphiques


int eventCode = message.getEvent(); int touchX = message.getX(1); int touchY = message.getY(1); if(eventCode == TouchEvent.DOWN) { int i = touchX/(80*echelle); int j = touchY/(80*echelle); monMouvement.setNumero(maPartie.getVignette(i,j)); int[][] mouv = maPartie.estJouable(i,j, echelle); monMouvement.setMouvements(mouv); monMouvement.setAnterieur(touchX, touchY); invalidate(); }

75/87

if(eventCode == TouchEvent.UP) { if(monMouvement.getNumero()!=0 && monMouvement.estActif()==true){ int i = (mesVignettes[monMouvement.getNumero()-1].getX()+40*echelle)/( int j = (mesVignettes[monMouvement.getNumero()-1].getY()+40*echelle)/(80*echelle); monMouvement.setMouvements(); maPartie.placer(i, j, monMouvement.getNumero()); mesVignettes[monMouvement.getNumero()-1].setPosition(i*80*echelle j*80*echelle); } invalidate(); if(maPartie.estEnPlace()==true){ Dialog.alert("Bravo, vous avez russi!"); System.exit(0); return true; } } if(eventCode == TouchEvent.MOVE) { int mouvX = touchX - monMouvement.getAnterieur()[0]; int mouvY = touchY - monMouvement.getAnterieur()[1]; if(monMouvement.getNumero()!=0 && monMouvement.estActif()==true){

if((mesVignettes[monMouvement.getNumero()-1].getX()+mouvX)<monMouvement.getMouvement

mesVignettes[monMouvement.getNumero()-1].setX(monMouvement.getMouvements()[0][0 }else if((mesVignettes[monMouvement.getNumero()-1].getX()+mouvX)>monMouvement.getMouvement mesVignettes[monMouvement.getNumero()-1].setX(monMouvement.getMouvements()[0][1 }else{ mesVignettes[monMouvement.getNumero()-1].addX(mouvX); }

if((mesVignettes[monMouvement.getNumero()-1].getY()+mouvY)<monMouvement.getMouvement

mesVignettes[monMouvement.getNumero()-1].setY(monMouvement.getMouvements()[1][0 }else if((mesVignettes[monMouvement.getNumero()-1].getY()+mouvY)>monMouvement.getMouvement mesVignettes[monMouvement.getNumero()-1].setY(monMouvement.getMouvements()[1][1 }else{ mesVignettes[monMouvement.getNumero()-1].addY(mouvY); } } monMouvement.setAnterieur(touchX, touchY); invalidate(); } return true; } }

www.siteduzero.com

Partie 2 : Les interfaces graphiques

76/87

La classe Vignette
Cette classe nomme Vignette rassemble toutes les informations lies chaque case du jeu. On y retrouve notamment le numro de la case, l'image tracer ainsi que sa position l'cran. Cette classe regroupe galement l'ensemble des mthodes permettant de grer et modifier ces attributs. V le code de cette classe : oici Secret (cliquez pour afficher) Code : Java - Vignette.java package sdz.taquin; import net.rim.device.api.math.Fixed32; import net.rim.device.api.system.EncodedImage; public class Vignette { private int numero; private EncodedImage image; private int[] position; public Vignette(int i, int echelle, int x, int y){ numero = i; int taille = (int) Math.ceil(10000/echelle); EncodedImage img = EncodedImage.getEncodedImageResource("vignette"+numero+".png"); image = img.scaleImage32(Fixed32.tenThouToFP(taille), Fixed32.tenThouToFP(taille)); position = new int[2]; position[0] = x*echelle*80; position[1] = y*echelle*80; } public EncodedImage getImage(){ return image; } public int getX(){ return position[0]; } public int getY(){ return position[1]; } public void setPosition(int x, int y){ position[0] = x; position[1] = y;

public void setX(int x){ position[0] = x; } public void setY(int y){ position[1] = y; } public void addX(int x){ position[0] += x; } public void addY(int y){ position[1] += y; }

www.siteduzero.com

Partie 2 : Les interfaces graphiques

77/87

La classe Partie
La classe Partie sert la gestion du jeu en cours. Elle possde en unique attribut un tableau dcrivant l'tat du jeu ainsi que toutes les mthodes ncessaires au bon droulement du jeu. Le code source de cette classe est crit ci-dessous : Secret (cliquez pour afficher) Code : Java - Partie.java package sdz.taquin; import java.util.Random; public class Partie { private int[][] jeu = new int[4][3]; public Partie(){ melanger(30); } public int getVignette(int i, int j){ return jeu[i][j]; } public void melanger(int n){ for(int i=0; i<4; i++){ for(int j=0; j<3; j++){ jeu[i][j] = i+j*4; } } int k = n; int[] positionZero = {0,0}; Random monRandom = new Random(); do{ int nb = monRandom.nextInt(4); switch(nb){ case 0: if(positionZero[0]>0){ jeu[positionZero[0]][positionZero[1]]=jeu[positionZero[0]-1][positionZero[1]]; jeu[positionZero[0]-1][positionZero[1]]=0; positionZero[0]--; k--; } break; case 1: if(positionZero[1]>0){ jeu[positionZero[0]][positionZero[1]]=jeu[positionZero[0]][positionZero[1]-1]; jeu[positionZero[0]][positionZero[1]-1]=0; positionZero[1]--; k--; } break; case 2: if(positionZero[0]<3){ jeu[positionZero[0]][positionZero[1]]=jeu[positionZero[0]+1][positionZero[1]]; jeu[positionZero[0]+1][positionZero[1]]=0; positionZero[0]++; k--; } break; case 3:

www.siteduzero.com

Partie 2 : Les interfaces graphiques


if(positionZero[1]<2){

78/87

jeu[positionZero[0]][positionZero[1]]=jeu[positionZero[0]][positionZero[1]+1]; jeu[positionZero[0]][positionZero[1]+1]=0; positionZero[1]++; k--; } break; } }while(k>0); } public int[][] estJouable(int i, int j, int echelle){ int[][] mouvements = {{i*echelle*80,i*echelle*80},{j*echelle*80,j*echelle*80}}; if(i>0){ if(jeu[i-1][j]==0){ mouvements[0][0] = (i-1)*echelle*80; } } if(j>0){ if(jeu[i][j-1]==0){ mouvements[1][0] = (j-1)*echelle*80; } } if(i<3){ if(jeu[i+1][j]==0){ mouvements[0][1] = (i+1)*echelle*80; } } if(j<2){ if(jeu[i][j+1]==0){ mouvements[1][1] = (j+1)*echelle*80; } } return mouvements; } public void placer(int i, int j, int numero){ if(jeu[i][j]==0){ jeu[i][j]=numero; if(i>0){ if(jeu[i-1][j]==numero){ jeu[i-1][j]=0; } } if(j>0){ if(jeu[i][j-1]==numero){ jeu[i][j-1]=0; } } if(i<3){ if(jeu[i+1][j]==numero){ jeu[i+1][j]=0; } } if(j<2){ if(jeu[i][j+1]==numero){ jeu[i][j+1]=0; } } } } public boolean estEnPlace(){ boolean resultat = true; for(int i=0; i<4; i++){ for(int j=0; j<3; j++){ if(jeu[i][j] != i+j*4){ resultat = false;

www.siteduzero.com

Partie 2 : Les interfaces graphiques


} }

79/87

} return resultat;

La classe Mouvement
La classe Mouvement permet de grer les mouvements d'une vignette, en particulier lors d'un mouvement transitoire de vignette d'une position une autre. Ces mouvements ne modifient pas directement l'tat du jeu, cependant l'affichage l'cran doit tout de mme tre mis jour. V le code de cette classe : oici Secret (cliquez pour afficher) Code : Java - Mouvement.java package sdz.taquin; public class Mouvement { private int numero; public boolean actif; private int[][] mouvements; private int[] positionAnt; public Mouvement(){ numero=0; actif = false; mouvements = new int[2][2]; positionAnt = new int[2]; positionAnt[0] = 160; positionAnt[1] = 0; } public void setMouvements(){ actif = false; } public void setMouvements(int[][] mouv){ mouvements = mouv; actif = false; if(mouv[0][0]!=mouv[0][1] || mouv[1][0]!=mouv[1][1]){ actif = true; } } public void setNumero(int num){ numero = num; } public void setAnterieur(int x, int y){ positionAnt[0] = x; positionAnt[1] = y; } public int getNumero(){ return numero; } public boolean estActif(){ return actif; }

www.siteduzero.com

Partie 2 : Les interfaces graphiques


public int[][] getMouvements(){ return mouvements; } public int[] getAnterieur(){ return positionAnt; }

80/87

Les explications
prsent, nous allons tudier le contenu de ce code source plus en dtails. Encore une fois, la mthode utilise pour raliser ce jeu est propre chacun. Ainsi, la "correction" propose ci-dessous n'est pas la seule manire de concevoir un jeu de taquin.

La structure du jeu
Prparation des vignettes
V ous vous en doutez certainement, nous allons parler ici de la classe Vignette. Comme dit plus haut, cette classe rassemble toutes les informations lies chaque case du jeu et nous y trouvons le numro de la case, l'image tracer ainsi que sa position l'cran. V donc ces diffrents attributs : oici Code : Java private int numero; private EncodedImage image; private int[] position;

Attention, nous parlons ici de la position de l'image l'cran en pixels.

Jusque-l, rien de bien impressionnant. En revanche, le constructeur de la classe est lgrement plus pointu : il va nous falloir initialiser ces attributs. Pour cela nous aurons besoin d'un certain nombre de paramtres : le numro de la vignette l'chelle pour pouvoir tracer correctement les images l'cran la position de la vignette dans le taquin V donc le prototype de notre constructeur : oici Code : Java public Vignette(int i, int echelle, int x, int y){ // Instructions }

Le numro de la vignette doit tre stock, nous pouvons directement initialiser notre attribut numero. De plus en sachant que nos vignettes font l'origine 80x80 pixels, nous pouvons galement initialiser la position de la vignette : Code : Java numero = i; position = new int[2]; position[0] = x*echelle*80; position[1] = y*echelle*80;

Enfin pour finir, il nous faut charger l'image correspondant la vignette. Nous allons alors simplement utiliser la mthode prsente au chapitre prcdent, savoir :

www.siteduzero.com

Partie 2 : Les interfaces graphiques


Code : Java int taille = (int) Math.ceil(10000/echelle); EncodedImage img = EncodedImage.getEncodedImageResource("vignette"+numero+".png"); image = img.scaleImage32(Fixed32.tenThouToFP(taille), Fixed32.tenThouToFP(taille));

81/87

L'utilit de cette classe rside uniquement dans ses attributs. C'est pourquoi, les seules mthodes prsentes dans cette classe sont exclusivement des accesseurs. Nous ne les dtaillerons pas, je vous laisse le soin de les dcouvrir.

Le cur du jeu
Comme l'indique le titre, nous allons ici nous occuper du cur de jeu, savoir la gestion de la partie et de la disposition des vignettes. Nous avons donc besoin d'une nouvelle classe nomme Partie. Celle-ci possde un seul attribut : il s'agit d'un tableau 2D comportant le numro des vignettes chaque position. Celles-ci sont numrotes de 1 11, le 0 tant rserv au blanc. Dans un premier temps, nous pouvons placer les vignettes dans l'ordre. V donc le code correspondant la dclaration de l'attribut oici ainsi que le constructeur provisoire : Code : Java private int[][] jeu = new int[4][3]; public Partie(){ for(int i=0; i<4; i++){ for(int j=0; j<3; j++){ jeu[i][j] = i+j*4; } } }

Attaquons-nous maintenant aux diffrentes mthodes dont nous aurons besoin. Attaquons par un accesseur, voici une mthode permettant de rcuprer le numro d'une vignette suivant sa position dans le tableau : Code : Java public int getVignette(int i, int j){ return jeu[i][j]; }

Ensuite, voici une mthode permettant de savoir si les vignettes sont en place. Celle-ci nous renvoie un boolen suivant le rsultat. Code : Java public boolean estEnPlace(){ boolean resultat = true; for(int i=0; i<4; i++){ for(int j=0; j<3; j++){ if(jeu[i][j] != i+j*4){ resultat = false; } } } return resultat; }

www.siteduzero.com

Partie 2 : Les interfaces graphiques

82/87

La mthode suivante permet de savoir si une vignette peut tre dplace. partir de la position d'une vignette dans le tableau, nous allons scruter les lments adjacents pour savoir si l'un d'eux est le blanc. Dans ce cas la vignette peut tre dplace dans cette direction. En retour, nous renvoyons un tableau 2D indiquant quels sont les dplacements possibles en pixels. Code : Java public int[][] estJouable(int i, int j, int echelle){ int[][] mouvements = {{i*echelle*80,i*echelle*80},{j*echelle*80,j*echelle*80}}; if(i>0){ if(jeu[i-1][j]==0){ mouvements[0][0] = (i-1)*echelle*80; } } if(j>0){ if(jeu[i][j-1]==0){ mouvements[1][0] = (j-1)*echelle*80; } } if(i<3){ if(jeu[i+1][j]==0){ mouvements[0][1] = (i+1)*echelle*80; } } if(j<2){ if(jeu[i][j+1]==0){ mouvements[1][1] = (j+1)*echelle*80; } } return mouvements; }

Puis, nous aurons galement besoin d'une mthode pour dplacer un lment. Nous plaons alors cet lment l'endroit spcifi, et nous remplaons son ancienne position par le blanc. Code : Java public void placer(int i, int j, int numero){ if(jeu[i][j]==0){ jeu[i][j]=numero; if(i>0){ if(jeu[i-1][j]==numero){ jeu[i-1][j]=0; } } if(j>0){ if(jeu[i][j-1]==numero){ jeu[i][j-1]=0; } } if(i<3){ if(jeu[i+1][j]==numero){ jeu[i+1][j]=0; } } if(j<2){ if(jeu[i][j+1]==numero){ jeu[i][j+1]=0; } } } }

Enfin pour finir, nous allons modifier le constructeur pour avoir un jeu mlang en dbut de partie. C'est l que nous allons introduire la mthode melanger. Pour mlanger ce jeu, nous devons retenir la position du blanc. Ensuite il nous suffit

www.siteduzero.com

Partie 2 : Les interfaces graphiques

83/87

d'intervertir sa place avec l'un de ses voisins. Aprs avoir ritr l'opration plusieurs fois, nous avons un jeu suffisamment mlang. V le code correspondant : oici Code : Java public Partie(){ melanger(30); } public void melanger(int n){ for(int i=0; i<4; i++){ for(int j=0; j<3; j++){ jeu[i][j] = i+j*4; } } int k = n; int[] positionZero = {0,0}; Random monRandom = new Random(); do{ int nb = monRandom.nextInt(4); switch(nb){ case 0: if(positionZero[0]>0){ jeu[positionZero[0]][positionZero[1]]=jeu[positionZero[0]-1][positionZero[1]]; jeu[positionZero[0]-1][positionZero[1]]=0; positionZero[0]--; k--; } break; case 1: if(positionZero[1]>0){ jeu[positionZero[0]][positionZero[1]]=jeu[positionZero[0]][positionZero[1]-1]; jeu[positionZero[0]][positionZero[1]-1]=0; positionZero[1]--; k--; } break; case 2: if(positionZero[0]<3){ jeu[positionZero[0]][positionZero[1]]=jeu[positionZero[0]+1][positionZero[1]]; jeu[positionZero[0]+1][positionZero[1]]=0; positionZero[0]++; k--; } break; case 3: if(positionZero[1]<2){ jeu[positionZero[0]][positionZero[1]]=jeu[positionZero[0]][positionZero[1]+1]; jeu[positionZero[0]][positionZero[1]+1]=0; positionZero[1]++; k--; } break; } }while(k>0); }

Nous voil enfin au bout de cette classe. N'hsitez pas relire cette partie plusieurs fois pour bien comprendre le fonctionnement.

La gestion des mouvements

www.siteduzero.com

Partie 2 : Les interfaces graphiques

84/87

Nous allons ici introduire la classe Mouvement. Celle-ci est en charge des mouvements transitoires de vignettes d'une position une autre. Pour pouvoir grer ces dplacements, nous aurons besoin de diffrents attributs. Nous allons dfinir le numro de la vignette slectionne, les mouvements possibles de cette vignette ainsi que la position de l'vnement prcdent pour pouvoir calculer le dplacement du doigt l'cran. Un dernier attribut permet de dfinir si le dplacement est en cours ou non, c'est--dire si l'utilisateur a toujours le doigt sur l'cran ou non. V donc la liste des attributs dfinis pour cette classe : oici Code : Java private int numero; public boolean actif; private int[][] mouvements; private int[] positionAnt;

Le constructeur ne mrite pas de longues explications. Les attributs peuvent tre initialiss avec n'importe quelles valeurs, du moment que l'attribut actif est faux. Le constructeur est dfini ci-dessous : Code : Java public Mouvement(){ numero=0; actif = false; mouvements = new int[2][2]; positionAnt = new int[2]; positionAnt[0] = 160; positionAnt[1] = 0; }

Dans cette classe encore, nous retrouvons principalement des accesseurs. Nous ne les dtaillerons pas tous, mais nous tudierons quand mme les mthodes nommes setMouvements. La premire permet de mettre jour l'attribut mouvements ainsi que d'autoriser le mouvement si la vignette peut tre dplace : Code : Java public void setMouvements(int[][] mouv){ mouvements = mouv; actif = false; if(mouv[0][0]!=mouv[0][1] || mouv[1][0]!=mouv[1][1]){ actif = true; } }

Et pour finir, la deuxime mthode permet de dsactiver le mouvement : Code : Java public void setMouvements(){ actif = false; }

Nous voil fin prt, il ne nous reste plus qu' tracer les lments l'cran.

Le traage l'cran
Maintenant que tout est prt, il nous faut rassembler l'ensemble et tracer les diffrents lments. Tout ceci, nous allons le faire l'intrieur de la classe MonDessin. Nous utiliserons toutes les notions vues au chapitre prcdent sur les vues personnalises. Faisons prsent un tour des attributs dont nous aurons besoin. Tout d'abord, nous prendrons une variable pour retenir l'chelle de l'cran (jeu en 320x240 pixels). Ensuite nous aurons besoin de charger l'ensemble des vignettes, nous utiliserons un tableau de Vignette. Enfin nous prendrons une occurrence de chacune des deux classes Partie et Mouvement. V les attributs oici

www.siteduzero.com

Partie 2 : Les interfaces graphiques


: Code : Java private private private private int echelle; Vignette[] mesVignettes; Partie maPartie; Mouvement monMouvement;

85/87

Aucune surprise dans le constructeur si ce n'est la ncessit de raliser une boucle pour faire appel aux constructeurs de la classe Vignette. V ce constructeur : oici Code : Java public MonDessin(){ super(); echelle = Math.min(Display.getWidth()/320, Display.getHeight()/240); maPartie = new Partie(); monMouvement = new Mouvement(); mesVignettes = new Vignette[11]; for(int i=0; i<4; i++){ for(int j=0; j<3; j++){ if(maPartie.getVignette(i,j)!=0){ mesVignettes[maPartie.getVignette(i,j)-1] = new Vignette(maPartie.getVignette(i,j),echelle, i, j); } } } }

Nous voici arrivs l'endroit qui va donner vie notre jeu. V ous l'aurez devin, il s'agit bien videmment de la gestion des vnements. Nous utiliserons les vnements suivants: TouchEvent.DOWN, TouchEvent.UP et TouchEvent.MOVE. Pour commencer, nous allons nous occuper du cas o l'utilisateur pose son doigt sur l'cran. Il faut alors dans un premier temps trouver quelle vignette a t touche. Ensuite nous regardons si cette vignette peut tre dplace. Puis, il ne nous reste plus qu' mettre jour les attributs de la classe Mouvement. V donc le code correspondant : oici Code : Java if(eventCode == TouchEvent.DOWN) { int i = touchX/(80*echelle); int j = touchY/(80*echelle); monMouvement.setNumero(maPartie.getVignette(i,j)); int[][] mouv = maPartie.estJouable(i,j, echelle); monMouvement.setMouvements(mouv); monMouvement.setAnterieur(touchX, touchY); invalidate(); }

Ensuite nous devons grer le cas o le doigt bouge l'cran. Tout d'abord nous devons calculer le dplacement effectu depuis le dernier vnement. Ensuite si le mouvement est possible, nous mettons jour la position de la vignette. Pour cela, nous regardons si le dplacement propos s'insre dans l'intervalle de dplacement autoris. V comment j'ai ralis ceci : oici Code : Java if(eventCode == TouchEvent.MOVE) { int mouvX = touchX - monMouvement.getAnterieur()[0]; int mouvY = touchY - monMouvement.getAnterieur()[1]; if(monMouvement.getNumero()!=0 && monMouvement.estActif()==true){ if((mesVignettes[monMouvement.getNumero()-1].getX()+mouvX)<monMouvement.getMouvements

www.siteduzero.com

Partie 2 : Les interfaces graphiques

86/87

mesVignettes[monMouvement.getNumero()-1].setX(monMouvement.getMouvements()[0][0]); }else if((mesVignettes[monMouvement.getNumero()-1].getX()+mouvX)>monMouvement.getMouvements mesVignettes[monMouvement.getNumero()-1].setX(monMouvement.getMouvements()[0][1]); }else{ mesVignettes[monMouvement.getNumero()-1].addX(mouvX); } if((mesVignettes[monMouvement.getNumero()-1].getY()+mouvY)<monMouvement.getMouvements mesVignettes[monMouvement.getNumero()-1].setY(monMouvement.getMouvements()[1][0]); }else if((mesVignettes[monMouvement.getNumero()-1].getY()+mouvY)>monMouvement.getMouvements mesVignettes[monMouvement.getNumero()-1].setY(monMouvement.getMouvements()[1][1]); }else{ mesVignettes[monMouvement.getNumero()-1].addY(mouvY); } } monMouvement.setAnterieur(touchX, touchY); invalidate(); }

Enfin, une fois que l'utilisateur retire son doigt de l'cran, nous devons vrifier si le jeu a t modifi. Donc nous devons dterminer sur quelle position se trouve alors la vignette dplace par un petit calcul. Ensuite, nous devons ractualiser le jeu, en appelant quelques accesseurs et autres mthodes : Code : Java if(eventCode == TouchEvent.UP) { if(monMouvement.getNumero()!=0 && monMouvement.estActif()==true){ int i = (mesVignettes[monMouvement.getNumero()-1].getX()+40*echelle)/(80*echelle); int j = (mesVignettes[monMouvement.getNumero()-1].getY()+40*echelle)/(80*echelle); monMouvement.setMouvements(); maPartie.placer(i, j, monMouvement.getNumero()); mesVignettes[monMouvement.getNumero()-1].setPosition(i*80*echelle, j*80*echelle); } invalidate(); if(maPartie.estEnPlace()==true){ Dialog.alert("Bravo, vous avez russi!"); System.exit(0); return true; } }

La deuxime partie de ce bloc d'instructions correspond la fin de la partie. Une fois que toutes les pices sont en place, nous affichons une bote de dialogue puis mettons fin l'application. N'hsitez pas amliorer cette application, vous trouverez certainement de nouvelles fonctionnalits raliser. V ous pouvez galement essayer de rorganiser les classes et d'optimiser le code. Ce TP est prsent termin. N'hsitez pas optimiser les classes et retravailler le projet selon vos souhaits. Cette partie est prsent termine, vous devriez maintenant pouvoir raliser visuellement toutes les applications que vous souhaitez ! Ce tutoriel est toujours en cours de rdaction, des parties supplmentaires seront donc trs prochainement ajoutes.

www.siteduzero.com