Ajouter

Supprimer le Separator Skin d'un Halo DataGrid control dans Flex 4

L'exemple suivant vous montre comment supprimer le Separator Skin (skin des séparateurs de colonnes) dans un Halo DataGrid control (composant Halo DataGrid) dans Flash Builder 4 / Flex 4 Gumbo en utilisant diverses méthodes :

1. Utilisation directe du paramètre de Style CSS headerSeparatorSkin
2. Utilisation d'un style css externe ou inclu dans un container style
3. Modification en actionscript 3 du style via le paramètre HaloSeparatorSkin

Mise en avant : headerSeparatorSkin – HaloSeparatorSkin

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

1. Utilisation du paramètre de Style CSS headerSeparatorSkin

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/24/supprimer-le-separator-skin-dun-halo-datagrid-control-dans-flex-4/ -->
<s:Application name="Halo_DataGrid_headerSeparatorSkin_test2"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <mx:DataGrid id="dataGrid"
            headerSeparatorSkin="spark.skins.SparkSkin"
            horizontalCenter="0" verticalCenter="0">
        <mx:dataProvider>
            <mx:ArrayList source="{Font.enumerateFonts(true)}" />
        </mx:dataProvider>
    </mx:DataGrid>
 
</s:Application>

Rendu (nécessite Flash Player 10) :

Télécharger la source de l'exemple

2. Utilisation d'un style css externe ou inclu dans un container style

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/24/supprimer-le-separator-skin-dun-halo-datagrid-control-dans-flex-4/ -->
<s:Application name="Halo_DataGrid_headerSeparatorSkin_test2"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        mx|DataGrid {
            headerSeparatorSkin: ClassReference("spark.skins.SparkSkin");
        }
    </fx:Style>
 
    <mx:DataGrid id="dataGrid"
            horizontalCenter="0" verticalCenter="0">
        <mx:dataProvider>
            <mx:ArrayList source="{Font.enumerateFonts(true)}" />
        </mx:dataProvider>
    </mx:DataGrid>
 
</s:Application>

Rendu (nécessite Flash Player 10) :

Télécharger la source de l'exemple

3. Modification en actionscript 3 du style via le paramètre HaloSeparatorSkin pour le composant Halo DataGrid

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/24/supprimer-le-separator-skin-dun-halo-datagrid-control-dans-flex-4/ -->
<s:Application name="Halo_DataGrid_headerSeparatorSkin_test2"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Script>
        <![CDATA[
            import spark.skins.SparkSkin;
 
            protected function btn_click(evt:MouseEvent):void {
                dataGrid.setStyle("headerSeparatorSkin", SparkSkin);
            }
        ]]>
    </fx:Script>
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <s:Button id="btn"
                label="Cliquez pour définir le DataGrid header separator skin"
                click="btn_click(event);" />
    </mx:ApplicationControlBar>
 
    <mx:DataGrid id="dataGrid"
            horizontalCenter="0" verticalCenter="0">
        <mx:dataProvider>
            <mx:ArrayList source="{Font.enumerateFonts(true)}" />
        </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. Utilisation d'un Spark NavigatorContent dans un Halo Accordion dans Flash Builder 4 / Flex Gumbo
2. Gestion de la recyclage d'un composant via un Halo Repeater dans Flash Builder 4 / Flex Gumbo
3. Définir la couleur de base des scrollbars d'un Halo DataGrid control dans Flash Builder 4 / Flex Gumbo
4. Styler le Bouton présent (Emphasized Button) dans un Halo Alert Control dans Flex 4
5. Test des couleurs de remplissage (fillColors) d'un composant Halo Button
6. Supprimer le « border » d'un « Tree Control » Halo dans Flex 4
7. Composants Spark et Halo – Flash Builder 4