Version en ligne

Tutoriel : Développez des applications mobiles Java ME avec Kuix

Table des matières

Développez des applications mobiles Java ME avec Kuix
Découverte de Kuix
Kuix...késako ?
Les outils nécessaires
Hello World !
Kuix MIDlet
Afficher un texte à l'écran avec XML
Donner du style à notre texte
Les Widgets de bases
Les conteneurs
Les boutons
Les formulaires

Développez des applications mobiles Java ME avec Kuix

Bienvenue dans mon premier tutoriel sur les applications mobiles.
Vous souhaitez intégrer des applications pour mobiles sur votre téléphone ? En utilisant la plateforme Java ME ? Ce tutoriel est fait pour vous ! On apprendra à créer des interfaces graphiques très simples à l'aide de l'API Kuix.

Pour bien suivre ce tutoriel vous devrez avoir des compétences en :

Voici quelques applications que j'ai réalisé autre fois avec cette API :
Image utilisateurImage utilisateurImage utilisateurImage utilisateur
Appel d'un serveur Java EE distant avec l'API KSoap2

Appel d'un serveur .NET distant avec l'API KSoap2

Utilisation de l'API Midmaps pour les captures d'images Google map.

La qualité de votre interface graphique dépendra de vos compétences en infographie et en CSS, vous pourrez très bien refaire l'IHM de l'iPhone ou l'iPad si vous le souhaitez :D .

Le tutoriel est-il limité à Kuix ?

Kuix sera utilisé uniquement pour l'aspect graphique et quelques autres fonctionnalités, donc rien ne nous empêchera plus tard d'utiliser des spécifications de Java ME dans nos applications telles que : La JSR 172 (WebService), JSR 82 (Bluetooth), JSR 135 (Mobile Media ou MMAPI), etc.

Découverte de Kuix

Kuix...késako ?

Nous allons dans ce chapitre découvrir le projet Kuix, ses points forts, son approche, références, et terminer avec les outils nécessaires pour le développement mobile avec cette API.

Kuix...késako ?

Découverte de Kuix Les outils nécessaires

Kuix...késako ?

Kuix (pour Kalmeo User Interface eXtenstions for J2ME) est un framework Open Source distribué sous License GPL (General Public License) qui est un projet de l'entreprise Kalmeo. L'activité de cette société a débuté suite à la réussite des produits d'Ankama Games qui lui ont permis de s'ouvrir vers d'autres marchés du développement Java sur mobile.
L'API Kuix qu'elle propose nous permet de réaliser des interfaces graphiques de très haut niveau et possède de nombreuses classes graphiques (boutons, formulaires, cases à cocher, menus, listes, etc.).

Points forts de Kuix
Références

On retrouve plusieurs références de cette API, on peut voir sur ce lien : References les différentes applications réalisées avec ce framework.

Design
Caractéristiques

Les interfaces graphiques de l’utilisateur (GUI) :

Approche XML/CSS

Une interface graphique en XML/CSS est écrite en XML et personnalisée à l’aide des feuilles de style CSS. Il suffit de charger le fichier XML et CSS à partir de méthodes Java.

Approche Java

Tout ce qui est faisable en XML/CSS peut se refaire en langage Java, mais le code sera moins lisible et moins souple.


Découverte de Kuix Les outils nécessaires

Les outils nécessaires

Kuix...késako ? Hello World !

Les outils nécessaires

On aura besoin de trois éléments essentiels : Un IDE, un émulateur et l'API Kuix.

Wireless ToolKit

Wireless ToolKit est une application pour la configuration CLDC conçue par Sun MicroSystems. Pour télécharger l'application, rendez-vous à cette adresse.

Image utilisateur

Choisissez la plate-forme désirée, windows ou linux, et cliquez sur continuer :

Image utilisateur

On atterrit alors ici :

Image utilisateur

Téléchargez l'application et installez-la, comme toute application banale que vous avez déjà installée.

Une fois ceci terminé, lancez l'application Wireless Toolkit 2.5.2 :

Image utilisateur

Une fois l'application lancée, allez dans Open Project et choisissez la démonstration que vous souhaitez, cliquez ensuite sur Open Project :

Image utilisateur

