Flex CSS: Modifier les CSS à l'exécution (Runtime CSS)
Dans Flex 2.0.1 ou supérieur, vous pouvez utiliser les CSS à l'exécution. Lorsque vous utilisez les CSS directement dans votre application, ceux-ci sont intégrés au moment de la compilation. On va maintenant voir comment charger et appliquer de nouvelles feuilles de style CSS à l'exécution, c'est à dire après le chargement de l'application Flex.
Puisque les styles Flex requièrent parfois des éléments graphiques, des skins, des classes ou des polices d'écriture, les CSS utilisés à l'exécution doivent être précompilés en SWF. Quand vous utilisez Flex 2.0.1, vous pouvez utiliser le compilateur mxmlc pour compiler un fichier CSS en fichier SWF qui inclut tous les éléments graphiques. Pour compiler un fichier CSS, passez simplement le chemin du fichier comme seul argument du compilateur comme dans l'exemple suivant:
mxmlc styles.css
Vous pouvez aussi les compiler directement dans Flex Builer en faisant Clic Droit sur le fichier>Compile CSS to SWF
Flex Theme: Créer un thème Flex (SWC)
Pour utiliser un thème, il vous faut déjà avoir crée un thème Flex. Un thème doit contenir au moins un fichier CSS, et certainement des éléments graphiques comme des images ou des skins AS3. Un thème doit être précompilé en un fichier SWC. Vous pouvez compiler un SWC en utilisant compc, le compilateur en ligne de commande pour les composants. Lorsque vous compilez un thème, vous devez spécifier l'option "-include-file" pour chaque fichier CSS ou élément graphique que vous voulez ajouter au SWC. L'option "-include-file" requiert 2 paramètres: le nom par lequel vous référencez le fichier et le chemin du fichier. Voici un exemple:
compc -include-file corporate_styles.css ../assets/themes/corporate.css -include-file background.jpg ../assets/themes/background.jpg -o corporate.swc
Si vous voulez ajouter une classe (skin) au thème, vous pouvez utiliser l'option "-include-classes". Cette option permet de spécifier une ou plusieurs classses (nom complet, avec le package) dans une liste séparée par un espace:
compc -include-file corporate_styles.css ../assets/themes/corporate.css -include-classes com.company.styles.ButtonSkin com.company.styles.ToolTipSkin
Comme vous pouvez le voir, même en faisant l'inclusion de deux fichiers ou classes, la ligne de commande commence à être longue. Ajouter de nouveaux fichiers augmenterai le problème. Une solution plus élégante est d'utiliser le fichier de configuration Flex.
Flex Skin: Appliquer une Skin sur les ToolTip
Vous pouvez skinner les tool tip exactement comme vous le feriez pour n'importe quel composant (de manière graphique ou codée en AS3). Fixez simplement la valeur du sélecteur de type ToolTip pour le paramètre borderSkin pour pouvoir changer son apparence.
L'exemple suivant montre comment utiliser une ProgrammaticSkin pour les tooltips:
package {
import mx.skins.ProgrammaticSkin;
import flash.filters.DropShadowFilter;
public class ToolTipSkin extends ProgrammaticSkin {
public function ToolTipSkin(){}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
graphics.clear();
graphics.lineStyle(0, 0, 0);
graphics.beginFill(0xFFFFFF, .8);
graphics.drawRoundRectComplex(0, 0, unscaledWidth, unscaledHeight, 0, 10, 10, 10);
graphics.endFill();
filters = [new DropShadowFilter()];
}
}
}
Flex Skin: Skinner des composants en ActionScript, Programmatic Skinning
Coder des Skins est bien plus complexe que d'utiliser des skins graphiques. Cependant, l'utilisation de skins codées en AS3 donne de nombreux avantages. Vous aurez plus de contrôle car vous pouvez répondre à tout ce qui touche à la skin à l'exécution, tels que les changements d'état ou un redimensionnement (scale). Puisque les skins programmées utilisent du code plutôt que des images, vous aurez des fichiers plus petits que pour l'équivalent graphique. De plus, le programmatic skinning permet d'utiliser des fonctionnalités bas-niveau telles que les filtres (display object filter): drop shadow, bevel, glow …
Lorsque vous voulez créer une skin en AS3, vous devez créer une sous-classe d'une des classes suivantes:
- mx.skins.ProgrammaticSkin: La plupart des skins sont des sous-classes de ProgrammaticSkin, et cette classe est appropriée pour pratiquement toutes les skins
- mx.skins.Border: La classe Border est une sous-classe de ProgrammaticSkin, et elle ajoute le support de borderMetrics pour les skins qui ont des bordures.
- mx.skins.RectangularBorder: Cette classe est une sous-classe de Border, et elle ajoute le support de backgroundImage
Mes projets (Open Source)
Autres
