Flex en un clin d'œil : Création d'une interface utilisateur simple
Sommaire
- Utilisation de contrôles
- Utilisation de conteneurs
- Mise en forme de composants
- Ajout d'effets
- Création d'états
- Définition de transitions d'état
- Utilisation d'info-bulles
- Contrôle du curseur
Application de styles aux composants
Les styles servent à définir l'aspect de vos applications Adobe® Flex™. Vous pouvez les utiliser pour modifier un seul composant ou l'ensemble des composants de votre application.
Il existe plusieurs façons d'appliquer des styles dans Flex. Certaines d'entre elles permettent un contrôle plus précis et peuvent être exécutées via des programmes. D'autres sont moins souples, mais nécessitent éventuellement moins de calculs. Dans Flex, des styles peuvent être appliqués aux contrôles via :
- les définitions de styles locaux
- les feuilles de style externes
- les styles en ligne
- la méthode
setStyle()
Flex ne prend pas toujours en charge les feuilles de style CSS (Cascading Style Sheets) pour contrôler les aspects graphiques d'un composant. Des propriétés telles que x, y, width et height sont des propriétés, et non des styles, de la classe UIComponent et ne peuvent donc pas être définies dans CSS. Vous devez également savoir quelles propriétés sont prises en charge par votre thème. Le thème par défaut dans Flex ne prend pas en charge toutes les propriétés de style.
Un thème est un ensemble de styles qui définit l'aspect d'une application Flex. Un thème peut simplement définir la palette chromatique ou la police commune d'une application, ou peut entièrement habiller l'ensemble des composants utilisés par l'application. Les thèmes prennent généralement la forme d'un fichier SWC. Cependant, ils peuvent également être un fichier CSS et des ressources graphiques incorporées, telles que des symboles issus d'un fichier SWF.
Pour plus d'informations sur les propriétés de style prises en charge dans les thèmes, reportez-vous à la section "About supported styles" du document Flex 2 Developer's Guide*.
Pour déterminer les styles pris en charge par un composant graphique spécifique, reportez-vous à la section traitant des styles dans le document Adobe Flex 2 Language Reference*.
Définitions de styles locaux
Vous pouvez créer des définitions de styles locaux dans vos fichiers MXML en utilisant la balise <mx:Style> . Cette balise contient des définitions de feuilles de style conformes à la syntaxe CSS 2.0. Ces définitions s'appliquent au document en cours d'utilisation et à tous ses enfants.
L'exemple ci-après crée deux sélecteurs de classe, .solidBorder et .solidBorderPaddedVertically , et les utilise pour modifier le style des deux conteneurs VBox en utilisant leurs propriétés styleName . Comme le montre cet exemple, l'utilisation de sélecteurs de classe vous permet d'affecter des styles différents à des instances du même composant.
Exemple
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="150" height="140" viewSourceURL="src/StylesStyleTag/index.html" > <mx:Style> .solidBorder { border-style: solid; } .solidBorderPaddedVertically { padding-top: 12; padding-bottom: 12; border-style: solid;
} </mx:Style> <mx:VBox styleName="solidBorder"> <mx:Button label="Submit"/> </mx:VBox> <mx:VBox styleName="solidBorderPaddedVertically" > <mx:Button label="Submit"/> </mx:VBox> </mx:Application>
Astuce : Si vous souhaitez que toutes les instances d'un certain composant partagent le même style, vous pouvez utiliser un sélecteur de type CSS. En utilisant, par exemple, le sélecteur de type ci-après, toutes les instances VBox de votre application auront une bordure pleine.
VBox { border-style: solid; }
Résultat
This content requires Flash
Pour afficher la source complète, cliquez avec le bouton droit de la souris sur l'application Flex et sélectionnez View Source dans le menu contextuel.
Feuilles de style externes
Flex prend en charge les feuilles de style CSS externes. Pour appliquer une feuille de style au document en cours d'utilisation et à ses enfants, utilisez la propriété source de la balise <mx:Style> .
Remarque : Essayez de limiter le nombre de feuilles de style utilisées dans une application et définissez la feuille de style uniquement pour le document principal de l'application (le document qui contient la balise <mx:Application> ). Si vous définissez une feuille de style dans un document enfant, vous pouvez obtenir des résultats inattendus.
L'exemple ci-après définit deux sélecteurs de classe CSS dans un fichier CSS externe nommé external.css. Vous pouvez utiliser un fichier CSS externe dans une application Flex en spécifiant son chemin et son nom de fichier dans la propriété source de la balise <mx:Style> .
Exemple :
Fichier CSS externe
/* An external CSS file */ .solidBorder { borderStyle: "solid"; } .solidBorderPaddedVertically { borderStyle: "solid"; paddingTop: 12px; paddingBottom: 12px; }
Fichier MXML
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="150" height="140" viewSourceURL="src/StylesExternal/index.html" > <mx:Style source="styles/external.css" /> <mx:VBox styleName="solidBorder"> <mx:Button label="Submit"/> </mx:VBox> <mx:VBox styleName="solidBorderPaddedVertically"> <mx:Button label="Submit"/> </mx:VBox> </mx:Application>
Résultat
Pour afficher la source complète, cliquez avec le bouton droit de la souris sur l'application Flex et sélectionnez View Source dans le menu contextuel.
Styles en ligne
Vous pouvez définir des propriétés de style comme propriétés du composant dans la balise MXML. Les définitions de style en ligne sont prioritaires sur toutes les autres définitions de style, à l'exception des changements de style définis pour les temps d'exécution en utilisant la balise setStyle() . Vous pouvez, par exemple, définir le remplissage entre la bordure d'un conteneur Box et son contenu en utilisant les propriétés paddingTop et paddingBottom de la balise <mx:VBox> . De même, vous pouvez utiliser la propriété borderStyle pour définir l'apparence de la bordure d'un composant.
Exemple
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="150" height="140" viewSourceURL="src/StylesTagAttributes/index.html" > <mx:VBox id="myVBox1" borderStyle="solid"> <mx:Button label="Submit"/> </mx:VBox> <mx:VBox id="myVBox2" borderStyle="solid" paddingTop="12" paddingBottom="12" > <mx:Button label="Submit"/> </mx:VBox> </mx:Application>
Résultat
Pour afficher la source complète, cliquez avec le bouton droit de la souris sur l'application Flex et sélectionnez View Source dans le menu contextuel.
Méthode setStyle()
Utilisez la méthode setStyle() pour manipuler des propriétés de style sur des instances de contrôles dans ActionScript. Cette méthode d'application des styles requiert une plus grande puissance de traitement sur le client que les feuilles de style, mais elle offre un contrôle plus précis.
La méthode setStyle() prend deux arguments : le nom du style et la valeur du style.
Astuce : Lorsque vous instanciez un objet et définissez des styles pour la première fois, essayez d'appliquer des feuilles de style au lieu d'utiliser la méthode setStyle() , car elle exige une importante puissance de traitement. N'utilisez cette méthode que lorsque vous modifiez les styles d'un objet au moment de l'exécution.
Exemple
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="150" height="140" viewSourceURL="src/StylesSetStyle/index.html" > <mx:Script> <![CDATA[ private function initVBox():void { myVBox2.setStyle("paddingTop", 12); myVBox2.setStyle("paddingBottom", 12); } ]]> </mx:Script> <mx:VBox borderStyle="solid"> <mx:Button label="Submit"/> </mx:VBox> <mx:VBox id="myVBox2" borderStyle="solid" paddingTop="12" paddingBottom="12" initialize="initVBox();" > <mx:Button label="Submit"/> </mx:VBox> </mx:Application>
Résultat
Pour afficher la source complète, cliquez avec le bouton droit de la souris sur l'application Flex et sélectionnez View Source dans le menu contextuel.
Pour plus d'informations
Pour plus d'informations sur l'application de styles à des composants, reportez-vous à la section "Using Styles" du document Flex 2 Developer's Guide*.
À propos de l'auteur
Aral Balkan est à la fois acteur, chanteur, directeur de plusieurs équipes de développement, concepteur d'interfaces utilisateur, architecte d'applications Internet riches et responsable d'OSFlash.org*, groupe d'utilisateurs Macromedia à Londres, et d'Ariaware*, sa propre société. Il aime parler des modèles de conception et rédiger des articles pour des livres et des magazines. Il est également le créateur d'Arp*, le framework RIA Open Source de la plate-forme Flash. Aral est quelqu'un d'opiniâtre et de passionné. Il sourit beaucoup et peut même mâcher du chewing-gum en marchant.