Cliquez sur Build puis sur Run, quelque chose de ce genre devrait apparaitre dans la console, selon ce que vous avez choisi auparavant :

Project "HelloWorld" loaded
Project settings saved
Building "HelloWorld"
Build complete
Running with storage root DefaultColorPhone

Une fenêtre s'ouvre également ! o_O Les plus malins d'entre vous l'auront sans doute deviné, un téléphone mobile apparait devant vos yeux ébahis... :magicien: Avec plein de bonnes choses !

Image utilisateur

Si le téléphone s'affiche, c'est que votre emulateur fonctionne correctement.

Passons à la prochaine application. :p

L'IDE NetBeans 6.7

Pour télécharger l’application NetBeans 6.7, rendez-vous à l’adresse suivante : Lien de téléchargement.

On choisit la version 6.7.1 ou 6.7 et le type de build, et on passe à la prochaine étape :

Image utilisateur

On choisit le pack Java, et on clique sur télécharger.

Image utilisateur

Remarque : La version 6.9 beta, et la version finale de 6.8 sont également disponibles, mais nous avons préféré développer avec NetBeans 6.7 car il est, des IDE NetBeans, le plus stable.
Une fois téléchargé, nous l’installons comme tout logiciel. Ceci fait, on le lance.

Intégration de l'emulateur dans NetBeans.

On peut ajouter n'importe quelle plate-forme à notre IDE NetBeans, en allant à « Tool > Java Plateforms »

Image utilisateur

On clique sur « Add-Platform » et on choisit « Java ME MIDP Platform Emulator »

Image utilisateur

NetBeans va rechercher les plateformes disponibles sur votre machine. Si on a bien installé WTK, il devrait apparaitre comme suit :

Image utilisateur

On clique sur « Next » et on laisse NetBeans installer la plate-forme, puis on redémarre notre IDE.

Création d’un nouveau projet MIDP

Pour créer un projet mobile :
Il nous suffit d’aller à « File > New Project > Java ME > Mobile Application » :

Image utilisateur

On spécifie un nom et un répertoire de sauvegarde, puis on choisit : La plate-forme qu’on a installée, la configuration et le profil. Et on termine la création :

Image utilisateur

Notre projet a été créé.

L'API Kuix

Pour pouvoir télécharger l’API, on doit se rendre à la page de téléchargement du site officiel.

On choisit la dernière version, et on accepte les conditions de licences :

Image utilisateur

On dézippe le fichier et on copie/colle les deux archives (kuix.jar et kutil.jar) dans le répertoire de notre nouveau projet mobile. Chez moi c’est :

C:\Users\Nom_utilisateur\Documents\NetBeansProjects\monNouveauProjet

Dans NetBeans, on fait un clic droit sur le projet mobile et on va dans « Properties ». On se rend dans la branche « Build > Librairies & Ressources » afin d’intégrer nos deux archives au Classpath du projet mobile.

Image utilisateur

Parmi les quatre boutons affichés, on commence par cliquer sur « Add Jar/Zip » et on ajoute les deux archives. Ensuite on clique sur « Add Folder » afin de créer un dossier de ressources qui servira de sauvegarde des images, des fichiers XML, des feuilles de styles ainsi que les fichiers d’internationalisation et on le nomme « res » (pour ressource) :

Image utilisateur

Dans ce dossier on y crée quatre répertoires :

Ceci fait, Kuix est installé et prêt à l’emploi :magicien: .

Kuix étant définie, les outils étant connus, on peut débuter le développement :) .


Kuix...késako ? Hello World !

Hello World !

Les outils nécessaires Kuix MIDlet

Nous allons apprendre dans ce chapitre à afficher un texte à l'écran et à le personnaliser, vous allez voir c'est simple et rapide :) .

Kuix MIDlet

Hello World ! Afficher un texte à l'écran avec XML

Kuix MIDlet

KUIX reprend la méthode de base de Java ME pour le lancement d’une application, c'est-à-dire que l’utilisation de MIDlet est toujours d’actualité. Cependant, KUIX propose sa propre MIDlet appelée KuixMIDlet hérité de MIDlet. En effet, la classe principale doit impérativement étendre cette classe. Commencez par créer un package (« New > Java > Java Package ») que vous appellerez « com.sdz.helloworld » et y créer une simple class Java (« New > Java > Java Class ») :

