flex常见组件背景及边框颜色实例

一、Button

1、flex4as方式实例

<?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/halo"
????? minWidth="1024" minHeight="768"?
????? creationComplete="init();"> <fx:Script>
?? <![CDATA[
??? public function init():void{
???? but01ID.setStyle("baseColor",0xFF0000);
??? }
???
?? ]]>
</fx:Script> <mx:Button id="but01ID" label="你好世界" /> </s:Application>

2、flex4组件属性实例

<?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/halo"
????? minWidth="1024" minHeight="768"> <mx:Button label="你好世界" baseColor="#FFFF00"/> </s:Application>

二、DataGrid

1、flex3as版实例

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
??? creationComplete="init();"> <mx:Script>
?? <![CDATA[
??? public function init():void{
?????? dataGridID.setStyle("backgroundColor",0x000000);
?????? dataGridID.setStyle("borderColor",0xFF00FF);
?????? dataGridID.setStyle("headerColors",[0xFF0000,0xFFFFFF]);
???????
?????? dataGridID.setStyle("borderStyle","solid");
?????? dataGridID.setStyle("borderThickness",20);??? //仅在将 borderStyle 设置为 "solid" 时使用
??? }
???
?? ]]>
</mx:Script> <mx:DataGrid id="dataGridID" x="300" y="100" width="200" height="400"/> </mx:Application>

2、flex3组件属性版实例

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <!--仅在将 borderStyle 设置为 "solid" 时使用-->
<mx:DataGrid id="dataGridID" x="300" y="100" width="200" height="400"
?????? backgroundColor="#0000FF" borderColor="#FF0000" headerColors="[#00FFFF,#FF0000]" borderStyle="solid" borderThickness="15"/> </mx:Application>

3、flex4as版实例

<?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/halo"
????? minWidth="1024" minHeight="768"
????? creationComplete="init();"> <fx:Script>
?? <![CDATA[
??? public function init():void{
???? dataGridID.setStyle("contentBackgroundColor",0x000000);??? //表格的背景颜色
???? dataGridID.setStyle("baseColor",0xFF0000);??? //标题栏和边框的背景颜色
??? }
???
?? ]]>
</fx:Script> <mx:DataGrid id="dataGridID" x="300" y="50" width="200" height="500"/> </s:Application>

4、flex4组件属性版实例

<?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/halo"
????? minWidth="1024" minHeight="768"> <!--contentBackgroundColor表示表格的背景颜色，baseColor表示标题栏和边框的背景颜色-->
<mx:DataGrid id="dataGridID" x="300" y="50" width="200" height="500"
???? contentBackgroundColor="#000000" baseColor="#00FF00"/> </s:Application>

三、List

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="init();">
<mx:Script>
?? <![CDATA[
??? public function init():void{
?????? listID.setStyle("backgroundColor",0x0000FF);
?????? listID.setStyle("borderColor",0xFFFF00);
???????
?????? listID.setStyle("borderStyle","solid");
?????? listID.setStyle("borderThickness",20);??? //仅在将 borderStyle 设置为 "solid" 时使用
??? }
???
?? ]]>
</mx:Script> <mx:List id="listID" x="300" y="100" width="200" height="400"/> </mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <!--仅在将 borderStyle 设置为 "solid" 时使用-->
<mx:List id="listID" x="300" y="100" width="200" height="400"
?????? backgroundColor="#0000FF" borderColor="#FF0000" borderStyle="solid" borderThickness="15"/> </mx:Application>

<?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/halo"
????? minWidth="1024" minHeight="768"
????? creationComplete="init();"> <fx:Script>
?? <![CDATA[
??? public function init():void{
???? listID.setStyle("contentBackgroundColor",0x0000FF);??? //背景色
???? listID.setStyle("baseColor",0xFF00FF);??? //边框颜色
??? }
???
?? ]]>
</fx:Script> <mx:List id="listID" x="300" y="50" width="200" height="500"/> </s:Application>

<?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/halo"
????? minWidth="1024" minHeight="768"> <!--contentBackgroundColor是背景色；baseColor是边框颜色-->
<mx:List x="300" y="50" width="200" height="500" contentBackgroundColor="#FF0000" baseColor="#0000FF"/> </s:Application>

四、Panel

???????
?????? dataGridID.setStyle("borderStyle",20);??? //仅在将 borderStyle 设置为 "solid" 时使用
??? }
???
?? ]]>
</mx:Script> <mx:Panel id="dataGridID" x="300" y="100" width="200" height="400"/> </mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <!--仅在将 borderStyle 设置为 "solid" 时使用-->
<mx:Panel id="dataGridID" x="300" y="100" width="200" height="400"
?????? backgroundColor="#0000FF" borderColor="#FF0000" borderStyle="solid" borderThickness="15"/> </mx:Application>

<?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/halo"
????? minWidth="1024" minHeight="768"
????? creationComplete="init();"> <fx:Script>
?? <![CDATA[
??? public function init():void{
???? dataGridID.setStyle("backgroundColor",0xFF0000);??? //标题栏和边框的背景颜色
??? }
???
?? ]]>
</fx:Script> <mx:Panel id="dataGridID" x="300" y="50" width="200" height="500"/> </s:Application>

<?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/halo" ????? minWidth="1024" minHeight="768"> <!--backgroundColor表示表格的背景颜色，baseColor表示标题栏和边框的背景颜色--> <mx:Panel id="panelID" x="300" y="50" width="200" height="500" ???? backgroundColor="#FF0000" baseColor="#00FF00"/> </s:Application>