CodeName One GUI

Ce support de cours présente les bases de la création d’interfaces graphiques mobiles avec CodeName One, un framework permettant de développer des applications multi-plateformes. Il s’adresse aux étudiants et développeurs souhaitant maîtriser l’utilisation du GUI Builder, des conteneurs, des layouts et des composants visuels dans CodeName One.

Introduction à CodeName One Designer

Le « CodeName One Designer » est un outil qui facilite la création d’applications mobiles grâce à une interface de type drag-and-drop. Il permet aux développeurs de positionner visuellement les composants graphiques dans une fenêtre.

Une fonctionnalité importante est le « Live Preview », qui affiche en temps réel les modifications apportées à l’interface, ce qui accélère le processus de développement.

Le Designer comprend deux éléments principaux :

• GUI Builder : pour aménager les composants graphiques dans la fenêtre en utilisant le glisser-déposer.
• Theme Creator : pour personnaliser les thèmes visuels de l’application sur la plateforme CodeName One.

Le composant Container

Le Container est un composant fondamental qui sert à contenir d’autres composants. Il peut contenir :

• Un ou plusieurs autres Containers, permettant une organisation hiérarchique.
• Un gestionnaire de positionnement appelé layout.
• Un ou plusieurs autres composants de type Component.

Méthodes principales de Container

• void addComponent(Component cmp) : ajoute un composant au Container.
• void removeComponent(Component cmp) : enlève un composant spécifique du Container.
• void setLayout(Layout layout) : définit le gestionnaire de positionnement (layout) du Container.
• void revalidate() : rafraîchit le contenu du Container en réorganisant les éléments selon le layout.

Exemple d’utilisation d’un Container

Container mainContainer = new Container();
Button btn = new Button("Cliquez ici");
mainContainer.addComponent(btn);
mainContainer.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
mainContainer.revalidate();

Dans cet exemple, un Container est créé, un bouton y est ajouté, un layout vertical est défini, puis l’affichage est rafraîchi.

Types de Containers

Plusieurs types de Containers sont disponibles selon le contexte :

• Dialog : boîte de dialogue modale.
• Tabs : conteneur avec onglets.
• Form : fenêtre principale d’une application.

Les layouts

Les layouts sont des gestionnaires de positionnement qui organisent automatiquement les composants dans un Container. Ils permettent de créer des interfaces adaptatives à différentes résolutions d’écran.

Les principaux layouts sont :

• GridLayout
• FlowLayout
• BoxLayout

BoxLayout

Ce layout dispose les éléments dans un Container soit verticalement (axe Y), soit horizontalement (axe X).

Exemple :

Container boxContainer = new Container();
boxContainer.setLayout(new BoxLayout(BoxLayout.X_AXIS));
boxContainer.addComponent(new Button("Bouton 1"));
boxContainer.addComponent(new Button("Bouton 2"));

Les boutons seront alignés horizontalement.

FlowLayout

FlowLayout aligne les composants sur une ligne, par défaut de gauche à droite, les uns à la suite des autres. Il peut aussi s’aligner verticalement.

Exemple :

Container flowContainer = new Container();
flowContainer.setLayout(new FlowLayout(Component.CENTER));
flowContainer.addComponent(new Button("A"));
flowContainer.addComponent(new Button("B"));

Les boutons seront alignés au centre sur une ligne.

GridLayout

GridLayout organise les composants dans une grille invisible composée de cellules de taille identique. Le nombre de lignes et de colonnes doit être défini à l’avance.

Exemple :

Container gridContainer = new Container();
gridContainer.setLayout(new GridLayout(2, 3)); // 2 lignes, 3 colonnes
gridContainer.addComponent(new Button("1"));
gridContainer.addComponent(new Button("2"));
gridContainer.addComponent(new Button("3"));
gridContainer.addComponent(new Button("4"));
gridContainer.addComponent(new Button("5"));
gridContainer.addComponent(new Button("6"));

Les boutons seront disposés dans une grille 2x3.

Composants graphiques courants

Command

Le composant Command permet de créer des menus. L’apparence et la position du menu varient selon la plateforme (iOS, Android, etc.).

Un menu Command est rattaché à une fenêtre (Form) ou une boîte de dialogue (Dialog). Par défaut, il contient du texte, mais on peut lui ajouter une icône.

TextField

Le TextField est un champ de saisie de texte. Il peut être configuré avec différentes contraintes de saisie :

• ANY : saisie libre
• DECIMAL : nombres décimaux
• EMAILADDR : adresse email
• NUMERIC : chiffres uniquement
• PASSWORD : saisie masquée pour mot de passe

Button

Le Button est un composant déclenchant une action lors d’un clic. Il peut contenir du texte, une icône, ou les deux.

CheckBox

Le CheckBox permet de proposer une liste de choix multiples à l’utilisateur.

Picker

Le Picker est un sélecteur permettant de choisir une date ou une heure.

Glossaire des termes clés

• BoxLayout : Layout qui organise les composants en ligne verticale (Y_AXIS) ou horizontale (X_AXIS).
• Command : Composant pour créer des menus adaptatifs selon la plateforme.
• Container : Composant conteneur pouvant regrouper d’autres composants et layouts.
• FlowLayout : Layout qui aligne les composants sur une ligne, de gauche à droite ou verticalement.
• GridLayout : Layout qui organise les composants dans une grille de cellules identiques.
• GUI Builder : Outil de création visuelle d’interfaces par drag-and-drop.
• Layout : Gestionnaire de positionnement des composants dans un Container.
• Picker : Composant pour sélectionner une date ou une heure.
• TextField : Champ de saisie de texte avec contraintes possibles.
• Theme Creator : Outil pour personnaliser les thèmes visuels de l’application.

Points clés à retenir

• CodeName One Designer facilite la création d’interfaces mobiles via drag-and-drop et un aperçu en temps réel.
• Le Container est un composant essentiel qui organise d’autres composants et layouts.
• Les layouts (BoxLayout, FlowLayout, GridLayout) permettent d’adapter automatiquement l’interface à différentes tailles d’écran.
• Les composants graphiques comme Button, TextField, CheckBox, Picker et Command sont les éléments de base pour interagir avec l’utilisateur.
• La personnalisation des thèmes améliore l’apparence des applications sur différentes plateformes.