• 30 minutes
  • Facile

Mis à jour le 08/01/2013

Hello World !

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

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

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 ».

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 :

  • MIDlet Name : HelloWorld.

  • MIDlet Class : com.sdz.helloworld.HelloWorld.

  • MIDlet Icon : Si vous avez une image sympa, placez là dans le dossier "img" du répertoire "res" et spécifiez son chemin.

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 .

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.

Exemple de certificat de réussite
Exemple de certificat de réussite