COMBINER LA PUISSANCE DE LWUIT DESIGNER et CELLE DU VISUAL MOBILE DESIGNER DE NETBEANS

LWUIT une API qui permet la création d'Interface grahique très attrayantes pour application mobile. Je n'ai pas l'intention de vous faire un tuto sur LWUIT mais plutôt de vous montrer comment vous pourrez combiner la puissance de LWUIT designer à celle du Visual Mobile designer intégré dans Netbeans. Vous pourrez vous même trouver un tutoriel bien fait sur LWUIT dans le site de SUN, l'article est titré : "The Lightweight User Interface Toolkit (LWUIT): An Introduction".

Vous pourrez vous même trouver un tutoriel bien fait sur LWUIT dans le site de SUN, l'article est titré : "The Lightweight User Interface Toolkit (LWUIT): An Introduction".

POSONS LE DECOR

Comme vous pouvez le voir sur le dessin du dessus, Visual Mobile Designer vous facilite la gestion des flux et des affichages de votre application ainsi que le code des éléments actifs. Tout ceci en générant du code pour vous. Sauf que les graphisme utilisent : import javax.microedition.lcdui.*; ... C'est pas jolie - jolie à voir.

LWUIT quand à lui vous créer une UI nettement plus belle à voir et riche en possibilités ... sauf que ce sera à vous de codé l'application javaME pour utiliser une ressource générée par LWUIT ... c'est bien mais le programmeur c'est toujours un gros parresseux donc... QUE FAIRE POUR UTILISER SES DEUX FONCTIONNALITEES EN MEME TEMPS, ... sachant que le code généré par le visual mobile designer de netbeans n'est pas retouchable dans l'outils lui même ???

COMMENCONS

1) Dans le repertoire "util" de votre décompression LWUIT se trouve "ResourceEdit.exe" Lancer cet outils et créez votre ressource LWUIT. C'est relativement simple, vou pouvez y arriver avec ou sans tutoriel. Ne vous préoccupez pas de l'aspect code de votre application, cet outils de LWUIT ne gère que le design donc concntrez vous sur le DESIGN. Si vous avez beoin d'un tuto malgrés tout alors consultez l'article de SUN mentionné plus haut. Pour notre exemple voici notre ressource nommé: gsk.res

2) Créez votre application javaME en utilisant Visual Mobile Designer de Netbeans

Concevez normalement le code de votre application. dans l'exemple notre application est très simplifiée. Au démarrage nous nous retrouvons devant un formulaire qui possède un menu à 3 item. l'un des item ferme l'application, voilà c'est tout mais suffisant pour voir les retouches qu'il faudra par la suite faire pour intégrer dans cette application notre design conçu avec lwuit designer.

3) Créer une nouvelle classe principale dans le repertoire de votre application et copier tout le code généré par le VMD à l’intérieur de cette nouvelle classe. Corriger les erreurs de nommage sur la nouvelle classe, sur son constructeur et enlevez les implements.

-> Ajoutez la librairie lwuit.jar dans votre projet

4) Notre travail consistera principalement à traquer les erreurs sur le code pour l’unifier avec le design conçu dans lwuit designer.

è Remplacer les importations (pas de lcdui dans les import) voici les import les plus necessaires :

import javax.microedition.midlet.*;

import com.sun.lwuit.Form;

import com.sun.lwuit.Command;

import com.sun.lwuit.events.ActionEvent;

import com.sun.lwuit.Display;

import com.sun.lwuit.plaf.UIManager;

import com.sun.lwuit.util.Resources;

import java.io.IOException;

è Dans la methode startApp() ajouter au debut ce code:

try {

Display.init(this);

Resources r = Resources.open("/gsk.res");

UIManager.getInstance().setThemeProps(r.getTheme("gsk"));

//gsk c’est le nom que vous avez donné au theme dans le fichier .res

} catch (IOException ex) {

ex.printStackTrace();

}

è Supprimer les methodes switchDisplay et getDisplay ou les mettre en commentaire

( /* */ )

è Ajoutez dans le code des methodes «get » le bout de code tel que mentionné en dessous :

public Command getScreenCommand1() {

if (screenCommand1 == null) {

screenCommand1 = new Command("Screen", 0)

{

public void actionPerformed(ActionEvent evt) { // CODE A INSRER }

};

}

return screenCommand1;

}

-> Regarder la methode commandAction() Il ya là les codes d’action pour chaque composant actif dans notre formulaire. Copier ces codes et insérer les dans les methodes actionPerformed() des methodes « get » correspondantes pour chacun des composants actifs du formulaire.

-> Dans la methode startMIDlet() remplacer le code par : getForm().show();

-> Corriger les petites erreurs de syntaxes restantes, s’il y’en a et executer votre application.