import org.kalmeo.kuix.core.KuixMIDlet;

public class HelloWorld extends KuixMIDlet {}

Lorsqu’on initialise une application Kuix on doit charger nos fichiers XML et CSS. On doit respectivement utiliser les méthodes initDesktopContent() et initDesktopStyles() qui doivent être présentes dans chaque classe étendant la classe KuixMIDlet. Les méthodes loadScreen() et loadCSS() de la classe Kuix nous permettent respectivement de charger un fichier XML et CSS :

import org.kalmeo.kuix.core.KuixMIDlet;
import org.kalmeo.kuix.widget.Screen;
import org.kalmeo.kuix.core.Kuix;
import org.kalmeo.kuix.widget.Desktop;

public class HelloWorld extends KuixMIDlet{

    public void initDesktopStyles() {
		Kuix.loadCss("style.css");
    }

    public void initDesktopContent(Desktop desktop) {
        Screen screen = Kuix.loadScreen("helloworld.xml", null);
        screen.setCurrent();
               
    }

}

Créez un nouveau fichier XML « helloworld.xml » dans le répertoire « xml » du dossier « res », en allant à « New > XML > XML Document ». Suivez la même procédure pour le fichier css « style.css », qu'on placera dans le répertoire « css », en allant à « New > Other > Cascading Style Sheet ».


Hello World ! Afficher un texte à l'écran avec XML

Afficher un texte à l'écran avec XML

Kuix MIDlet Donner du style à notre texte

Afficher un texte à l'écran avec XML

Notre projet étant créé et notre classe mère étant disponible, on peut s'occuper de la partie XML. L'API Kuix nous offre un large panel de Widget dont on peut d'ores et déjà prendre connaissance en visitant ce lien : Widget Reference.

Notre but étant dans ce chapitre, d'afficher Hello World à l'écran, nous ne détaillerons pas ces Widget pour le moment.
Tout fichier XML doit être contenu dans une racine ou root, dans notre cas, c'est les balises <screen></screen> qui doivent être contenues notre fichier XML :

<screen>

</screen>

Ces balises représentent l'écran actuel de votre téléphone. Elles peuvent avoir plusieurs attributs comme "title" qui donne un titre à notre écran :

<screen title="Hello World">

</screen>

Comme tout fichier XML, entre deux balises on peut y placer du texte :

<screen title="Hello World">
  Hello World !
</screen>

Ou des balises :

<screen title="Hello World">
  <text>Hello World !</text>
</screen>

Les deux exemples précédents affichent tous les deux « Hello World ! », la différence entre les deux est que le premier ne pourra pas être personnalisable avec le CSS, tendis que le second oui. Exécutez l'application en cliquant sur le bouton Run !

ca veut pas se lancer :'(

L'emulateur ne sait pas quelle MIDlet lancer. Pour le lui indiquer, on fait un clic droit sur notre projet > Properties > Application Descriptor > MIDlets > Add. Dans la fenêtre on spécifie un nom et la classe de la MIDlet :

Vous remarquerez aussi que l'icône de la classe HelloWorld a changé en se plaçant à l'état "Run".
On relance l'application et le résultat est...

Image utilisateur

... Tellement simple :-° . Allez voyons comment rendre beau ce texte avec du CSS :p .


Kuix MIDlet Donner du style à notre texte

Donner du style à notre texte

Afficher un texte à l'écran avec XML Les Widgets de bases

Donner du style à notre texte

Nous avons vu ensemble comment afficher un texte à l'écran. Cependant, comme pour nos pages Web, nos données doivent être personnalisée pour avoir l'air plus belles. C'est pour cette raison que les feuilles de styles CSS existent. Kuix a créé ses propres feuilles de styles CSS à l'aide de quelques classes Java ME. Voyons à présent comment exploiter leur travail :D .

On rappelle que le document XML précédent est le suivant :

<screen title="Hello World">
  <text>Hello World !</text>
</screen>

Appliquons-lui quelques modifications avec le CSS :

screen{
        bg-color: #FF6000;
}

screentopbar {
	bg-color: #FF800;	
}

