Ajouter

Tutorial – Utilisation de la nouvelle syntaxe CSS dans Flash Builder 4 / Flex Gumbo

Posté le 5 octobre 2009 à 8:20 | Tags: Css, Flash Builder 4 Beta, Style, Tutorial

Adobe a mis à disposition dans Flash Builder 4 / Flex Gumbo une toute nouvelle syntaxe de Styles CSS qui apporte une plus grande fléxibilité au niveau de la personnalisation des applications.

Dans ce tutorial, nous allons voir quelques applications de cette nouvelle syntaxe CSS sur des composants (components) via les méthodes suivantes :

• Déclaration de @namespace
• Definition d'un style Global
• Attribution d'un style via un ID
• Attribution d'un style descendant
• Attribution d'un style pour une state spécifique

 

Introduction

Pour ce tutorial, nous allons utiliser deux composant Button (un Halo Button et un Spark Button) ainsi qu'une progressBar insérée dans un container VGroup.

 Le code de l'application de test est le suivant :

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024"
    minHeight="768">
 
 <fx:Style source="styles/global.css" />
 
 <s:layout>
 <s:VerticalLayout />
 </s:layout>
 
 <mx:Button label="Composant Halo Button"
    id="haloButton" />
 <s:Button label="Composant Spark Button" 
   id="sparkButton" />
 
 <s:VGroup id="myBox">
 <mx:ProgressBar />
 </s:VGroup>
 
</s:Application>

Vous devrez aussi créer le fichier global.css dans le répertoire styles.

 

Déclaration de @namespace

La classe Namespace contient les méthodes et propriétés destinées à la définition et à l'utilisation des espaces de nom. Les espaces de nom sont utilisés dans trois cas de figures :

• Espaces de nom d’objets XML. Les espaces de nom associent un préfixe d’espace de nom à un URI (Uniform Resource Identifier) qui les identifie. Le préfixe est une chaîne utilisée pour référencer l’espace de nom dans un objet XML. Si le préfixe n’est pas défini, il est automatiquement généré lorsque l’objet XML est converti en chaîne.
• Espaces de nom utilisés pour différencier les méthodes Les espaces de nom permettent de différencier les méthodes portant un nom identique pour effectuer des tâches différentes. Si deux méthodes ont le même nom, mais des espaces de nom distincts, elles peuvent exécuter des tâches différentes.
• Espaces de nom pour le contrôle d'accès Les espaces de nom permettent de contrôler l’accès à un groupe de propriétés et de méthodes d’une classe. Si vous placez les propriétés et les méthodes dans un espace de nom privé, tout code qui n’a pas accès à l’espace de nom ne peut pas non plus accéder à celles-ci. Vous pouvez accorder un accès au groupe de propriétés et de méthodes en transmettant l’espace de nom à d’autres classes, méthodes ou fonctions.

Cette classe utilise deux formes de la méthode de constructeur, car chaque forme accepte des paramètres différents.

Dans ce tutorial, vous remarquerez qu'au moment de créer votre fichier global.css, Flash Builder ajoute automatiquement les deux namespaces suivants :

 CSS | 
 Copier le code
 
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";

Le fait de définir ces deux namespaces nous permet d'attribuer d'un côté des styles pour un composant Spark Button et d'un autre des styles pour un composant Halo Button (par exemple ,  s|Button{…} pour la définition du style d'un Spark Button).

Si vous pensez que votre application dispose par exemple d'un maximum de composant Spark (Spark components), vous avez la possibilité de définir le namespace par défaut :

 CSS | 
 Copier le code
 
@namespace "library://ns.adobe.com/flex/spark";

On pourra donc supprimer le namespace devant le nom du type de composant dans le fichier CSS (suppression du s| pour l'exemple ci-dessus)

 

Définition d'un style Global

Le code ci-dessous vous montre comment appliquer un style à un même type de composant se trouvant dans les deux librairies (components Spark & Halo) :

 CSS | 
 Copier le code
 
mx|Button
   {
   color:#ffffff;
   }
s|Button 
   {
   color:#000000;
   }

Ici nous avons défini la couleur de texte par défaut de tous les composants Halo Button et Spark Button qui vont être implémentés dans notre application.

Vous pouvez par ailleurs définir un style personnalisé en utilisant par exemple la syntaxe ci-dessous, ce point est identique par rapport aux Styles CSS dans Flex 3 :

 CSS | 
 Copier le code
 
.myStyleClass 
   {
   color:#ff0000;
   }

 

Attribution d'un style via un ID

Une des grandes nouveautés dans flex 4 au niveau des styles est de retrouver la possibilité d'appliquer directement un style grâce à l'ID d'un composant.

Dans notre tutorial, nous voulons par exemple uniquement que certains composants aient une propriété base-colored, nous utiliserons donc cette syntaxe :

 CSS | 
 Copier le code
 
#haloButton 
   {
   base-color:#0000ff;
   }
#sparkButton
   {
   base-color:#ffffff;
   }

 

Attribution d'un style descendant

Nous souhaitons maintenant que le texte de notre ProgressBar qui se trouve dans notre Spark VGroup soit colorié en rouge, nous allons donc utiliser le ciblage descendant pour appliquer la propriété directement sur celle-ci :

 CSS | 
 Copier le code
 
s|VGroup#myBox mx|ProgressBar
   {
   color:#ff0000;
   }

Sous forme de texte, cela donnerait : « Sélection du Spark VGroup ayant pour id myBox puis sélection du composant Halo ProgressBar contenu dans celui-ci ».

 

Attribution d'un style pour une State spécifique

Nous souhaitons maintenant que le label de notre Spark Button soit colorié en vert quand l'utilisateur clique dessus, ce qui signifie que nous souhaitons personnaliser la state down. Nous utiliserons donc la syntaxe ci-dessous :

 CSS | 
 Copier le code
 
s|Button:down
   {
   color:#33CC33;
   }

Rendu de l'exemple du tutorial (nécessite Flash Player 10) :

 Télécharger les sources de l'exemple du tutorial

En conclusion, nous pouvons voir que la syntaxe des states a réellement évolué dans Flash Builder 4 / Flex Gumbo, ce qui facilitera grandement les possibilités et facilités de personnalisation des vos projets.

Autre(s) source(s) proche(s) de ce sujet :

1. Utilisation d'un Spark NavigatorContent dans un Halo Accordion dans Flash Builder 4 / Flex Gumbo
2. Tutorial – Utilisation de Flex & PHP dans Flash Builder 4 / Flex Gumbo – Part 2
3. Tutorial – Utilisation de Flex & PHP dans Flash Builder 4 / Flex Gumbo – Part 1
4. Tutorial : Utilisation des States et ItemRenderer dans un Composant List de Flash builder 4 / Flex Gumbo