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

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{
       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>

2、flex3組件屬性版實例

<?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>

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{
     listID.setStyle("contentBackgroundColor", 0x0000FF);    //背景色
     listID.setStyle("baseColor", 0xFF00FF);    //邊框顏色
    }
   
   ]]>
</fx:Script> <mx:List id="listID" 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:List x="300" y="50" width="200" height="500" contentBackgroundColor="#FF0000" baseColor="#0000FF"/> </s:Application>

四、Panel

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("borderStyle", "solid");
       dataGridID.setStyle("borderThickness", 20);    //僅在將 borderStyle 設置爲 "solid" 時使用
    }
   
   ]]>
</mx:Script> <mx:Panel 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:Panel id="dataGridID" x="300" y="100" width="200" height="400"
       backgroundColor="#0000FF" borderColor="#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("backgroundColor", 0x000000);    //表格的背景顏色
     dataGridID.setStyle("baseColor", 0xFF0000);    //標題欄和邊框的背景顏色
    }
   
   ]]>
</fx:Script> <mx:Panel 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"> <!--backgroundColor表示表格的背景顏色，baseColor表示標題欄和邊框的背景顏色-->
<mx:Panel id="panelID" x="300" y="50" width="200" height="500"
     backgroundColor="#FF0000" baseColor="#00FF00"/> </s:Application>