Libellés

javaME (9) MIDlet (7) netbeans (7) MIDlets (6) Netbeans IDE et SVG (6) java (5) Push Registry (3) jad (3) SVG (2) Touch Enable (2) Visual mobile designer (2) WAP (2) WAP Push (2) web services - soap - uddi (2) CRUD (1) IMEI (1) JPA (1) JSP (1) Lwuit (1) Persistent (1) PersistentUnit (1) RAD (1) SMS (1) Servlet (1) databinding (1) security (1)
Affichage des articles dont le libellé est Visual mobile designer. Afficher tous les articles
Affichage des articles dont le libellé est Visual mobile designer. Afficher tous les articles

vendredi 5 mars 2010

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.



mercredi 5 août 2009

PIMP YOUR MOBILE SVG USER INTERFACE

PIMP YOUR MOBILE SVG USER INTERFACE

[sorry for english mistake]
About Netbeans and SVG
Netbeans IDE give you a simple way for using SVG API in your mobile application. By using SVG tool include in Netbeans IDE, SVG User Interface look very simple to be implemented. in fact Netbeans have two tools for doing that, SVG Components and SVG Form Components. But the design of these components may not satisfy you if you like high quality design. In this tutorial, I want to show you how you can add your own SVG component in Netbeans palette and use it in your application without any problem.

Make your SVG file out of Netbeans
You can find many SVG editor software on the web. For mobile designing you can use Ikivo animator or Mobile Designer Beatware like you can see in this image.

If you use Mobile Designer Beatware (I think it's the same for Ikivo) the simple thing you have to do is to drag and drop image on the work space and then convert that image to button by right clicking. After that you have to rename the "Button1" by "button_1". you have the possibility to animate your new button like you want. For example one of my button will grow when
the cursor move on.
[according to the software you use try to read the help for achieving this thanks]

Don't forget that when you will export your SVG file, the profile MUST BE SVG Tiny 1.1.
I have also made a simple SVG animation that i will add to Netbeans palette.
You can download the 2 SVG animation of this tutorial here.

-----LINK------

but.svg is the animation file for les button and gspirit.svg is the simple file logo's animation .

Work with Netbeans IDE
Put that two SVG files on your Netbeans mobile application project. Right Click the new SVG file node - copy - right click on the Netbeans palette - click palette manager - select Form components - right click - paste item. Your new item will appear. Now you can use it like all other Components deliver by Netbeans SVG Form Components palette.

Use visual Mobile Designer tool and add SVG Form item on your work space.
Now create new SVG file on your project. name it "formCustom.svg" Drag and drop the new SVG form component item that you have just add to palette.
Drag and drop the but.svg file project node on the Netbeans SVG editor space. Now you must have something like this.

Go to formCustom.svg file source code and everywhere you see
(x is an integer exemple: ) cut "id="button_x" and paste it at the end of tag. you must have this result:
-----------------------------------------------------------------------------------------------------------------------------------

<use x="-73" y="-50" xlink:href="#ipod.png"
transform="translate(-28.37,48.81) scale(0.625,0.65625)" id="button_1">
------------------------------------------------------------------------------------------------------------------------------------
Do it for all the three buttons.
now go to your Visual Mobile Designer file - drag and drop the formCustom.svg file over the SVG form item on your work space. If evrething is good you must see your new button be recognized by Netbeans IDE.

I have already write tutorial in this blog where i explain how to manipulate svg button. try to read this tutorial.
You can Run the project and see how your new SVG UI can be more attractive than UI which only use SVG elements present in Netbeans.

NOTE: You can do the same with the SVG menu component, then you will substitute "button_x" to "menu_x" ... something like this.
Give your comments and suggestions.
Thank for reading.