<!-- Slide number: 1 -->
CodeName One GUI
SUPPORT DE COURS
ESPRT MOBILE TEAM
ESPRIT
Notes:
<!-- Slide number: 2 -->
Introduction
Le “CodeName One Designer” permet au développeurs de créer des applications mobiles en utilisant le drag-and-drop des composants visuels.
Un “Live Preview” permet de consulter les éventuelles modifications sur l’affichage en temps réel.
2
Notes:
<!-- Slide number: 3 -->
Introduction
- Le “CodeName One Designer” inclut les points suivants:
GUI Builder: permet d’aménager les composants graphiques de la fenêtre en utilisant la fonctionnalité drag-and-drop.
Theme Creator: permet de customiser des thèmes pour la plateforme CodeName One
3
Notes:
<!-- Slide number: 4 -->
Container
Comme l’indique son nom, Container est un composant qui peut contenir d’autres composants.
Le composant Container peut contenir trois types d’objets :
un ou plusieurs autres Container,
un gestionnaire de positionnement (ou layout)
un ou plusieurs autres composants de type Component.
4
Notes:
Publicité
<!-- Slide number: 5 -->
Quelques méthodes de Container
void addComponent(Component cmp): Ajoute un composant à un Container.
void revalidate(): Rafraîchit le contenu d’un Container avec une réorganisation des éléments du layout intégré.
5
Notes:
<!-- Slide number: 6 -->
Quelques méthodes de Container
void removeComponent(Component cmp): Enlève un composant spécifique du Container. Mettez en paramètre le composant à enlever.
void setLayout(Layout layout): Définit le layout (gestionnaire de positionnement) qui sera intégré à la racine du Container. En paramètre de cette méthode, le layout à intégrer.
6
Notes:
<!-- Slide number: 7 -->
Type de container
Dialog
Tabs
Form
7
Notes:
<!-- Slide number: 8 -->
Les layouts
Gèrent la disposition des composants dans un container
Créent des interfaces qui s’adaptent automatiquement à toutes les résolutions d’écran
Les principaux Layout sont :
GridLayout
FlowLayout
BoxLayout
Publicité
8
Notes:
<!-- Slide number: 9 -->
BoxLayout
Ce layout permet de disposer de manière verticale ou horizontale les éléments dans un Container.
Box Layout X
Box Layout Y
9
Notes:
<!-- Slide number: 10 -->
BoxLayout
Ce layout permet de disposer de manière verticale ou horizontale les éléments dans un Container.
Box Layout X
Box Layout Y
10
Notes:
<!-- Slide number: 11 -->
FlowLayout
permet d’aligner les composants sur une ligne (de la gauche vers la droite par défaut) les uns à la suite des autres.
FlowLayout peut être alignée horizontalement ou verticalement,
11
Notes:
<!-- Slide number: 12 -->
GridLayout
Permet de disposer les composants dans les cellules (de tailles identiques) d’une grille invisible.
Publicité
Le nombres de lignes et de colonnes doit être déclaré a l’avance
12
Notes:
<!-- Slide number: 13 -->
WorkShop (Android Puzzle)
Reconstitué le logo en utilisant les layout appropries
13
Notes:
<!-- Slide number: 14 -->
Command
Command est un composant qui permet de créer un menu. L’apparence et l’emplacement d’un menu varient en fonction des plateformes.
Une fois qu’un menu est créé avec la classe Command, il faut le rattacher à l’interface d’une fenêtre (un Form) ou à une boîte de dialogue (Dialog).
Par défaut, un menu contient du texte. On peut aussi lui ajouter une icône.
14
Notes:
<!-- Slide number: 15 -->
Command
iOS
Android
15
Notes:
<!-- Slide number: 16 -->
TextField
un champ text qui permet de saisir des données
Contraintes de saisie
Publicité
ANY | DECIMAL | EMAILADDR | NUMERIC | PASSWORD…
16
Notes:
<!-- Slide number: 17 -->
Button
un composant qui permet d’exécuter des action suite a un évènement de clique
Un bouton peu contenir du text, une icone ou du text et des icones
17
Notes:
<!-- Slide number: 18 -->
CheckBox
Une liste de choix multiple
18
Notes:
<!-- Slide number: 19 -->
Picker
Sélectionneur de Date ou d’heure
19
Notes:
<!-- Slide number: 20 -->
Workshop 2
20