Ajouter

Définir la couleur de base des scrollbars d'un Halo DataGrid control dans Flash Builder 4 / Flex Gumbo

L'exemple suivant va vous montrer comment modifier la couleur de base des barres de scroll (Horizontal & Vertical Scroll Bars) contenues dans un composant Halo DataGrid dans Flash Builder 4 Beta / Flex 4 Gumbo de trois manières différentes :

• Définition des propriétés horizontalScrollBarStyleName et verticalScrollBarStyleName dans un container CSS <fx:Style/>
• Définition des propriétés scrollBarStyles dans un fichier de Style CSS externe ou dans un container CSS <fx:Style/>
• Définition des propriétés de Style CSS directement en ActionScript

Mise en avant : horizontalScrollBarStyleName – verticalScrollBarStyleName

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

1. Définition des propriétés horizontalScrollBarStyleName et verticalScrollBarStyleName dans un container CSS <fx:Style/>

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/27/definir-base-color-nested-scrollbars-dun-halo-datagrid-control-dans-flash-builder-4-flex-gumbo/ -->
<s:Application name="Halo_DataGrid_verticalScrollBarStyleName_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">
 
    <fx:Style>
        .scrollBarStyles {
            baseColor: haloBlue;
        }
    </fx:Style>
 
    <mx:DataGrid id="dataGrid"
            horizontalScrollPolicy="on"
            verticalScrollPolicy="on"
            horizontalScrollBarStyleName="scrollBarStyles"
            verticalScrollBarStyleName="scrollBarStyles"
            rowCount="5"
            width="150"
            horizontalCenter="0" verticalCenter="0">
        <mx:dataProvider>
            <mx:ArrayList>
                <fx:Object c1="1.Un" c2="1.Deux" c3="1.Trois" />
                <fx:Object c1="2.Un" c2="2.Deux" c3="2.Trois" />
                <fx:Object c1="3.Un" c2="3.Deux" c3="3.Trois" />
                <fx:Object c1="4.Un" c2="4.Deux" c3="4.Trois" />
                <fx:Object c1="5.Un" c2="5.Deux" c3="5.Trois" />
                <fx:Object c1="6.Un" c2="6.Deux" c3="6.Trois" />
                <fx:Object c1="7.Un" c2="7.Deux" c3="7.Trois" />
                <fx:Object c1="8.Un" c2="8.Deux" c3="8.Trois" />
                <fx:Object c1="9.Un" c2="9.Deux" c3="9.Trois" />
            </mx:ArrayList>
        </mx:dataProvider>
    </mx:DataGrid>
 
</s:Application>

Rendu final (nécessite Flash Player 10) :

Télécharger la source de l'exemple

2. Définition des propriétés scrollBarStyles dans un fichier de Style CSS externe ou dans un container CSS <fx:Style/>

 MXML | 
 Copier le code
 
<!-- http://www.flash-builder-tutorial.fr/2009/09/27/definir-base-color-nested-scrollbars-dun-halo-datagrid-control-dans-flash-builder-4-flex-gumbo/ -->
<s:Application name="Halo_DataGrid_verticalScrollBarStyleName_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">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        .scrollBarStyles {
            baseColor: haloBlue;
        }
 
        mx|DataGrid {
            horizontalScrollBarStyleName: scrollBarStyles;
            verticalScrollBarStyleName: scrollBarStyles;
        }
    </fx:Style>
 
    <mx:DataGrid id="dataGrid"
            horizontalScrollPolicy="on"
            verticalScrollPolicy="on"
            rowCount="5"
            width="150"
            horizontalCenter="0" verticalCenter="0">
        <mx:dataProvider>
            <mx:ArrayList>
                <fx:Object c1="1.Un" c2="1.Deux" c3="1.Trois" />
                <fx:Object c1="2.Un" c2="2.Deux" c3="2.Trois" />
                <fx:Object c1="3.Un" c2="3.Deux" c3="3.Trois" />
                <fx:Object c1="4.Un" c2="4.Deux" c3="4.Trois" />
                <fx:Object c1="5.Un" c2="5.Deux" c3="5.Trois" />
                <fx:Object c1="6.Un" c2="6.Deux" c3="6.Trois" />
                <fx:Object c1="7.Un" c2="7.Deux" c3="7.Trois" />
                <fx:Object c1="8.Un" c2="8.Deux" c3="8.Trois" />
                <fx:Object c1="9.Un" c2="9.Deux" c3="9.Trois" />
            </mx:ArrayList>
        </mx:dataProvider>
    </mx:DataGrid>
 
</s:Application>

Rendu final (nécessite Flash Player 10) :

Télécharger la source de l'exemple

3. Définition des propriétés de Style CSS directement en ActionScript 3

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/27/definir-base-color-nested-scrollbars-dun-halo-datagrid-control-dans-flash-builder-4-flex-gumbo/ -->
<s:Application name="Halo_DataGrid_verticalScrollBarStyleName_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:Button id="btn"
                label='Définir les "scroll bar style names"'
                click="btn_click(event);" />
    </s:controlBarContent>
 
    <fx:Style>
        .scrollBarStyles {
            baseColor: haloBlue;
        }
    </fx:Style>
 
    <fx:Script>
        <![CDATA[
            protected function btn_click(evt:MouseEvent):void {
                dataGrid.setStyle("horizontalScrollBarStyleName", "scrollBarStyles");
                dataGrid.setStyle("verticalScrollBarStyleName", "scrollBarStyles");
            }
        ]]>
    </fx:Script>
 
    <mx:DataGrid id="dataGrid"
            horizontalScrollPolicy="on"
            verticalScrollPolicy="on"
            rowCount="5"
            width="150"
            horizontalCenter="0" verticalCenter="0">
        <mx:dataProvider>
            <mx:ArrayList>
                <fx:Object c1="1.Un" c2="1.Deux" c3="1.Trois" />
                <fx:Object c1="2.Un" c2="2.Deux" c3="2.Trois" />
                <fx:Object c1="3.Un" c2="3.Deux" c3="3.Trois" />
                <fx:Object c1="4.Un" c2="4.Deux" c3="4.Trois" />
                <fx:Object c1="5.Un" c2="5.Deux" c3="5.Trois" />
                <fx:Object c1="6.Un" c2="6.Deux" c3="6.Trois" />
                <fx:Object c1="7.Un" c2="7.Deux" c3="7.Trois" />
                <fx:Object c1="8.Un" c2="8.Deux" c3="8.Trois" />
                <fx:Object c1="9.Un" c2="9.Deux" c3="9.Trois" />
            </mx:ArrayList>
        </mx:dataProvider>
    </mx:DataGrid>
 
</s:Application>

Rendu final (nécessite Flash Player 10) :

Télécharger la source de l'exemple

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. Utilisation d'un Spark NavigatorContent dans un Halo Accordion dans Flash Builder 4 / Flex Gumbo
3. Gestion de la recyclage d'un composant via un Halo Repeater dans Flash Builder 4 / Flex Gumbo
4. Définir le background color d'un composant Spark Application Control Bar dans Flash Builder 4 / Flex Gumbo
5. Styler le Bouton présent (Emphasized Button) dans un Halo Alert Control dans Flex 4
6. Supprimer le Separator Skin d'un Halo DataGrid control dans Flex 4
7. Test des couleurs de remplissage (fillColors) d'un composant Halo Button
8. Créer une animation de couleur sur un composant Spark Button dans Flex 4 Gumbo
9. Configurer la couleur de la bordure d'un Container Spark Border
10. Composants Spark et Halo – Flash Builder 4