SVG et Netbeans
L'objectif
- Programmer une calculatrice très miniaturisée ne comportant que l'opération + et utilisant une interface en svg
- Utilisation de l’outil SVG de netbeans 6.7 pour faire des opérations sur les boutons
Pre requis
- Netbeans 6.7
- le JDK version 5 ou 6
Création du projet
L'IDE utiliser reste Netbeans 6.7. Cette version de netbeans prend bien en charge la gestion des interfaces conçues en SVG. La procédure est la suivante:
1- File > new projet > MIDP > VisualMIDlet
2- nommer ce projet : "calcoSvgMIDlet"
3- Clic droit sur le pack du projet > new file > other > svg
4- Appeler ce fichier formSvg
Design du MIDlet
Le travaille à faire est des plus simple, la seule chose que vous avez à faire c'est d'utiliser la palette de netbeans et de déposer les composants comme vous le voyez sur cette 
1- pointer et glisser le button SVG sur l'espace de travail
2- répétez l'opération sans tenir compte du contenu textuelle de du bouton (ce contenue c'est "OK" ignorez le)
3- Pointer glisser le Text Field, ignorez de même son contenu
Le code
Nous allons préparer les différentes fonctions que nous seront appelés à utiliser pour faire marcher notre calculatrice. Cette dernière n'a que 5 boutons (1, 2, 3, + et =). Vous pouvez ajouter des boutons si vous le voulez, l'objectif étant juste de vous faire comprendre le principe.
Nous aurons besoin de 3 fonctions 1- la 1ere nous l'appelons Calco_screen(), son rôle est d'afficher les valeur saisie
2- la 2eme nous l'appelons Calco_do(), son rôle est d'effectuer le calcul au fur et à mesure que l'on évolue
3- la 3eme nous l'appelons Calco_aff(), son rôle est d'afficher la réponse finale et de remettre les pendules à zéro
Vous pouvez utiliser vos propres codes, pour cette partie mais vous devrez les utiliser en suivant la même méthodologie que celle utilisé dans ce tuto.
Voici le code en entier, Copier le et coller dans le calcoSvgMIDlet.java (aller à source du visual designer)
private int calc=0;
private boolean redoo=false;
public calcoSvgMIDlet() {
}
public void Calcul_screen(String a)
{
if (redoo) {
String r = null;
svgTextField.setText(r);}
String scrn = new String();
scrn = String.valueOf(a);
scrn = svgTextField.getText()+scrn;
svgTextField.setText(scrn);
redoo=false;
}
public void Calcul_do()
{
String st = svgTextField.getText();
int a = Integer.valueOf(st).intValue();
calc = calc + a; redoo=true;
}
public void Calcul_aff()
{
String st = svgTextField.getText();
int a = Integer.valueOf(st).intValue();
calc = calc + a;
String aff = new String();
aff = String.valueOf(calc);
svgTextField.setText(aff);
calc = 0;
redoo=true;
}
FLux du MIDlet
Nous allons maintenant utiliser Notre fichier SVG et nos fonctions. Commençons par notre SVG.1- Sur le visual design, aller sur Flow > sur la palette > pointer glisser Svg Form
2- Pointer sur votre fichier formSvg.svg sur l'explorateur de projet à gauche et glissez le jusqu'au svgForm du visual design. Vous devriez voir apparaître des boutons sur le svgForm.
3- Sur le visual design, aller sur Screen > dérouler à svgForm > cliquer sur chacun de vos boutons et sur l'explorateur de propriétés à gauche cliquez et éditez le texte.
4- Cliquez sur le composant textField et décocher les propriétés "editable" et "focusable" mettez également le texte à vide
5- Aller à Flow > palette > pointer glisser Call Point (5 fois). Il représente les différentes opérations à effectuer
6- Cliquez sur chaque Call point > propriétés >
pour les boutons 1,2 et 3 vous tapez respectivement : Calcul_screen("1"); / Calcul_screen("2"); / Calcul_screen("3");.
Pour le bouton "=" tapez Calcul_aff(); et pour le bouton "+" tapez Calcul_do();
7- Enfin éditer les flux en pointant sur les boutons du svg form et diriger les flèches jusqu'aux call points correspondant.
8- Enregistrer le projet et cliquer sur Run.
Maintenant je suis sûr que vous comprenez l'utilisation du svg dans netbeans 6.7.
Articles
