Creez Des Applications Pour Blackberry

Crez des
applications pour
BlackBerry
Par Guillaume.
www.openclassrooms.com
Licence Creative Commons 6 2.0

Dernire mise jour le 11/02/2013
2/191
Sommaire
Sommaire ........................................................................................................................................... 2
Partager .............................................................................................................................................. 3
Crez des applications pour BlackBerry ............................................................................................ 5
Partie 1 : Les bases du dveloppement BlackBerry ............................................................................ 6
Un petit mot sur BlackBerry .............................................................................................................................................. 6
Introduction .................................................................................................................................................................................................................. 6
Les applications .......................................................................................................................................................................................................... 6
Le dveloppement ....................................................................................................................................................................................................... 7
Installation des outils de dveloppement .......................................................................................................................... 9

Installer le Java SE JDK .............................................................................................................................................................................................. 9
Tlchargement du JDK ............................................................................................................................................................................................. 9
Installation du JDK ...................................................................................................................................................................................................... 9
Eclipse et son plugin pour BlackBerry ....................................................................................................................................................................... 11
Tlchargement du plugin ......................................................................................................................................................................................... 12
Installation sous Windows ......................................................................................................................................................................................... 12
L'interface d'Eclipse ................................................................................................................................................................................................... 14
Votre premire application .............................................................................................................................................. 16

Cration du projet ......................................................................................................................................................................................................
Analyse du contenu ...................................................................................................................................................................................................
La classe MyApp .......................................................................................................................................................................................................
La classe MyScreen ..................................................................................................................................................................................................
Lancement de l'application ........................................................................................................................................................................................
17
19
20
22
23
Partie 2 : Les interfaces graphiques .................................................................................................. 27

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

Les champs de texte ................................................................................................................................................................................................. 32
Introduction ................................................................................................................................................................................................................ 32
Afficher du texte ........................................................................................................................................................................................................ 32
Les autres champs de texte ...................................................................................................................................................................................... 35
Les boutons ............................................................................................................................................................................................................... 37
Les boutons classiques ............................................................................................................................................................................................. 37
Les boutons droulants ............................................................................................................................................................................................. 39
Les images ................................................................................................................................................................................................................ 40
Prparation des images ............................................................................................................................................................................................ 40
Chargement des images ........................................................................................................................................................................................... 41
Affichage d'images .................................................................................................................................................................................................... 42
Un peu d'ordre avec les conteneurs ............................................................................................................................... 43

Le principe des conteneurs ....................................................................................................................................................................................... 44
Introduction ................................................................................................................................................................................................................ 44
Le principe de hirarchie ........................................................................................................................................................................................... 44
Les diffrents conteneurs .......................................................................................................................................................................................... 45
Les conteneurs .......................................................................................................................................................................................................... 45
Quelques proprits .................................................................................................................................................................................................. 48
Un album photo ......................................................................................................................................................................................................... 50
Version avec boutons ................................................................................................................................................................................................ 51
Version avec miniatures ............................................................................................................................................................................................ 54
La gestion des vnements ............................................................................................................................................ 57

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... .....................................................................................................................................................................................................
58
58
58
60
60
61
63
Les vues personnalises ................................................................................................................................................. 65

La structure de base .................................................................................................................................................................................................. 65
Insrer des contours .................................................................................................................................................................................................. 68
Les bases .................................................................................................................................................................................................................. 68
Les formes elliptiques ............................................................................................................................................................................................... 68
Les rectangles ........................................................................................................................................................................................................... 69
Quelques plus ........................................................................................................................................................................................................... 70
Insrer des remplissages .......................................................................................................................................................................................... 70
Les essentiels ........................................................................................................................................................................................................... 70
Un peu de couleur ..................................................................................................................................................................................................... 72
Les images ................................................................................................................................................................................................................ 72
Sommaire
3/191
TP : un taquin .................................................................................................................................................................. 74
Le cahier des charges ............................................................................................................................................................................................... 75
Spcifications du projet ............................................................................................................................................................................................. 75
Avant de commencer ................................................................................................................................................................................................ 75
La correction .............................................................................................................................................................................................................. 76
La classe MonApp ..................................................................................................................................................................................................... 76
La classe MonDessin ................................................................................................................................................................................................ 77
La classe Vignette ..................................................................................................................................................................................................... 78
La classe Partie ......................................................................................................................................................................................................... 79
La classe Mouvement ............................................................................................................................................................................................... 82
Les explications ......................................................................................................................................................................................................... 82
La structure du jeu ..................................................................................................................................................................................................... 83
Le traage l'cran ................................................................................................................................................................................................... 87
Partie 3 : Les techniques avances .................................................................................................. 89

Travailler avec plusieurs vues ......................................................................................................................................... 90
Prparation des vues ................................................................................................................................................................................................ 90
La page d'accueil ...................................................................................................................................................................................................... 90
La page de description .............................................................................................................................................................................................. 92
Mise jour d'un cran ............................................................................................................................................................................................... 93
Le principe ................................................................................................................................................................................................................. 93
Le code complet ........................................................................................................................................................................................................ 95
Travailler par hritage ............................................................................................................................................................................................... 96
Utiliser rellement plusieurs vues ............................................................................................................................................................................. 96
Nos deux vues ........................................................................................................................................................................................................... 97
Afficher les vues ........................................................................................................................................................................................................ 98
L'internationalisation ...................................................................................................................................................... 100

Crer des ressources ..............................................................................................................................................................................................
Prparation du projet ...............................................................................................................................................................................................
Implmentation des ressources ..............................................................................................................................................................................
Utiliser les ressources .............................................................................................................................................................................................
Travailler les ressources .........................................................................................................................................................................................
Les cls l'intrieur du code ...................................................................................................................................................................................
Une application multilingue .....................................................................................................................................................................................
Prparation des ressources ....................................................................................................................................................................................
Les sources .............................................................................................................................................................................................................
Rsultat final ...........................................................................................................................................................................................................
101
101
103
103
103
105
106
106
107
109
Le stockage de donnes ............................................................................................................................................... 109

Grer des donnes .................................................................................................................................................................................................. 110
Introduction au stockage ......................................................................................................................................................................................... 110
L'interface FileConnection ....................................................................................................................................................................................... 110
Cration de donnes ............................................................................................................................................................................................... 112
Accder physiquement aux donnes ................................................................................................................................................................ 113
Stockage l'intrieur du smartphone ...................................................................................................................................................................... 113
Stockage sur une carte externe ............................................................................................................................................................................... 116
Un fichier de test ...................................................................................................................................................................................................... 118
Lire et crire dans un fichier .................................................................................................................................................................................... 119
Un systme binaire .................................................................................................................................................................................................. 119
criture dans un fichier ........................................................................................................................................................................................... 120
Lecture d'un fichier .................................................................................................................................................................................................. 122
TP : un diteur de texte ................................................................................................................................................. 124

Le cahier des charges ............................................................................................................................................................................................. 125
Spcification du projet ............................................................................................................................................................................................. 125
Avant de commencer .............................................................................................................................................................................................. 126
La correction ............................................................................................................................................................................................................ 126
La classe MonApp ................................................................................................................................................................................................... 126
La classe ConnexionFichier .................................................................................................................................................................................... 127
La classe Editeur ..................................................................................................................................................................................................... 128
Les explications ....................................................................................................................................................................................................... 130
Les champs de texte ............................................................................................................................................................................................... 130
Les diffrents boutons ............................................................................................................................................................................................. 131
La mise en page finale ............................................................................................................................................................................................ 133
Le multimdia ................................................................................................................................................................ 134

Transfrer des fichiers ............................................................................................................................................................................................. 135
Crer un dossier de partage .................................................................................................................................................................................... 135
Transfrer des fichiers multimdias ........................................................................................................................................................................ 136
Jouer de l'audio ....................................................................................................................................................................................................... 137
Lire un fichier audio ................................................................................................................................................................................................. 137
Insrer du son l'application ................................................................................................................................................................................... 140
Lire une vido .......................................................................................................................................................................................................... 143
Chargement du fichier ............................................................................................................................................................................................. 143
Une classe prte l'emploi ..................................................................................................................................................................................... 144
L'acclromtre ............................................................................................................................................................. 147

L'orientation grossire ....................................................................................................................................................................................... 147
Introduction .............................................................................................................................................................................................................. 147
Cration de la classe Orientation ............................................................................................................................................................................ 148
Visualisation de l'application ................................................................................................................................................................................... 150
Grer le temps ......................................................................................................................................................................................................... 151
Prsentation ............................................................................................................................................................................................................ 151
Cration d'un chronomtre ...................................................................................................................................................................................... 152
L'orientation prcise .......................................................................................................................................................................................... 154
Rcuprer l'orientation ............................................................................................................................................................................................ 154
Partager
4/191
Un niveau ................................................................................................................................................................................................................ 156
Les pages HTML ........................................................................................................................................................... 159

Afficher des pages HTML ........................................................................................................................................................................................ 160
Crer du texte HTML ............................................................................................................................................................................................... 160
Charger une page locale ......................................................................................................................................................................................... 161
Installer le BlackBerry MDS Simulator .................................................................................................................................................................... 164
Mise en place du JCE ............................................................................................................................................................................................. 165
Le BlackBerry MDS Simulator ................................................................................................................................................................................. 165
Charger des pages web .......................................................................................................................................................................................... 167
Charger une page web ............................................................................................................................................................................................ 167
Modifier les configurations ....................................................................................................................................................................................... 168
Partie 4 : Les finitions ...................................................................................................................... 169

Tester son application en profondeur ............................................................................................................................ 170
Prparer son application ......................................................................................................................................................................................... 170
Tester son application sur divers appareils ............................................................................................................................................................. 170
Quelques actions pralables ................................................................................................................................................................................... 170
Utiliser de nouveaux simulateurs ............................................................................................................................................................................ 171
Tlcharger et installer un nouveau simulateur ...................................................................................................................................................... 171
Configurer Eclipse ................................................................................................................................................................................................... 172
Lancer l'application .................................................................................................................................................................................................. 173
Utiliser un appareil physique ................................................................................................................................................................................... 174
Installer le Desktop Manager ................................................................................................................................................................................... 174
Premier dmarrage du logiciel ................................................................................................................................................................................ 175
Installation d'une application ................................................................................................................................................................................... 177
Dployer et distribuer .................................................................................................................................................... 180

Installer des cls de signature .................................................................................................................................................................................
Faire une demande de cls .....................................................................................................................................................................................
Installer les cls .......................................................................................................................................................................................................
Finaliser son application ..........................................................................................................................................................................................
Remplir le BlackBerry Application Descriptor ..........................................................................................................................................................
Signer son application .............................................................................................................................................................................................
La distribution ..........................................................................................................................................................................................................
Proposer une application sur l'App World ...............................................................................................................................................................
Utiliser BlackBerry Enterprise Server ......................................................................................................................................................................
D'autres moyens de distribution ..............................................................................................................................................................................
181
181
183
185
185
186
188
188
189
189
Partager
5/191
Crez des applications pour BlackBerry
Par
Guillaume.
Mise jour : 11/02/2013

Difficult : Intermdiaire
Dure d'tude : 3 mois
1 visites depuis 7 jours, class 35/807
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 !
Vous 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 !
Crez des applications pour BlackBerry
6/191
Partie 1 : Les bases du dveloppement BlackBerry
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.
Je rappelle galement que 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
plus. Pour cela, nous installons des programmes supplmentaires pour augmenter les fonctionnalits de notre ordinateur.
Voici une liste de programmes ou logiciels :
Word : logiciel de traitement de texte
Photoshop : logiciel de retouche d'images
Blender : logiciel d'infographie 3D
7/191
Eclipse : IDE pour crire du code

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. Voici une liste d'applications :
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. Vous 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. Voici tout ce que la
socit nous propose :
Voici les possibilits de dveloppement :

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
8/191
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.
BlackBerry est l'origine une ligne de smartphones dveloppe par la socit canadienne Research In Motion.
BlackBerry OS est le systme d'exploitation prsent actuellement sur les smartphones.
Une application d'un smartphone est l'quivalent d'un logiciel pour un ordinateur.
Dans ce cours, nous nous intresserons au dveloppement d'applications en Java.
9/191
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 malheureusement 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
Pour lancer l'installation, double-cliquez sur le fichier d'installation tlcharg prcdemment, puis suivez les tapes ci-dessous.
10/191
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.
11/191
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.
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
12/191
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.
13/191
tapes 1
4 sur 7 : Choisissez les diffrentes options que vous souhaitez.
tape 5
sur 7 : Vrifiez les informations puis cliquez sur Install.
14/191
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.
L'interface d'Eclipse
Nous avons maintenant tous les outils ncessaires au dveloppement d'applications BlackBerry. Ds le prochain chapitre, nous
15/191
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.
Voici donc ce qui apparat au lancement du logiciel :
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.
16/191
Voici une liste des fonctionnalits correspondant aux encadrs ci-dessus :

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. Vous 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.
L'IDE conseill pour dvelopper des applications pour BlackBerry est Eclipse.
Pour programmer en Java, vous devez disposer d'un JDK.
RIM propose directement Eclipse et son plugin pour BlackBerry intgr qui comprend l'ensemble des outils dont nous
aurons besoin.
L'interface d'Eclipse est trs proche des diffrents IDE que vous avez dj pu utiliser.
17/191
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, 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.
Dans le champ Project name, entrez le nom du projet : Hello World puis cliquez sur Finish :
18/191
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. Vous aurez alors le message
suivant :
19/191
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.
20/191
Voici donc les deux dossiers principaux que nous trouvons dans le projet :
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
*/
public MyApp()
{
21/191
// Push a screen onto the UI stack for rendering.

pushScreen(new MyScreen());
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. Voici donc le code correspondant :
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
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
{
MyApp theApp = new MyApp();
}
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. Voici le code
correspondant :
Code : Java
public MyApp()
{
pushScreen(new MyScreen());
}
22/191
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. Celuici se situe galement dans le package mypackage. Voici le code complet de cette classe :
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. Voici le code correspondant :
Code : Java
package mypackage;
{
...
}
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. Voici donc le constructeur que je vous propose :
Code : Java
public MyScreen()

{
}
23/191
setTitle("Site du Zro");
add(new RichTextField("Salut les zros!"));
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;
{
public MyScreen()
{
}
}
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, commencez par
cliquer sur Run > Run As > BlackBerry Simulator :
Patientez le temps que l'OS dmarre...
Vous l'aurez srement remarqu, mais le simulateur met un certain temps dmarrer. C'est pourquoi, si vous avez
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.
24/191
Une fois dmarr, allez dans la catgorie Downloads prsente ci-dessous :
Enfin dans Downloads, cliquez sur l'icne de votre application.

Vous 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. Voici ce
que vous devriez avoir sur l'cran :
25/191
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.
Pour dvelopper une application, vous devez crer un nouveau projet de type BlackBerry Project.

De base, un projet est dj compos de deux classes : MyApp et MyScreen.
La classe de base MyApp hrite de UiApplication et permet de crer une application.
Pour grer les interfaces graphiques, la classe MyScreen hrite de MainScreen.
Le point d'entre pour votre code est alors l'intrieur du constructeur de la classe MyScreen.
Pour tester une application nous utiliserons un simulateur grce la commande
Run > Run As > BlackBerry Simulator.
L'application compile est alors place dans la catgorie Downloads du simulateur.
26/191
27/191
Partie 2 : Les interfaces graphiques
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.
Enfin les deux derniers sont des jeux, vous remarquerez que ces interfaces sont dessines , principalement l'aide d'images.
28/191
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
elles-mmes 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 :
L'application Facebook
29/191
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 MyScreen()
{
}
}
Comme nous venons de le voir, il existe diffrentes classes pour crer un cran. Voici les trois principales : MainScreen
hritant de la classe FullScreen elle-mme hritant de la classe Screen. Celles-ci se distinguent principalement par leur
contenu par dfaut. Voici une brve description de chacune d'entre elles :
Classe
Screen
Description
Il s'agit de la classe de base : vous pouvez crer des crans en utilisant un conteneur.
FullScreen 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)
un menu par dfaut
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
30/191
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 d'lments 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.
l'aide de cette technique, nous pourrons en fin de partie raliser un jeu de taquin que voici :
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 !
31/191
Tout objet graphique hrite de la classe Field.

Les composants de base sont alors des champs de texte, de saisie de texte ou bien des boutons.
La classe Manager sert crer des conteneurs permettant de grer la disposition des lments internes.
Les lments de type Screen sont les conteneurs globaux qui englobent l'ensemble d'un cran .
Une vue peut donc tre cre en disposant divers composants prdfinis.
Une autre manire de concevoir une vue est de tracer diffrents lments l'cran pour crer une vue personnalise.
32/191
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.
En combinant ces diffrents lments, vous pourrez ainsi crer des vues relativement complexes en les agenant correctement
grce aux conteneurs que nous verrons dans le prochain chapitre.
Ce chapitre est long , mais il n'y a aucune difficult si vous prenez bien le temps de tout lire.
Les champs de texte

Nous allons dans ce chapitre prsenter 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 survolerons 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.
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;
{
public MyScreen()
{
}
}
Vous 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.
33/191
Nous pourrions alors rcrire le code prcdent de la manire suivante :

Code : Java
RichTextField monTexte = new RichTextField("Salut les zros!");
add(monTexte);
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 :
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.");
Vous 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 :
34/191
Code : Java
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. Voici un exemple d'utilisation de ces classes :
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");

}
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.
Voici donc la classe MySreen crite au complet :
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;
35/191

