/*************************************************************/
//borderContainer
//分类：组件类
//
/************************************************************/
The BorderContainer class defines a set of CSS styles that control the appearance of the border and background fill of the container.
Note: Because you use CSS styles and class properties to control the appearance of the BorderContainer, you typically do not create a custom skin for it. If you do create a custom skin, your skin class should apply any styles to control the appearance of the container.
By default, the stroke of the border is rounded. If you do not want rounded corners, set the joints property of the stroke to JointStyle.MITER.
The following example uses the backgroundColor, borderStyle, borderWeight, and cornerRadius styles of the BorderContainer container to control the appearance of the BorderContainer container:
<?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" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Panel title="BorderContainer Component Example"
width="75%" height="75%"
horizontalCenter="0" verticalCenter="0">
<s:BorderContainer
backgroundColor="red" cornerRadius="10"
borderStyle="inset" borderWeight="4"
left="30" right="60" top="100" bottom="10">
<s:layout>
<s:HorizontalLayout
paddingLeft="5" paddingRight="5"
paddingTop="5" paddingBottom="5"/>
</s:layout>
<s:Button label="Button 1"/>
<s:Button label="Button 2"/>
<s:Button label="Button 3"/>
<s:Button label="Button 4"/>
</s:BorderContainer>
</s:Panel>
</s:Application>
运行效果如下：
最近在编写Flex4上的一些代码，认识了一些新东西：
关于canvas的最重要的就是可以用Flex4中的BorderContainer来替换，这里给出一个实例：
<s:BorderContainer id="sliderLevel"
height = "35"
width = "160"
backgroundAlpha="0.1"
borderAlpha="0"
click = "onSliderLevelClick(event)"
>
<mx:Canvas id = "sliderLevel"
height = "35"
width = "160"
click = "onSliderLevelClick(event)"
>
这两段代码从本质上是一致的，由此可见spark里可以用新的BorderContainer替换canvas
声明：上面的这段代码参考于一个网友
Use the backgroundImage style to specify an image as the background of the container, as the following example shows:
<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\SparkBorderImage.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
[Embed(source="/assets/logo.jpg")]
[Bindable]
public var imgCls:Class;
]]>
</fx:Script>
<s:BorderContainer
backgroundImage="{imgCls}"
borderStyle="inset" borderWeight="2"
width="150" height="180">
</s:BorderContainer>
</s:Application>
The executing SWF file for the previous example is shown below:
The BorderContainer container defines two properties that also let you control the appearance of the container:
- The backgroundFill property, of type IFill, defines the fill of the container. If you set the backgroundFill property, then the container ignores the backgroundAlpha, backgroundColor, backgroundImage, and backgroundImageResizeMode styles.
- The borderStroke property, of type IStroke, defines the stroke of the border. If you set the borderStroke property, then the container ignores the borderAlpha, borderColor, borderStyle, borderVisible, and borderWeight styles.
The following example sets the backgroundFill and borderStroke properties:
<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\SparkBorderFillStroke.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:BorderContainer cornerRadius="10">
<s:layout>
<s:HorizontalLayout
paddingLeft="5" paddingRight="5"
paddingTop="5" paddingBottom="5"/>
</s:layout>
<s:backgroundFill>
<s:SolidColor
color="red"
alpha="100"/>
</s:backgroundFill>
<s:borderStroke>
<mx:SolidColorStroke
color="black"
weight="3"/>
</s:borderStroke>
<s:Button label="Button 1"/>
<s:Button label="Button 2"/>
<s:Button label="Button 3"/>
<s:Button label="Button 4"/>
</s:BorderContainer>
</s:Application>
The executing SWF file for the previous example is shown below:
Because the BorderContainer container does not implement the IViewport interface, it does not directly support scroll bars. However, you can wrap the Scroller control inside the BorderContainer container to add scroll bars, as the following example shows:
<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\SparkScrollBorder.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark" >
<s:BorderContainer width="100" height="100"
borderWeight="3" borderStyle="solid">
<s:Scroller width="100%" height="100%">
<s:Group
horizontalScrollPosition="50"
verticalScrollPosition="50">
<mx:Image width="300" height="400"
source="@Embed(source='/assets/logo.jpg')"/>
</s:Group>
</s:Scroller>
</s:BorderContainer>
</s:Application>
The executing SWF file for the previous example is shown below:
总结：borderContainer 就是一个容器类，她里面有一些Css属性用来控制这个容器的外观，因此不需要另外创建一个Skin类来定义容器控件的外观。其他容器相比，她的优点是：可以使用CSS文件或者代码很方便的对容器的样式进行定义。并且它是一个可视化的容器类。