screentopbar text {
        layout-data: sld(left, 1, -1);
	font-style: bold;
	color: white;
	align: center;
}

text{
        color: blue;
}

Le résultat est :

Image utilisateur

Comme pour les balises HTML, on peut appliquer du style directement dans notre document XML.

<screen title="Hello World">
  <text style="align:center">Hello World !</text>
</screen>

Le résultat est le même sauf que notre texte est ici centré :

Image utilisateur

Voilà, c'est terminé, nous avons affiché un texte à l'écran à l'aide d'un document XML et l'avons personnalisé grâce aux feuilles de styles :D .

Avec l’utilisation de document XML et les feuilles de styles CSS, le développement mobile avec KUIX devient relativement rapide et moins difficile que cela n’était avec les paquetages prédéfinies de Java ME comme javax.microedition.lcdui où il fallait coder énormément pour aboutir à une interface bien développée.


Afficher un texte à l'écran avec XML Les Widgets de bases

Les Widgets de bases

Donner du style à notre texte Les conteneurs

Kuix nous propose tout un étendard de composants graphiques qui peuvent être très utiles pour le développement d'interfaces graphiques très riches. Voyons les plus utilisées.

Les conteneurs

Les Widgets de bases Les boutons

Les conteneurs

Comme dans tout langage de balisage (HTML, XAML, MXML, etc.) on doit encapsuler nos composants dans des conteneurs afin de bien les positionner dans notre page ou notre écran. Kuix nous propose diverses façons d'aligner nos composants dans son screen. On en dénombre au total 6 layouts pour nos conteneurs :

Nous allons voir les quatre premiers. Pour en savoir plus sur les autres types de dispositions, consultez la documentation officielle.

borderLayout

Créez un nouveau document borderLayout.xml que vous placerez dans un répertoire Layout_exemple. Ceci fait, voici un exemple tout simple :

<screen title="Border Layout">
    <container style="layout:borderlayout">
        <text class="nord" style="layout-data:bld(north); align:center">Nord</text>
	<text class="sud" style="layout-data:bld(south); align:center">Sud</text>
	<text class="ouest" style="layout-data:bld(west); align:center">Ouest</text>
	<text class="est" style="layout-data:bld(east); align:center">Est</text>
    </container>
</screen>
.nord {
	bg-color: #FF0000;
}

.sud {
	bg-color: #00FF00;
}

.ouest {
	bg-color: #0000FF;
}

.est {
	bg-color: #FFFF00;
}
Image utilisateur

La propriété layout:borderlayout indique le type de disposition que va prendre le conteneur, layout-data va positionner nos composants correctement dans notre écran.

gridLayout

Cette disposition est certainement celle que vous utiliserez le plus, en particulier pour vos formulaires, elle représente une matrice n X m. Voici un exemple d'utilisation :

<container style="layout:gridlayout(3,3); gap:5 5">
        <text class="un_un" style="align:top-left;">(1, 1)</text>
	<text class="deux_un" style="align:top">(2, 1)</text>
	<text class="trois_un" style="align:top-right">(3, 1)</text>
	<text class="un_deux" style="align:left">(1, 2)</text>
	<text class="deux_deux" style="align:center">(2, 2)</text>
	<text class="trois_deux" style="align:right">(3, 2)</text>
	<text class="un_trois" style="align:bottom-left">(1, 3)</text>
	<text class="deux_trois" style="align:bottom;color:white">(2, 3)</text>
	<text style="align:bottom-right">(3, 3)</text>
 </container>

Et pour le CSS :

.un_un {
	bg-color: #FF0000;
}

.deux_un {
	bg-color: #00FF00;
}

.trois_un {
	bg-color: #0000FF;
}

.un_deux {
	bg-color: #FFFF00;
}

.deux_deux {
	bg-color: #00FFFF;
}

.trois_deux {
	bg-color: #FF00FF;
}

.un_trois {
	bg-color: #FFFFFF;
}

.deux_trois {
	bg-color: #000000;
}
Image utilisateur

Rien de nouveau, mise à part la propriété CSS "gap" qui nous permet de créer des séparations entre les lignes et les colonnes.

flowLayout

