Ajouter

Hauteurs variables de ligne (variable row heights) dans un composant Spark VGroup de Flash Builder 4 / Flex Gumbo

Voici un exemple montrant comment définir si les lignes d'un composant Spark VGroup doivent avoir une hauteur fixe ou variable (variable row heights) dans Flash Builder 4 Beta / Flex 4 Gumbo Beta :

Mise en avant : variableRowHeight

Attention : vous devez impérativement disposer du SDK 4.0.0.10007 ou supérieur.

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/10/03/hauteurs-variables-de-ligne-variable-row-heights-dans-un-composant-spark-vgroup-de-flash-builder-4-flex-gumbo/ -->
<s:Application name="Spark_VGroup_variableRowHeight_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo" viewSourceURL="srcview/index.html">
    <s:controlBarContent>
        <s:CheckBox id="chckBx" label="variableRowHeight - hauteurs variables de ligne" selected="true" />
    </s:controlBarContent>
 
    <s:VGroup id="vGr"
            variableRowHeight="{chckBx.selected}"
            width="200"
            horizontalCenter="0" verticalCenter="0">
        <s:Border id="brdr1"
                backgroundColor="red"
                width="100%" height="30">
            <s:Label text="{brdr1.width}x{brdr1.height}"
                    horizontalCenter="0" verticalCenter="0" />
        </s:Border>
        <s:Border id="brdr2"
                backgroundColor="haloOrange"
                width="100%" height="60">
            <s:Label text="{brdr2.width}x{brdr2.height}"
                    horizontalCenter="0" verticalCenter="0" />
        </s:Border>
        <s:Border id="brdr3"
                backgroundColor="yellow"
                width="100%" height="20">
            <s:Label text="{brdr3.width}x{brdr3.height}"
                    horizontalCenter="0" verticalCenter="0" />
        </s:Border>
        <s:Border id="brdr4"
                backgroundColor="haloGreen"
                width="100%" height="90">
            <s:Label text="{brdr4.width}x{brdr4.height}"
                    horizontalCenter="0" verticalCenter="0" />
        </s:Border>
        <s:Border id="brdr5"
                backgroundColor="haloBlue"
                width="100%" height="40">
            <s:Label text="{brdr5.width}x{brdr5.height}"
                    horizontalCenter="0" verticalCenter="0" />
        </s:Border>
    </s:VGroup>
 
</s:Application>

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

Télécharger la source de l'exemple

Source : Flex Example – Peter Dehaan

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

1. Définir le padding d'un composant Spark NavigatorContent dans Flash Builder 4 / Flex Gumbo
2. Définir le background color d'un composant Spark Application Control Bar dans Flash Builder 4 / Flex Gumbo
3. Gestion de la visibilité de la bordure d'un composant Spark Border dans Flash Builder 4 / Flex Gumbo
4. Gestion du lissage (smoothing) sur l'image de fond (BackGround) d'un composant Spark Border dans Flash Builder 4 / Flex Gumbo
5. Afficher des images dans un composant Spark List en utilisant un item renderer (itemRenderer) personnalisé dans Flash Builder 4 / Flex Gumbo
6. Définir les fins de tabulation (Tab Stops) dans un composant Spark TextArea dans Flash Builder 4 / Flex Gumbo
7. Activer/Désactiver le click sur la zone transparente d'un composant Spark Graphic de Flash Builder 4 – Flex Gumbo
8. Activation de la Tabulation dans un composant Spark Scroller
9. Créer une animation de couleur sur un composant Spark Button dans Flex 4 Gumbo
10. Définir le « Corner Radius » d'un composant « Border » Spark