4 – Flex Application Framework : le guide du bon développeur MXML
© Groupe Eyrolles, 2008
43
Couleur de l’arrière-plan
Comme en HTML, il est possible de paramétrer la couleur d’affichage
de l’arrière-plan du conteneur principal. Il est également possible de
créer un effet dégradé en jouant sur deux valeurs de code couleur (valeurs
HTML). Cet effet est rendu possible en définissant les codes couleurs
du paramètre backgroundGradientColors, à l’intérieur même de la balise
.
De plus, il est possible d’ajuster la transparence de l’arrière-plan, en
modifiant la valeur de sa couche alpha, via la propriété
backgroundGradientAlphas, en sélectionnant une valeur comprise entre
0.0 et 1.0.
Pour notre projet, nous souhaitons définir un dégradé du noir (code couleur HTML : #000000) vers le gris (prenons, par exemple, le code couleur
#555555) avec une opacité complète (sans transparence) de l’arrière-plan.
Instruction à insérer dans la balise du conteneur principal
Titre de l’application
Tout comme en HTML, il est possible de définir le titre de notre application. C’est lui qui s’affichera au sommet du navigateur Internet. La propriété à utiliser est simplement pageTitle = « ..::: MediaFoot :::.. ».
En-tête de l’application
L’en-tête (header, en anglais) de l’application est un élément indispensable pour lui donner une identité visuelle.
L’insertion d’une image est excessivement simple en MXML. Il suffit
d’utiliser la balise définie dans le fichier XML manifest, puis
de définir la source de l’image (le chemin d’accès relatif à cette image).
Voici l’instruction que nous utiliserons à cet effet :
L’élément de contrôle Image permet d’importer des fichiers aux formats
JPEG, PNG, GIF et SWF pendant l’exécution. Vous pouvez aussi
ajouter des fichiers au même format pendant la session de compilation,
en utilisant l’instruction @Embed(source=’nom de fichier’).
Le chemin d’accès à l’image header.jpg est donc défini par un répertoire
que nous appellerons /assets et son sous-répertoire que nous appellebackgroundGradientAlphas="[1.0, 1.0]"
backgroundGradientColors="[#00000, #555555]"
ASTUCE Optimisation
pour le référencement
La question du référencement est un point crucial
pour le développement des RIA qui n’étaient pas
facilement référencées par les moteurs de
recherche principaux comme Google. Sachez
cependant que l’un des paramètres utilisés par les
moteurs de recherche pour le référencement est le
titre de votre page. Il est donc important de toujours définir ce titre avec un contenu pertinent, par
exemple en intégrant les mots-clés que l’on souhaite référencer.
Figure 4–3
La vue Flex Navigator déployée
avec l’image header
© Groupe Eyrolles, 2008
43
Couleur de l’arrière-plan
Comme en HTML, il est possible de paramétrer la couleur d’affichage
de l’arrière-plan du conteneur principal. Il est également possible de
créer un effet dégradé en jouant sur deux valeurs de code couleur (valeurs
HTML). Cet effet est rendu possible en définissant les codes couleurs
du paramètre backgroundGradientColors, à l’intérieur même de la balise
De plus, il est possible d’ajuster la transparence de l’arrière-plan, en
modifiant la valeur de sa couche alpha, via la propriété
backgroundGradientAlphas, en sélectionnant une valeur comprise entre
0.0 et 1.0.
Pour notre projet, nous souhaitons définir un dégradé du noir (code couleur HTML : #000000) vers le gris (prenons, par exemple, le code couleur
#555555) avec une opacité complète (sans transparence) de l’arrière-plan.
Instruction à insérer dans la balise du conteneur principal
Titre de l’application
Tout comme en HTML, il est possible de définir le titre de notre application. C’est lui qui s’affichera au sommet du navigateur Internet. La propriété à utiliser est simplement pageTitle = « ..::: MediaFoot :::.. ».
En-tête de l’application
L’en-tête (header, en anglais) de l’application est un élément indispensable pour lui donner une identité visuelle.
L’insertion d’une image est excessivement simple en MXML. Il suffit
d’utiliser la balise
de définir la source de l’image (le chemin d’accès relatif à cette image).
Voici l’instruction que nous utiliserons à cet effet :
L’élément de contrôle Image permet d’importer des fichiers aux formats
JPEG, PNG, GIF et SWF pendant l’exécution. Vous pouvez aussi
ajouter des fichiers au même format pendant la session de compilation,
en utilisant l’instruction @Embed(source=’nom de fichier’).
Le chemin d’accès à l’image header.jpg est donc défini par un répertoire
que nous appellerons /assets et son sous-répertoire que nous appellebackgroundGradientAlphas="[1.0, 1.0]"
backgroundGradientColors="[#00000, #555555]"
ASTUCE Optimisation
pour le référencement
La question du référencement est un point crucial
pour le développement des RIA qui n’étaient pas
facilement référencées par les moteurs de
recherche principaux comme Google. Sachez
cependant que l’un des paramètres utilisés par les
moteurs de recherche pour le référencement est le
titre de votre page. Il est donc important de toujours définir ce titre avec un contenu pertinent, par
exemple en intégrant les mots-clés que l’on souhaite référencer.
Figure 4–3
La vue Flex Navigator déployée
avec l’image header