Flex Examples
The following example shows how you can toggle which sides of a Flex HorizontalList control display the border outline by setting the borderSides style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/07/26/displaying-a-border-on-specific-sides-of-a-horizontallist-control-in-flex/ --> <mx:Application name="HorizontalList_borderSides_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:HorizontalList id="hList" borderColor="red" borderSides="left right" labelField="label" horizontalScrollPolicy="on" columnWidth="120" columnCount="5" rowHeight="90"> <mx:dataProvider> <mx:ArrayCollection> <mx:Object label="One" /> <mx:Object label="Two" /> <mx:Object label="Three" /> <mx:Object label="Four" /> <mx:Object label="Five" /> <mx:Object label="Six" /> <mx:Object label="Seven" /> <mx:Object label="Eight" /> <mx:Object label="Nine" /> </mx:ArrayCollection> </mx:dataProvider> </mx:HorizontalList> </mx:Application>
You can also set the borderSides 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/2009/07/26/displaying-a-border-on-specific-sides-of-a-horizontallist-control-in-flex/ --> <mx:Application name="HorizontalList_borderSides_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> HorizontalList { borderSides: "top bottom"; } </mx:Style> <mx:HorizontalList id="hList" borderColor="red" labelField="label" horizontalScrollPolicy="on" columnWidth="120" columnCount="5" rowHeight="90"> <mx:dataProvider> <mx:ArrayCollection> <mx:Object label="One" /> <mx:Object label="Two" /> <mx:Object label="Three" /> <mx:Object label="Four" /> <mx:Object label="Five" /> <mx:Object label="Six" /> <mx:Object label="Seven" /> <mx:Object label="Eight" /> <mx:Object label="Nine" /> </mx:ArrayCollection> </mx:dataProvider> </mx:HorizontalList> </mx:Application>
Or, you can set the borderSides style using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/07/26/displaying-a-border-on-specific-sides-of-a-horizontallist-control-in-flex/ --> <mx:Application name="HorizontalList_borderSides_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ private function checkBox_change(evt:Event):void { var sides:String = ""; if (leftCh.selected) { sides += " left"; } if (rightCh.selected) { sides += " right"; } if (topCh.selected) { sides += " top"; } if (bottomCh.selected) { sides += " bottom"; } hList.setStyle("borderSides", sides); } ]]> </mx:Script> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="left:"> <mx:CheckBox id="leftCh" selected="true" change="checkBox_change(event);" /> </mx:FormItem> <mx:FormItem label="right:"> <mx:CheckBox id="rightCh" selected="true" change="checkBox_change(event);" /> </mx:FormItem> <mx:FormItem label="top:"> <mx:CheckBox id="topCh" selected="true" change="checkBox_change(event);" /> </mx:FormItem> <mx:FormItem label="bottom:"> <mx:CheckBox id="bottomCh" selected="true" change="checkBox_change(event);" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:HorizontalList id="hList" borderColor="red" labelField="label" horizontalScrollPolicy="on" columnWidth="120" columnCount="5" rowHeight="90"> <mx:dataProvider> <mx:ArrayCollection> <mx:Object label="One" /> <mx:Object label="Two" /> <mx:Object label="Three" /> <mx:Object label="Four" /> <mx:Object label="Five" /> <mx:Object label="Six" /> <mx:Object label="Seven" /> <mx:Object label="Eight" /> <mx:Object label="Nine" /> </mx:ArrayCollection> </mx:dataProvider> </mx:HorizontalList> </mx:Application>
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.
Share
