Flex中如何通过backgroundImage, backgroundColor和backgroundAlpha样式,设置VBox的背景图片和背景颜色以及改变透明度
2009-06-08 23:54
1201 查看
main.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
.containerVBox {
backgroundColor: haloBlue;
borderThickness: 1;
borderColor: black;
borderStyle: solid;
paddingLeft: 5;
paddingRight: 5;
paddingTop: 5;
paddingBottom: 5;
}
</mx:Style>
<mx:Script>
<![CDATA[
[Bindable]
[Embed("Fx.png")]
private var flexLogo:Class;
private function backImage_change(evt:Event):void {
if (backImage.selected) {
vBox.setStyle("backgroundImage", flexLogo);
} else {
vBox.setStyle("backgroundImage", null);
}
}
private function backColor_change(evt:Event):void {
if (backColor.selected) {
vBox.setStyle("backgroundColor", colorPicker.selectedColor);
} else {
vBox.setStyle("backgroundColor", null);
}
}
]]>
</mx:Script>
<mx:String id="lorem" source="lorem.txt" />
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="backgroundAlpha:">
<mx:HSlider id="slider"
minimum="0.0"
maximum="1.0"
value="1.0"
liveDragging="true"
tickInterval="0.1" />
</mx:FormItem>
<mx:FormItem label="show backgroundImage:">
<mx:CheckBox id="backImage"
selected="true"
change="backImage_change(event);" />
</mx:FormItem>
<mx:FormItem label="show backgroundColor:">
<mx:CheckBox id="backColor"
selected="true"
change="backColor_change(event);" />
</mx:FormItem>
<mx:FormItem label="backgroundColor:">
<mx:ColorPicker id="colorPicker"
selectedColor="white"
enabled="{backColor.selected}"
change="backColor_change(event);" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:VBox styleName="containerVBox">
<mx:VBox id="vBox"
backgroundImage="{flexLogo}"
backgroundAlpha="{slider.value}"
backgroundColor="white"
backgroundAttachment="fixed"
width="500"
height="250">
<mx:Text width="100%" text="{lorem}" />
</mx:VBox>
</mx:VBox>
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
.containerVBox {
backgroundColor: haloBlue;
borderThickness: 1;
borderColor: black;
borderStyle: solid;
paddingLeft: 5;
paddingRight: 5;
paddingTop: 5;
paddingBottom: 5;
}
</mx:Style>
<mx:Script>
<![CDATA[
[Bindable]
[Embed("Fx.png")]
private var flexLogo:Class;
private function backImage_change(evt:Event):void {
if (backImage.selected) {
vBox.setStyle("backgroundImage", flexLogo);
} else {
vBox.setStyle("backgroundImage", null);
}
}
private function backColor_change(evt:Event):void {
if (backColor.selected) {
vBox.setStyle("backgroundColor", colorPicker.selectedColor);
} else {
vBox.setStyle("backgroundColor", null);
}
}
]]>
</mx:Script>
<mx:String id="lorem" source="lorem.txt" />
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="backgroundAlpha:">
<mx:HSlider id="slider"
minimum="0.0"
maximum="1.0"
value="1.0"
liveDragging="true"
tickInterval="0.1" />
</mx:FormItem>
<mx:FormItem label="show backgroundImage:">
<mx:CheckBox id="backImage"
selected="true"
change="backImage_change(event);" />
</mx:FormItem>
<mx:FormItem label="show backgroundColor:">
<mx:CheckBox id="backColor"
selected="true"
change="backColor_change(event);" />
</mx:FormItem>
<mx:FormItem label="backgroundColor:">
<mx:ColorPicker id="colorPicker"
selectedColor="white"
enabled="{backColor.selected}"
change="backColor_change(event);" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:VBox styleName="containerVBox">
<mx:VBox id="vBox"
backgroundImage="{flexLogo}"
backgroundAlpha="{slider.value}"
backgroundColor="white"
backgroundAttachment="fixed"
width="500"
height="250">
<mx:Text width="100%" text="{lorem}" />
</mx:VBox>
</mx:VBox>
</mx:Application>
相关文章推荐
- Flex中如何通过backgroundImage和backgroundSize样式,设置VBox容器的背景图片以及大小
- Flex中如何通过设置backgroundColor和backgroundAlpha改变DateChooser控件背景颜色的例子
- Flex中通过backgroundColor和backgroundAlpha样式设置NumericStepper控件背景颜色和透明度的例子
- Flex中如何利用backgroundImage和backgroundAttachment样式,设置VBox背景图片
- Flex中如何通过设置GridLines对象的horizontalAlternateFill样式交错显示LineSeries图表背景颜色的例子
- Flex中通过设置borderColor样式和.errorTip CSS分离器改变错误信息提示背景颜色(background color)的例子
- Flex中通过设置fillColors样式改变ComboBox控件的填充背景颜色的例子
- Flex Gumbo中如何通过contentBackgroundColor样式,设置TextInput内文本背景颜色
- Flex中如何通过设置backgroundAlpha风格来设定VideoDisplay控件的背景透明度(background alpha)的例子
- Flex中如何通过getHeaderAt()函数以及selectedUpIcon,selectedOverIcon和selectedDownIcon样式给Accordion头部设置一个分割用图标的例子
- Flex中如何通过selectionColor和selectionDisabledColor样式设置DataGrid的行选中与无效时颜色的例子
- Flex中如何通过itemRollOverColor和itemSelectionColor样式给列图ColumnChart设置选中/未选颜色的例子
- 快速设置UINavbar的属性包括背景 title的颜色字体以及改变返回键的图片
- Flex中如何通过lineStroke样式改变LineChart图表线条颜色的例子
- Flex中如何通过selectedButtonTextStyleName样式,设置ToggleButtonBar选中按钮文本颜色
- Flex中如何通过verticalGap样式,设置VBox的各项间间距
- Flex中如何通过disabledColor样式设置NumericStepper控件无效时文本颜色的例子
- Flex中如何利用headerStyleName样式,设置Accordion容器的fillAlphas, fillColors以及selectedFillColors等反显颜色
- Flex中如何通过borderColor样式设置DateField控件边框颜色的例子
- ios之如何让图片显示成圆形的样式/设置控件边框大小以及颜色