In flex 4, the style 'boderSides' has been taken out, but there's another way to hide the border of a selected side of a box away. And here's a simple example to give you a rough idea on how to get it done. :)
Source Code for the main application - 'SimpleSelectedBorderExample.mxml'
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="creationCompleteEvent(event)" xmlns:Container="Container.*">
<fx:Script>
<![CDATA[
import Container.SimpleGroup;
import mx.events.FlexEvent;
protected function creationCompleteEvent(e:FlexEvent):void
{
var tempBox:SimpleGroup;
for(var i:int = 0; i < 8; i ++){
for(var j:int = 0; j < 8; j ++){
tempBox = new SimpleGroup();
tempBox.x = i * 50 - 0.5;
tempBox.y = j * 50 - 0.5;
container.addElement(tempBox);
}
}
}
]]>
</fx:Script>
<s:BorderContainer width="100%"
height="100%"
borderVisible="false">
<s:layout>
<s:VerticalLayout verticalAlign="middle"
horizontalAlign="center"/>
</s:layout>
<!-- All the boxes will appear inside this container -->
<s:BorderContainer width="400"
height="400"
id="container"
borderVisible="false"/>
</s:BorderContainer>
</s:Application>
Source Code for the Group Class that we are using to repeat the pattern - 'SimpleGroup.mxml'
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="50"
height="50"
creationComplete="creationCompleteEvent(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
//Are we going to show the left border?
[Bindable]
private var _boolLeft:Boolean = false;
//Are we going to show the right border?
[Bindable]
private var _boolRight:Boolean = false;
//Are we going to show the top border?
[Bindable]
private var _boolTop:Boolean = false;
//Are we going to show the bottom border?
[Bindable]
private var _boolBottom:Boolean = false;
//-1 = border is outside the box
//-0.5 = border is in the middle
//0 = border is inside the box
[Bindable]
private var _typeValue:Number = 0;
//Thickness of the border
[Bindable]
private var _borderThickness:Number = 0;
//Color of the border
[Bindable]
private var _borderColor:uint = 0x333333;
protected function creationCompleteEvent(e:FlexEvent):void
{
//Randomized the showing and hiding of the borders
var rand:Number = Math.round(Math.random());
if(rand == 1){
_boolLeft = true;
}
rand = Math.round(Math.random());
if(rand == 1){
_boolRight = true;
}
rand = Math.round(Math.random());
if(rand == 1){
_boolTop = true;
}
rand = Math.round(Math.random());
if(rand == 1){
_boolBottom = true;
}
_typeValue = Math.round(Math.random() * 2);
if(_typeValue == 1){
_typeValue = -0.5;
}else if(_typeValue == 2){
_typeValue = -1;
}
_borderThickness = Math.round(Math.random() * 2) + 1;
_typeValue = _typeValue * _borderThickness;
}
]]>
</fx:Script>
<!-- Left -->
<s:Line left="{_typeValue}"
top="{_typeValue}"
bottom="{_typeValue}"
visible="{_boolLeft}">
<s:stroke>
<s:SolidColorStroke weight="{_borderThickness}"
color="{_borderColor}"/>
</s:stroke>
</s:Line>
<!-- Bottom -->
<s:Line left="{_typeValue}"
right="{_typeValue}"
bottom="{_typeValue}"
visible="{_boolBottom}">
<s:stroke>
<s:SolidColorStroke weight="{_borderThickness}"
color="{_borderColor}"/>
</s:stroke>
</s:Line>
<!-- Right -->
<s:Line right="{_typeValue}"
top="{_typeValue}"
bottom="{_typeValue}"
visible="{_boolRight}">
<s:stroke>
<s:SolidColorStroke weight="{_borderThickness}"
color="{_borderColor}"/>
</s:stroke>
</s:Line>
<!-- Top -->
<s:Line left="{_typeValue}"
right="{_typeValue}"
top="{_typeValue}"
visible="{_boolTop}">
<s:stroke>
<s:SolidColorStroke weight="{_borderThickness}"
color="{_borderColor}"/>
</s:stroke>
</s:Line>
</s:Group>
* Click here for the demo shown in this post.^ Click here for the source files for the demo.
