5 – Concevoir une interface utilisateur riche
© Groupe Eyrolles, 2008
63
Intégrer le bandeau d’information
Ce petit espace horizontal devra permettre l’affichage d’informations
extraites d’un flux RSS ou d’un fichier XML quelconque. Le principe
est de faire défiler un flux d’informations avec des liens d’accès direct
vers d’autres ressources extérieures ou internes. Dans ce chapitre, nous
nous contenterons de définir simplement l’espace réservé à ce bandeau.
Reprenons le fichier source Home.mxml. Son code source est le suivant :
Code source du fichier Home.mxml
Le conteneur que nous avons défini est un composant de type
. Rappelons qu’un conteneur d’agencement de type Canvas
définit une zone rectangulaire dans laquelle seront intégrés d’autres
composants enfants (conteneurs ou éléments de contrôle). Contrairement aux autres conteneurs, vous ne pouvez pas laisser Flex organiser
automatiquement la disposition de ces composants enfants. Vous devez
donc spécifier la position des composants internes. L’avantage d’utiliser
ce type de conteneur d’agencement est de disposer d’un très grand contrôle sur l’affichage des composants internes. En effet, le conteneur
Canvas ne dispose d’aucune information par défaut sur le positionnement et les dimensions de ses composants enfants.
Pour ajouter un espace réservé à notre bandeau d’information, nous
allons donc encadrer le texte existant « Home » avec un conteneur
d’agencement de type HBox. En effet, le conteneur HBox dispose ses
height="100%"
backgroundAlpha="0">
Tableau 5–1 Conteneur Canvas
Canvas
Description
Paquetage
mx.containers
Classe
public class Canvas
Héritage
Canvas ! Container ! UIComponent ! FlexSprite ! Sprite !
DisplayObjectContainer ! InteractiveObject ! DisplayObject
EventDispatcher !Object
Implémente
IConstraintLayout
EN SAVOIR PLUS Position des composants
dans un Canvas
La disposition de type « absolue » (absolute)
implique que vous spécifiez les valeurs des coordonnées (x,y) de chaque composant. Avec la disposition de type « contrainte » (constraintbased ), vous devez spécifier l’ancrage sur un côté
ou le centre d’un élément de référence. Quoiqu’il
en soit, dans les deux cas, la disposition des composants enfants ne peut être gérée automatiquement avec un conteneur de type Canvas.
© Groupe Eyrolles, 2008
63
Intégrer le bandeau d’information
Ce petit espace horizontal devra permettre l’affichage d’informations
extraites d’un flux RSS ou d’un fichier XML quelconque. Le principe
est de faire défiler un flux d’informations avec des liens d’accès direct
vers d’autres ressources extérieures ou internes. Dans ce chapitre, nous
nous contenterons de définir simplement l’espace réservé à ce bandeau.
Reprenons le fichier source Home.mxml. Son code source est le suivant :
Code source du fichier Home.mxml
Le conteneur que nous avons défini est un composant de type
définit une zone rectangulaire dans laquelle seront intégrés d’autres
composants enfants (conteneurs ou éléments de contrôle). Contrairement aux autres conteneurs, vous ne pouvez pas laisser Flex organiser
automatiquement la disposition de ces composants enfants. Vous devez
donc spécifier la position des composants internes. L’avantage d’utiliser
ce type de conteneur d’agencement est de disposer d’un très grand contrôle sur l’affichage des composants internes. En effet, le conteneur
Canvas ne dispose d’aucune information par défaut sur le positionnement et les dimensions de ses composants enfants.
Pour ajouter un espace réservé à notre bandeau d’information, nous
allons donc encadrer le texte existant « Home » avec un conteneur
d’agencement de type HBox. En effet, le conteneur HBox dispose ses
height="100%"
backgroundAlpha="0">
Tableau 5–1 Conteneur Canvas
Canvas
Description
Paquetage
mx.containers
Classe
public class Canvas
Héritage
Canvas ! Container ! UIComponent ! FlexSprite ! Sprite !
DisplayObjectContainer ! InteractiveObject ! DisplayObject
EventDispatcher !Object
Implémente
IConstraintLayout
EN SAVOIR PLUS Position des composants
dans un Canvas
La disposition de type « absolue » (absolute)
implique que vous spécifiez les valeurs des coordonnées (x,y) de chaque composant. Avec la disposition de type « contrainte » (constraintbased ), vous devez spécifier l’ancrage sur un côté
ou le centre d’un élément de référence. Quoiqu’il
en soit, dans les deux cas, la disposition des composants enfants ne peut être gérée automatiquement avec un conteneur de type Canvas.