Hiding the border on a Spark List control in Flex 4

The following example shows how you can toggle the border visibility on a Spark List control in Flex 4 by setting the Boolean borderVisible style.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 beta, check out the Adobe Flash Builder 4 page on the Adobe Labs site. To download the latest build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4. For instructions on using the beta Flex 4 SDK in Flex Builder 3, see "Using the beta Flex 4 SDK in Flex Builder 3".

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/05/hiding-the-border-on-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_borderVisible_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="borderVisible:">
                <s:CheckBox id="ch" selected="true" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:List id="lst"
            borderVisible="{ch.selected}"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout requestedRowCount="4"
                    gap="0"
                    horizontalAlign="contentJustify" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList id="arr" source="[red,orange,yellow,green,blue]" />
        </s:dataProvider>
    </s:List>
 
</s:Application>

View source is enabled in the following example.

You can also set the borderVisible style in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/05/hiding-the-border-on-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_borderVisible_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|List {
            borderVisible: false;
        }
    </fx:Style>
 
    <s:List id="lst"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout requestedRowCount="4"
                    gap="0"
                    horizontalAlign="contentJustify" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList id="arr" source="[red,orange,yellow,green,blue]" />
        </s:dataProvider>
    </s:List>
 
</s:Application>

Or, you can set the borderVisible style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/05/hiding-the-border-on-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_borderVisible_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="borderVisible:">
                <s:CheckBox id="ch"
                        selected="true"
                        change="ch_changeHandler(event);"/>
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function ch_changeHandler(evt:Event):void {
                lst.setStyle("borderVisible", ch.selected);
            }
        ]]>
    </fx:Script>
 
    <s:List id="lst"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout requestedRowCount="4"
                    gap="0"
                    horizontalAlign="contentJustify" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList id="arr" source="[red,orange,yellow,green,blue]" />
        </s:dataProvider>
    </s:List>
 
</s:Application>

Finally, you can globally set the borderVisible style using the StyleManager, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/05/hiding-the-border-on-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_borderVisible_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="borderVisible:">
                <s:CheckBox id="ch"
                        selected="true"
                        change="ch_changeHandler(event);"/>
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function ch_changeHandler(evt:Event):void {
                var listCSS:CSSStyleDeclaration = styleManager.getStyleDeclaration("spark.components.List");
                listCSS.setStyle("borderVisible", ch.selected);
            }
        ]]>
    </fx:Script>
 
    <s:List id="lst"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout requestedRowCount="4"
                    gap="0"
                    horizontalAlign="contentJustify" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList id="arr" source="[red,orange,yellow,green,blue]" />
        </s:dataProvider>
    </s:List>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

Tagged as: borderVisible, Gumbo

{ 3 comments… read them below or add one }

1 Sönke Rohde February 5, 2010 at 6:29 pm

If it only would be that easy to hide the background too.
No other way then providing a custom skin, right?

2 Peter deHaan February 5, 2010 at 6:48 pm

@Sönke Rohde,

Set the contentBackgroundAlpha style to 0.0, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<s:Application name="Spark_List_contentBackgroundAlpha_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <s:Panel title="Spark List test"
            horizontalCenter="0" verticalCenter="0">
        <s:controlBarContent>
            <mx:Form>
                <mx:FormItem label="contentBackgroundAlpha:">
                    <s:HSlider id="sl"
                            minimum="0.0"
                            maximum="1.0"
                            value="1.0"
                            snapInterval="0.1"
                            stepSize="0.1" />
                </mx:FormItem>
            </mx:Form>
        </s:controlBarContent>
 
        <s:Rect width="100%" height="100%">
            <s:fill>
                <s:LinearGradient rotation="45">
                    <s:GradientEntry color="red" />
                    <s:GradientEntry color="yellow" />
                    <s:GradientEntry color="haloBlue" />
                </s:LinearGradient>
            </s:fill>
        </s:Rect>
 
        <s:List id="lst"
                contentBackgroundAlpha="{sl.value}"
                left="20" right="20" top="20" bottom="20">
            <s:layout>
                <s:VerticalLayout requestedRowCount="4"
                        gap="0"
                        horizontalAlign="contentJustify" />
            </s:layout>
            <s:dataProvider>
                <s:ArrayList id="arr" source="[red,orange,yellow,green,blue]" />
            </s:dataProvider>
        </s:List>
    </s:Panel>
 
</s:Application>

Peter
PS: I’ll also post this as a new entry in a couple minutes, so it is a bit more “searchable”.

3 Peter deHaan February 5, 2010 at 6:53 pm: Done; “Setting the content background alpha a Spark List control in Flex 4″

Peter

Pages

Recent Posts

Archives

But wait, there’s more…

Advertising