{
public MyScreen()
{
RichTextField monTexte = new RichTextField();
try
{
FontFamily typeCaracteres = FontFamily.forName("Comic Sans
MS");
}
catch (ClassNotFoundException e)
{
System.out.println(e.getMessage());
}
monTexte.setText("Ce texte utilise la police \"Comic Sans MS\",
style gras, taille 26");
add(monTexte);
}
}
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: ", "");
Vous 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.
Vous 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.
36/191
Par exemple, nous pourrions forcer l'utilisateur renseigner uniquement des nombres entiers :
Code : Java
EditField monTexte = new EditField("Etiquette: ", "", 10,
EditField.FILTER_INTEGER);
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
Vous 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.
Voici comment crer un composant de type DateField :
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 :
37/191
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. Voil leur apparence dans les
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. Voici donc
la manire de faire :
Code : Java
ButtonField monBouton = new ButtonField("Button");
38/191
add(monBouton);
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.
Voici comment utiliser un composant de la classe CheckboxField :
Code : Java
CheckboxField monBouton = new CheckboxField("Checkbox",true);
add(monBouton);
Voici quoi ressemblent ces cases cocher :
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
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.
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 :
39/191
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.
Voici comment procder :
Code : Java
String mesChoix[] = {"Option 1","Option 2","Option 3","Option 4"};
ObjectChoiceField maListe = new ObjectChoiceField("Label
:",mesChoix,2);
add(maListe);
Vous 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. Voici quoi ressemble
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.
NumericChoiceField
Il existe une classe spcifique pour des listes droulantes valeurs numriques qui est NumericChoiceField. Pour dfinir
40/191
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);
Vous obtiendrez alors une liste trs similaire la prcdente :
Puis en cliquant :
Vous 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 :
41/191
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.
Voici comment charger une image dans une variable de type Bitmap :
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() :
Code : Java
int taille = (int) Math.ceil(10000/echelle);
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 createImage() de la classe ImageFactory. Cette mthode nous renvoie alors une image de type Image,
utilisez donc l'expression :
Code : Java
42/191
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
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
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

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 :
43/191
Code : Java
ButtonField monBouton = new ButtonField("Zozor");

monBouton.setImage(ImageFactory.createImage(EncodedImage.getEncodedImageResource("zozor
add(monBouton);
Vous 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.
Tout composant graphique est reprsent par une classe qui hrite de Field.
Pour afficher du texte, il existe les classes RichTextField et LabelField.
Des champs de saisie sont disponibles grce aux classes EditField, DateField et PasswordEditField.
Les boutons de base sont de type ButtonField.
Des boutons volus avec plusieurs choix sont dfinissables l'aide des classes CheckboxField,
RadioButtonField, ObjectChoiceField et NumericChoiceField.
Les images sont charges travers les classes Bitmap, EncodedImage et Image.
Pour afficher une image l'cran, il faut utiliser le composant BitmapField.
44/191
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 !
Nous introduirons les diffrents types de conteneurs disponibles et nous verrons donc comment les organiser avec d'autres
conteneurs et composants. Ainsi vous commencer raliser de vrais interfaces graphiques, correspondant vos souhaits.
Enfin, nous raliserons un album photo dans deux versions, que nous finaliserons dans le prochain chapitre !
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. Voici 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 :
45/191
Voici comment analyser cet arbre :

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().
Voyons 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();
zozor1.setImage(EncodedImage.getEncodedImageResource("Zozor1.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();
46/191
add(monManager);
monManager.add(zozor1);
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.
Voici donc le code correspondant :
Code : Java
HorizontalFieldManager monManager = new HorizontalFieldManager();
add(monManager);
L encore pas de surprise, les composants sont affichs horizontalement :
47/191
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);
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. Vous dfinissez le
nombre de lignes et colonnes dans le constructeur, puis vous remplissez la grille par lignes.
Voici par exemple, une grille de dimension
contenant nos trois images :
Code : Java
GridFieldManager monManager = new
GridFieldManager(2,2,GridFieldManager.FIELD_LEFT);
add(monManager);
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 :
48/191
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 .
Voici nos trois images places en diffrents points de l'cran :
Code : Java
AbsoluteFieldManager monManager = new AbsoluteFieldManager() ;
add(monManager);
monManager.add(zozor1,0,0);
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.
Voici comment procder pour le MainScreen :
Code : Java
VerticalFieldManager monManager =
(VerticalFieldManager)getMainManager();
Background maCouleur =
BackgroundFactory.createSolidBackground(Color.GRAY);
monManager.setBackground(maCouleur);
Vous remarquerez qu'il est ncessaire de rcuprer le conteneur MainScreen avant de lui affecter sa couleur de fond.
Voici le rsultat :
49/191
Pour tout autre conteneur, procdez comme suit :

Code : Java
HorizontalFieldManager monManager = new HorizontalFieldManager();
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. Voici un exemple reprenant nos trois images de
Zozor :
Code : Java
BitmapField zozor1 = new
BitmapField(Bitmap.getBitmapResource("Zozor1.png"),BitmapField.FIELD_RIGHT);
BitmapField(Bitmap.getBitmapResource("Zozor2.png"),BitmapField.FIELD_HCENTER);
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 :
50/191
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 :
51/191
Pour raliser cet album photo, j'ai utilis des photos gratuites et libres disponibles sur le site stockvault.net. Vous 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;
import net.rim.device.api.system.Display;
52/191
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);
}
}
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 =
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.
Voici l'ensemble de ces oprations :
Code : Java
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);
53/191
maPhoto.setImage(mesImages[photoActuelle]);
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 :
Code : Java
package mypackage;
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;

import
import
import
import
import
54/191
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;

{
int photoActuelle;
int echelle;
public MyScreen()
{
//Couleur d'arrire-plan
VerticalFieldManager monEcran = (VerticalFieldManager)getMainManager();
Background maCouleur = BackgroundFactory.createSolidBackground(Color.BLACK
//Initialisation des attributs
photoActuelle = 0;
mesImages[i] = EncodedImage.getEncodedImageResource("photo"+(i+1)+".jpeg"
}
//Prparation des boutons
boutonPrec.setImage(ImageFactory.createImage(EncodedImage.getEncodedImageResource
boutonSuiv.setImage(ImageFactory.createImage(EncodedImage.getEncodedImageResource
//Mise en page des conteneurs
HorizontalFieldManager mesBoutons = new HorizontalFieldManager(FIELD_HCENTER
add(maPhoto);
add(mesBoutons);
//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
}
}
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
55/191
VerticalFieldManager monEcran =
photoActuelle = 0;
mesImages[i] =
}
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
HorizontalFieldManager mesMiniatures = new
add(maPhoto);
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
de la largeur de l'cran. Puis nous les ajouterons une une
dans notre conteneur horizontal.

Voici le code qui rsume tout a :
Code : Java
//Affichage des vignettes
int taille = (int)
Math.ceil(10000*6*mesImages[0].getWidth()/Display.getWidth());
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 :
Code : Java
package mypackage;
import net.rim.device.api.math.Fixed32;
import net.rim.device.api.system.Bitmap;
import net.rim.device.api.system.Display;

import
import
import
import
import
import
import
import
import
import
56/191

{
int photoActuelle;
int echelle;
public MyScreen()
{
photoActuelle = 0;
mesImages[i] =
}
add(maPhoto);
add(mesMiniatures);
int taille = (int)
}
echelle = (int)
Math.ceil(10000*mesImages[0].getHeight()/(Display.getHeight() mesMiniatures.getPreferredHeight() - 35));
}
}
Il existe des conteneurs de diffrents types, notamment horizontaux et verticaux.

Les conteneurs et les composants s'ordonnent suivant une hirarchie.
57/191
L'ensemble des conteneurs sont dfinis dans le package net.rim.device.api.ui.container.

Les deux plus courants des conteneurs sont VerticalFieldManager et HorizontalFieldManager.
58/191
La gestion des vnements

Il est probable que vous vous demandiez ce qu'est un vnement, 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.
Au cours de ce chapitre, nous allons donc dcouvrir comment grer diffrents types d'vnements et mettre cela en pratique
dans notre album photo !
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.
Voici ce que donne la gestion des vnements des deux boutons de l'album photo :
Code : Java
// Ecouteur du bouton "Prcdente"
boutonPrec.setChangeListener(new FieldChangeListener() {
if(photoActuelle > 0){
photoActuelle--;
}
}
});
// Ecouteur du bouton "Suivante"
boutonSuiv.setChangeListener(new FieldChangeListener() {
if(photoActuelle < 5){
photoActuelle++;
}
}
59/191
});
galement je vous redonne l'intgralit de la classe MyScreen pour que tout le monde puisse tester cet album photo :
Code : Java
package mypackage;
import
import
import
import
import
import
import
import
import
import
import
import

{
// Attributs
int photoActuelle;
int echelle;
public MyScreen()
{
Background maCouleur = BackgroundFactory.createSolidBackground(Color.BLACK
photoActuelle = 0;
mesImages[i] = EncodedImage.getEncodedImageResource("photo"+(i+1)+".jpeg"
}
//Prparation des boutons
boutonPrec.setImage(ImageFactory.createImage(EncodedImage.getEncodedImageResource
boutonSuiv.setImage(ImageFactory.createImage(EncodedImage.getEncodedImageResource
HorizontalFieldManager mesBoutons = new HorizontalFieldManager(FIELD_HCENTER
add(maPhoto);
add(mesBoutons);
echelle = (int) Math.ceil(10000*mesImages[0].getHeight()/(Display.getHeight
mesBoutons.getPreferredHeight() - 35));
maPhoto.setImage(mesImages[photoActuelle].scaleImage32(Fixed32.tenThouToFP
60/191
// Ecouteur du bouton "Prcdente"
boutonPrec.setChangeListener(new FieldChangeListener() {
if(photoActuelle > 0){
photoActuelle--;
}
}
});
// Ecouteur du bouton "Suivante"
boutonSuiv.setChangeListener(new FieldChangeListener() {
if(photoActuelle < 5){
photoActuelle++;
}
}
});
}
}
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
61/191
getEvent() 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
// Rcupration des informations lies l'vnement
// Gestion de l'vnement
if(touchY > maPhoto.getPreferredHeight()){
photoActuelle = (int) Math.ceil(6*touchX/Display.getWidth());
}
}
return true;
}
Pour ceux qui seraient intresss, voici l'intgralit de la classe MyScreen :

Code : Java
package mypackage;
import
import
import
import
import
import
import
import
import
import
import
import

{
int photoActuelle;
int echelle;
public MyScreen()
{
62/191
photoActuelle = 0;
mesImages[i] =
}
add(maPhoto);
add(mesMiniatures);
int taille = (int)
}
echelle = (int)
Math.ceil(10000*mesImages[0].getHeight()/(Display.getHeight() mesMiniatures.getPreferredHeight()));
}
//Rcupration des informations lies l'vnement
// Gestion de l'vnement
if(touchY > maPhoto.getPreferredHeight()){
photoActuelle = (int) Math.ceil(6*touchX/Display.getWidth());
}
}
return true;
}
}
Je vous invite maintenant tester cet album photo. Pour ceux qui voudraient aller plus loin, n'hsitez pas ajouter de nouvelles
63/191
fonctionnalits ou de retravailler l'interface votre guise. Voici le visuel final de cette application :
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
.
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
64/191

switch(message.getEvent()) {
case TouchEvent.MOVE:
if(message.getX(1) > 0 && message.getY(1) > 0) {
// Instructions pour la premire position
}
if(message.getX(2) > 0 && message.getY(2) > 0) {
// Instructions pour la seconde position
}
return true;
}
return false;
}
Comme vous avez d le remarquer, un vnement est actif lorsque chacune de ses coordonnes est non nulle. Vous 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.
Nous utilisons des couteurs pour excuter des fonctions l'appui d'un bouton.
Un couteur se conoit en utilisant la classe FieldChangeListener et en redfinissant sa mthode
fieldChanged().
Pour associer un couteur un composant, il faut utiliser la mthode setChangeListener().
Pour grer des vnements tactiles , il est ncessaire de redfinir la mthode touchEvent() de notre
MainScreen.
La rcupration des informations lies un vnement tactile se fait via la classe TouchEvent.
65/191
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.
Ce type de vue est plus complexe mettre en place, notamment en ce qui concerne la gestion de diffrentes tailles d'crans.
Nanmoins cela permet d'avoir beaucoup plus de contrle sur l'affichage, et sert galement personnaliser plus efficacement vos
diffrentes vues.
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;
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
}
//Rcupration des informations lies l'vnement
l'cran
//Instructions lorsque l'utilisateur pose son doigt sur
}
invalidate();
//Instructions lorsque l'utilisateur retire son doigt
de l'cran
invalidate();
}
l'cran
//Instructions lorsque l'utilisateur bouge son doigt de
invalidate();
}
return true;
Pour ceux qui l'auraient dj utilise, vous constaterez que cette structure est trs proche de celle utilise en Java :
Code : Java
66/191
package monpackage;
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
}
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. Voici donc notre constructeur :
Code : Java
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
67/191

super.paint(g);
g.drawImage(position[0], position[1], 200, 200, monImage, 0, 0);
}
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. Voici donc la mthode touchEvent() propose :
Code : Java
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.
Voil, nous avons fait le tour de cette classe. Pour finir, je vous ai donn la classe entire :
Code : Java - MaClasseDessin.java
import
import
import
import
net.rim.device.api.ui.Graphics;
public class MaClasseDessin extends MainScreen{

Bitmap monImage;
int[] position;
super();
monImage = Bitmap.getBitmapResource("image.png");
position[0] = 0;
position[1] = 0;
}
0);

super.paint(g);
g.drawImage(position[0], position[1], 200, 200, monImage, 0,
}
68/191
position[1] = touchY;
invalidate();
}
return true;
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.
Nous verrons ici quelques-unes de ses mthodes, cependant la classe Graphics regorge encore de plein de
mthodes que je vous invite dcouvrir sur cette page.
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.
Voici un exemple :
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
69/191
g.drawArc(100, 100, 50, 50, 0, 300);
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);
70/191
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.
Voici un exemple qui modifie la couleur des tracs en bleu :
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'arrire-plan.
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
71/191
g.fillArc(50, 100, 50, 50, 0, 180);
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);
72/191
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.
Voici un exemple de dgrad du bleu au rouge :
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.
Voici par exemple comment crer un fond noir :
Code : Java
g.setBackgroundColor(0x00000000);
73/191
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
Si vous avez charg votre image avec la classe Bitmap, vous devrez alors utiliser la mthode drawBitmap(), comme ceci :
Code : Java
g.drawBitmap(100, 50, 200, 200, monImage, 0, 0);
Les deux premiers paramtres correspondent la position de l'image. Nous reviendrons sur les autres paramtres dans trs peu
de temps.
Vous 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
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.
Voici un exemple que je vous propose :
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 :
74/191
Les vues personnalises permettent d'avoir un meilleur contrle et plus de possibilits sur l'affichage.
Pour dessiner l'cran, il est ncessaire de redfinir la mthode paint() de votre MainScreen.
Les diffrents tracs sont raliss l'aide des nombreuses mthodes de la classe Graphics.
Pour ce type de vue, les vnements peuvent tre grs l'aide de touchEvent().
Pour mettre jour l'affichage, il faut faire appel la mthode invalidate() qui appellera notamment la mthode
paint() que vous avez redfinie.
75/191
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. L'objectif de ce chapitre n'est donc pas de vous faire voir de nouvelles notions, mais
uniquement de vous faire pratiquer avec les connaissances que vous avez dj. Ce sera donc l'occasion de faire un point sur ce
que vous avez retenu jusqu' prsent.
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. Vous 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.
76/191
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. Vous 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 !
Voici les vignettes que j'ai utilis pour raliser mon taquin :
Vignette 1
Vignette 5
Vignette 2
Vignette 6
Vignette 3
Vignette 7
Vignette 10
Vignette 4
Vignette 8
Vignette 9
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-mmes.
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. Vous trouverez nanmoins le code source de cette classe ci-dessous :
Code : Java - MonApp.java
package sdz.taquin;
public class MonApp extends UiApplication
{
{
MonApp theApp = new MonApp();
}
public MonApp()
{
pushScreen(new MonDessin());
}
77/191
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 :
Code : Java - MonDessin.java
package sdz.taquin;
import
import
import
import
import
net.rim.device.api.ui.component.Dialog;
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);
}
}
}
}
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++){
int x = mesVignettes[maPartie.getVignette(i,j)-1].getX();
int y = mesVignettes[maPartie.getVignette(i,j)-1].getY();
EncodedImage img = mesVignettes[maPartie.getVignette(i,j)-1].
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);
}
}
}
}
78/191
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();
}
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;
}
}
int mouvX = touchX - monMouvement.getAnterieur()[0];
int mouvY = touchY - monMouvement.getAnterieur()[1];
if((mesVignettes[monMouvement.getNumero()-1].getX()+mouvX)<monMouvement.getMouvements
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);
}
}
invalidate();
}
return true;
}
}
La classe Vignette
79/191
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. Voici le code de cette classe :
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;
EncodedImage img =
EncodedImage.getEncodedImageResource("vignette"+numero+".png");
image = img.scaleImage32(Fixed32.tenThouToFP(taille),
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;
}
La classe Partie
80/191
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 :
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:
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:
jeu[positionZero[0]][positionZero[1]]=jeu[positionZero[0]][positionZero[1]+1];
jeu[positionZero[0]][positionZero[1]+1]=0;
positionZero[1]++;
k--;
}
break;
81/191
}
}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;
}
}
}
return resultat;
}
82/191
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. Voici le code de cette classe :
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;
}
public int[][] getMouvements(){
return mouvements;
}
public int[] getAnterieur(){

return positionAnt;
}
Les explications
83/191
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
Vous 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. Voici donc ces diffrents attributs :
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
Voici donc le prototype de notre constructeur :
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
pixels, nous pouvons galement initialiser la position de la vignette :
Code : Java
numero = i;
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 :
Code : Java
EncodedImage img =
EncodedImage.getEncodedImageResource("vignette"+numero+".png");
image = img.scaleImage32(Fixed32.tenThouToFP(taille),
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.
84/191
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. Voici donc le code correspondant la
dclaration de l'attribut 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;
}
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;
}
}
85/191
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
d'intervertir sa place avec l'un de ses voisins. Aprs avoir ritr l'opration plusieurs fois, nous avons un jeu suffisamment
mlang. Voici le code correspondant :
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;
}
86/191
}
int k = n;
int[] positionZero = {0,0};
Random monRandom = new Random();
do{
int nb = monRandom.nextInt(4);
switch(nb){
case 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:
jeu[positionZero[0]][positionZero[1]]=jeu[positionZero[0]][positionZero[1]-1];
jeu[positionZero[0]][positionZero[1]-1]=0;
positionZero[1]--;
k--;
}
break;
case 2:
jeu[positionZero[0]][positionZero[1]]=jeu[positionZero[0]+1][positionZero[1]];
jeu[positionZero[0]+1][positionZero[1]]=0;
positionZero[0]++;
k--;
}
break;
case 3:
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

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. Voici donc la liste des attributs dfinis pour cette classe :
Code : Java
private int numero;
public boolean actif;
private int[][] mouvements;
private int[] positionAnt;
87/191
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
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. Voici
les attributs :
Code : Java
private
private
private
private
int echelle;
Vignette[] mesVignettes;
Partie maPartie;
Mouvement monMouvement;
Aucune surprise dans le constructeur si ce n'est la ncessit de raliser une boucle pour faire appel aux constructeurs de la
classe Vignette. Voici ce constructeur :
Code : Java
88/191
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++){
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. Vous 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. Voici donc le code correspondant :
Code : Java
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);
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. Voici comment j'ai ralis ceci :
Code : Java
int mouvX = touchX - monMouvement.getAnterieur()[0];
int mouvY = touchY - monMouvement.getAnterieur()[1];
if((mesVignettes[monMouvement.getNumero()-1].getX()+mouvX)<monMouvement.getMouvements
mesVignettes[monMouvement.getNumero()-1].setX(monMouvement.getMouvements
}else
if((mesVignettes[monMouvement.getNumero()-1].getX()+mouvX)>monMouvement.getMouvements
mesVignettes[monMouvement.getNumero()-1].setX(monMouvement.getMouvements
}else{
mesVignettes[monMouvement.getNumero()-1].addX(mouvX);
}
if((mesVignettes[monMouvement.getNumero()-1].getY()+mouvY)<monMouvement.getMouvements
mesVignettes[monMouvement.getNumero()-1].setY(monMouvement.getMouvements
}else
if((mesVignettes[monMouvement.getNumero()-1].getY()+mouvY)>monMouvement.getMouvements
mesVignettes[monMouvement.getNumero()-1].setY(monMouvement.getMouvements
}else{
mesVignettes[monMouvement.getNumero()-1].addY(mouvY);
}
}
89/191
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
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. Vous
pouvez galement essayer de rorganiser les classes et d'optimiser le code.
Partie 3 : Les techniques avances
90/191
Travailler avec plusieurs vues

Pour dmarrer en douceur cette troisime partie, je vous propose que nous revenions un peu sur les vues. Dans la partie
prcdente, nous avons appris raliser divers types de vues. Maintenant nous allons voir comment travailler avec plusieurs
vues, et comment passer facilement d'une autre. Nous verrons donc trs peu de thorie, mais plutt diverses techniques de
gestion des vues.
Ce chapitre va donc nous permettre de dmarrer cette nouvelle partie en douceur. Je vous invite donc vous lancer dans la suite
de ce cours !
Prparation des vues

Nous allons ici prparer les diffrentes vues que nous utiliserons dans la suite. Ce sera pour vous l'occasion de faire quelques
rvisions sur ce que nous avons dj vu !
La page d'accueil
Objectif
Pour notre premire vue, nous allons utiliser principalement deux lments, savoir une image et un bouton. Ceux-ci seront alors
centrs l'cran avec un dgrad de couleurs en arrire-plan.
Voil donc quoi cela va ressembler :
Le fond et le centrage
Pour grer l'ensemble de la vue de la page d'accueil, nous allons dclarer un conteneur nomm accueil. Afin que les lments
soient centrs au final, nous allons crer un conteneur de type HorizontalFieldManager auquel nous imposerons
d'utiliser toute la place disponible verticalement.
Voil donc comment nous commenons :
Code : Java
HorizontalFieldManager accueil = new
HorizontalFieldManager(Field.USE_ALL_HEIGHT);
Nous allons galement profiter de cette dclaration pour crer le dgrad souhait. Pour cela, nous allons redfinir la mthode
paint() du conteneur :
Code : Java
91/191

HorizontalFieldManager(Field.USE_ALL_HEIGHT){
g.drawGradientFilledRect(0, 0, Display.getWidth(),
Display.getHeight(), 0x009FCFFD, 0x0079B6FC);
super.paint(g);
}
};
Soyez attentifs au fait que l'appel de la mthode de la superclasse super.paint() se fait aprs la cration du
dgrad. En effet si vous ne ralisez pas cela dans cet ordre, vous verrez alors apparatre le dgrad par-dessus les
composants enfants du conteneur.
prsent nous allons crer un nouveau conteneur vertical. Celui-ci sera centr verticalement et utilisera toute la largeur de
l'cran. l'intrieur, nous pourrons ainsi ajouter nos deux lments et les centrer.
Voici donc le code correspondant :
Code : Java
VerticalFieldManager conteneur = new
VerticalFieldManager(Field.FIELD_VCENTER|Field.USE_ALL_WIDTH);
Ajout des composants

Maintenant occupons-nous des composants de notre vue, savoir une image et un bouton !
Pour l'image, j'ai utilis le logo du Site du Zro que je vous invite tlcharger pour pouvoir travailler en mme temps que moi :
logo_sdz.png
Nous allons donc nous servir de la classe BitmapField pour tracer l'image l'cran. Nous en profiterons galement pour
centrer celle-ci horizontalement.
Voil comment faire :
Code : Java
Bitmap logo = Bitmap.getBitmapResource("logo_sdz.png");
BitmapField monBitmap = new BitmapField(logo,Field.FIELD_HCENTER);
Ensuite, crons notre bouton :

Code : Java
ButtonField entrer = new ButtonField("ENTRER",Field.FIELD_HCENTER);
Enfin, il ne nous reste plus qu' ajouter l'ensemble dans les diffrents conteneurs :
Code : Java
conteneur.add(monBitmap);
conteneur.add(entrer);
accueil.add(conteneur);
92/191
ce stade, nous avons donc un conteneur nomm accueil qui contient l'ensemble de notre page d'accueil !
La page de description
Objectif
Maintenant nous allons crer une page de description du Site du Zro.
Pour cela, nous utiliserons donc deux champs de texte, un pour l'intitul et le second pour la description du site.
Page
L'entte
Comme prcdemment, nous allons commencer par crer un conteneur nomm page, qui contiendra donc l'ensemble des
lments de la page de description :
Code : Java
VerticalFieldManager page = new VerticalFieldManager();
Ensuite, nous allons crer un second conteneur de type VerticalFieldManager qui nous servira appliquer une couleur
de fond notre entte. Nous lui imposerons donc d'utiliser toute la largeur de l'cran.
Voici le code :
Code : Java
VerticalFieldManager entete = new
VerticalFieldManager(Field.USE_ALL_WIDTH);
BackgroundFactory.createSolidBackground(0x0079B6FC);
entete.setBackground(maCouleur);
En ce qui concerne le titre de la vue, nous allons utiliser un champ de texte de type LabelField. En effet, il s'agit du seul
champ de texte qui ne prend pas l'ensemble de la largeur lors de sa cration. Ainsi nous pourrons le centrer, et aussi nous
redfinirons sa couleur d'criture.
Voil comment faire tout ceci :
Code : Java
LabelField titre = new LabelField("Le Site du
zr0",Field.FIELD_HCENTER){
};
93/191

super.paint(g);
}
La description
Pour la suite, il n'y a rien de compliqu ou de surprenant. Effectivement, nous allons simplement utiliser un RichTextField
de la manire suivante :
Code : Java
RichTextField description = new RichTextField();
description.setText("Tutoriels pour dbutants en programmation et
dveloppement web.");
Nous n'avons alors plus qu' tout insrer dans les diffrents conteneurs :
Code : Java
entete.add(titre);
page.add(entete);
page.add(description);
Pour la suite, nous avons donc galement un conteneur nomm page qui contient l'ensemble de la page de description.
Mise jour d'un cran

Le principe
Dfinition des vues
La premire technique consiste utiliser un seul cran, savoir notre MyScreen !

Dans ce cas, nous pouvons dclarer deux attributs accueil et page qui contiendront donc l'ensemble de nos deux vues.
Nous pouvons alors dfinir ces deux vues l'intrieur du constructeur de notre classe.
Voil donc quoi ressemble la dfinition de nos deux vues :
Code : Java
package mypackage;
import
import
import
import
import
import
import
import
import
import
import
import
import
import
import
net.rim.device.api.ui.Manager;
net.rim.device.api.ui.component.BitmapField;
net.rim.device.api.ui.component.ButtonField;
net.rim.device.api.ui.component.LabelField;
net.rim.device.api.ui.container.HorizontalFieldManager;
net.rim.device.api.ui.container.VerticalFieldManager;

{
94/191
private HorizontalFieldManager accueil;

private VerticalFieldManager page;
public MyScreen()
{
super(Manager.NO_VERTICAL_SCROLL);
// Accueil
accueil = new HorizontalFieldManager(Field.USE_ALL_HEIGHT){
super.paint(g);
}
};
BitmapField monBitmap = new
BitmapField(logo,Field.FIELD_HCENTER);
ButtonField entrer = new
ButtonField("ENTRER",Field.FIELD_HCENTER);
// Page
page = new VerticalFieldManager();
super.paint(g);
}
};
description.setText("Tutoriels pour dbutants en
programmation et dveloppement web.");
entete.add(titre);
page.add(entete);
}
}
La mise jour de l'cran

