♪
I. Introduction▲
Tout développeur mobile J2ME sait que l'API graphique intégrée par défaut (LCDUI) manque de beaucoup de composants et qu'il faut souvent jongler pour faire quelque chose de beau. Il existe heureusement plusieurs bibliothèques graphiques destinées à J2ME (KUIX, TWUIK, J4ME, J2MEGUI, etc.) et ma préférée est LWUIT que je me propose de vous présenter dans ce petit tutoriel. LWUIT (LightWeight User Interface Toolkit) est une bibliothèque graphique digne de ce nom pour les terminaux mobiles compatibles J2ME et Blackberry. Lancée en 2008 par Sun (devenue une propriété de Oracle), elle n'a cessé d'évoluer et peut être citée aujourd'hui en tant que référence. LWUIT est open source et vous pouvez l'utiliser pour des applications commerciales ou gratuites.
Pour les plus curieux qui aimeraient avoir plus d'informations sur d'autres bibliothèques graphiques en J2ME comme celles citées ci-dessus, rendez-vous à l'adresse suivante: http://doderic.wordpress.com.
Vous y trouverez un article qui parle de six de ces bibliothèques.
II. Qu'est-ce que LWUIT a de si particulier?▲
En plus d'être gratuit, LWUIT apporte de manière élégante une touche visuelle aux applications J2ME et Blackberry. Dans le package de LWUIT (actuellement disponible en version 1.5), on retrouve un éditeur (Resources editor) qui permet de faire pas mal de choses sans se prendre la tête. Il est possible avec cet éditeur de créer des thèmes visuellement pour votre application, de créer l'interface de votre application visuellement à l'aide du GUI Designer intégré, de traduire votre application en plusieurs langues, de créer des animations basiques, de créer une police, etc.
LWUIT est supportée par MIDP 2.0/CLDC 1.1 (dans le cas des plateformes J2ME), par les configurations CDC, par Blackberry 4.7 ou supérieur, par J2SE (utile pour déboguer, profiler, tester et faire des démos de votre application sur PC) et propose une séparation propre entre le code de l'interface graphique, le design et la logique de votre application. LWUIT est complètement compatible avec les écrans tactiles et a un clavier virtuel intégré.
Cette nouvelle version (la 1.5) arrive aussi avec une autre bibliothèque (LWUIT4IO) qui s'occupe de toute la partie qui concerne le stockage, le réseau, l'utilisation des webservices toujours de manière portable, propre tout en résolvant tous les problèmes que peut rencontrer un développeur quand il utilise ces genres de fonctionnalités. Je précise que cette dernière bibliothèque est aussi disponible pour Blackberry, J2SE, Nokia.
Vous retrouverez dans LWUIT beaucoup de composants intéressants qu'on croyait réservés aux applications PC et que vous ne retrouverez pas dans l'API par défaut LCDUI de MIDP. Je peux citer entre autres :
- un combobox ;
- une barre de progression ;
- un bouton ;
- un spinner ;
- des layouts ;
- des pages à onglets ;
- un calendrier ;
- une boite de dialogue modale ;
- un tableau éditable ;
- un slider ;
- une liste très flexible que vous pouvez "designer" à votre manière ;
- etc.
En plus de ces composants, voici un aperçu de ce qu'il vous est possible de faire avec LWUIT :
- création de thèmes pour votre application à concevoir visuellement avec l'éditeur fourni ;
- utilisation des transitions et animations 2D et 3D ;
- animer les layouts ;
- traduction de votre application le plus facilement et le plus rapidement possible ;
- conception d'interface graphique visuellement avec un GUI designer ;
- intégration du format SVG ;
- support des écrans tactiles ;
- transport de votre application sur toutes les plateformes J2ME sans vous soucier de la taille de l'écran et d'autres caractéristiques propres à l'appareil ;
- développer des applications mobiles commerciales dignes de ce nom ;
- etc.
Eh oui, tout ça pour une application J2ME. Et moi qui ai toujours pensé que ces fonctionnalités ne peuvent seulement qu'être disponibles sur une application desktop ou de smartphone. ;-)
Info : ceux qui ont déjà programmé avec Swing en Java se retrouveront rapidement avec cette bibliothèque qui s'y inspire beaucoup.
III. Téléchargement et installation de LWUIT▲
Vous pouvez récupérer LWUIT 1.5 sur http://lwuit.java.net. Le ZIP fait 35 Mo. Dans la suite de ce tutoriel, je vais utiliser Netbeans qui est l'IDE le plus adapté à mon avis pour le développement J2ME. Après téléchargement et décompression du fichier ZIP, lancez Netbeans. Ensuite allez dans le menu Outils puis choisir Bibliothèques.
Pour ajouter notre bibliothèque, cliquez sur Nouvelle bibliothèque… Donnez-lui un nom (LWUIT_1.3 par exemple) et gardez la valeur bibliothèques de classes dans le champ type de la bibliothèque.
Validez et sous l'onglet "Chemin de classe", cliquez sur "Ajouter un fichier JAR ou un dossier…" pour ajouter le fichier JAR de LWUIT disponible dans le dossier lib du ZIP décompressé. Ensuite, allez sous l'onglet "Javadoc" et ajoutez aussi la javadoc de LWUIT en suivant "presque" la même procédure. Validez puis créez un nouveau projet mobile si ce n'est pas déjà fait. Sous l'onglet "Projet" qui vous affichera en arborescence les fichiers de votre projet, faites un clic droit sur "Resources" puis choisissez "Add library…". Choisissez maintenant dans la liste qui s'est affichée la bibliothèque LWUIT à partir du nom que vous lui avez attribué (dans notre cas LWUIT_1.3). C'est tout, la bibliothèque LWUIT est bien installée dans votre IDE et nous pouvons maintenant l'utiliser.
IV. Votre première application LWUIT▲
Comme je l'ai mentionné dans l'introduction, je supposerai dans ce cours que vous êtes déjà initié à J2ME et que vous comprenez déjà les bases et la structure d'une MIDlet. Je tiens aussi à préciser que l'explication des codes de ce tutoriel se fera à partir des commentaires. Ceci dit, on peut passer à notre première application qui n'est rien d'autre qu'un Hello World classique :
import com.sun.lwuit.Command;
import com.sun.lwuit.Component;
import com.sun.lwuit.Display;
import com.sun.lwuit.Form;
import com.sun.lwuit.Label;
import com.sun.lwuit.layouts.BoxLayout;
import javax.microedition.midlet.*;
public class HelloWorld extends MIDlet {
//Déclaration d'une "Command" quitter. Le rôle des "Command" en LDCUI est le même qu'en LWUIT
private Command quitter;
public void startApp() {
//Initialisation de LWUIT
Display.init(this);
//Création d'une Form représentant une interface ou un écran de notre application
Form f=new Form("HelloWorld");
//Création d'un layout vertical pour la disposition des composants graphiques
BoxLayout layout=new BoxLayout(BoxLayout.Y_AXIS);
//Ajout du layout à notre "Form" comme conteneur principal des composants graphiques
f.setLayout(layout);
//Création d'un composant Label pour l'affichage de texte
Label titre=new Label("Salut LWUIT!");
//Centrons notre Label "titre"
titre.setAlignment(Component.CENTER);
//Création d'une Command Quitter pour quitter notre application
quitter=new Command("Quitter");
//Ajout de notre Label "titre" au "Form"
f.addComponent(titre);
//Ajout de la "Command" quitter au Form
f.addCommand(quitter);
//Affichage de notre Form
f.show();
}
public void pauseApp() {
//Action à exécuter quand l'application sera en pause
}
public void destroyApp(boolean unconditional) {
//Action à exécuter avant fermeture de l'application
}
}Vous pouvez exécuter l'application comme à l'habituel, il n'y a pas de manière spéciale pour le cas de LWUIT. Après compilation, vous pouvez remarquer dans le dossier dist du dossier de votre projet que le JAR généré est un peu lourd pour un si petit code (plus de 300 ko). Vous n'avez pas à vous inquiéter pour cela parce qu'on peut obfusquer une application utilisant LWUIT. Cela permettra d'enlever du JAR les classes que vous n'utilisez pas, ce qui réduira considérablement la taille de votre JAR final. L'exécution vous mènera directement au lancement de l'émulateur et cela nous affichera ceci : Aperçu avec l'émulateur :
Pas très attirant visuellement n'est-ce pas? C'est parce que je n'ai pas mis les couleurs. Faisons des ajouts à notre code en le gonflant un peu et en y ajoutant les couleurs et la gestion des évènements. Comme le précédent exemple, le code sera suffisamment commenté et servira en même temps d'explication du code.
Personnalisons manuellement l'interface de notre HelloWorld :
import com.sun.lwuit.Button;
import com.sun.lwuit.Command;
import com.sun.lwuit.Component;
import com.sun.lwuit.Display;
import com.sun.lwuit.Form;
import com.sun.lwuit.Image;
import com.sun.lwuit.Label;
import com.sun.lwuit.events.ActionEvent;
import com.sun.lwuit.events.ActionListener;
import com.sun.lwuit.layouts.BoxLayout;
import com.sun.lwuit.plaf.Style;
import java.io.IOException;
import javax.microedition.io.ConnectionNotFoundException;
import javax.microedition.midlet.*;
public class HelloWorld extends MIDlet implements ActionListener{
private Command quitter;
private Button bouton;
private Button bouton_quitter;
private Image image;
public void startApp() {
//Initialisation de LWUIT
Display.init(this);
//Création d'une Form
Form f=new Form("Hello LWUIT");
//Définition de la couleur de fond de la barre de titre
/*
* Cette écriture aussi fera la même tâche
* f.getTitleComponent().getStyle().setBgColor(0xff0254);
*/
f.getTitleStyle().setBgColor(0x00bfff);
//Définition de la couleur du texte de la barre de titre
/*
* Cette écriture aussi fera la même tâche
* f.getTitleComponent().getStyle().setFgColor(0xffffff);
*/
f.getTitleStyle().setFgColor(0xffffff);
//Définition de la couleur de fond de l'intérieur de notre Form
f.getStyle().setBgColor(0xffd700);
/*
* Définition de la couleur de fond et du texte de la barre de menu
* Cette fois nous utilisons la classe Style pour définir nos couleurs
* Vous pouvez utilisez cette classe si vous comptez utiliser un même style à
* plusieurs composants. Cela vous évite de le faire un à un.
*/
Style style=new Style();
style.setBgColor(0x000000); //Couleur de fond de la barre de menu
style.setFgColor(0xffffff); //Couleur du texte de la barre de menus
f.setSoftButtonStyle(style); //Attribution du style créé à la barre de menus
//Création d'un layout vertical pour la disposition des composants graphiques
BoxLayout layout=new BoxLayout(BoxLayout.Y_AXIS);
//Ajout du layout à notre Form comme conteneur principal des composants graphiques
f.setLayout(layout);
//Création d'in composant Label pour l'affichage de texte
Label titre=new Label("Salut LWUIT!");
//Centrons notre Label "titre"
titre.setAlignment(Component.CENTER);
//Ici, nous définissons le niveau de transparence de notre Label sinon le label aura un fond blanc
//le niveau de transparence varie de 0 à 255. O étant le niveau de transparence totale et 255 le niveau opaque
titre.getStyle().setBgTransparency(0);
//Création d'un composant bouton pour aller sur developpez.com après un clic
bouton=new Button("www.developpez.com");
//Création d'un second bouton pour quitter l'application
bouton_quitter=new Button("Fermer l'application");
//Centrons nos deux boutons
bouton.setAlignment(Component.CENTER);
bouton_quitter.setAlignment(Component.CENTER);
//On définit les couleurs de fond de nos boutons quand ils seront sélectionnés
bouton.getSelectedStyle().setBgColor(0x00ff00);
bouton_quitter.getSelectedStyle().setBgColor(0x00ff00);
//Créons une image que nous allons ajouter à notre interface
try {
image = Image.createImage("/display.png");
} catch (IOException ex) {
ex.printStackTrace();
}
//Pour afficher une image en LWUIT, il faut passer forcément par un Label
//sinon vous aurez une erreur pendant l'ajout du composant image dans votre Form
//Cela veut dire tout simplement qu'on utilise un Label pour le texte et pour l'image en LWUIT
Label image_label=new Label(image);
//Rendons transparent le fond de l'image
image_label.getStyle().setBgTransparency(0);
//Création d'une Command Quitter pour quitter notre application
quitter=new Command("Quitter");
//Ajout de notre label "titre" au Form
f.addComponent(titre);
//Ajout du bouton au Form
f.addComponent(bouton);
//Ajout du second bouton destiné à quitter l'application
f.addComponent(bouton_quitter);
//Ajout du Label de l'image au Form
f.addComponent(image_label);
//Ajout de la commande quitter au Form
f.addCommand(quitter);
//Nous connectons nos deux boutons à l'écouteur d'évènement ActionListener
/*
* En LWUIT, c'est l'interface ActionListener qui s'occupe des évènements de l'application
* et non CommandListener comme c'est le cas en MIDP en J2ME classique.
* Avec ActionListener, il faut implémenter la méthode actionPerformed(ActionEvent evt) pour gérer les évènements
*/
bouton.addActionListener(this); //Connexion du bouton à l'écouteur d'évènement
bouton_quitter.addActionListener(this); //Connexion du bouton à l'écouteur d'évènement
//Connexion de la Form à l'écouteur d'évènement ActionListener
/*
* En LWUIT, c'est l'interface ActionListener qui s'occupe des évènements de l'application
* et non CommandListener comme c'est le cas en MIDP en J2ME classique.
* Avec ActionListener, il faut implémenter la méthode actionPerformed(ActionEvent evt)
*/
f.addCommandListener(this);
//Affichage de notre Form
f.show();
}
public void pauseApp() {
}
public void destroyApp(boolean unconditional) {
notifyDestroyed();
}
public void actionPerformed(ActionEvent evt) {
//Récupération de la Command ayant émis une action
Command cmd=evt.getCommand();
/*
* Récupération de la source qui a lancé l'évènement. Si c'est le premier bouton
* alors l'application lancera le navigateur de votre téléphone pour se connecter
* à www.developpez.com. Si c'est par contre le second bouton alors quitter l'application
*
*/
if(evt.getSource().equals(bouton)){
try {
//Lance le navigateur du téléphone et le dirige vers www.developpez.com
platformRequest("http://www.developpez.com");
} catch (ConnectionNotFoundException ex) {
ex.printStackTrace();
}
} else if(evt.getSource().equals(bouton_quitter)){
destroyApp(true);
} else if(cmd.equals(quitter)){ //Quitter l'application quand la commande récupérée équivaut à la commande quitter (Quitter)
destroyApp(true);
}
}
}C'est déjà beaucoup comme code n'est-ce pas ? Eh bien ça vaut le coup si vous tenez à avoir un visuel attrayant pour votre application. Voyons ce que ça donne avec l'émulateur :
Plus agréable à voir, je pense. Laissez-moi vous dire que toutes les combinaisons sont possibles avec LWUIT. Vous pouvez personnaliser votre interface comme vous le voulez parce que LWUIT est très flexible. Fouillez un peu dans la javadoc et vous découvrirez beaucoup de choses intéressantes.
V. Brève présentation de LWUIT resource editor▲
Certains s'imaginent déjà ce que ça donnerait comme quantité de code s'il faut designer une application complète et dans les moindres détails. Ceux qui ont essayé la bibliothèque graphique Kuix savent à peu près de quoi je parle (beaucoup de CSS à écrire pour le design). Sachez que les concepteurs de LWUIT ont pensé à tout et nous propose l'application LWUIT Resource editor (fournie dans le package de LWUIT dans le dossier util) qui vous permet entre autres de concevoir le thème de votre application visuellement sans écrire une ligne de code. Je tiens à préciser que LWUIT Resource editor ne crée pas que des thèmes et fait bien plus que ça. Elle permet aussi de :
- traduire votre application mobile dans d'autres langues ;
- d'intégrer des images, des animations et d'autres fichiers au fichier de ressources ;
- de créer des polices (Font) ;
- d'intégrer dans un fichier de ressources des images et toutes sortes de fichiers (comme on fait avec le fichier de ressources du framework Qt pour ceux qui connaissent).
Le fichier ressource créé par LWUIT est en quelque sorte compilé et permet ainsi une réduction de sa taille. L'apprentissage proprement dit du Resource editor fera l'objet d'un autre tutoriel, mais pour l'instant je vais vous apprendre comment utiliser un thème créé avec Resource editor dans votre application sans vous prendre la tête.
Je vais utiliser le thème classique fourni avec LWUIT. Vous pouvez récupérer ce fichier ressource (dont l'extension est .RES) dans les sources de ce tutoriel ou dans les exemples du package de LWUIT.
Pour faire plus simple, déposer le fichier ressource nommé "LWUITtheme.res" dans le dossier src de votre projet et voyons ce que ça donne avec notre code modifié :
import com.sun.lwuit.Button;
import com.sun.lwuit.Command;
import com.sun.lwuit.Component;
import com.sun.lwuit.Display;
import com.sun.lwuit.Form;
import com.sun.lwuit.Image;
import com.sun.lwuit.Label;
import com.sun.lwuit.events.ActionEvent;
import com.sun.lwuit.events.ActionListener;
import com.sun.lwuit.layouts.BoxLayout;
import com.sun.lwuit.plaf.UIManager;
import com.sun.lwuit.util.Resources;
import java.io.IOException;
import javax.microedition.io.ConnectionNotFoundException;
import javax.microedition.midlet.*;
public class HelloWorld extends MIDlet implements ActionListener{
private Command quitter;
private Button bouton;
private Button bouton_quitter;
private Image image;
private Resources r;
public void startApp() {
//Initialisation de LWUIT
Display.init(this);
try {
r = Resources.open("/LWUITtheme.res");
UIManager.getInstance().addThemeProps(r.getTheme("LWUITDefault"));
} catch (IOException ex) {
ex.getMessage();
}
//Création d'une Form
Form f=new Form("Hello LWUIT");
//Création d'un layout vertical pour la disposition des composants
BoxLayout layout=new BoxLayout(BoxLayout.Y_AXIS);
//Ajout du layout à notre Form comme conteneur principal des composants
f.setLayout(layout);
//Création d'un composant Label pour l'affichage de texte
Label titre=new Label("Salut LWUIT!");
//Centrons notre Label "titre"
titre.setAlignment(Component.CENTER);
//Création d'un composant bouton pour aller sur developpez.com après un clic
bouton=new Button("www.developpez.com");
//Création d'un second bouton pour quitter l'application
bouton_quitter=new Button("Fermer l'application");
//Centrons nos deux boutons
bouton.setAlignment(Component.CENTER);
bouton_quitter.setAlignment(Component.CENTER);
//Créons une image que nous allons ajouter à notre interface
try {
image = Image.createImage("/display.png");
} catch (IOException ex) {
ex.printStackTrace();
}
//Pour afficher une image en LWUIT, il faut passer forcément par un Label
//sinon vous aurez une erreur pendant l'ajout du composant image dans votre Form
//Cela veut dire tout simplement qu'on utilise un Label pour le texte et pour l'image en LWUIT
Label image_label=new Label(image);
//Création d'une Command Quitter pour quitter notre application
quitter=new Command("Quitter");
//Ajout de notre Label "titre" au Form
f.addComponent(titre);
//Ajout du bouton au Form
f.addComponent(bouton);
//Ajout du second bouton pour quitter l'application
f.addComponent(bouton_quitter);
//Ajout du Label de l'image au Form
f.addComponent(image_label);
//Ajout de la commande quitter au Form
f.addCommand(quitter);
//Nous connectons nos deux boutons à l'écouteur d'évènement ActionListener
/*
* En LWUIT, c'est l'interface ActionListener qui s'occupe des évènements de l'application
* et non CommandListener comme c'est le cas en MIDP en J2ME classique.
* Avec ActionListener, il faut implémenter la méthode actionPerformed(ActionEvent evt)
*/
bouton.addActionListener(this);
bouton_quitter.addActionListener(this);
//Connexion de la Form à l'écouteur d'évènement ActionListener
/*
* En LWUIT, c'est l'interface ActionListener qui s'occupe des évènements de l'application
* et non CommandListener comme c'est le cas en MIDP en J2ME classique.
* Avec ActionListener, il faut implémenter la méthode actionPerformed(ActionEvent evt)
*/
f.addCommandListener(this);
//Affichage de notre Form
f.show();
}
public void pauseApp() {
}
public void destroyApp(boolean unconditional) {
notifyDestroyed();
}
public void actionPerformed(ActionEvent evt) {
//Récupération de la Command ayant émis une action
Command cmd=evt.getCommand();
/*
* Récupération de la source qui a lancé l'évènement. Si c'est le premier bouton
* alors l'application lancera le navigateur de votre téléphone pour se connecter
* à www.developpez.com. Si c'est par contre le second bouton alors quitter l'application
*
*/
if(evt.getSource().equals(bouton)){
try {
platformRequest("http://www.developpez.com");
} catch (ConnectionNotFoundException ex) {
ex.printStackTrace();
}
} else if(evt.getSource().equals(bouton_quitter)){
destroyApp(true);
} else if(cmd.equals(quitter)){ //Quitter l'application quand la commande récupérée est la commande quitter (Quitter)
destroyApp(true);
}
}
}Avec l'émulateur ça nous donne ceci :
Remarquez que le code a été vraiment réduit pour un visuel plus propre. Toutes les lignes qui s'occupaient des styles des composants ont été enlevées au profit de deux lignes de code seulement.
r = Resources.open("/LWUITtheme.res");
UIManager.getInstance().addThemeProps(r.getTheme("LWUITDefault"));
la ligne: r=Resources.open("/LWUITtheme.res") ouvre et charge en mémoire le contenu du fichier ressource LWUITtheme. Ensuite, étant donné qu'il peut avoir plusieurs thèmes dans un fichier ressource, il faut préciser celui que nous voulons utiliser en l'appelant par son nom ou par son numéro d'index comme pour les tableaux en programmation. Ce qui donne:
UIManager.getInstance().addThemeProps(r.getTheme("LWUITDefault"));
Dans notre cas le thème à appliquer à toute l'application est nommé LWUITDefault. Étant donné que c'est le premier élément parmi les thèmes, on peut aussi l'appliquer en utilisant le code suivant :
UIManager.getInstance().setThemeProps(r.getTheme(r.getThemeResourceNames()[0])
Ici, nous utilisons l'indice 0 (zéro) ce qui correspond au premier thème du fichier de ressources.
N. B. Ne créez pas de composants avant d'insérer les deux lignes ci-dessus sinon les styles ne seront pas appliqués à ces composants, mais seulement à ceux qui seront créés après ces deux lignes.
VI. Quelques composants usuels▲
- Bouton radio : classe RadioButton à utiliser en collaboration avec la classe ButtonGroup.
- Liste déroulante : classe ComboBox.
- Liste normale : classe List
- Calendrier : classe Calendar.
- Zone de texte à une ligne : classe TextField.
- Zone de texte à plusieurs lignes et colonnes : classe TextArea.
- Un tableau éditable : classe Table.
- Une boite de dialogue modale : classe Dialog.
- Les transitions: classe CommonTransitions et classe Transition3D.
- etc.
VII. Liens▲
- Site de LWUIT: http://lwuit.java.net
- Blog de LWUIT (très bonne source d'informations + des tutos vidéo): http://lwuit.blogspot.com
- Mon blog (un nouveau blog mais vous allez trouver des articles sur la programmation mobile et sur d'autres choses) : http://doderic.wordpress.com
VIII. Sources▲
Téléchargez les sources de ce tutoriel ici
IX. Remerciements▲
Je tiens à remercier keulkeul, Djibril et ZouBi du forum Java pour leur relecture
X. Conclusion▲
Par ce petit tutoriel, j'ai voulu vous faire découvrir la bibliothèque LWUIT. Une documentation en français sur le sujet est vraiment rare sur Internet. Pour cela je m'engage à vous fournir une série de tutoriels sur cette bibliothèque que je trouve complète et intéressante et que je n'arrête pas de découvrir au fil des jours. J'espère vous avoir convaincu d'utiliser cette bibliothèque, mais si ce n'est pas encore le cas alors attendez d'autres tutoriels plus avancés et vous le serez. Sachez qu'une application écrite avec LWUIT s'adapte automatiquement à la taille de chaque écran et aux possibilités graphiques de chaque téléphone. C'est une bibliothèque qui est portable et qui fait tout pour le rester. Beaucoup l'ont déjà testé pour des applications Blackberry et Android ce qui veut dire que cette bibliothèque est compatible avec toute plateforme Java y compris J2SE.