Cette disposition permet d'aligner nos composants sur une seule ligne, si la ligne est dépassée on passe à la prochaine. Voici un simple exemple d'utilisation :

<screen title="Flow Layout">
    <container style="align:top-left;layout:flowlayout(top)">
		<container class="pos1">
			<picture>290643.png</picture>
		</container>
		<text class="pos2">POS2</text>
		<container class="pos3">
			<picture>bouton_on.png</picture>
		</container>
                <container class="pos4">
			<picture>logo_sdz_fr.png</picture>
		</container>
	
    </container>
</screen>

.pos1 {
	bg-color: #FF00FF;
}

.pos2 {
	bg-color: #00FF00;
}

.pos3 {
	bg-color: #000000;
}
Image utilisateur
inLineLayout

Cette disposition aligne tous nos composants présents dans le composant ayant ce style dans des lignes, très utile pour les formulaires. Exemple :

<screen title="Inline Layout">
    <container style="align:fill-center; layout:inlinelayout(false,fill);gap:0 5;">

        <container>
            <text>Ligne 1</text>
        </container>

        <container>
            <text>Ligne 2</text>
        </container>
        
    </container>
</screen>
Image utilisateur

Ces quatre types de dispositions seront certainement ceux que vous utiliserez le plus souvent dans vos applications avec Kuix. Voyons maintenant ce qu'on devrait mettre d'utile dans ces conteneurs ;) .


Les Widgets de bases Les boutons

Les boutons

Les conteneurs Les formulaires

Les boutons

Les boutons sont des éléments importants dans une application mobile. On les utilise régulièrement pour faire des menus, des formulaires, etc.

Les boutons

Commencez par créer un nouveau document XML que vous appellerez button.xml que vous placerez dans un répertoire du nom de "component_exemple". Nous allons commencer par créer un simple bouton à l'aide des balises <button> :

<screen title="Exemple de boutons">
  <button class="monBouton">Je suis un bouton</button>
</screen>

Si vous exécutez l'application, vous remarquerez que le bouton prend tout l'écran. Pour éviter cela on utilise un conteneur. Les balises <container> sont utilisés à cet effet :

<container> 
  <button class="monBouton">Je suis un bouton</button>
</container>
.monBouton{
        bg-color: #dddddd;
}
Image utilisateur

Bizarre comme bouton o_O , donnons-lui un peu plus de style en lui intégrant une image comme arrière-plan :

Image utilisateur
<container class="conteneur">
    <button class="monBouton">Je suis un bouton</button>
</container>
.monBouton{
        padding: -3 -10 -9 -10;
	bg-color: #434546;
	border: 8 15 14 15;
	border-image: url(bg.png) 8 15 14 15;
}

.conteneur {
	border: 0 0 1 0;
	margin: 10;
	padding: 0 0 2 0;
}

Résultat :

Image utilisateur

Si vous souhaitez personnaliser votre bouton autrement je vous redirige vers cet excellent tutoriel officiel : Create a custom border.

Attributs principals du Widget

Voyons les attributs essentiels de ce bouton :

N'hésitez pas à consulter la Documentation sur les Widget pour plus de détails.

Les cases à cocher et boutons radio
Checkbox

On peut créer des cases à cocher à l'aide des balises <checkbox>, voici un exemple d'utilisation :

Image utilisateur
<container class="conteneur">
     <checkbox class="macaseAcocher">Je suis une case à cocher</checkbox>
</container>
.checkBox {
	bg-image: url(case_a_cocher.png,0,0,11,11);
	bg-align: left;
	bg-repeat: 1 1;
	padding: 0 3 0 16;
	align: left;
}

.checkBox:hover {
	bg-image: url(case_a_cocher.png,11,0,11,11);
}

.checkBox:selected {
	bg-image: url(case_a_cocher.png,11,0,11,11);
}

.checkBox:hover:selected {
	bg-image: url(case_a_cocher.png,11,0,11,11);
}

Résultat :

Image utilisateur
radiobutton

Les boutons radio doivent être contenus dans des balises radioGroup :

Image utilisateur
<container class="conteneur">
       <radioGroup>
             <radiobutton class="boutonRadio" value="1">Radio N°1</radiobutton>
             <radiobutton class="boutonRadio" value="2">Radio N°2</radiobutton>
       </radioGroup>