l'ouverture de l'application, nous voulons que l'utilisateur tombe sur la vue accueil. C'est pourquoi pour commencer, nous
n'avons qu' ajouter cette vue au conteneur principal :
Code : Java
add(accueil);
L'objectif est alors de remplacer la vue accueil par page lors du clic du bouton. Pour cela nous allons nous servir de la
mthode deleteAll() de la classe Manager. Effectivement, cette mthode permet de supprimer l'ensemble des composants
enfants d'un conteneur. Ainsi nous pourrons par la suite ajouter notre nouvelle vue : page.
Voil donc le code qui nous permettra de faire la transition entre les deux vues :
Code : Java
95/191
deleteAll();
add(page);
Finalement, nous n'avons plus qu' ajouter ce code l'intrieur de la mthode de gestion des vnements du bouton, comme ceci
:
Code : Java
entrer.setChangeListener(new FieldChangeListener() {
deleteAll();
add(page);
}
});
Le code complet
Au final pour utiliser les deux vues dfinies prcdemment, nous avons donc le code suivant :
Code : Java
package mypackage;
import
import
import
import
import
import
import
import
import
import
import
import
import
import
import

{
private HorizontalFieldManager accueil;
private VerticalFieldManager page;
public MyScreen()
{
// Accueil
accueil = new HorizontalFieldManager(Field.USE_ALL_HEIGHT){
super.paint(g);
}
};
96/191
// Page
page = new VerticalFieldManager();
super.paint(g);
}
};
entete.add(titre);
page.add(entete);
// Gestion de la transition entre les vues

add(accueil);
deleteAll();
add(page);
}
});
Travailler par hritage

Utiliser rellement plusieurs vues
Introduction
Comme vous vous en doutez certainement, la mthode prcdente n'est pas vraiment la plus approprie pour grer plusieurs
vues !
Pourquoi, cette technique fonctionne bien ?
Effectivement la technique prcdente fonctionne trs bien et est dans ce cas-l relativement simple d'utilisation. Toutefois nous
n'avons pas ralis de vues extrmement complexes et nous n'avions que deux vues diffrentes. Imaginez maintenant que vous
vouliez faire une application qui sera divise en une multitude de vues. Vous pourriez bien videmment utiliser une seule classe
pour dcrire l'ensemble de vos vues, mais il faut avouer que ce serait un peu le bazar !
Le principe
Je vous ai dj lgrement lch le morceau, mais effectivement nous allons utiliser plusieurs classes. Jusqu' prsent, nous
n'avons utilis qu'une unique classe pour dcrire les vues de nos applications : MyScreen. C'est pourquoi nous allons
maintenant dfinir de vraies vues, en dfinissant plusieurs classes qui hritent de MainScreen. Nous pourrons ainsi
passer d'une vue une autre en utilisant la mthode pushScreen() de la classe UiApplication, dont je suis certain que
vous aviez oubli l'existence !
Cependant, nous sommes ici confront un lger problme.
En effet, comment accder la mthode pushScreen() depuis l'intrieur d'une classe enfant ?
97/191
Dans certains langages tels que l'Actionscript, il existe un mot-cl parent qui permet d'accder la classe parente dont
l'instance en est un enfant. Cependant, ce mot-cl n'a pas d'quivalent en Java, et nous allons donc devoir faire autrement.
En ralit, nous allons dclarer un attribut de type UiApplication l'intrieur de nos MainScreen, afin de pouvoir passer
une rfrence de notre application. Ne vous inquitez pas si vous ne comprenez pas bien, nous allons tout de suite voir ce que
cela donne au niveau du code.
Nos deux vues

Comme nous l'avons dit, nous allons prsent utiliser une classe pour chacune de nos vues. Je vous laisse donc dcouvrir les
classes Accueil et Page, o nous avons spar la dfinition des deux vues.
La classe Accueil
Code : Java - Accueil.java
package mypackage;
import
import
import
import
import
import
import
import
import
import
import
import
net.rim.device.api.ui.UiApplication;
public final class Accueil extends MainScreen

{
private UiApplication monApp;
public Accueil(UiApplication app)
{
monApp = app;
// Accueil
super.paint(g);
}
};
add(accueil);
}
}
La classe Page
Code : Java - Page.java
98/191
package mypackage;
import
import
import
import
import
import
import
import
import
import
public class Page extends MainScreen{

public Page(UiApplication app){
monApp = app;
// Page
VerticalFieldManager page = new VerticalFieldManager();
super.paint(g);
}
};
entete.add(titre);
page.add(entete);
add(page);
}
}
Afficher les vues

Au lancement de l'application
tant donn que nous avons ajout un attribut UiApplication chacune de nos classes, et que leurs constructeurs
prennent un nouveau paramtre, nous allons donc devoir modifier lgrement la classe principale. Pour cela, nous enverrons
donc une rfrence l'application en cours en utilisant le mot-cl this.
Voil donc le nouveau constructeur de notre classe principale :
Code : Java
public MonApp()
{
pushScreen(new Accueil(this));
}
Ainsi nous aurons donc accs cette mthode pushScreen() depuis l'intrieur de nos classes de vues.
99/191
La transition entre les vues

Maintenant que nous avons une rfrence notre application, nous pouvons donc changer de vue, simplement grce
l'instruction suivante :
Code : Java
monApp.pushScreen(new Page(monApp));
Il nous suffit donc de l'insrer l'intrieur de la mthode fielChanged() qui nous permet de grer les vnements de notre
bouton entrer.
Voil donc l'action associe au bouton entrer :
Code : Java
}
});
La classe Accueil complte

Pour finir, je vous propose donc le code complet de la classe Accueil, afin que vous puissiez tester par vous-mmes :
Code : Java - Accueil.java
package mypackage;
import
import
import
import
import
import
import
import
import
import
import
import
public final class Accueil extends MainScreen

{
public Accueil(UiApplication app)
{
monApp = app;
// Accueil
super.paint(g);
}
};
100/191

}
});
add(accueil);
}
}
Pour supprimer l'ensemble des enfants d'un conteneur et pouvoir le mettre jour, il existe la mthode deleteAll().
Pour travailler avec diffrentes vues, il est prfrable de crer une classe hritant de MainScreen pour chacune d'entre
elles.
Afin de pouvoir passer d'une vue une autre, il est ncessaire de dfinir un attribut de type UiApplication et d'y
stocker une rfrence de la classe principale.
La mthode pushScreen() permet d'effacer la vue actuelle et de la remplacer par une nouvelle.
101/191
L'internationalisation
Plus tard, lorsque vous crerez des applications, vous serez amens dfinir l'tendue d'utilisation de celle-ci. J'entends par l
qu'il vous faudra dterminer si votre application est susceptible d'tre utilise l'tranger. Si c'est le cas, vous devrez alors
l'adapter diffrentes langues.
Dans ce chapitre, nous allons donc voir comment utiliser des ressources et comment s'en servir pour crer des applications
multilingues.
Crer des ressources

Prparation du projet
Introduction
Comme je vous l'ai dit en introduction, pour grer des applications multilingues nous allons devoir utiliser ce qu'on appelle des
ressources !
Qu'est-ce qu'une ressource ?
Les ressources sont en fait des fichiers dans lesquels nous allons pouvoir dfinir nos champs de texte en diffrentes langues. Le
principe est alors de dfinir diffrents champs que nous nommerons des cls. Celles-ci sont alors associes diverses chanes
de caractres, une pour chaque langue dsire. L'ide est ensuite non pas d'associer une chane de caractres un objet
graphique, mais plutt une cl qui elle contiendra l'ensemble des traductions.
Nous allons donc voir dans ce chapitre comment raliser tout ceci.
Crer une ressource

Pour crer un fichier de ressources, cliquez sur File > New > BlackBerry Resource File :
Nous allons donc crer un nouveau fichier de ressources nomm Langue.rrh l'intrieur du dossier mypackage :
102/191
Pour ce chapitre, nous insrerons les fichiers de ressources dans le mme dossier que les sources en elles-mmes. En
revanche lorsque vous dvelopperez des applications plus consquentes, je vous recommande de les sparer des
fichiers sources et de tout bien organiser dans diffrents dossiers.
Vous devriez alors voir apparatre deux fichiers dans l'arborescence de votre projet nomms Langue.rrh et Langue.rrc,
comme ci-dessous :
Ajouter une nouvelle ressource

Prcdemment, nous n'avons en ralit cr une ressource uniquement pour pour la langue par dfaut. C'est pourquoi pour
103/191
ajouter une nouvelle langue notre application, nous allons devoir ajouter un nouveau fichier .rrc .
Je vous propose donc d'ajouter un fichier pour la langue franaise nomm Langue_fr.rrc :
Contrairement ce que vous pourriez croire, l'extension _fr est impose pour la langue franaise. Pour savoir
quelle extension choisir, je vous invite jeter un il la classe Locale du package net.rim.device.api.i18n
de l'API Reference.
Implmentation des ressources

L'utilisation des ressources est assez spciale, puisqu'elle consiste implmenter celles-ci. Le nom de la pseudo-interface
implmenter alors est le nom du fichier .rrh suivi du terme Resource.
Ainsi dans notre cas, le nom sera LangueResource :
Code : Java
public final class MyScreen extends MainScreen implements
LangueResource
Une fois implmente, la ressource doit galement tre dclare en tant qu'attribut. Pour faire cela, utilisez la syntaxe suivante :
Code : Java
private static ResourceBundle langue =
ResourceBundle.getBundle(BUNDLE_ID, BUNDLE_NAME);
Dans la suite, nous accderons donc aux diffrents champs de la ressource grce cet attribut langue.
Utiliser les ressources

Travailler les ressources
ce stade, vous devriez normalement avoir les trois fichiers suivants : Langue.rrh, Langue.rrc et Langue_fr.rrc.
Ajouter une cl
Avant toute chose, commencez par ouvrir le fichier Langue.rrh. Vous verrez alors apparatre une sorte de tableau comme cidessous :
104/191
Comme vous pouvez le voir, nous allons ici pouvoir associer des valeurs des cls. Il nous faut donc commencer par ajouter une
nouvelle cl, en cliquant sur Add Key. Renseignez alors le nom du champ :
Il est de coutume d'utiliser les ressources comme des constantes de classes. C'est pourquoi je vous recommande
d'utiliser les noms en majuscules pour dfinir vos champs. Cette technique vous permettra galement de faire plus
facilement la distinction entre les cls et leurs valeurs.
Nous venons donc de crer notre premire cl que vous pouvez maintenant voir :
Remplir les champs
105/191
l'ouverture du fichier de ressources, vous tombez normalement sur les ressources de la langue par dfaut, c'est--dire l'anglais.
Vous pouvez donc commencer remplir les champs en version anglaise dans la section values.
Voil donc ce que nous avons prsent :
Pour passer d'une langue une autre, il suffit de naviguer dans les diffrents onglets visibles au bas de la fentre d'dition :
Si vous passez dans l'onglet fr, vous verrez alors que le champ values de CHAMP est vide. C'est normal puisqu'il s'agit de la
valeur pour la version franaise, vous pouvez alors renseigner une chane de caractres diffrente de la version anglaise :
Nos fichiers de ressources sont prsent prts tre utiliss. Nous n'avons ici dfini qu'une seule cl, mais vous pouvez en
ajouter autant que vous le souhaitez.
Les cls l'intrieur du code

La partie intressante maintenant est de pouvoir rcuprer les valeurs de nos cls l'intrieur du code. Pour cela nous allons
utiliser la mthode getString() de notre objet langue de type ResourceBundle.
Voici donc comment rcuprer la valeur de notre cl CHAMP :
Code : Java
106/191
String monChamp = langue.getString(CHAMP);
La valeur slectionne lors de l'excution dpend alors de la langue par dfaut du smartphone. Toutefois, il est possible de
changer la langue en utilisant l'instruction suivante :
Code : Java
Locale.setDefault (Locale.get(Locale.LOCALE_fr, null));
Il est alors possible tout moment de revenir n'importe quelle langue :

Code : Java
Locale.setDefault (Locale.get(Locale.LOCALE_en, null));
Lorsque vous changez la langue de votre application, il est prfrable de mettre jour les champs manuellement en
redfinissant chacun d'entre eux. Pour vous familiariser avec tout ceci, je vous propose de dcouvrir un exemple
d'application ci-dessous.
Une application multilingue

Prparation des ressources
Les chanes de caractres anglaises
Dans l'exemple d'application que nous allons raliser, nous rutiliserons les ressources dfinies plus haut. Nous aurons donc
deux langues savoir : l'anglais et le franais.
Au lieu de faire un long discours, je vous laisse dcouvrir les diffrentes cls ajoutes ainsi que leurs valeurs anglaises
associes :
Ressources anglaises
Les chanes de caractres franaises

Pour la langue franaise, nous retrouverons donc les mmes cls. Nous allons donc uniquement changer leur valeur comme suit :
107/191
Ressources franaises
Les sources
Le code utilis dans cette application n'est pas trs complexe, c'est pourquoi je vous propose directement l'intgralit de celui-ci.
Les points qui mritent votre attention sont l'affectation des ressources et la gestion des vnements lis la liste droulante.
Voici donc le code de cette application :
Code : Java
package mypackage;
import
import
import
import
import
import
import
import
import
import
net.rim.device.api.i18n.Locale;
net.rim.device.api.i18n.ResourceBundle;
net.rim.device.api.ui.component.ObjectChoiceField;
net.rim.device.api.ui.component.SeparatorField;
public final class MyScreen extends MainScreen implements

