05 J2ME Interface Utilisateur

J2ME
Interfaces utilisateur
10/11/2006
Formation ITIN / Universit de Cergy-Pontoise
O se trouvent les classes ?
En consultant la javadoc du profile MIDP 2.0 :
On isole facilement deux packages

2 Formation ITIN / Universit de Cergy-Pontoise 10/11/2006
Classes de haut niveau

Idal pour le dveloppement dapplications sur diffrents types dappareils car ces classes ne donnent pas un contrle total sur laffichage. Contrle minimal sur leur look and feel, laiss pour lessentiel lappareil qui fait en fonction de ses capacits.
10/11/2006
Classes de haut niveau
<<abstract>>
Displayable
Screen
Alert
Form
List
TextBox
10/11/2006
Classes de bas niveau
Il y en a trois :
Canvas GameCanvas Graphics
Plus difficilement portable, on obtient un placement prcis lcran

La classe abstraite Displayable

Pour tre affich lcran, un lment doit implmenter les mthodes de la classe Displayable. Chaque displayable possde entre autre un titre, un ticker et des commandes associes. La classe Graphics nutilise pas cette classe, elle possde des fonctions qui manipulent directement lcran de lappareil.
10/11/2006
La classe Display
Permet :
dobtenir des informations sur les proprits daffichage de lappareil. (support de la couleur, niveaux alpha, ) de demander laffichage dobjets lcran ou accder aux objets affichs.
10/11/2006
Un exemple complet
import javax.microedition.lcdui.Alert; import javax.microedition.lcdui.Display; import javax.microedition.midlet.MIDlet; public class HelloWorldApp extends MIDlet { Alert helloAlert; public HelloWorldApp() { helloAlert = new Alert("Hello world !"); } public void startApp() {
Display.getDisplay(this).setCurrent(helloAlert);
} public void pauseApp() { } public void destroyApp(boolean unconditional) { } }
Analyse de lexemple
Alert helloAlert; public HelloWorldApp() { helloAlert = new Alert("Hello world !"); }
Alert est un Displayable.
public void startApp() { Display.getDisplay(this). setCurrent(helloAlert); }
On utilise la mthode statique getDisplay(MIDlet midlet) de la classe Display pour obtenir lobjet Display unique chaque MIDlet
On ne peut afficher quun seul objet Displayable la fois.

Travailler avec les classes de haut niveau
10/11/2006
Screen
Base pour tous les crans de haut niveau Proprits communes pour tous ces crans :
ticker titre
11
10/11/2006
Alertes
Messages lintention de lutilisateur Les alertes sont soit
Limites en temps (affich pendant un certains laps de temps fix en ms) Modales (Visibles tant quune action utilisateur na pas t ralise)
On peut lui associer un son, une image ou un indicateur de progression Leur affichage exact dpend de limplmentation choisie par le constructeur
12
10/11/2006
Alertes
Quelques mthodes utiles
Pour une alerte modale Utiliser Alert.FOREVER
13
10/11/2006
Listes
Slection dlments (textes et/ou images) dans une liste de choix Les listes sont soit
MULTIPLE EXCLUSIVE IMPLICIT slection multiple slection simple slection simple et confirmation
14
10/11/2006
Listes implicites
Peut servir de menu
combine slection et confirmation la slection dun lment lance un vnement Lobjet Command vaut la constante SELECT_COMMAND
15
10/11/2006
Listes, extrait de javadoc

Constructeurs
Quelques mthodes
La numrotation des index commence 0
16
10/11/2006
Listes, exemple dutilisation
String[] elements = { ... }; // Elments du menu List menuList = new List("Menu", List.IMPLICIT, elements, null);
Command selectCommand = new Command("Open", Command.ITEM, 1); menuList.setSelectCommand(selectCommand); menuList.setCommandListener(...); public void commandAction(Command c, Displayable d) { if (c == uneCommande) { } else if (c == List.SELECT_COMMAND) { } }
17
10/11/2006
Formulaires
Peuvent contenir tous les lments qui hritent de la classe Item. Disposition en ranges de tailles gales. Scrollbars gres automatiquement.
18
10/11/2006
Formulaires TextField Texte saisissable avec contraintes Deux parties :