</container>

Le css est le même sauf que l'on change d'image.
Résultat :

Image utilisateur

Supposons que l'on ait 36 boutons radios, ce ne serait pas un peu... long à afficher ? :euh:

Pour cela, il existe un Widget qui va encapsuler tous les boutons radios et les placer dans un autre screen, après avoir cliqué sur un menu déroulant (tout comme <select> en HTML) :

Image utilisateur
Image utilisateur
Image utilisateur
<container class="conteneur">
     <choice title="Boutons radio avancés">
       <choiceRadiogroup>
             <radiobutton class="boutonRadio" value="1">Radio N°1</radiobutton>
             <radiobutton class="boutonRadio" value="2">Radio N°2</radiobutton>
       </choiceRadiogroup>
     </choice>
</container>
choice {
	bg-image: url(fleche.png);
	bg-repeat: 1 1;
	bg-align: right;
}

choice {
	border: 3;
	border-image: url(normal.png) 3 3 3 3;
	bg-color: #ffffff;
	color: black;
}

choice:hover {
	border-image: url(hover.png) 3 3 3 3;
	bg-color: #7fc7fb;
}

Résultat :

Image utilisateur
Image utilisateur

On a étudié tous les boutons essentiels de l'API (mise à part la gauge que nous verrons après) qui nous permettront de faire pas mal de choses plus tard dans le tutoriel.


Les conteneurs Les formulaires

Les formulaires

Les boutons

Les formulaires

Tout le monde sait ce qu'est un formulaire ? Cela représente plusieurs champs de textes et éventuellement quelques boutons. Pour créer un champ de texte en HTML on ferait cela :

<input type="text" name="texte" value="une valeur" title="Entrez un texte"/>

Sachez qu'avec Kuix c'est pareil, ou presque :

<textfield id="texte" text="ma valeur" tooltip="Entrez un texte" />

Ajoutons du CSS pour voir ce que ça donne sur notre écran :

<screen title="Champs de texte" style="align:fill-center; layout:inlinelayout(false,fill);gap:0 5;">
    <container style="layout:gridlayout(2,4); " class="conteneur">

            <text>Nom</text> 
            <textfield id="nom" tooltip="Entrez votre nom" />

            <text>Prénom</text> 
            <textfield id="nom" tooltip="Entrez votre prénom" />

    </container>
</screen>

textfield {
	border: 3;
	border-image: url(normal.png) 3 3 3 3;
	bg-color: #ffffff;
	color: black;
}

textfield:hover {
	border-image: url(hover.png) 3 3 3 3;
	bg-color: #7fc7fb;
}

text.tooltip {
	bg-color: #e95711;
	color: white;
	padding: 0 2 0 2;
	font-size: small;
}
Image utilisateur

Notre formulaire a été créé, il ne nous manque plus qu'à ajouter un bouton.

<screen title="Mon premier formulaire" style="align:fill-center; layout:inlinelayout(false,fill);gap:0 5;">
    <container style="layout:gridlayout(2,4); " class="conteneur">

            <text>Nom</text> 
            <textfield id="nom" tooltip="Entrez votre nom" />

            <text>Prénom</text> 
            <textfield id="nom" tooltip="Entrez votre prénom" />

    </container>
    <container style="layout:gridlayout(1,1); gap:5 5;" class="conteneur">
            <button class="monBouton">Valider</button>
    </container>
</screen>

<code type="css">
.monBouton{
        padding: -3 -10 -9 -10;
	bg-color: #434546;
	border: 8 15 14 15;
	border-image: url(bg.png) 8 15 14 15;
}

.conteneur {
	border: 0 0 1 0;
	margin: 0 10 3 10;
	padding: 0 0 2 0;
}
Image utilisateur

Voilà, rien de plus compliqué ^^ . C'est peut-être le tutoriel le plus facile du site du zéro :p .

C'est tellement simple qu'un QCM ne voudrait vraiment pas la peine d'être posé :-° .

Pour l'instant ça à l'air simple... Nous verrons plus tard l'interaction de nos Widgets avec Java à l'aide des DataProvider ( :diable: ) .

Remerciements :


Les boutons