LangueResource
{
private static ResourceBundle langue =
ResourceBundle.getBundle(BUNDLE_ID, BUNDLE_NAME);
private ObjectChoiceField maListe;
private LabelField nomLabel;
private RichTextField nomTexte;
private LabelField descriptionLabel;
private RichTextField descriptionTexte;
private LabelField adresseLabel;
private RichTextField adresseTexte;
");
public MyScreen()
{
// Affectation des ressources
setTitle(langue.getString(TITLE));
nomLabel = new LabelField(langue.getString(NAME_LABEL) + " :
nomTexte = new RichTextField("Site du Zro");

descriptionLabel = new
LabelField(langue.getString(DESCRIPTION_LABEL) + " : ");
descriptionTexte = new
108/191
RichTextField(langue.getString(DESCRIPTION_TEXT));
adresseLabel = new
LabelField(langue.getString(ADRESSE_LABEL) + " : ");
adresseTexte = new RichTextField("www.siteduzero.com");
// Cration de la liste droulante
String mesLangues[] = {"English","Franais"};
maListe = new
ObjectChoiceField(langue.getString(LANGUAGE_LABEL) + " :
",mesLangues,0);
// Cration des conteneurs
HorizontalFieldManager nomManager = new
HorizontalFieldManager();
HorizontalFieldManager descriptionManager = new
HorizontalFieldManager adresseManager = new
// Mise en place des composants
nomManager.add(nomLabel);
nomManager.add(nomTexte);
descriptionManager.add(descriptionLabel);
descriptionManager.add(descriptionTexte);
adresseManager.add(adresseLabel);
adresseManager.add(adresseTexte);
// Gestion de l'affichage final
add(nomManager);
add(descriptionManager);
add(adresseManager);
add(maListe);
// Gestion des vnements lis la liste droulante
maListe.setChangeListener(new FieldChangeListener() {
if(maListe.getChoice(maListe.getSelectedIndex()) ==
"English"){
Locale.setDefault (Locale.get(Locale.LOCALE_en,
null));
}else{
Locale.setDefault (Locale.get(Locale.LOCALE_fr,
null));
}
// Mise jour des champs
setTitle(langue.getString(TITLE));
nomLabel.setText((langue.getString(NAME_LABEL) + " :
"));
nomTexte.setText(("Site du Zro"));
descriptionLabel.setText((langue.getString(DESCRIPTION_LABEL) + " :
"));
descriptionTexte.setText((langue.getString(DESCRIPTION_TEXT)));
adresseLabel.setText((langue.getString(ADRESSE_LABEL) + " : "));
adresseTexte.setText("www.siteduzero.com");
maListe.setLabel(langue.getString(LANGUAGE_LABEL) +
" :");
}
});
}
}
109/191
Rsultat final
Nous allons enfin pouvoir admirer le rsultat de ces manipulations de ressources. Lancez donc l'application ralise !
Version anglaise
tant donn que par dfaut votre simulateur est en anglais, vous devriez donc tomber sur l'cran suivant :
Version anglaise
Version franaise
Si vous avez analys le code prcdent, vous devez savoir que pour changer la langue il suffit de mettre jour la liste droulante.
Je vous invite donc passer sur la valeur Fanais .
Vous verrez alors l'ensemble des champs se mettre jour :
Version franaise
Pour internationaliser son application, il est ncessaire d'utiliser des ressources.

Les ressources sont composes d'un fichier .rrh et de fichiers .rrc, dont le nombre dpend des langues que vous
souhaitez intgrer.
l'intrieur des ressources, nous dfinissons des cls associes une valeur pour chacune des langues.
L'utilisation des ressources se fait par implmentation de celles-ci.
Les classes ResourceBundle et Locale permettent de se servir des ressources l'intrieur du code.
110/191
Le stockage de donnes
prsent nous allons apprendre stocker des donnes l'intrieur du smartphone. Bien sr, il est possible de stocker tout type
de donnes. Toutefois dans ce cours, nous nous contenterons de grer des fichiers de type texte avec l'extension .txt .
Nous verrons donc comment crer un fichier, puis comment y crire dedans et lire son contenu.
Soyez attentif au cours de ce chapitre, car les notions vues ici vous seront grandement utiles dans le chapitre suivant qui est un
TP !
Grer des donnes

Introduction au stockage
Comme dit en introduction, nous allons dans ce chapitre nous intresser au stockage de donnes. Contrairement aux variables
qui sont stockes dans la mmoire vive, les donnes seront ici stockes sur le disque dur du smartphone ou ventuellement sur
une carte mmoire externe. Dans le second cas, il s'agit d'une carte SD que vous pouvez insrer dans l'appareil.
Afin d'viter de s'embter plus tard avec les chemins absolus correspondant au disque dur et la carte externe, je suggre que
nous crions deux constantes : DEVICE et SD_CARD. Ainsi nous n'aurons plus nous proccuper des chemins depuis la
racine , et surtout cela nous vitera de faire des erreurs.
Voici donc ces constantes :
Code : Java
public static final String SD_CARD = "file:///SDCard/";
public static final String DEVICE =
"file:///store/home/user/documents/";
Ainsi ces constantes seront accessibles par les expressions MyScreen.SD_CARD et MyScreen.DEVICE.
L'interface FileConnection
Une histoire de connexion
Quand nous parlons de stockage de donnes, nous faisons gnralement allusion l'criture ou la lecture d'un fichier. Pour
raliser ces actions, nous faisons en ralit une connexion ce fichier. Une fois la connexion tablie, il est ensuite possible de
raliser toutes sortes de modifications sur ce fichier. Une fois celles-ci termines, il est alors ncessaire de fermer cette connexion
afin de casser le lien avec le fichier.
En ce qui nous concerne, la connexion un fichier, ou un dossier, se ralise l'aide de l'interface FileConnection. Une fois
la connexion ralise, cette interface permet galement de manipuler le fichier ou dossier correspondant grce ses mthodes.
Avant d'aller plus loin, je vous propose de dcouvrir l'instruction permettant de raliser cette liaison :
Code : Java
FileConnection fc = (FileConnection)Connector.open(/* Chemin */);
tant donn que la connexion un fichier ou un dossier peut chouer et donc gnrer des erreurs, nous devrons raliser
l'ensemble des oprations l'intrieur d'un bloc try{....} catch{...}.
Voici donc la structure de base pour utiliser des donnes externes au programme :
Code : Java
try
{
*/);
FileConnection fc = (FileConnection)Connector.open(/* Chemin

// Manipulation de la donne
fc.close();
}
catch (IOException ioe)
{
System.out.println(ioe.getMessage());
111/191
Vous remarquerez que j'ai utilis la mthode close() de l'interface FileConnection pour fermer la connexion la
donne. Cette instruction est trs importante et ne doit pas tre oublie lorsque vous changez avec l'extrieur d'une
application.
Manipulation d'une donne

Maintenant que vous savez comment raliser une connexion un fichier ou dossier, nous allons pouvoir commencer travailler
avec les diffrentes mthodes de l'interface FileConnection.
Pour dmarrer, je vais vous introduire la mthode exists() que nous utiliserons maintenant chaque fois. En effet, il est
probable que la donne que vous voulez atteindre n'existe tout simplement pas. C'est pourquoi partir de maintenant, nous
allons devoir vrifier chaque fois si la donne en question existe. Dans le cas contraire, nous la crerons !
Sachant que la mthode exists() renvoie une valeur boolenne, nous pouvons directement l'insrer dans une condition :
Code : Java
try
{
FileConnection fc = (FileConnection)Connector.open(systeme +
dossier + "/");
if (!fc.exists())
{
// Crer la donne
}
fc.close();
}
{
System.out.println(ioe.getMessage());
}
l'intrieur des accolades du if, nous allons donc crer notre donne. Il peut donc s'agir d'un dossier ou d'un fichier. Comme
vous l'imaginez, l'instruction n'est pas la mme dans les deux cas.
Tout d'abord, voici comment crer un dossier l'aide de la mthode mkdir() :
Code : Java
fc.mkdir();
Pour crer un fichier, l'instruction est tout aussi simple grce la mthode create(). Voici comment faire :
Code : Java
fc.create();
Une autre mthode qui pourrait vous tre utile est delete(), qui permet de supprimer un fichier comme un dossier. Nanmoins
celle-ci suppose que vous ayez la donne correspondante. C'est pourquoi elle doit s'utiliser avec la condition suivante :
Code : Java
if (fc.exists())
{
fc.delete();
}
112/191
Notez bien la diffrence avec la condition prcdente. Ici, l'expression est fc.exists() sans ! , car le fichier doit
obligatoirement exister.
Cration de donnes
Maintenant que vous possdez toutes les bases pour grer des donnes, je vais simplement vous prsenter des mthodes
toutes faites.
Crer un dossier
Pour commencer, voici une mthode que j'ai nomme creerDossier() et qui bien videmment permet de crer un dossier :
Code : Java
public void creerDossier(String dossier, String systeme){
try
{
dossier);
if (!fc.exists())
{
fc.mkdir();
}
fc.close();
}
{
System.out.println(ioe.getMessage() );
}
}
Rien de nouveau ici, si ce n'est la construction par segment du chemin absolu du dossier.
Voici donc un exemple d'utilisation de cette mthode :
Code : Java
creerDossier("SdZ/", MyScreen.SD_CARD);
Pour pouvoir se connecter un dossier, le caractre / de sparation des dossiers doit tre prsent la fin du nom
du dossier. Pensez donc bien le mettre lors de la saisie du chemin de votre dossier.
Crer un fichier
Cette mthode creerFichier() est identique la prcdente mise part la cration l'aide de create() :
Code : Java
public void creerFichier(String fichier, String systeme){
try
{
fichier);
if (!fc.exists())
{
fc.create();
}
fc.close();
}

{
}
113/191
Voici comment l'utiliser :

Code : Java
creerFichier("fichier.txt", MyScreen.DEVICE);
Supprimer une donne

Comme nous l'avons dit, l'opration pour supprimer un fichier ou un dossier est strictement la mme. C'est pourquoi nous ne
crerons qu'une mthode permettant de supprimer tout type de donnes.
Voici cette mthode nomme supprimerDonnee() :
Code : Java
public void supprimerDonnee(String donnee, String systeme){
try
{
donnee);
if (fc.exists())
{
fc.delete();
}
fc.close();
}
{
}
}
Grce cette mthode nous pouvons donc supprimer notre fichier fichier.txt, comme cela :
Code : Java
supprimerDonnee("fichier.txt", MyScreen.DEVICE);
Puis voici comment supprimer notre dossier SdZ cr plus haut :

Code : Java
supprimerDonnee("SdZ/", MyScreen.SD_CARD);
Accder physiquement aux donnes

Prcdemment nous avons appris crer et supprimer des fichiers comme des dossiers. Toutefois, la seule manire de bien
visualiser ces manipulations est d'aller fouiller directement dans les fichiers du smartphone. Nous allons donc maintenant
voir comment rcuprer ces donnes depuis l'extrieur de notre application.
Stockage l'intrieur du smartphone

Dans un premier temps, nous allons crer un nouveau dossier. Pour cela, nous utiliserons donc notre mthode
114/191
creerDossier() comme ceci :

Code : Java
creerDossier("SdZ/", MyScreen.DEVICE);
Aprs excution, le dossier SdZ est normalement cr. Pour vrifier, nous allons entrer dans les dossiers du disque dur du
smartphone. Pour faire a, commencez par cliquer sur l'icne Applications comme ci-dessous :
Ensuite, entrez dans l'explorateur de fichiers reprsent par l'icne slectionne ci-dessous :
Puis rendez-vous dans l'explorateur de dossiers par hirarchie en cliquant sur File Folders comme prsent sur l'image
suivante :
115/191
N'ayant pas encore insr de carte mmoire, nous n'avons pour l'instant accs uniquement au smartphone. N'ayant pas le choix,
cliquez donc sur Device :
Maintenant suivez le cheminement que nous avons ralis, c'est--dire home/user/documents/. Arriv l'intrieur du
rpertoire documents, vous devriez alors trouver notre dossier SdZ.
Voil ce que j'obtiens :
116/191
Stockage sur une carte externe

Crer une carte mmoire
Comme nous avons vu plus haut, il est possible de stocker des donnes l'intrieur d'une carte mmoire externe. En revanche
pour que cela soit ralisable, il faut bien entendu que le smartphone dispose d'une carte mmoire. Nous allons donc commencer
par ajouter une carte mmoire notre simulateur.
Pour cela, lancez votre simulateur, puis allez dans Change SD Card... du menu Simulate :
Vous arrivez alors sur le gestionnaire de cartes mmoires. Pour en crer une nouvelle, cliquez sur le bouton suivant :
Maintenant nous allons pouvoir paramtrer notre carte. Ainsi, renseignez un emplacement o stocker votre carte sur votre
ordinateur puis spcifiez la taille de la mmoire :
Une fois le bouton Create cliqu, vous verrez apparatre votre carte dans le gestionnaire. Cependant celle-ci n'est pas encore
insre dans le smartphone. C'est pourquoi vous allez cocher la case Remount SD Card On Startup et cliquer sur le
bouton Mount selected en haut droite de la fentre :
Une fois la fentre ferme, il est probable qu'on vous demande de formater votre carte mmoire. Acceptez en cliquant sur Yes :
117/191
Attendez durant le formatage de celle-ci. Une fois termin, votre carte est prte tre utilise :
Accder au dossier de la carte mmoire

Maintenant que notre carte est insre dans l'appareil, nous allons pouvoir y stocker des donnes. Crons donc un dossier
grce l'instruction suivante :
Code : Java
creerDossier("SdZ", MyScreen.SD_CARD);
Pour visualiser notre nouveau dossier, nous devons retourner dans l'explorateur de fichiers. Une autre manire d'y accder est de
se placer sur la catgorie Media, puis d'appuyer sur la touche menu de votre smartphone :
Dans le menu qui apparat, cliquez sur Explore :
118/191
Dans File Folders, vous devriez normalement voir une nouvelle entre : Media Card. En cliquant dessus, vous entrez
donc dans la carte mmoire externe :
Comme nous nous y attendions, un dossier SdZ est prsent :
119/191
Un fichier de test
Juste par curiosit, nous allons crer cette fois un fichier et non pas un dossier. Nous allons donc rutiliser la mthode
creerFichier() que nous avions auparavant ralise :
Code : Java
creerFichier("fichier.txt", MyScreen.DEVICE);
Sans grande surprise, nous trouvons notre fichier nomm fichier.txt l'emplacement prvu :
Lire et crire dans un fichier

Un systme binaire
Un peu de thorie
Avant de nous lancer dans la suite, revenons un peu sur de la thorie, en particulier sur le langage binaire.
Pour illustrer ce qui va tre dit, nous allons prendre comme comparaison notre belle langue natale, le franais !
La base de notre langage, c'est la lettre. Nous avons donc un alphabet de 26 lettres, grce auquel nous pouvons crer des mots
et faire des phrases. Ainsi, l'aide de seulement 26 lettres (ou symboles), nous sommes capables de raliser des millions et des
millions de phrases et dire tout ce qu'on veut. Un appareil lectronique fonctionne de la mme manire.
Ci-dessus, vous pouvez voir un signal lectrique tel qu'on peut en trouver dans tout appareil lectronique. On dfinit alors un 1
logique et un 0 logique pour reprsenter les tats haut et bas du signal. On obtient donc notre base du langage binaire
(binaire pour deux symboles). Et de la mme manire que les phrases, on peut raliser des instructions grce une succession de
0 et de 1. Voil le seul langage que les appareils lectroniques comprennent !
Pour en revenir notre problme, le stockage de donnes se fait galement en binaire. Ainsi les donnes sont enregistres sous
la forme de mots binaires appels bytes. C'est pourquoi lorsque nous voudrons enregistrer ou lire du texte, nous allons devoir
faire la conversion en bytes.
La classe String
En fait la conversion d'une chane de caractres en bytes est appele l'encodage !
Il existe plusieurs manires d'encoder du texte, et le systme d'exploitation BlackBerry OS en prend en charge plusieurs, savoir :
120/191
ISO-8859-1
UTF-8
UTF-16BE
US-ASCII.
Ainsi la classe String dispose de mthodes qui permettent de faire l'encodage suivant ces diffrentes normes. La mthode
getBytes() par exemple sert encoder un texte.
Voici donc comment convertir une chane de caractres nomme monTexte de type String en bytes :
Code : Java
monTexte.getBytes("UTF-8");
En ralit, en Java il existe un type byte reprsentant un mot binaire. Ainsi l'instruction prcdente renvoie en fait un tableau de
type byte[].
L'opration inverse est bien videmment ralisable. Pour cela, nous pouvons utiliser directement le constructeur de la classe
String. Voici par exemple comment retrouver une chane de caractres partir d'une variable donnees de type byte[] :
Code : Java
monTexte = new String(donnees, "UTF-8");
Sachant que le systme d'exploitation dispose dj d'un encodage par dfaut ( savoir ISO-8859-1), il peut tre facultatif
de renseigner l'encodage lors de l'appel des mthodes getBytes() et String().
criture dans un fichier

La classe OutputStream
L'interface FileConnection ne permet pas de lire ou d'crire dans un fichier. C'est pourquoi nous sommes obligs de passer
par des classes annexes pour le faire. En ce qui concerne l'criture, nous disposons de la classe abstraite OutputStream.
Pour dclarer et initialiser une variable de type OutputStream, nous devons alors passer par la mthode
openOutputStream() de l'interface FileConnection :
Code : Java
OutputStream os = fc.openOutputStream();
Une fois ralis, nous pouvons enfin crire l'intrieur de ce fichier grce la mthode write(). Celle-ci prend alors en
paramtre les donnes stocker sous la forme d'un tableau byte[]. Nous aurons ainsi besoin ici d'utiliser la mthode
getBytes() prsente plus haut.
Voici donc comment insrer une chane de caractres nomme monTexte dans le fichier :
Code : Java
os.write(monTexte.getBytes());
Enfin pour finir, il est ncessaire de fermer la connexion comme pour l'interface FileConnection :
Code : Java
os.close();
121/191
Une mthode complte

Pour vous simplifier les choses dans l'avenir, je vous propose donc une mthode ecrireFichier() qui contient tout le code
pour pouvoir crire un texte nomm donnees dans un fichier.
Voici le code de cette mthode :
Code : Java
public void ecrireFichier(String fichier, String systeme, String
donnees){
try
{
fichier);
if (fc.exists())
{
fc.delete();
}
fc.create();
os.write(donnees.getBytes());
os.close();
fc.close();
}
{
}
}
Vous remarquerez qu' l'intrieur de cette mthode, nous effaons le fichier avant d'y crire dedans. Ceci s'explique par
le fait que l'enregistrement d'un fichier n'affecte que les bytes concerns par le nouveau fichier. Ainsi si votre fichier
tait auparavant plus long, vous aurez des rsidus de caractres de votre ancienne version la fin du fichier.
Voici galement comment utiliser cette mthode pour crire l'intrieur du fichier fichier.txt cr tout l'heure :
Code : Java
String monTexte = "Ceci est le texte de mon fichier !";
ecrireFichier("fichier.txt", MyScreen.DEVICE, monTexte);
Ouverture du fichier
Le meilleur moyen de vrifier si le code prcdent marche est encore d'ouvrir le fichier en question. Pour faire a, rendez-vous
dans l'explorateur de fichier, puis cliquez sur fichier.txt pour l'ouvrir :
122/191
Une fois le fichier charg, vous devriez normalement retrouver la chane de caractres crite plus tt :
Lecture d'un fichier

La classe InputStream
Identiquement OutputStream, nous disposons de la classe abstraite InputStream pour lire le contenu d'un fichier.
La dclaration d'une variable de ce type est donc trs similaire :
Code : Java
InputStream is = fc.openInputStream();
La rcupration du contenu du fichier se fait de manire assez spciale. En effet pour cela il faut utiliser la mthode
streamToBytes() de la classe IOUtilities. Celle-ci renvoie alors une variable de type byte[] que nous pourrons
dcrypter par la suite.
Voici comment a se passe :
Code : Java
byte[] data = IOUtilities.streamToBytes(is);
123/191
Enfin, il faut bien videmment fermer ceci :

Code : Java
is.close();
Une mthode complte

Comme d'habitude, je vais maintenant vous fournir une mthode tout prte l'emploi.
Voici donc le code de cette mthode que j'ai appele lireFichier() :
Code : Java
public String lireFichier(String fichier, String systeme){
String donnees = new String();
try
{
fichier);
if (!fc.exists())
{
fc.create();
}
is.close();
fc.close();
donnees = new String(data);
}
{
}
return(donnees);
}
La mthode lireFichier() renvoie une variable de type String. Nous pouvons ainsi afficher son contenu l'aide d'un
composant de type RichTextField par exemple.
Voil donc ce que je vous propose :
Code : Java
setTitle("fichier.txt");
add(new RichTextField(lireFichier("fichier.txt", MyScreen.DEVICE)));
En lanant l'application, vous verrez apparatre le contenu de votre fichier l'intrieur du champ de texte, comme vous pouvez le
voir ci-dessous :
124/191
Pour travailler avec un fichier, il est ncessaire d'tablir une connexion avec celui-ci.
L'interface FileConnection permet de se connecter un fichier ou un dossier et d'effectuer diverses oprations
dessus.
Les mthodes mkdir(), create() et delete() servent respectivement crer un dossier, crer un fichier et
supprimer tout type de donnes.
L'encodage d'un texte en bytes est ralis l'aide des mthodes String() et getBytes() de la classe String.
L'criture dans un fichier se fait via la classe OutputStream, et plus particulirement la mthode write().
La lecture du contenu d'un fichier ncessite l'utilisation des classes InputStream et IOUtilities.
125/191
TP : un diteur de texte
Nous revoici dans un chapitre un peu spcial, puisqu'il s'agit d'un TP !
Ce sera donc l'occasion pour vous de pratiquer nouveau un peu avant de passer d'autres notions plus thoriques. Au cours
de ce TP nous allons, ou plutt vous allez, raliser un diteur de texte qui vous permettra d'diter diffrents types de fichiers.
Bien entendu je vous fournirai la correction de celui-ci ainsi que des explications, qui vous permettront de finaliser ou de
comparer votre solution avec la mienne.
Le cahier des charges

Spcification du projet
Au cours de ce TP, nous allons donc raliser un diteur de texte simplifi. videmment vous pourrez adopter le design que
vous voulez pour cette application, nanmoins essayez de respecter au maximum mon interface graphique si vous souhaitez
pouvoir comparer votre code avec le mien.
Sans plus attendre, je vous propose donc de faire un tour des lments que vous aurez besoin de raliser :
un champ de saisie de texte pour pouvoir diter le contenu du fichier
un second champ de saisie de texte pour pouvoir spcifier le fichier diter
un bouton Nouveau qui permettra de rinitialiser les deux champs de texte prcdents
un bouton Ouvrir pour pouvoir charger le contenu d'un fichier
un bouton Sauvegarder pour enregistrer le contenu du champ de texte l'intrieur du fichier
un bouton Quitter qui servira sortir de l'application.
Puis pour finir, je vous laisse dcouvrir ce que j'obtiens en utilisant le code de la correction :
Notez que suivant la taille du contenu du fichier, il se peut que votre application ait besoin d'une barre de dfilement
126/191
verticale. Afin de conserver les divers boutons de contrle de l'application, vous devrez alors tre vigilants dfinir le
dfilement sur le texte et non sur l'ensemble de la vue.
Enfin, pour fluidifier et amliorer l'utilisation des boutons, j'ai ajout une bote de dialogue pour confirmer l'enregistrement du
fichier. D'autre part, j'interdis galement l'enregistrement ou l'ouverture d'un fichier si aucun nom de fichier n'est renseign. Pour
cela j'utilise aussi des botes de dialogue.
Avant de commencer
Le champ de texte d'dition
Dans la partie prcdente, je vous ai introduit les champs de texte ditables uniquement grce la classe EditField.
Nanmoins il existe d'autres manires d'y parvenir, notamment l'aide de la classe TextField.
Ainsi dans le cas de l'diteur de texte, j'utilise ce type de champ de la faon suivante :
Code : Java
monTexte = new TextField(Field.EDITABLE);
Toutefois, vous pouvez tout fait utiliser des champs de texte de type EditField ou encore BasicEditField. vous de
choisir la classe que vous souhaitez, tant que vous parvenez au bout du TP.
Le dfilement du contenu
Les dfilements sont en ralit lis aux conteneurs et non aux composants en eux-mmes. Ainsi en ce qui concerne le dfilement
vertical dans notre application, vous serez certainement amens utiliser les constantes de la classe Manager. En particulier
retenez votre attention sur les constantes suivantes : Manager.NO_VERTICAL_SCROLL,
Manager.VERTICAL_SCROLL, Manager.VERTICAL_SCROLLBAR.
Je ne vous en dis pas plus, vous de trouver comment utiliser des constantes pour obtenir le rendu dsir !
Les icnes des boutons

Enfin avant de finir, je vous propose de tlcharger les diffrentes icnes de boutons afin que vous puissiez au mieux vous
rapprocher des aperus prsents plus haut.
Voici donc les quatre images en question :
nouveau.png
ouvrir.png
sauvegarder.png
quitter.png
Allez, c'est parti !
La correction
Comme dans le dernier TP, je vous propose dans un premier temps uniquement l'ensemble du code source sans explications. Je
vous prsenterai donc les trois classes que j'ai utilises pour raliser cette application.
N'hsitez donc pas essayer cette application en copiant-collant le code source !
Encore une fois le code est propos sans commentaire, et les explications seront alors donnes dans la suite.
La classe MonApp
Aucune surprise pour cette classe maintenant bien connue :
Code : Java - MonApp.java
package mypackage;
public class MonApp extends UiApplication
{
127/191

{
MonApp theApp = new MonApp();
}
public MonApp()
{
pushScreen(new Editeur());
}
La classe ConnexionFichier
La classe ConnexionFichier permet exclusivement de faire les connexions vers le fichier en cours d'dition. Nous
retrouverons ainsi l'intrieur les mthodes lireFichier() et ecrireFichier() dfinies dans le chapitre prcdent.
Voici donc le code de cette classe :
Code : Java - ConnexionFichier.java
package mypackage;
import
import
import
import
import
import
java.io.IOException;
java.io.InputStream;
java.io.OutputStream;
javax.microedition.io.Connector;
javax.microedition.io.file.FileConnection;
net.rim.device.api.io.IOUtilities;
public class ConnexionFichier {

private static final String DEVICE =
"file:///store/home/user/documents/";
public static void ecrireFichier(String fichier, String
donnees){
try
{
FileConnection fc =
(FileConnection)Connector.open(DEVICE + fichier);
if (fc.exists())
{
fc.delete();
}
fc.create();
os.write(donnees.getBytes());
os.close();
fc.close();
}
{
}
}
public static String lireFichier(String fichier){
String donnees = new String("");
try
{
FileConnection fc =
(FileConnection)Connector.open(DEVICE + fichier);
if (!fc.exists())
{
fc.create();
}
128/191
is.close();
fc.close();
donnees = new String(data);
}
{
}
return(donnees);
Vous remarquerez que j'ai utilis le mot-cl static pour les mthodes de cette classe. Ainsi il n'est pas ncessaire
d'instancier celle-ci pour pouvoir utiliser ses mthodes. Cette technique est souvent utile pour simplifier le code lorsque
nous utilisons des fonctions d'utilit commune.
La classe Editeur
Enfin, la classe Editeur contient l'ensemble de la logique de l'application. C'est donc cette classe que nous dtaillerons dans la
suite pour expliquer le fonctionnement de l'application.
En attendant, voici son code :
Code : Java - Editeur.java
package mypackage;
import
import
import
import
import
import
import
import
import
import
import
import
import
import
import
import
import
net.rim.device.api.ui.component.EditField;
net.rim.device.api.ui.component.SeparatorField;
net.rim.device.api.ui.component.TextField;
public final class Editeur extends MainScreen

{
private EditField fichier;
private HorizontalFieldManager mesBoutons;
private TextField monTexte;
public Editeur()
{
mesBoutons = new HorizontalFieldManager(Field.FIELD_HCENTER|Field.USE_ALL_WID

Background maCouleur = BackgroundFactory.createSolidBackground(Color.DARKGRAY
mesBoutons.setBackground(maCouleur);
ButtonField nouveau = new ButtonField("");

nouveau.setImage(ImageFactory.createImage(EncodedImage.getEncodedImageResourc
nouveau.setChangeListener(new FieldChangeListener() {
});
129/191
monTexte.setText("");
fichier.setText("");
ButtonField ouvrir = new ButtonField("");

ouvrir.setImage(ImageFactory.createImage(EncodedImage.getEncodedImageResource
ouvrir.setChangeListener(new FieldChangeListener() {
if(fichier.getText().equals("")){
Dialog.alert("Veuillez renseigner un nom de fichier.");
}else{
monTexte.setText(ConnexionFichier.lireFichier(fichier.getText
}
}
});
ButtonField sauvegarder = new ButtonField("");
sauvegarder.setImage(ImageFactory.createImage(EncodedImage.getEncodedImageResource
sauvegarder.setChangeListener(new FieldChangeListener() {
}else{
ConnexionFichier.ecrireFichier(fichier.getText(), monTexte.getTex
Dialog.alert("Le fichier a t enregistr.");
}
}
});
VerticalFieldManager ajustement = new VerticalFieldManager(Field.USE_ALL_WIDT
ButtonField quitter = new ButtonField("",Field.FIELD_RIGHT);

quitter.setImage(ImageFactory.createImage(EncodedImage.getEncodedImageResourc
quitter.setChangeListener(new FieldChangeListener() {
System.exit(0);
}
});
ajustement.add(quitter);
mesBoutons.add(nouveau);
mesBoutons.add(ouvrir);
mesBoutons.add(sauvegarder);
mesBoutons.add(ajustement);
fichier = new EditField("Fichier : ",""){
super.paint(g);
}
};
maCouleur = BackgroundFactory.createSolidBackground(Color.GRAY);
fichier.setBackground(maCouleur);
VerticalFieldManager scrollTexte = new
VerticalFieldManager(Manager.VERTICAL_SCROLLBAR|Manager.VERTICAL_SCROLL);
monTexte.select(true);
scrollTexte.add(monTexte);
add(mesBoutons);
add(fichier);
add(scrollTexte);
130/191
Les explications
Les champs de texte
Le champ de texte d'dition
Tout d'abord, nous allons nous occuper du champ de texte d'dition, c'est--dire de celui dans lequel nous diterons le contenu
du fichier. Cependant avant de nous lancer sur la cration de ce champ, nous allons dans un premier temps rgler cette histoire
de dfilement. Comme nous l'avons dit, nous voulons un dfilement uniquement sur ce champ de texte. C'est pourquoi nous
allons commencer par bloquer le dfilement du conteneur principal qui hrite de MainScreen.
Pour cela, nous allons donc appeler le constructeur de la superclasse comme ceci :
Code : Java
Maintenant que le dfilement est neutralis sur le conteneur principal, nous allons pouvoir en crer un spcifique notre champ
de texte, qui lui en revanche autorisera le dfilement.
Voici donc le conteneur en question :
Code : Java
VerticalFieldManager scrollTexte = new
VerticalFieldManager(Manager.VERTICAL_SCROLLBAR|Manager.VERTICAL_SCROLL);
prsent, nous pouvons enfin nous proccuper de notre champ de texte ditable. J'ai donc utilis un champ de texte de type
TextField que j'ai rendu ditable, slectionnable et que j'ai initialis.
Voici le code correspondant :
Code : Java
monTexte.select(true);
Enfin, il suffit d'ajouter le champ de texte au conteneur pour que celui-ci puisse grer le dfilement suivant la taille du champ de
texte :
Code : Java
scrollTexte.add(monTexte);
Vous remarquerez que d'origine le champ de texte ditable n'est en ralit dfini que sur une seule ligne. Ainsi c'est en
l'ditant que les lignes suivantes apparatront au fur et mesure.
La saisie du nom de fichier

Pour renseigner le nom du fichier qui doit tre dit, nous utiliserons cette fois la classe EditField dont nous utiliserons
l'tiquette ainsi que le champ de saisie de texte. tant donn que nous redfinirons la couleur d'arrire-plan de ce champ, j'ai opt
pour un texte de couleur blanche.
Voici donc l'initialisation de ce champ, ainsi que la redfinition de la couleur d'criture :
Code : Java
131/191
fichier = new EditField("Fichier : ",""){

super.paint(g);
}
};
Comme promis, modifions la couleur d'arrire-plan :

Code : Java
maCouleur = BackgroundFactory.createSolidBackground(Color.GRAY);
fichier.setBackground(maCouleur);
Les diffrents boutons

prsent nous allons nous occuper des diffrents boutons qui permettent de grer toute l'interaction de l'application. Ceux-ci
seront alors stocks l'intrieur d'un conteneur horizontal dont nous allons changer la couleur de fond.
Voici donc la dfinition de ce conteneur :
Code : Java
mesBoutons = new
HorizontalFieldManager(Field.FIELD_HCENTER|Field.USE_ALL_WIDTH);
BackgroundFactory.createSolidBackground(Color.DARKGRAY);
mesBoutons.setBackground(maCouleur);
Nouveau
Commenons par le plus gauche !
Le bouton Nouveau va nous servir rinitialiser les deux champs de texte dfinis plus haut. Comme pour l'ensemble de nos
boutons, nous utiliserons une icne plutt qu'un texte pour dfinir celui-ci.
Dclarons donc ce bouton :
Code : Java
ButtonField nouveau = new ButtonField("");

nouveau.setImage(ImageFactory.createImage(EncodedImage.getEncodedImageResource("nouveau
Comme nous l'avons dit, ce bouton va nous servir rinitialiser nos champs de texte. L'vnement associ au bouton n'est pas
trs compliqu, puisqu'il se contente d'appeler les mthodes setText() des deux champs de texte.
Voil donc comment procder :
Code : Java
nouveau.setChangeListener(new FieldChangeListener() {
fichier.setText("");
}
});
132/191
Ouvrir
Comme pour le bouton prcdent, dclarons-le :
Code : Java
ButtonField ouvrir = new ButtonField("");

ouvrir.setImage(ImageFactory.createImage(EncodedImage.getEncodedImageResource("ouvrir.p
Ici nous allons charger le contenu du fichier l'intrieur du champ de texte d'dition. Pour cela, nous allons donc nous servir de
la mthode lireFichier() de notre classe ConnexionFichier. Sachant que la difficult rsidait principalement dans le
code de la mthode lireFichier(), nous n'avons prsent plus qu' l'utiliser l'intrieur d'une condition. Celle-ci nous
permettra galement d'avertir l'utilisateur si aucun nom de fichier n'est prcis, grce une bote de dialogue.
Voici le rsum des oprations :
Code : Java
ouvrir.setChangeListener(new FieldChangeListener() {
}else{
monTexte.setText(ConnexionFichier.lireFichier(fichier.getText()));
}
}
});
Sauvegarder
Nous avons, comme d'habitude :
Code : Java
ButtonField sauvegarder = new ButtonField("");
sauvegarder.setImage(ImageFactory.createImage(EncodedImage.getEncodedImageResource
La gestion de l'vnement du bouton Sauvegarder est en fait trs proche de celle du bouton Ouvrir . Nous nous servirons
cette fois la mthode ecrireFichier(), et nous utiliserons une bote de dialogue sans quoi l'utilisateur ne verra absolument
rien se passer l'cran.
Voici le code de cet vnement :
Code : Java
sauvegarder.setChangeListener(new FieldChangeListener() {
}else{
ConnexionFichier.ecrireFichier(fichier.getText(),
monTexte.getText());
Dialog.alert("Le fichier a t enregistr.");
}
}
});
133/191
Quitter
Si vous avez bien visualis les aperus de l'application en dbut de chapitre, vous aurez not que le bouton Quitter est align
droite, contrairement tous les autres qui sont gauche. C'est pourquoi nous allons donc tre obligs d'utiliser un nouveau
conteneur. Afin de grer correctement la mise en place des boutons, nous allons dfinir un conteneur qui prendra toute la place
disponible en largeur, afin de pousser les autres boutons gauche.
Voici donc comment faire :
Code : Java
VerticalFieldManager ajustement = new
Puis nous allons crer notre bouton, et l'aligner droite l'intrieur de ce conteneur :
Code : Java
ButtonField quitter = new ButtonField("",Field.FIELD_RIGHT);

quitter.setImage(ImageFactory.createImage(EncodedImage.getEncodedImageResource("quitter
L'vnement de ce bouton est trs simple puisqu'il s'agit uniquement de sortir de l'application.
Voil donc le code correspondant :
Code : Java
quitter.setChangeListener(new FieldChangeListener() {
System.exit(0);
}
});
Enfin, n'oubliez pas d'ajouter cet lment au conteneur que nous venons de dfinir :
Code : Java
ajustement.add(quitter);
La mise en place des boutons

Maintenant que nous avons cr tous les boutons, nous allons pouvoir les disposer l'intrieur du conteneur mesBoutons
que nous avions dclar auparavant. La seule chose prendre en compte est l'ordre dans lequel ceux-ci doivent tre ajouts.
Voici ce que j'ai fait :
Code : Java
mesBoutons.add(nouveau);
mesBoutons.add(ouvrir);
mesBoutons.add(sauvegarder);
mesBoutons.add(ajustement);
La mise en page finale

134/191
Enfin pour clore ce TP, il ne nous reste plus qu' ajouter l'ensemble de nos composants l'intrieur du conteneur principal.
Voil donc le code qui termine ce chapitre :
Code : Java
add(mesBoutons);
add(fichier);
add(scrollTexte);
135/191
Le multimdia
Dans ce chapitre, nous allons voir comment utiliser des fichiers multimdias l'intrieur d'une application. Nous aborderons
donc les fichiers de types audio et vido. Dans un premier temps, nous verrons comment transfrer des fichiers depuis notre
ordinateur vers le simulateur. Puis nous apprendrons manipuler et grer la lecture de ces fichiers.
Pour vous faciliter les choses l'avenir, je vous proposerai galement des classes toutes prtes, que vous pourrez directement
utiliser et qui vous feront gagner un temps prcieux !
Transfrer des fichiers

Crer un dossier de partage
Introduction
Srement vous tes-vous dj demand comment transfrer divers fichiers depuis votre ordinateur jusqu'au simulateur
?
tant donn que nous allons apprendre lire des fichiers multimdias dans ce chapitre, nous allons galement devoir voir
comment transfrer facilement des fichiers vers notre simulateur. Pour raliser ceci, il existe diverses techniques. Nanmoins, la
solution la plus facile consiste rutiliser le systme de gestion de cartes mmoires externes.
La dernire fois, nous avons ajout une carte en crant un fichier de type .dmp , qui contenait alors l'intgralit des fichiers
stocks l'intrieur de notre carte mmoire. Sachez qu'il existe galement une autre manire de crer une carte mmoire externe
pour notre simulateur : utiliser un dossier de partage !
Le principe consiste utiliser un vrai dossier de notre disque dur pour simuler la carte mmoire. Nous pourrons ainsi ajouter
aisment des fichiers l'intrieur de ce dossier, qui seront alors visibles depuis le simulateur et ses applications.
Mise en place
Tout d'abord, pour crer un dossier de partage, commencez par lancer votre simulateur. Ensuite, rendez-vous dans le gestionnaire
de cartes mmoires par le menu Simulate > Change SD Card..., comme la dernire fois.
Puis cliquez sur le bouton Add Directory pour associer un dossier une carte mmoire.
Je vous laisse ensuite choisir un dossier de votre disque dur associer votre nouvelle carte (voir la figure suivante).
Une fois cre, votre carte devrait apparatre dans le gestionnaire avec une taille non spcifie NA , ce qui veut dire que vous
pouvez y insrer autant de fichiers que vous le souhaitez.
Il ne vous reste alors plus qu' l'insrer dans le simulateur, en la slectionnant et en cliquant sur le bouton Mount Selected.
136/191
Aprs quelques messages d'avertissement l'intrieur de votre simulateur, votre carte est enfin prte tre utilise.
Transfrer des fichiers multimdias

Trouver des fichiers compatibles
Dans un premier temps, nous allons voir comment lire des fichiers sonores. C'est pourquoi nous aurons besoin d'une musique. Je
vous propose donc de prendre la musique de votre choix au format MP3, et de la renommer simplement en musique.mp3 .
Placez-la alors dans le dossier de partage cr juste avant.
Si les formats audio sont plutt bien supports dans l'ensemble, il n'en est pas de mme en ce qui concerne les vidos. Je vous
avouerai qu'il a t plutt difficile de trouver une vido qui soit directement compatible. Peut-tre avez-vous dj entendu parler
du projet Orange nomm Elephants Dream . Si je vous en parle aujourd'hui, c'est parce que je vous propose de tlcharger ce
film : ED_1024.avi. Une fois le tlchargement termin, placez galement cette vido dans le dossier de partage afin que nous y
ayons accs depuis notre simulateur.
Pour vos futurs projets, je vous conseille de jeter un coup d'il la liste des formats supports par les diffrentes
versions de BlackBerry OS. Si les diverses vidos que vous dsirez utiliser ne sont pas compatibles, je vous invite les
encoder par vous-mmes.
Tester la compatibilit des fichiers

Enfin, avant de vous lancer tte baisse dans votre application et de passer des heures essayer de la dbugger, pensez au
moins vrifier la compatibilit de vos fichiers. Ainsi vous serez certains que les erreurs proviennent de votre code et non des
fichiers que vous tentez de lire.
Pour commencer, rendez-vous dans le gestionnaire des fichiers afin de vrifier que les fichiers y sont bien prsents.
137/191
Ensuite, utilisez les lecteurs par dfaut du simulateur pour vrifier le bon fonctionnement de l'ensemble de vos fichiers. Pour cela,
il vous suffit de cliquer sur chacun d'eux.
Voici par exemple sur la figure suivante la vido Elephants Dream .
Comme vous pouvez le constater, nous avons bien l'image mais le son ne semble pas fonctionner sur cette vido. Dans
notre cas, ceci n'est pas bien grave. Toutefois nous savons maintenant que cela provient de la compatibilit du fichier
et non de notre future application.
Voyons maintenant comment utiliser ces divers fichiers multimdias au sein d'une application !
Jouer de l'audio
Lire un fichier audio
Jouer une musique
L'objectif du chapitre est de vous permettre de charger et manipuler diffrents fichiers multimdias. Ainsi la manipulation de ces
donnes se fait via la classe Java nomme Player, elle-mme associe un fichier multimdia.
Pour dmarrer, il nous faut donc dclarer un nouveau Player :
Code : Java
138/191
Player p;
Le chargement du fichier est alors une tape relativement simple, puisqu'il suffit d'utiliser la mthode createPlayer() de la
classe Manager.
Soyer attentif ici car nous n'utilisons pas la classe Manager spcifique l'API BlackBerry, mais celle dfinie en Java
dans le package javax.microedition.media. Veillez donc importer la bonne classe l'intrieur de votre code,
sinon vous aurez sans nul doute des erreurs la compilation.
Voici donc comment instancier notre Player :

Code : Java
p = Manager.createPlayer("file:///SDCard/musique.mp3");
Si vous jetez un il la documentation de la classe Player, vous verrez que celle-ci passe par diffrentes tapes avant de pouvoir
lancer la lecture du mdia dfinie par la constante STARTED (voir la figure suivante).
Ainsi il nous est donc ncessaire d'utiliser les trois mthodes realize(), prefetch() et start() dans cet ordre prcis :
Code : Java
p.realize();
p.prefetch();
p.start();
Une fois la mthode start() appele, la lecture du fichier audio est lance. Vous pouvez alors, tout moment, arrter la lecture
grce la mthode stop(). Nous verrons un peu plus loin comment combiner ces mthodes start() et stop() pour crer
des boutons Lecture et Pause .
galement, vous pouvez rgler le volume de sortie en utilisant la classe VolumeControl, comme ceci :
Code : Java
VolumeControl volume = (VolumeControl)p.getControl("VolumeControl");
volume.setLevel(30);
Vous devez aussi savoir que l'ensemble de ces oprations pourrait gnrer des erreurs lors de l'excution du code. Je vous invite
donc encercler le tout d'un bloc try{....} catch{...}.
Voici donc un rsum de l'intgralit des oprations :
Code : Java
String SD_CARD = "file:///SDCard/";
139/191
Player p;
try
{
p = Manager.createPlayer("file:///SDCard/musique.mp3");
p.realize();
VolumeControl volume =
(VolumeControl)p.getControl("VolumeControl");
p.prefetch();
p.start();
}
catch (MediaException me)
{
Dialog.alert(me.toString());
}
{
Dialog.alert(ioe.toString());
}
Une classe prte l'emploi

Sachant que j'aime bien a et que cela vous facilite la vie, je vous propose donc une classe dont vous pouvez vous servir
directement :
Code : Java - LecteurAudio.java
package mypackage;
import
import
import
import
import
import
import
javax.microedition.media.Manager;
javax.microedition.media.MediaException;
javax.microedition.media.Player;
javax.microedition.media.control.VolumeControl;
public class LecteurAudio extends VerticalFieldManager{

private static final String SD_CARD = "file:///SDCard/";
private Player p;
public LecteurAudio(String fichier)
{
try
{
p = Manager.createPlayer(SD_CARD + fichier);
p.realize();
p.prefetch();
p.start();
}
{
}
{
}
}
}
140/191
Vous remarquerez que j'ai cr une classe qui hrite de VerticalFieldManager. Ceci n'a pas de grande utilit pour l'instant,
mais vous verrez que cela sera utile lorsqu'il s'agira par exemple d'ajouter des boutons de contrle celle-ci.
Voici alors comment utiliser cette classe LecteurAudio :
Code : Java
LecteurAudio monLecteur = new LecteurAudio("musique.mp3");
add(monLecteur);
Insrer du son l'application

Jouer un son
tant donn que nous parlons d'audio, je pense que c'est le bon moment pour vous montrer comment insrer du son l'intrieur
de votre application. En gnral, cette technique n'est pas vraiment faite pour insrer des musiques mais plutt divers sons et
bruitages utiliss principalement dans les jeux vido. Toutefois dans notre cas, nous rutiliserons notre fichier musique.mp3.
Je vous invite donc ajouter ce fichier aux ressources de votre application. De mon ct, j'ai cr un nouveau dossier audio
pour y stocker l'ensemble des fichiers de type audio.
Soyez vigilants quant la taille maximale des ressources, savoir : 7802880 octets. cause de cela, vous serez limits
et je vous conseille donc d'viter d'y insrer des fichiers lourds, tels que des vidos par exemple.
Comme vous vous en doutez, la faon de crer un Player va tre diffrente de ce que nous avons dj vu. En revanche une
fois celui-ci cr, nous le manipulerons identiquement.
Une manire de raliser ceci est d'ouvrir le fichier en utilisant la classe principale de notre application. Pour cela, nous allons
utiliser une classe un peu particulire : Class. Nous allons en fait stocker une rfrence notre classe principale en nous
servant de la mthode forName(), comme ceci :
Code : Java
Class cl = null;
try
{
cl = Class.forName("mypackage.MyApp");
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
Ensuite nous allons accder au fichier audio via la mthode getResourceAsStream() et la classe InputStream, que
vous connaissez dj.
Voil comment raliser ceci :
Code : Java
if (cl!=null) {
InputStream is = cl.getResourceAsStream("/musique.mp3");
}
141/191
Ainsi nous pouvons enfin crer notre Player grce l'instruction suivante :
Code : Java
p = Manager.createPlayer(is, "audio/mpeg");
Comme je l'ai dj dit, une fois ouvert, notre Player s'utilise exactement de la mme manire que prcdemment.
Ajouter un bouton de contrle

Pour aller un peu plus loin ici, nous allons raliser un bouton de contrle qui permettra d'arrter et relancer la lecture du fichier
audio.
Pour commencer, crons d'abord notre bouton, puis ajoutons-lui un couteur vide :
Code : Java
ButtonField monBouton = new
ButtonField("Pause",Field.FIELD_HCENTER);
// Instructions
}
});
tant donn que nous n'utiliserons qu'un seul bouton, nous allons devoir tester l'tat de notre Player. Si vous avez bien suivi,
vous devriez donc savoir qu'une fois en lecture, le Player est dans l'tat STARTED.
Ainsi nous pouvons raliser le contenu de la mthode fieldChanged() l'aide d'une condition if :
Code : Java
if(p.getState() == Player.STARTED){
p.stop();
monBouton.setLabel("Lecture");
}else{
p.start();
monBouton.setLabel("Pause");
}
En ralit, l'intgralit de cette condition doit galement tre place l'intrieur d'un bloc try{....} catch{...}
comme nous l'avons fait avant pour l'instanciation du Player.
Une classe toute prte

Comme prcdemment, je vous propose une classe intgrale, prte l'emploi :
Code : Java - LecteurSon.java
package mypackage;
import
import
import
import
import
import
import
import
import
java.io.InputStream;
javax.microedition.media.control.VolumeControl;
142/191
import net.rim.device.api.ui.component.Dialog;
import net.rim.device.api.ui.container.VerticalFieldManager;
public class LecteurSon extends VerticalFieldManager{
private Player p;
private ButtonField monBouton;
public LecteurSon(String fichier)
{
super(Field.USE_ALL_WIDTH);
Class cl = null;
try
{
cl = Class.forName("mypackage.MyApp");
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
if (cl!=null) {
InputStream is = cl.getResourceAsStream("/" + fichier);
try
{
p = Manager.createPlayer(is, "audio/mpeg");
p.realize();
p.prefetch();
p.start();
}
catch(MediaException me)
{
}
catch(IOException ioe)
{
}
}
monBouton = new ButtonField("Pause",Field.FIELD_HCENTER);
try
{
p.stop();
monBouton.setLabel("Lecture");
}else{
p.start();
monBouton.setLabel("Pause");
}
}
{
}
}
});
add(monBouton);
videmment cette classe s'utilise de la mme faon que LecteurAudio que nous avions cre auparavant :
Code : Java
143/191
LecteurSon monLecteur = new LecteurSon("musique.mp3");

add(monLecteur);
Avec l'arrive du nouveau bouton, vous devriez maintenant voir l'intrt de crer une classe qui hrite de
VerticalFieldManager :
Lire une vido

Chargement du fichier
Lorsqu'il s'agit d'un fichier vido, la cration du Player se fait de la mme manire que pour un fichier audio.
Le dbut du code est donc strictement identique :
Code : Java
p = Manager.createPlayer(SD_CARD + "ED_1024.avi");
p.realize();
La grande diffrence par rapport un fichier audio, c'est qu'ici nous allons tre obligs d'utiliser un composant graphique pour
afficher le contenu visuel du fichier. Pour cela, nous utiliserons donc le composant de base Field ainsi que la classe
AdvancedVideoControl qui permettra de crer ce composant basique.
La technique utilise ici est lgrement complexe, c'est pourquoi je vous propose directement le code permettant de crer l'objet
de type Field :
Code : Java
Field field;
AdvancedVideoControl vc;
if ((vc = (AdvancedVideoControl)
p.getControl("net.rim.device.api.media.control.AdvancedVideoControl")) != null)
{
field =
(Field)vc.initDisplayMode(AdvancedVideoControl.USE_GUI_ADVANCED,"net.rim.device.api.ui.
vc.setVisible(true);
}
Une fois ce travail ralis, nous pouvons aprs contrler notre Player comme avant, notamment avec les mthodes start()
et stop() :
144/191
Code : Java
p.start()
Enfin, n'oubliez pas dans ce cas-l d'ajouter le composant field au conteneur :

Code : Java
add(field);
Une classe prte l'emploi

Encore une fois, vous trouverez dans la suite une classe toute prte que vous pouvez utiliser votre guise. Notez que j'y ai
insr des contrles de lectures de types tactiles .
Voici cette classe nomme LecteurVideo :
Code : Java - LecteurVideo.java
package mypackage;
import java.io.IOException;
import
import
import
import
import
import
import
import
net.rim.device.api.media.control.AdvancedVideoControl;
public class LecteurVideo extends VerticalFieldManager{

private static final String SD_CARD = "file:///SDCard/";
private Field field;
private Player p;
public LecteurVideo(String fichier)

{
try
{
p = Manager.createPlayer(SD_CARD + fichier);
p.realize();
AdvancedVideoControl vc;
if ((vc = (AdvancedVideoControl)
p.getControl("net.rim.device.api.media.control.AdvancedVideoControl")) != null)
{
field =
(Field)vc.initDisplayMode(AdvancedVideoControl.USE_GUI_ADVANCED,"net.rim.device.api.ui
vc.setVisible(true);
}
p.start();
}
{
}
145/191
}
add(field);
protected boolean touchEvent(TouchEvent message)

{
try
{
p.stop();
}else{
p.start();
}
}
{
}
}
return true;
}
Voici comment dclarer et instancier cette classe :

Code : Java
LecteurVideo monLecteur = new LecteurVideo("ED_1024.avi");
add(monLecteur);
Au lancement de l'application, vous verrez alors la vido se lire l'intrieur de celle-ci.
Il est possible de transfrer des fichiers vers le simulateur en dfinissant une carte mmoire comme dossier de partage.
Tous les formats de mdias ne sont pas pris en compte, il est donc ncessaire de vrifier les formats supports.
Pour contrler un fichier multimdia, nous utilisons la classe Player.
La mthode createPlayer() sert associer une variable de type Player un fichier multimdia.
La gestion de la lecture du fichier se fait via les mthodes start() et stop() de la classe Player.
146/191
147/191
L'acclromtre
Dans ce chapitre, nous allons apprendre utiliser l'acclromtre. Il s'agit en fait d'un capteur fix au smartphone, qui permet
notamment de rcuprer des donnes lies l'orientation de ce dernier. Nous verrons donc comment l'utiliser concernant d'une
part l'orientation grossire , puis l'orientation prcise du smartphone. Ce chapitre sera aussi l'occasion de s'intresser la
gestion du temps l'intrieur d'une application. Cela nous permettra de pouvoir rcuprer des donnes provenant de
l'acclromtre intervalles rguliers.
L'orientation grossire
Introduction
Prsentation du concept d'orientation
Lorsque vous crerez des applications, vous aurez peut-tre besoin de connatre l'orientation grossire du smartphone afin
de pouvoir excuter des instructions diffrentes suivant chaque cas. Dans un premier temps, nous allons donc voir comment
utiliser cette orientation grossire l'intrieur de notre code. Nous verrons comment rcuprer l'orientation prcise du
smartphone plus tard dans ce chapitre.
Pour connatre l'orientation du smartphone, ou du simulateur en ce qui nous concerne, nous allons utiliser les constantes de la
classe AccelerometerSensor :
ORIENTATION_BACK_UP
ORIENTATION_BOTTOM_UP
ORIENTATION_FRONT_UP
ORIENTATION_LEFT_UP
ORIENTATION_RIGHT_UP
ORIENTATION_TOP_UP
ORIENTATION_UNKNOWN.
Ainsi grce ces constantes nous connatrons l'orientation grossire du simulateur, que nous afficherons directement
l'cran pour mieux en comprendre le fonctionnement.
Prparation de la classe MyScreen

Pour grer cette orientation, nous allons dans la suite crer une classe nomme Orientation. Toutefois nous allons prparer
en amont la classe MyScreen que voici :
Code : Java - MyScreen.java
package mypackage;
public class MyScreen extends MainScreen{
private RichTextField monTexte;
private Orientation orientation;
public MyScreen(){
super();
monTexte = new RichTextField();
orientation = new Orientation(this);
add(monTexte);
}
public void setTexte(String texte){

monTexte.setLabel(texte);
}
148/191
Ce qu'il est important de noter dans cette classe, c'est l'apparition d'une mthode setTexte() pour modifier le contenu du
champ de texte, ainsi que le paramtre this l'intrieur du constructeur de notre future classe Orientation. En ralit, ce
mot-cl this nous permet uniquement de passer une rfrence de notre MyScreen, afin que nous puissions appeler la
mthode setTexte() depuis l'intrieur de notre classe Orientation.
Cration de la classe Orientation

Implmenter l'interface AccelerometerListener
Pour crer notre classe Orientation, nous allons devoir implmenter l'interface AccelerometerListener, qui est un
couteur li l'acclromtre. l'intrieur, nous devrons alors redfinir la mthode onData() de l'interface qui sera appele
chaque mouvement du smartphone.
Voici donc la structure de base de notre classe Orientation :
Code : Java
package mypackage;
import
import
import
import
import
net.rim.device.api.system.AccelerometerData;
net.rim.device.api.system.AccelerometerListener;
net.rim.device.api.system.AccelerometerSensor;
net.rim.device.api.system.Application;
net.rim.device.api.system.AccelerometerSensor.Channel;
public class Orientation implements AccelerometerListener{

public Orientation(){
Channel orientationChannel =
AccelerometerSensor.openOrientationDataChannel(Application.getApplication());
orientationChannel.addAccelerometerListener(this);
}
public void onData(AccelerometerData donnees)
{
// Instructions lorsqu'un vnement est gnr
}
}
Notez que j'ai dj insr les lignes suivantes, afin de crer et d'ajouter un couteur l'acclromtre :
Code : Java
Enfin pour finir voici le plus intressant, nous allons rcuprer l'orientation du simulateur sous forme d'entier grce la mthode
getOrientation() de notre objet donnees. Cet entier pourra ainsi tre compar aux diffrentes constantes de la classe
AccelerometerSensor que nous avons vues plus haut.
Voici l'instruction de rcupration de l'orientation :
Code : Java
int orientation = donnees.getOrientation();
149/191
La classe Orientation complte

Le reste de la classe Orientation est uniquement du traitement de donnes. C'est pour cela que je vous propose directement
le code final de cette classe :
Code : Java - Orientation.java
package mypackage;
import
import
import
import
import
net.rim.device.api.system.AccelerometerData;
net.rim.device.api.system.AccelerometerListener;
public class Orientation implements AccelerometerListener{

private MyScreen maVue;
private int orientation;
public Orientation(MyScreen nouvelleVue){
super();
maVue = nouvelleVue;
orientation = 0;
}
public void onData(AccelerometerData donnees)
{
orientation = donnees.getOrientation();
String texte = new String();
switch (orientation){
case AccelerometerSensor.ORIENTATION_BACK_UP:
texte = "ORIENTATION_BACK_UP";
break;
case AccelerometerSensor.ORIENTATION_BOTTOM_UP:
texte = "ORIENTATION_BOTTOM_UP";
break;
case AccelerometerSensor.ORIENTATION_FRONT_UP:
texte = "ORIENTATION_FRONT_UP";
break;
case AccelerometerSensor.ORIENTATION_LEFT_UP:
texte = "ORIENTATION_LEFT_UP";
break;
case AccelerometerSensor.ORIENTATION_RIGHT_UP:
texte = "ORIENTATION_RIGHT_UP";
break;
case AccelerometerSensor.ORIENTATION_TOP_UP:
texte = "ORIENTATION_TOP_UP";
break;
case AccelerometerSensor.ORIENTATION_UNKNOWN:
texte = "ORIENTATION_UNKNOWN";
break;
default:
texte = "inconnue";
}
maVue.setTexte("orientation : " + texte);
}
}
150/191
Visualisation de l'application
Maintenant, lancez l'application afin de voir le rsultat de ce code. l'intrieur de la fentre du simulateur, vous pouvez
manipuler celui-ci, et notamment l'orienter dans toutes les directions. Pour raliser cela, dplacer votre souris vers un angle de la
fentre.
Vous verrez alors apparatre le curseur suivant :
En cliquant dessus, vous pouvez ainsi faire tourner le simulateur comme vous le souhaitez.
Une autre manire de manipuler le simulateur est d'utiliser le menu Simulate > Manipulate Device..., qui est plus
pratique. Il permet notamment de mieux grer les rotations dans les diverses directions, et de contrler prcisment leur valeur.
Voici sur la figure suivante quoi ressemble cet outil.
151/191
Ce contrleur nous sera particulirement utile dans la suite, lorsque nous apprendrons utiliser l'orientation prcise
du smartphone.
Grer le temps
Prsentation
La classe Timer
Dans la suite du chapitre, nous allons avoir besoin de grer le temps afin de rafrachir l'cran. J'entends par l que nous allons
devoir rpter une fonction toutes les secondes. Ceci est bien entendu ralisable, grce la classe Timer.
Commenons donc par instancier un objet Timer :
Code : Java
Timer timer = new Timer();
Cette classe peut nous permettre de faire diffrentes choses lies au temps. La premire est de retarder l'excution d'une tche.
Dans la suite, nous dfinirons cette tche par hritage de la classe TimerTask ; nous nommerons cette nouvelle classe
MonTimer.
Ainsi pour retarder cette tche de 10 secondes, vous pouvez utiliser l'instruction suivante :
Code : Java
timer.schedule(new MonTimer(), 10000);
152/191
Ici le second paramtre de type long reprsente le dlai de retard d'excution de la tche en millisecondes.
L'autre intrt de la classe Timer est de pouvoir rpter une tche rgulirement.
Ainsi la ligne de code suivante permet d'excuter la tche toutes les secondes :
Code : Java
timer.scheduleAtFixedRate(new MonTimer(), 1000, 1000);
Dans cette expression, le deuxime paramtre correspond au retard de la premire excution de la tche. Le troisime
paramtre, quant lui, indique l'intervalle de temps entre deux excutions de cette mme tche.
La classe TimerTask
Comme nous l'avons vu, nous allons dfinir notre tche par une classe. Celle-ci devra alors hriter de la classe TimerTask.
Voici donc la base de notre classe :
Code : Java
package mypackage;
import java.util.TimerTask;
public class MonTimer extends TimerTask{
public MonTimer(){
super();
// initialisation de la tche
}
public void run() {
// Instructions de la tche
}
}
Dans cette classe, nous devons redfinir la mthode run() qui est alors appele chaque excution de la tche.
Pour mieux comprendre tout ceci, je vous propose de concevoir un mini-chronomtre ds maintenant.
Cration d'un chronomtre

Crer la tche
Dans cet exercice, nous allons rutiliser la classe MyScreen telle que nous l'avions dfinie auparavant.
Nous allons commencer par crer notre tche, qui contiendra une rfrence de l'objet MyScreen ainsi qu'un entier qui servira de
compteur :
Code : Java
153/191

private int compteur;
Je vous laisse vous occuper de l'initialisation de ces attributs, pour nous concentrer plutt sur la mthode run(). Comme il
s'agit d'un compteur, cette mthode se contentera uniquement d'incrmenter notre entier, et de l'afficher l'cran.
Voil donc comment faire :
Code : Java
public void run() {
compteur++;
maVue.setTexte(compteur + " secondes coules...");
}
Enfin pour finir, je vous ai rcrit l'intgralit de cette classe MonTimer :

Code : Java - MonTimer.java
package mypackage;
import java.util.TimerTask;
private int compteur;
public MonTimer(MyScreen vue){
super();
maVue = vue;
compteur = 0;
}
public void run() {
compteur++;
maVue.setTexte(compteur + " secondes coules...");
}
}
Grer l'excution de la tche

En ralit, la gestion du temps ne se fait rellement qu'avec la classe Timer. C'est donc maintenant que nous allons dfinir
l'excution du compteur toutes les secondes.
Voil comment j'ai fait :
Code : Java
Timer timer = new Timer();
timer.scheduleAtFixedRate(new MonTimer(this), 1000, 1000);
Si vous lancez l'application, vous verrez alors apparatre un compteur qui compte toutes les secondes, c'est--dire un
chronomtre !
154/191
L'orientation prcise
Rcuprer l'orientation
Introduction
Maintenant, nous allons nous concentrer sur la rcupration de l'orientation prcise du smartphone. J'entends par l que
nous allons rcuprer des donnes numriques reprsentant l'orientation de celui-ci. Ces donnes seront alors composes d'un
tableau xyz compos de trois valeurs , et .
Pour viter les explications incomprhensibles, je vous indique directement la valeur de ces donnes :
Dans les expressions prcdentes, les angles
et
sont dfinis suivant les figures ci-aprs.
Grce ces valeurs, nous connaissons ainsi l'orientation exacte du smartphone. En utilisant correctement celles-ci, nous sommes
alors en mesure de raliser absolument tout ce que nous souhaitons.
Je vous propose donc de voir comment rcuprer ces donnes, puis nous raliserons une sorte de niveau dans la fin de ce
chapitre.
La classe AccelerometerSensor.Channel
Comme en dbut de chapitre, nous allons commencer par dclarer une variable de type Channel grce la classe
AccelerometerSensor.
Voici comment faire :
Code : Java
155/191
Channel rawDataChannel =
AccelerometerSensor.openRawDataChannel(Application.getApplication());
Pour rcuprer les donnes dcrites prcdemment, nous allons devoir dclarer un tableau de type short[] que nous
nommerons donc xyz :
Code : Java
short[] xyz = new short[3];
Une fois ce tableau dclar, nous pouvons par la suite lui attribuer les donnes de l'acclromtre l'aide de la mthode
getLastAccelerationData(). Celle-ci mettra alors notre tableau jour pour un instant donn. C'est donc pour cet appel
de mthode que nous aurons besoin de grer le temps et d'utiliser les classes Timer et TimerTask que nous venons juste de
voir.
Avant de s'occuper de la gestion du temps, je vous laisse dcouvrir comment mettre jour notre tableau xyz :
Code : Java
rawDataChannel.getLastAccelerationData(xyz);
Rcuprer les donnes intervalles rguliers

prsent, nous allons insrer tout ce que nous venons de voir l'intrieur de notre TimerTask, nomme MonTimer je vous
le rappelle.
Voici donc la classe MonTimer que je vous conseille de tester :
Code : Java
package mypackage;
import
import
import
import
java.util.TimerTask;

private Channel rawDataChannel;
private short[] xyz;
public MonTimer(MyScreen vue){
super();
maVue = vue;
xyz = new short[3];
rawDataChannel =
AccelerometerSensor.openRawDataChannel(Application.getApplication());
}
public void run() {
rawDataChannel.getLastAccelerationData(xyz);
maVue.setXYZ(xyz);
}
}
Comme vous pouvez le voir, cette classe se contente de rcuprer les donnes de l'acclromtre et les transfre notre
156/191
MyScreen via une nouvelle mthode que nous appellerons setXYZ().
Afficher ces donnes

Revenons l'intrieur de la classe MyScreen, et dmarrons en rajoutant un nouvel attribut xyz :
Code : Java
Puis dans un premier temps, je vous propose uniquement d'afficher le contenu de ce tableau dans notre champ de texte :
Code : Java
public void setXYZ(short[] value){
setTexte("x :" + xyz[0] + " | y :" + xyz[1] + " | z :" +
xyz[2]);
}
galement, nous allons acclrer le rythme d'excution de notre tche :

Code : Java
Lancez cette application et voyez le rsultat en manipulant votre simulateur.
Un niveau
Dessiner le niveau
Maintenant, nous allons rester l'intrieur de la classe MyScreen. Nous commencerons par modifier la mthode setXYZ(),
puis nous redfinirons la mthode paint() de cette mme classe.
Voil donc notre nouvelle mthode setXYZ(), qui se contente de mettre jour le tableau xyz et de rafrachir l'cran :
Code : Java
public void setXYZ(short[] valeur){
157/191
xyz = valeur;
invalidate();
Ensuite, redfinissons la mthode paint() de la classe MyScreen :

Code : Java
super.paint(g);
// Trac d'une ligne de niveau
}
L'ide ici est de tracer une ligne de niveau , c'est--dire qui soit toujours l'horizontale quelle que soit l'orientation du
smartphone. Le calcul des coordonnes des extrmits de cette ligne se fait donc partir du centre de l'cran auquel on retranche
ou on ajoute des valeurs dpendantes des entiers et donns par l'acclromtre.
Sans entrer dans les dtails de calculs qui sont uniquement gomtriques, je vous laisse le soin de recopier ces lignes de code :
Code : Java
int
int
int
int
x1
y1
x2
y2
=
=
=
=
Display.getWidth()/2 - 2*Display.getWidth()*xyz[1]/1000;
Display.getHeight()/2 - 2*Display.getWidth()*xyz[0]/1000;
Display.getWidth()/2 + 2*Display.getWidth()*xyz[1]/1000;
Display.getHeight()/2 + 2*Display.getWidth()*xyz[0]/1000;
Nous pouvons prsent tracer le niveau que j'ai en fait ralis en superposant trois lignes pour lui donner plus d'paisseur. J'en
ai galement profit pour changer la couleur de cette ligne :
Code : Java
g.drawLine(x1, y1, x2, y2);
g.drawLine(x1, y1-1, x2, y2-1);
g.drawLine(x1, y1+1, x2, y2+1);
La classe MyScreen complte

Comme d'habitude, je ne dlaisse pas ceux qui auraient plus de difficults en vous donnant le code intgral de la classe
MyScreen :
Code : Java
package mypackage;
import
import
import
import
java.util.Timer;
public class MyScreen extends MainScreen{

private Timer timer;
public MyScreen(){
super();
xyz = new short[3];
timer = new Timer();

}
158/191

super.paint(g);
g.setDrawingStyle(0, true);
int x1 = Display.getWidth()/2 2*Display.getWidth()*xyz[1]/1000;
int y1 = Display.getHeight()/2 2*Display.getWidth()*xyz[0]/1000;
int x2 = Display.getWidth()/2 +
2*Display.getWidth()*xyz[1]/1000;
int y2 = Display.getHeight()/2 +
2*Display.getWidth()*xyz[0]/1000;
g.drawLine(x1, y1, x2, y2);
g.drawLine(x1, y1-1, x2, y2-1);
g.drawLine(x1, y1+1, x2, y2+1);
}
public void setXYZ(short[] value){

xyz = value;
invalidate();
}
Rsultat de l'animation
Une fois l'application lance, voyez le rsultat de cette animation en manipulant votre simulateur.
159/191
L'acclromtre est un capteur qui nous permet de rcuprer des donnes concernant l'orientation du smartphone.
Une orientation grossire peut tre tablie en utilisant les constantes de la classe AccelerometerSensor.
La gestion du temps se fait l'aide de la classe Timer qui sert contrler l'excution d'une tche.
Une tche est dcrite l'aide d'une classe devant hriter de la classe TimerTask.
L'orientation prcise du smartphone peut tre connue via la mthode getLastAccelerationData() de la
classe AccelerometerSensor.Channel.
160/191
Les pages HTML

Pour le dernier chapitre de cette partie, nous allons nous intresser aux pages HTML. Je suis sr que certains d'entre-vous
attendez depuis longtemps ce moment ! Nous allons donc voir comment afficher du HTML l'intrieur d'une application ; cela
peut tre du code que vous aurez vous-mmes cr ou bien une page d'un site web.
Vous devez tout de mme savoir que pour charger du contenu web depuis l'intrieur d'une application, il est ncessaire d'installer
une fonctionnalit supplmentaire. Dans un premier temps, nous nous contenterons donc d'afficher du code HTML cr par
nous-mmes. Puis aprs installation de l'outil en question, nous pourrons charger du contenu depuis le web !
Afficher des pages HTML

Crer du texte HTML
criture du code
Comme je vous l'ai dit en introduction, pour l'instant nous allons utiliser du code cr par nos soins. Sachant qu'il ne s'agit pas
d'un cours sur l'HTML, je vous propose directement un code que nous testerons juste aprs.
Voici donc le code HTML en question :
Code : HTML
<html>
<body>
<h1>Bonjour tous les Zros !</h1>
</body>
</html>
Pour ceux qui n'ont aucune notion en HTML, sachez que nous avons ici simplement dfini un titre de niveau 1
l'intrieur d'une page HTML. Si vous souhaitez en apprendre davantage sur ce langage, je vous conseille de suivre le
cours Apprenez crer votre site web avec HTML5 et CSS3 de Mathieu Nebra disponible sur le Site du Zro !
Dans notre cas, le code HTML doit tre de type String :

Code : Java
String texteHTML = "<html><body><h1>Bonjour tous les Zros
!</h1></body></html>";
L'objet BrowserField
Comme vous pouvez l'imaginer en lisant le titre, la classe BrowserField permet d'afficher des pages ou du code HTML
l'intrieur d'une application.
Voici donc comment crer un composant de ce type :
Code : Java
BrowserField page = new BrowserField();
add(page);
Enfin, il ne nous reste plus qu' afficher le texte HTML dfini plus haut. Pour cela, nous utiliserons alors la mthode
displayContent() de la classe BrowserField.
Voici le code correspondant :
161/191
Code : Java
page.displayContent(texteHTML, "http://localhost");
Pour afficher du code HTML directement entr en tant que texte, il est ncessaire de dfinir le second paramtre avec
"http://localhost".
Rsultat du code
Le code n'est ici pas trs compliqu, puisqu'il se rsume quatre instructions que voil :
Code : Java
add(page);
String texteHTML = "<html><body><h1>Bonjour tous les Zros
!</h1></body></html>";
page.displayContent(texteHTML, "http://localhost");
Une fois l'application lance, voici sur la figure suivante ce que nous obtenons l'cran.
Charger une page locale

Tlchargement des sources
prsent, nous allons tester un code un peu plus volumineux. C'est pourquoi nous allons prendre le code d'un site dj cr,
c'est--dire tout prt. Rien de mieux que le Site du Zro, je vous propose de tlcharger les sources du TP du cours Apprenez
crer votre site web avec HTML5 et CSS3 de Mathieu Nebra.
Voici un aperu de la page d'accueil du site en question :
162/191
Je vous invite ainsi tlcharger les sources directement sur le Site du Zro.
Mise en place du site

L'objectif maintenant est de charger une page HTML en local sur le smartphone depuis notre application. Il va donc nous falloir
placer ces sources l'intrieur de la mmoire du smartphone. Vous l'aurez devin, nous allons utiliser la carte mmoire externe.
Ajoutons ainsi un dossier site dans notre dossier de partage, dans lequel nous allons placer l'ensemble des fichiers du site :
163/191
Si vous n'avez pas fait de btises, voici ce que contient notre dossier site :
Afficher la page
Maintenant nous allons voir comment charger une page externe l'application.
Pour commencer, crons notre objet BrowserField :
Code : Java
add(page);
Cette fois, nous allons utiliser la mthode requestContent() laquelle nous renseignerons l'URL de la page. Pour l'instant
nous chargeons une page locale depuis la carte mmoire. C'est pourquoi l'URL dmarrera par "file:///SDCard/" comme
nous avons vu dans un chapitre prcdent.
Voil donc l'instruction de chargement de la page :
Code : Java
164/191
page.requestContent("file:///SDCard/site/index.html");
Comme vous pouvez le voir ci-dessous, le site s'affiche bien dans l'application :
En ralit, le site est plus large que l'cran. Dans l'image prcdente, vous constaterez alors qu'il manque une partie de la page sur
la droite. D'ailleurs vous ne pouvez, pour l'instant, pas y accder. C'est normal, notre conteneur dispose uniquement d'un
dfilement vertical.
Nous allons donc remdier au problme en ajoutant un dfilement horizontal notre conteneur principal :
Code : Java
super(Manager.HORIZONTAL_SCROLL);
Voil, nous avons prsent l'intgralit de la page disponible dans notre application, comme le montre la figure ci-dessous :
Comme je vous l'ai dit en introduction, nous ne pouvons pour l'instant pas charger des pages web. Je vous propose donc
maintenant d'installer les outils ncessaires pour contourner ce problme !
Installer le BlackBerry MDS Simulator

165/191
prsent, nous allons installer l'outil ncessaire pour accder aux pages web : le BlackBerry MDS Simulator !
Mise en place du JCE

Avant d'installer le MDS Simulator, il est tout d'abord ncessaire de mettre en place une API de chiffrement nomme JCE (ou Java
Cryptogaphy Extension) Unlimited Strength. Celle-ci est disponible sur le site d'oracle cette adresse.
Tlchargez donc l'archive propose, avant d'y extraire les fichiers.

Maintenant, il faut alors copier les fichiers local_policy.jar et US_export_policy.jar, pour remplacer ceux dj
prsents dans votre dossier d'installation de Java l'endroit suivant : \Java\jdk1.7.0_02\jre\lib\security.
Le BlackBerry MDS Simulator

Tlchargement
Nous allons maintenant enfin pouvoir nous occuper du MDS Simulator. Pour cela, rendez-vous sur la page suivante, o vous
trouverez un lien de tlchargement en bas de la page, tel qu'il est prsent ci-dessous :
166/191
Dans mon cas je n'avais pas le choix, mais tlchargez la dernire version propose. Vous serez alors redirigs vers une autre
page semblable la suivante :
Tlchargez donc le BlackBerry MDS Simulator, puis passez l'installation.
Installation
Aucune difficult n'est prsente durant l'installation. Toutefois, veuillez bien noter l'emplacement o celle-ci est ralise :
Excution
Une fois l'installation termine, nous allons devoir lancer l'excution du MDS Simulator nous-mmes. C'est pourquoi nous allons
donc nous rendre dans le dossier d'installation de ce dernier, et plus prcisment l'emplacement suivant :
167/191
BlackBerry Email and MDS Services Simulators 4.1.4\MDS\.

Vous trouverez alors tout un tas de fichiers, et parmi eux un certain fichier nomm run.bat :
Double-cliquez sur ce fichier, et vous verrez une fentre de console s'ouvrir :
Le MDS Simulator est actif uniquement lorsque la console est ouverte. Ainsi vous devrez donc la rouvrir chaque fois
que vous en aurez besoin !
Charger des pages web

Charger une page web
Maintenant que nous avons install le MDS Simulator, nous allons pouvoir charger des pages externes au smartphone, c'est-dire depuis Internet.
Pour cela rien de plus simple, il nous suffit de rutiliser la mthode requestContent() en utilisant cette fois une adresse
avec un protocole HTTP :
168/191
Code : Java
page.requestContent("http://www.google.com");
Voil donc le peu d'instructions ncessaires l'affichage d'une page web l'intrieur d'une application :
Code : Java
add(page);
En utilisant le code prcdent, nous voyons alors le clbre moteur de recherche s'afficher :
Lorsque vous chargez du contenu web l'intrieur de votre application, le temps de chargement peut tre plus ou
moins long. Pour ce type d'applications, n'hsitez pas faire des essais sur un terminal physique.
Modifier les configurations

Avant de terminer ce chapitre, nous allons voir comment nous servir de la classe BrowserFieldConfig pour configurer nos
pages. Grce aux constantes de cette classe, nous pourrons par exemple autoriser l'excution de code Javascript l'aide de
JAVASCRIPT_ENABLED, ou encore autoriser les cookies avec ENABLE_COOKIES.
Comme exemple, nous allons utiliser les constantes NAVIGATION_MODE et NAVIGATION_MODE_POINTER pour afficher un
curseur l'intrieur de notre composant BrowserField.
Voil donc comment faire ceci au niveau du code :
Code : Java
BrowserFieldConfig config = new BrowserFieldConfig();
config.setProperty(BrowserFieldConfig.NAVIGATION_MODE,
BrowserFieldConfig.NAVIGATION_MODE_POINTER);
BrowserField page = new BrowserField(config);
add(page);
169/191
Nous obtenons ainsi la mme page que prcdemment, avec toutefois un curseur en plus, comme vous pouvez le voir ci-dessous
:
Le composant permettant d'afficher des pages HTML est BrowserField.

Pour afficher du code HTML brut , il faut utiliser la mthode displayContent().
Il est possible d'afficher des pages locales ou web grce la mthode requestContent().
Le chargement d'une page web ncessite l'installation d'un outil appropri : le BlackBerry MDS Simulator.
La classe BrowserFieldConfig permet de configurer un objet BrowserField et ainsi mieux contrler la
navigation.
Partie 4 : Les finitions
170/191
Tester son application en profondeur

Lorsqu'une application est termine, il est important de pouvoir voir comment celle-ci ragit suivant le smartphone utilis.
Dans ce chapitre, nous allons donc voir un certain nombre de choses. Dans un premier temps, nous verrons comment bien
prparer son application avant cette grande srie de tests et avant sa publication officielle. Ensuite nous verrons o trouver de
nouveaux simulateurs et comment les utiliser dans Eclipse. Enfin, nous verrons comment tester une application directement sur
un terminal physique, grce au logiciel BlackBerry Desktop Manager que vous possdez peut-tre dj !
Prparer son application

Avant tout, il faut que vous sachiez que votre application sera distribue et installe sous la forme d'un fichier .alx. Ce format
de fichiers est spcifique BlackBerry, et votre application devra tre compile sous celui-ci. En ralit, toute compilation de
votre projet cre automatiquement un fichier .alx. Ce dernier est alors disponible dans le sous-rpertoire
..\deliverables\Standard\ de votre projet. Ce fichier .alx sera galement utile pour tester votre application sur un
appareil physique avant une publication.
Tester son application sur divers appareils

Ce chapitre a pour principal objectif de vous sensibiliser et de vous initier aux tests finaux indispensables votre application,
avant de pouvoir la dployer. Une fois une application termine, nous avons souvent tendance vouloir prcipiter sa
publication, ce qui est une grave erreur.
En effet, si votre application fonctionne bien sur votre simulateur, celle-ci peut trs bien gnrer des erreurs lors de son passage
sur un smartphone physique. Il est donc ncessaire de la tester sur un terminal physique et mme de voir sa compatibilit avec
diffrents modles et diffrentes versions de l'OS. L'idal serait videmment de pouvoir tester cette dernire sur une large gamme
de smartphones. Toutefois ceci n'est pas envisageable, surtout pour des dveloppeurs amateurs et indpendants. Une
alternative consiste alors utiliser le simulateur en variant au maximum le modle utilis. Vous devez savoir que les problmes
viendront le plus souvent de l'affichage, c'est pourquoi vous devrez utiliser un maximum d'crans diffrents.
Au cours de ce chapitre, nous verrons donc comment utiliser de nouveaux simulateurs et comment transfrer et installer son
application sur un appareil physique.
Quelques actions pralables

Avant de vous lancer tte baisse, je vais ici vous prsenter quelques actions utiles, principalement dans le cas d'essais sur un
terminal physique.
Nettoyer son projet

Lors de la phase de conception, nous avons souvent besoin de retravailler plusieurs fois son application. C'est pourquoi la fin
du projet, nous nous retrouvons trs rgulirement avec des inutilits dans ce genre :
fonctions ou mthodes non utilises dans la version finale
classes de tests
fichiers (images, sons,...) inutiles au projet final.
Le but est donc de supprimer tous ces lments pour allger le fichier .alx, en pensant bien faire une copie au pralable
pour ne perdre aucune donne importante. Ce nettoyage va surtout tre utile dans le cas d'essais sur un terminal physique, car
cela va vous permettre de rduire au maximum la taille de votre application et ainsi viter de surcharger ce dernier.
Changer d'icne
171/191
En gnral aprs un certain temps de dveloppement, nous nous sommes habitus l'icne par dfaut et n'y prtons plus
attention. Nanmoins, n'oubliez pas de dessiner une icne approprie votre application avant la publication et le dploiement
final ; c'est donc l'occasion de s'y intresser. Ceci est d'autant plus important maintenant que nous nous apprtons tester notre
application sur une grande varit de terminaux et simulateurs. Ainsi pour viter de vous mlanger les pinceaux parmi les
diverses applications que vous testerez, il est prfrable de changer ds maintenant d'icne, ce qui vous permettra de mieux les
distinguer.
Recompiler son projet

Enfin avant de passer la suite, n'oubliez pas de recompiler votre projet. Cette opration vous servira principalement incorporer
les manipulations prcdentes votre application. L'objectif de ces rectifications, est de tester votre application au plus proche
possible de sa version finale dfinitive.
Pour compiler un projet manuellement dans Eclipse, vous devez dcocher l'option Build Automatically du menu
Project. La compilation se fait alors en slectionnant le projet concern, puis en cliquant sur
Project > Build Project.
Utiliser de nouveaux simulateurs

Tlcharger et installer un nouveau simulateur
Comme vous avez certainement pu l'imaginer, il est possible de tester son application sur un autre simulateur que celui propos
par dfaut. Cela permet notamment de s'assurer de la compatibilit de votre application sur l'ensemble des supports.
Pour cela, RIM vous propose l'ensemble de ses produits sur la page de tlchargement des simulateurs. Pour l'exemple, nous
prendrons le simulateur du BlackBerry Bold 9900. Il vous sera galement demand de spcifier votre OS, et sachant que nous
travaillons depuis le dpart avec la version 7.0, je vous conseille donc de prendre cette version.
Enfin, prenez la dernire version de type Generic, comme indiqu sur la figure suivante.
172/191
Une fois le tlchargement achev, lancez l'installation du simulateur. Notez bien cependant l'emplacement o celui-ci sera
install, car nous en aurons besoin pour la suite !
Configurer Eclipse
Une fois que le nouveau simulateur est install, celui-ci n'est malheureusement pas encore visible dans Eclipse. C'est pourquoi il
faut faire quelques manipulations supplmentaires. Je vous propose donc de vous rendre dans le dossier d'installation d'Eclipse
et plus particulirement dans le dossier suivant :
..\Eclipse\plugins\net.rim.ejde.componentpackXXXXXX\components\simulator\. l'intrieur, vous
devriez trouver un fichier nomm SimPackage-JDE.rc.
Ouvrez donc celui-ci avec un diteur de texte quelconque tel que le Bloc Note, vous trouverez alors l'intrieur les lignes cidessous :
Code : Autre
## RIM Java Development Environment
173/191
# Settings file
SimulatorCommand9930JDE=<install_dir>\fledge.exe /app=Jvm.dll /handheld=9930 /session=9930 /appparam=DisableRegistration /appparam=JvmAlxConfigFile:9930.xml /pin=0x2100000A /app-param=NoTutorial
SimulatorDirectory9930-JDE=<install_dir>
Comme vous pouvez le voir, les deux dernires lignes permettent de spcifier l'emplacement du simulateur par dfaut. Vous
constaterez galement que le nouveau simulateur n'y est pas, et n'est donc pas pris en compte par Eclipse.
Ainsi pour l'ajouter, il suffit de copier les deux dernires lignes et de les coller juste en dessous. Ensuite vous devez remplacer
<install_dir> par l'emplacement o est stock le fichier fledge.exe de notre nouveau simulateur. galement vous
devez mettre jour le nom du simulateur, ici 9900 la place de 9930.
Au final, voici ce que donne mon fichier aprs l'ajout du simulateur 9900 :
Code : Autre
## RIM Java Development Environment

# Settings file
SimulatorCommand9930-JDE=<install_dir>\fledge.exe /app=Jvm.dll /handheld=9930 /session=
param=JvmAlxConfigFile:9930.xml /pin=0x2100000A /app-param=NoTutorial
SimulatorDirectory9930-JDE=<install_dir>
SimulatorCommand9900JDE=E:\BlackBerry\BlackBerry Smartphone Simulators 7.0.0\7.0.0.384 (9900)\fledge.exe /a

param=DisableRegistration /app-param=JvmAlxConfigFile:9900.xml /pin=0x2100000A /app-pa
SimulatorDirectory9900-JDE=E:\BlackBerry\BlackBerry Smartphone Simulators 7.0.0\7.0.0.3
Maintenant tout est prt, il ne nous reste plus qu' spcifier dans Eclipse quel simulateur utiliser pour nos projets.
Lancer l'application
Une fois la manipulation prcdente effectue, Eclipse prend en compte notre nouveau simulateur et nous pouvons maintenant
choisir le simulateur que nous souhaitons pour tester nos applications. Pour cela, allez dans
Run > Run Configurations..., slectionnez un projet puis cliquez sur l'onglet Simulator. Enfin vous y trouverez
une liste droulante de l'ensemble des simulateurs.
Slectionnez donc notre nouveau simulateur nomm BlackBerry-SDK-9900 :
174/191
a y est !
Vous pouvez dsormais lancer votre application dans le nouveau simulateur. Notez que vous pouvez tout moment changer de
simulateur pour n'importe quelle application.
Utiliser un appareil physique

Installer le Desktop Manager
Voyons maintenant comment transfrer et installer nos applications sur un vrai smartphone. Pour faire a, nous aurons
besoin du BlackBerry Desktop Manager, qui est un logiciel permettant de grer son smartphone depuis son ordinateur. Grce
lui, il est possible de mettre jour son systme d'exploitation, rcuprer des fichiers multimdias prsents sur l'appareil, ou
encore installer de nouvelles applications !
Il est possible que vous ayez dj cet outil. Dans le cas contraire, je vous invite tlcharger ce logiciel sur cette page, puis
l'installer.
175/191
Je ne dtaillerai pas les tapes d'installation du Desktop Manager ce stade du cours. Je considre donc que vous tes tout
fait capables de suivre la procdure par vous-mmes.
Premier dmarrage du logiciel

Ouverture du Desktop Manager
Une fois que votre installation est termine, lancez l'excution du logiciel. L'ouverture de ce dernier peut tre plus ou moins
longue, c'est pourquoi ne vous tonnez pas si vous restez bloqus un petit moment sur la page de prsentation suivante.
Au premier dmarrage, il est probable que vous tombiez sur une page de configuration dans ce genre (voir la figure suivante).
176/191
Ces configurations sont plutt des choix personnels, je vous laisserai donc le soin de dfinir les paramtres selon vos souhaits.
Une fois ouvert, le Desktop Manager ressemble ceci :
Notez toutefois qu'il nous est pour l'instant d'aucune utilit tant que nous n'avons pas connect un appareil.
Connexion au terminal
177/191
Si vous avez jet un il aux paramtres de configuration dcrits plus haut, vous aurez peut-tre remarqu qu'il est possible de
connecter votre smartphone en Bluetooth. Nanmoins, ce mode de connexion ne permet pas l'installation d'applications. Ainsi
nous allons plutt utiliser un raccordement en USB.
Branchez donc votre appareil l'aide du cble USB fourni avec celui-ci. Une fois branch, vous devriez voir apparatre la bulle
suivante.
Attendez jusqu' ce que l'installation du priphrique soit acheve, puis lancez le Desktop Manager si ce n'est pas dj fait !
Une fois le priphrique prt tre utilis, le logiciel vous fera savoir qu'il a dtect l'appareil que vous venez de brancher par la
fentre suivante.
Cliquez alors sur le bouton Commencer utiliser ce terminal ; nous sommes prsent prts pour installer et
tester une application sur le smartphone !
Installation d'une application

Comme vous l'aurez devin, pour installer une application il faut se rendre dans la rubrique Applications. Aprs un certain
temps de chargement, vous verrez le logiciel vous lister l'ensemble des applications dj prsentes sur votre appareil.
Dans notre cas, nous voulons plutt en installer une nouvelle. Pour cela, cliquez sur le bouton
178/191
Importer des fichiers... en haut droite de la fentre, comme sur l'image suivante.
C'est maintenant que nous allons avoir besoin de ce fameux fichier .alx dont je vous avais parl en dbut de chapitre. Vous
allez donc vous rendre dans le dossier ..\deliverables\Standard\ de l'application que vous dsirez installer.
l'intrieur, slectionnez le fichier .alx.
la suite de ceci, vous devriez normalement voir votre application apparatre parmi les autres, avec un statut Installation... :
179/191
Attention, ce stade l'application n'est pas prsente sur le smartphone. Le Desktop Manager n'applique les
changements qu'aprs validation de ceux-ci.
Appuyez donc sur Appliquer pour valider l'ensemble des oprations. Attendez ensuite que la fentre suivante disparaisse.
Voil, votre application est bien installe. Vous la trouverez comme d'habitude dans la section Downloads.
Une application est distribue et installe sous la forme d'un fichier .alx.
Avant de publier une application, il est important de la tester sur une large gamme de simulateurs et terminaux physiques.
Avant d'entamer cette phase de test, il serait judicieux de nettoyer son application.
180/191
RIM met disposition des simulateurs correspondant l'ensemble des smartphones disponibles la vente.
Le BlackBerry Desktop Manager permet de se connecter un appareil physique et d'y installer une application.
181/191
Dployer et distribuer
Pour ce dernier chapitre du cours, nous allons voir comment finaliser son application.
D'une part, nous verrons comment obtenir, installer et utiliser des cls permettant de signer une application. Ces signatures
permettent d'identifier le dveloppeur l'origine d'une application, et sont indispensables dans certains cas.
Enfin nous terminerons le chapitre en dcrivant les diffrents moyens de distribuer une application. Nous introduirons
notamment les outils BlackBerry App World et BlackBerry Enterprise Server.
Installer des cls de signature

Faire une demande de cls
Avant de dployer et de distribuer son application, il est ncessaire de la signer. Pour cela, RIM a tabli un systme de cls
individuelles associes chaque dveloppeur. Vous allez donc avoir besoin de ces cls, qui se prsentent sous la forme de trois
fichiers diffrents : client-RBB-xxxxxxx.csi, client-RCR-xxxxxxx.csi et client-RRT-xxxxxxx.csi.
Pour obtenir ces cls, il faut en faire la demande auprs de RIM, par le biais du formulaire suivant :
182/191
183/191
Vous remarquerez qu' la fin du formulaire, un numro PIN vous est demand. Prenez soin de bien noter ce dernier, car il
vous sera grandement utile lors de l'installation des cls.
Auparavant, cette demande de cls tant payante. Toutefois, elle est prsent totalement gratuite, alors profitez-en !
Une fois que vous aurez rempli le formulaire et que vous l'aurez valid, vous devrez attendre la confirmation de RIM, qui se fera
par courriel. Pour tre plus clair, lorsque votre demande aura t accepte, vous recevrez une srie de trois messages
lectroniques contenant chacun une cl sous la forme d'un fichier .csi.
Une fois que vous avez vos trois fichiers .csi, enregistrez-les sur votre disque dur, puis passez l'installation de celles-ci.
Installer les cls

Pour installer les cls obtenues prcdemment, commencez par ouvrir votre IDE : Eclipse !
Ensuite, ouvrez la fentre Preferences dans le menu Window. l'intrieur de celle-ci, rendez-vous dans la section
BlackBerry Java Plug-in > Signature Tool. ce stade, vous obtenez la fentre suivante.
Cliquez alors sur Install New Keys..., et la fentre suivante apparat.
184/191
Cliquez sur le bouton Oui, puis dans la nouvelle fentre, allez chercher sur votre disque dur le premier fichier .csi. Une fois ce
dernier slectionn, il vous sera demand de choisir un mot de passe, qu'il vous faudra bien entendu conserver pour la suite.
C'est maintenant que vous devez ressortir le numro PIN renseign prcdemment, dans le formulaire de demande de cls.
Saisissez-le ainsi que le mot de passe cr juste avant.
Si tout c'est correctement droul, une fentre de succs devrait s'afficher, comme la figure suivante.
185/191
ce stade, vous n'avez install qu'une seule cl sur les trois. C'est pourquoi vous devez ritrer ces oprations pour les deux
cls restantes, en cliquant nouveau sur Install New Keys... !
Finaliser son application
Nous allons prsent nous intresser aux tapes de finalisation d'une application, savoir la signature de celles-ci ainsi que le
remplissage de la feuille de description de l'application.
Nous allons rapidement voir ici comment procder pour ces tapes de finalisation d'une application. Toutefois, je vous
conseille fortement d'aller faire un tour dans la documentation officielle si vous tes sur le point de publier votre
application. En effet, rien ne vaut les explications et renseignements fournis par RIM !
Remplir le BlackBerry Application Descriptor

Pour commencer, revoyons ensemble ce fameux fichier de description de l'application nomm
BlackBerry_App_Descriptor.xml.
Ouvrez-le, puis jetez un il aux diffrents champs qui le composent. Vous verrez alors, comme son nom l'indique, qu'il s'agit des
champs de description de l'application, tels que le nom, la version, le vendeur (vous), le type d'application, l'icne associe, etc.
Voici donc la figure suivante ce pseudo-formulaire .
186/191
Notez que pour spcifier le nom du vendeur, il est prfrable de faire avant, une demande de cration de compte vendeur sur
l'App World auprs de RIM, mais nous y reviendrons plus tard.
Un autre point sur lequel je voudrais galement revenir est le numro de version. En gnral, il se prsente sous la forme
<majeur>.<mineur>.<micro> ou <majeur>.<mineur>.<rvision>, o chaque point spare des volutions
dans l'application qui sont plus ou moins importantes. Ainsi, la version 2.0.3 reprsente la troisime rvision de la premire
version mineure de la deuxime version majeure de votre application. En ralit, ce n'est trs grave si vous ne suivez pas
exactement ce schma-l, mais tachez de ne pas faire passer un changement de police de caractres pour une volution majeure !
Je vous laisserai donc le soin de remplir par vous-mmes l'ensemble des champs prsents dans ce fichier. Cependant avant de
passer la suite, je voudrais vous faire remarquer qu'il existe diffrents onglets. Pensez donc faire un tour de l'ensemble du
fichier avant de clturer votre application.
Voici par exemple un aperu du deuxime onglet, o nous retrouvons notamment une case cocher permettant de gnrer un
fichier .alx.
Signer son application

l'origine pour signer son application, il suffisait de slectionner son projet sous Eclipse, puis de faire un clic-droit et terminer
en cliquant sur BlackBerry > Sign with Signature Tool. Nanmoins, il est peu probable que cette mthode soit
encore disponible chez vous.
Pour pallier ce problme, il est toutefois possible d'ouvrir manuellement l'outil de signature en le cherchant dans le dossier
d'installation du BlackBerry Java Plugin. Chez moi par exemple, j'ai trouv cet outil qui se nomme SignatureTool.jar
dans le sous-dossier ..\plugins\net.rim.ejde\vmTools\.
Une fois que vous l'avez trouv, lancez-le et vous obtiendrez la fentre suivante.
187/191
Comme vous pouvez le voir, l'outil permet d'ouvrir des fichiers de type .cod, qui sont gnrs aprs compilation de vos projets.
Rendez-vous donc dans le dossier du projet concern, afin d'y trouver ce fichier. Ensuite ouvrez-le, puis regardez les
informations prsentes par l'outil.
Comme vous le voyez, ce projet comporte des statuts Non Signs . Ainsi pour entamer la procdure de signature, cliquez sur
le bouton Request, puis entrez le mot de passe cr pendant la phase d'installation des cls dans la nouvelle fentre.
188/191
Aprs un certain temps, vous pourrez voir apparatre les statuts Signs , comme indiqu sur la figure suivante.
a y est, votre application est prsent signe et prte tre distribue !
La distribution
Avant d'aller plus loin, vrifiez bien l'tat de votre application. Pensez notamment recompiler votre application et vrifier
l'aide du Signature Tool que celle-ci est bien signe !
Proposer une application sur l'App World

BlackBerry App World est un service de distribution d'applications gr par RIM,
qui permet de centraliser les applications disponibles pour les smartphones
BlackBerry au sein d'un mme endroit.
L'avantage de ce mode de distribution est donc bien entendu une grande visibilit de
votre application auprs des utilisateurs BlackBerry. Cela peut donc tre un bon
moyen de rentabiliser votre application en la rendant payante. Pour proposer une
application sur l'App World, vous devez cependant possder un compte vendeur en en faisant la demande auprs de RIM. Pour
cela, compltez donc la procdure d'enregistrement en suivant ce lien. Vous devrez alors remplir divers formulaires, puis confirmer
la cration de votre compte par l'envoi d'un justificatif tel qu'un scan de votre pice d'identit si vous tes un dveloppeur
indpendant.
Une fois enregistr auprs de RIM, vous pourrez alors dposer vos applications sur l'App World, et ventuellement les proposer
suivant une certaine somme. Sachez que RIM fonctionne principalement avec les comptes Paypal pour grer les transferts
189/191
d'argent.
Utiliser BlackBerry Enterprise Server

Pour les entreprises, il est possible d'utiliser BlackBerry Enterprise Server, qui est une application permettant de connecter des
smartphones BlackBerry aux serveurs et applications courriels de l'entreprise. Les applications peuvent donc tre installes sur
des terminaux qui sont connects BlackBerry Enterprise Server.
Je n'entrerai pas dans les dtails et j'invite les intresss se rendre directement sur le site de cet outil ; BlackBerry Enterprise
Server.
D'autres moyens de distribution

En ralit, votre application est prsente sous la forme d'un fichier .alx, que vous pouvez transfrer sur un terminal l'aide du
Desktop Manager. Ainsi, toute forme de distribution de ce fichier est bonne prendre.
Par exemple, vous pouvez proposer votre application par courriel en joignant le fichier .alx votre message. Nanmoins, je
vous dconseille d'utiliser une application de source inconnue. N'utilisez les botes lectroniques qu'avec des connaissances.
Ensuite par le bouche--oreille, votre application pourrait trs bien trouver un certain succs !
Une autre manire de distribuer son application est d'utiliser le web. En effet, il n'est pas rare de se voir tlcharger un logiciel
directement depuis le site web du dveloppeur ou de la compagnie l'origine de celui-ci. Vous pouvez donc tout fait proposer
votre application au tlchargement depuis votre site web, ou mme mieux, raliser un mini-site pour votre application.
Utilisez donc tous les moyens votre disposition pour largir votre communaut d'utilisateurs !
Pour signer ses applications, il est ncessaire de disposer de trois cls sous forme de fichiers .csi.
Signature Tool est un outil permettant de vrifier et d'appliquer une signature aux applications.
Le fichier BlackBerry_App_Descriptor.xml permet de dcrire l'application et est principalement utile dans le
cas d'une publication sur l'App World.
BlackBerry App World est le meilleur moyen de distribuer une application pour un dveloppeur indpendant.
Les entreprises peuvent se servir de BlackBerry Enterprise Server pour diffuser des applications parmi leurs
collaborateurs.
Ce tutoriel est prsent termin !
Toutefois si vous le dsirez, vous pouvez encore vous perfectionner en vous rendant par exemple sur le site officiel de
dveloppement BlackBerry en Java.
Remerciements
Par ailleurs, je tiens remercier les personnes ci-dessous sans qui ce tutoriel n'aurait jamais vu le jour :
l'ensemble des validateurs, et plus particulirement Guizmo2000, qui contribuent normment la bonne rdaction des
190/191
tutoriels, et dont le travail n'est pas toujours mis en valeur,

AnnaStretter qui a suivi et accompagn ce tutoriel de prs et a ainsi permis d'amliorer la qualit de ce dernier,
M@teo21 et l'quipe de Simple IT qui font vivre le Site du Zro et permettent de nombreuses personnes de se former
sur une grande varit de langages et de domaines,
l'ensemble des lecteurs qui ont contribu l'avancement de ce cours par leur intrt pour celui-ci.

Creez Des Applications Pour Blackberry

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Creez Des Applications Pour Blackberry

Uploaded by

Copyright:

Available Formats

Crez des

Licence Creative Commons 6 2.0

Installation des outils de dveloppement .......................................................................................................................... 9

Votre premire application .............................................................................................................................................. 16

Partie 2 : Les interfaces graphiques .................................................................................................. 27

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

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

La gestion des vnements ............................................................................................................................................ 57

Les vues personnalises ................................................................................................................................................. 65

Partie 3 : Les techniques avances .................................................................................................. 89

L'internationalisation ...................................................................................................................................................... 100

Le stockage de donnes ............................................................................................................................................... 109

TP : un diteur de texte ................................................................................................................................................. 124

Le multimdia ................................................................................................................................................................ 134

L'acclromtre ............................................................................................................................................................. 147

Un niveau ................................................................................................................................................................................................................ 156

Les pages HTML ........................................................................................................................................................... 159

Partie 4 : Les finitions ...................................................................................................................... 169

Dployer et distribuer .................................................................................................................................................... 180

Crez des applications pour BlackBerry

Mise jour : 11/02/2013

Dure d'tude : 3 mois

1 visites depuis 7 jours, class 35/807

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

Crez des applications pour BlackBerry

Partie 1 : Les bases du dveloppement BlackBerry

Un petit mot sur BlackBerry

BlackBerry est la base une ligne de smartphones dveloppe par la socit

Partie 1 : Les bases du dveloppement BlackBerry

Eclipse : IDE pour crire du code

Voici les possibilits de dveloppement :

Partie 1 : Les bases du dveloppement BlackBerry

Partie 1 : Les bases du dveloppement BlackBerry

Installation des outils de dveloppement

Installer le Java SE JDK

Partie 1 : Les bases du dveloppement BlackBerry

tape 1 sur 4 : Cliquez sur

tape 2 sur 4 : Spcifiez le

dossier d'installation et cliquez sur Next.

Partie 1 : Les bases du dveloppement BlackBerry

tape 3 sur 4 : Patientez

pendant la dure d'installation.

tape 4 sur 4 : Terminez

l'installation en cliquant sur Continue.

Eclipse et son plugin pour BlackBerry

Partie 1 : Les bases du dveloppement BlackBerry

installation est suffisante pour avoir un IDE configur et prt l'emploi.

tape 1 sur 2 : Dans la rubrique Development tools and

downloads, slectionnez votre systme d'exploitation.

tape 2 sur 2 : Cliquez sur Download.

Installation sous Windows

Partie 1 : Les bases du dveloppement BlackBerry

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

sur 7 : Vrifiez les informations puis cliquez sur Install.

Partie 1 : Les bases du dveloppement BlackBerry

sur 7 : Patientez pendant l'installation...

Partie 1 : Les bases du dveloppement BlackBerry

Partie 1 : Les bases du dveloppement BlackBerry

Voici une liste des fonctionnalits correspondant aux encadrs ci-dessus :

Partie 1 : Les bases du dveloppement BlackBerry

Votre premire application

Partie 1 : Les bases du dveloppement BlackBerry

Partie 1 : Les bases du dveloppement BlackBerry