Le label Le texte
19
10/11/2006
Formulaires StringItem Affichage de textes Deux parties :

Le label Le texte
Item.PLAIN
Item.HYPERLINK Item.BUTTON
20
10/11/2006
Formulaires ImageItem Affichage dimages
21
10/11/2006
Formulaires ChoiceGroup Slections :
22
10/11/2006
Formulaires DateField Demande de saisie dune heure ou dune date
23
10/11/2006
Formulaires Gauge Les diffrents types dindicateurs :
24
10/11/2006
Formulaires Spacer lment :

vide non interactif qui possde une taille minimum
Utilis pour positionner plus justement les autres lments (quivalant au pixel transparent sur les anciennes pages web)
25
10/11/2006
TextBox
Screen qui permet dentrer et dditer du texte
26
10/11/2006
Travailler avec les classes de bas niveau
10/11/2006
La classe Canvas
Elle est abstraite, il faut ltendre pour raliser un affichage. Il faut ensuite surcharger la mthode paint(Graphics g) La classe Graphics fournit des possibilits de rendu 2D Possibilit de grer les appuis sur les touches ou dutiliser des commandes.
28
10/11/2006
Exemple
class ExempleCanvas extends Canvas { // Il faut redefinir la mthode paint public void paint(Graphics g) { // Dessine un rectangle blanc pour fond g.setColor(0xFFFFFF); g.fillRect(0, 0, getWidth(), getHeight()); // Fixe la couleur noir g.setColor(0x000000); // Dessine un carr de 20x20 g.drawRect( getWidth()/2 - 10, getHeight()/2 - 10, 20, 20); } }
29
10/11/2006
Interaction utilisateur
10/11/2006
Un objet Command est lquivalent dun bouton ou dun menu item dans une application standard. Lobjet Command ne peut tre associ quaux objets qui hritent de Displayable.
31
10/11/2006
La classe Command
Une commande est dfinie par :

Ses labels, affichs par le tlphone selon lespace disponible Le type de commande BACK, CANCEL, OK Priorit daffichage (Mise en avant par le tlphone)
32
10/11/2006
Les classes qui implmentent linterface CommandListener ralisent des actions dclenches par lactivation dun objet Command Cette interface contient une mthode :
commandAction(Command c, Diplayable d)
Ce listener est enregistr grce la mthode de la classe Displayable

setCommandListener(CommandListener cl)
33
10/11/2006
// Cration de quelques commandes form.addCommand( new Command("EXIT", Command.EXIT, 2)); form.addCommand( new Command("OK", Command.OK, 1)); // Fixe cette classe comme listener form.setCommandListener(this); // Code excut en cas daction utilisateur public void commandAction( Command command, Displayable dis) { String label = command.getLabel(); if ("EXIT".equals(label)) notifyDestroyed(); else if ("HELP".equals(label)) displayHelp(); else if("OK".equals(label)) processForm(); }
34
10/11/2006
Objets dinteraction utilisateur personnaliss
10/11/2006
La classe CustomItem
Pour crer un lment dinteraction personnalis :
Sous-classer CustomItem Implmenter les 5 mthodes
protected int getPrefContentWidth(int height) protected int getPrefContentHeight(int width) protected int getMinContentWidth() protected int getMinContentHeight() protected void paint(Graphics g, int w, int h)
36
10/11/2006
Exemple
37
10/11/2006
Exemple (suite)
Code qui utilise le CustomItem
38
10/11/2006
Objets dinteraction personnaliss

Possibilit de se fondre dans lUI en rcuprant les couleurs courantes (Fond, bords) et la fonte utilise.
39
10/11/2006
Outils de conception
10/11/2006
Netbeans et la cration dinterfaces Netbeans propose des assistants de cration dinterfaces utilisateur. Pour cela, il suffit de crer une Visual Midlet
41
10/11/2006
Outils de conception
Proprits des composants Palette doutils
Squence dcrans
Exemple
43
10/11/2006
J2ME Polish
10/11/2006
J2ME Polish
j2ME Polish : http://www.j2mepolish.org/
45
10/11/2006

05 J2ME Interface Utilisateur

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

05 J2ME Interface Utilisateur

Transféré par

Droits d'auteur :

Formats disponibles

J2ME

Formation ITIN / Universit de Cergy-Pontoise

O se trouvent les classes ?

En consultant la javadoc du profile MIDP 2.0 :

On isole facilement deux packages

Classes de haut niveau

Formation ITIN / Universit de Cergy-Pontoise

Classes de haut niveau

Formation ITIN / Universit de Cergy-Pontoise

Classes de bas niveau

Plus difficilement portable, on obtient un placement prcis lcran

La classe abstraite Displayable

Formation ITIN / Universit de Cergy-Pontoise

Formation ITIN / Universit de Cergy-Pontoise

Alert helloAlert; public HelloWorldApp() { helloAlert = new Alert("Hello world !"); }

Alert est un Displayable.

public void startApp() { Display.getDisplay(this). setCurrent(helloAlert); }

On ne peut afficher quun seul objet Displayable la fois.

Travailler avec les classes de haut niveau

Formation ITIN / Universit de Cergy-Pontoise

Formation ITIN / Universit de Cergy-Pontoise

Formation ITIN / Universit de Cergy-Pontoise

Quelques mthodes utiles

Pour une alerte modale Utiliser Alert.FOREVER

Formation ITIN / Universit de Cergy-Pontoise

Formation ITIN / Universit de Cergy-Pontoise

Formation ITIN / Universit de Cergy-Pontoise

Listes, extrait de javadoc

La numrotation des index commence 0

Formation ITIN / Universit de Cergy-Pontoise

Listes, exemple dutilisation

Formation ITIN / Universit de Cergy-Pontoise

Formation ITIN / Universit de Cergy-Pontoise

Formulaires TextField Texte saisissable avec contraintes Deux parties :

Formation ITIN / Universit de Cergy-Pontoise

Formulaires StringItem Affichage de textes Deux parties :

Formation ITIN / Universit de Cergy-Pontoise

Formulaires ImageItem Affichage dimages

Formation ITIN / Universit de Cergy-Pontoise

Formulaires ChoiceGroup Slections :

Formation ITIN / Universit de Cergy-Pontoise

Formulaires DateField Demande de saisie dune heure ou dune date

Formation ITIN / Universit de Cergy-Pontoise

Formulaires Gauge Les diffrents types dindicateurs :

Formation ITIN / Universit de Cergy-Pontoise

Formulaires Spacer lment :

Formation ITIN / Universit de Cergy-Pontoise

Formation ITIN / Universit de Cergy-Pontoise

Travailler avec les classes de bas niveau

Formation ITIN / Universit de Cergy-Pontoise

Formation ITIN / Universit de Cergy-Pontoise

Formation ITIN / Universit de Cergy-Pontoise

Formation ITIN / Universit de Cergy-Pontoise

Formation ITIN / Universit de Cergy-Pontoise

Une commande est dfinie par :

Formation ITIN / Universit de Cergy-Pontoise

Ce listener est enregistr grce la mthode de la classe Displayable

Formation ITIN / Universit de Cergy-Pontoise

Formation ITIN / Universit de Cergy-Pontoise

Objets dinteraction utilisateur personnaliss

Formation ITIN / Universit de Cergy-Pontoise

Formation ITIN / Universit de Cergy-Pontoise

Formation ITIN / Universit de Cergy-Pontoise

Code qui utilise le CustomItem