Hiding the border on a Spark List control in Flex 4

By Peter deHaan On February 5, 2010 · 6 Comments

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 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?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 with: borderVisible • Gumbo

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

6 Responses to Hiding the border on a Spark List control in Flex 4

Sönke Rohde says:

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?

Peter deHaan says:

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”.

Peter deHaan says:

February 5, 2010 at 6:53 pm

Done; “Setting the content background alpha a Spark List control in Flex 4″

Peter

Daniel says:

April 22, 2010 at 2:29 pm

Peter,

Any suggestions on how to hide the rollover on a list component?

Thanks,

Daniel

Reply
- Peter deHaan says:
  
  April 22, 2010 at 3:21 pm
  
  @Daniel,
  
  Create a simple custom item renderer and set the Boolean autoDrawBackground property to false, as seen in the following example:
  <?xml version="1.0" encoding="utf-8"?> <s:ItemRenderer name="CustomItemRenderer" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" autoDrawBackground="false"> <s:Label text="{data.label}" left="2" right="2" top="4" bottom="4" /> </s:ItemRenderer>
  Peter
  
  Reply
  - Peter deHaan says:
    
    April 22, 2010 at 3:32 pm
    
    For marginally more information, see “Removing the rollover and selection highlight on a Spark List control in Flex 4″.
    
    Peter

M	T	W	T	F	S	S
« Jan				Mar »
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28

Just a bunch of Adobe Flex Examples

Peter deHaan

Add Widgets (Content Sidebar)

6 Responses to Hiding the border on a Spark List control in Flex 4

Leave a Reply Cancel reply

Categories

Articles

Calendar

Meta

Pages

The Latest

Setting the icon placement on a Spark Button control in Flex Hero

More