Flex Style與Skin

什么是Skinning？

• Flex中的Skinning是一個完全自定義UI組件的外觀和感覺的過程。

• 皮膚可以定義組件的文本，圖像，過濾器，過渡和狀態(tài)。

• 可以將皮膚創(chuàng)建為單獨的mxml和ActionScript組件。

• 使用皮膚，我們可以控制UI組件的所有視覺方面。

• 定義皮膚的過程對于所有UI組件是相同的。

步驟1:創(chuàng)建皮膚

使用選項File > New > MXML Skin 創(chuàng)建MXML皮膚向?qū)?br />

輸入包為 com.tutorialspoint.skin 的包，名稱為 GradientBackgroundSkin ，并選擇主機組件作為現(xiàn)有flex BorderContainer控件 spark.component.BorderContainer 。

現(xiàn)在你已經(jīng)為BorderContainer創(chuàng)建了一個外觀。 修改mxml皮膚文件 src / com.tutorialspoint / skin / GradientBackgroundSkin.mxml 的內(nèi)容。 更新填充圖層如下:

<!-- fill -->
<s:Rect id="backgroundRect" left="0" right="0" height="100%" top="0">
   <s:fill>
      <s:LinearGradient rotation="90">
         <s:GradientEntry color="0x888888" ratio="0.2"/>
         <s:GradientEntry color="0x111111" ratio="1"/>
      </s:LinearGradient>
   </s:fill>
</s:Rect>	

步驟2:涂抹皮膚

您可以使用兩種方式在組件上應(yīng)用皮膚

在MXML腳本中應(yīng)用皮膚(靜態(tài))

使用 skinClass 屬性將 GradientBackgroundSkin 應(yīng)用于ID為 mainContainer 的BorderContainer。

<s:BorderContainer width="560" height="500" id="mainContainer" 
   styleName="container">
   <s:VGroup width="100%" height="100%" gap="50" 
   horizontalAlign="center" verticalAlign="middle" 
   skinClass="com.tutorialspoint.skin.GradientBackgroundSkin">

在ActionScript中應(yīng)用皮膚(動態(tài))

使用 skinClass 屬性將 GradientBackgroundSkin 應(yīng)用于ID為 mainContainer 的BorderContainer。

protected function gradientBackground_clickHandler(event:MouseEvent):void
{
   mainContainer.setStyle("skinClass", GradientBackgroundSkin );
}

Flex樣式與皮膚示例

讓我們按照以下步驟在Flex應(yīng)用程序中通過創(chuàng)建測試應(yīng)用程序來查看操作中的換膚:

以下是 GradientBackgroundSkin.mxml 文件 src / com / tutorialspoint / skin / GradientBackgroundSkin.mxml 的內(nèi)容。

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
   xmlns:s="library://ns.adobe.com/flex/spark" 
   xmlns:mx="library://ns.adobe.com/flex/mx">
   <!-- host component -->
   <fx:Metadata>
      [HostComponent("spark.components.BorderContainer")]
   </fx:Metadata> 

   <!-- states -->
   <s:states>
      <s:State name="disabled" />
      <s:State name="disabled" />
      <s:State name="normal" />
   </s:states>

   <!-- SkinParts
   name=contentGroup, type=spark.components.Group, required=false
   -->
   <!-- fill -->
   <s:Rect id="backgroundRect" left="0" right="0" height="100%" top="0">
      <s:fill>
         <s:LinearGradient rotation="90">
            <s:GradientEntry color="0x111111" ratio="0.2"/>
            <s:GradientEntry color="0x888888" ratio="1"/>
         </s:LinearGradient>
      </s:fill>
   </s:Rect>	
   <!-- must specify this for the host component --> 
   <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />
</s:Skin>

以下是修改的 HelloWorld.mxml 文件 src / com / tutorialspoint / client / HelloWorld.mxml 的內(nèi)容。

<?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"
   width="100%" height="100%" minWidth="500" minHeight="500"
   initialize="application_initializeHandler(event)">

  <fx:Style source="/com/tutorialspoint/client/Style.css"/>

  <fx:Script>
  <![CDATA[
     import com.tutorialspoint.skin.GradientBackgroundSkin;
     import mx.controls.Alert;
     import mx.events.FlexEvent;
     import spark.skins.spark.BorderContainerSkin;			

     protected function btnClickMe_clickHandler(event:MouseEvent):void 
     {
        Alert.show("Hello World!");				
     }

     protected function application_initializeHandler(event:FlexEvent):void
     {
        lblHeader.text = "My Hello World Application";				
     }

     protected function gradientBackground_clickHandler(event:MouseEvent):void 
     {
         mainContainer.setStyle("skinClass", GradientBackgroundSkin );
     }

     protected function standardBackground_clickHandler(event:MouseEvent):void
     {
        mainContainer.setStyle("skinClass", BorderContainerSkin );
     }
   ]]>
   </fx:Script>
   <fx:Declarations>
      <s:RadioButtonGroup id="selectorGroup" />
   </fx:Declarations>
   <s:BorderContainer width="500" height="500" id="mainContainer"
      skinClass="spark.skins.spark.BorderContainerSkin" 
      horizontalCenter="0" verticalCenter="0" cornerRadius="10">
      <s:VGroup width="100%" height="100%" gap="50" horizontalAlign="center"
      verticalAlign="middle">
         <s:Label id="lblHeader" fontSize="40" color="green" 
         styleName="heading"/>
         <s:Button label="Click Me!" id="btnClickMe" 
            click="btnClickMe_clickHandler(event)"/>
         <s:RadioButton color="gray" fontWeight="bold" 
            group="{selectorGroup}" label="Standard Background" 
            click="standardBackground_clickHandler(event)" selected="true"/>
         <s:RadioButton color="gray" fontWeight="bold" 
            group="{selectorGroup}" label="Gradient Background" 
            click="gradientBackground_clickHandler(event)"/>			
      </s:VGroup>			
   </s:BorderContainer>	
</s:Application>

準備好所有更改后，讓我們以正常模式編譯和運行應(yīng)用程序，就像在 Flex - 創(chuàng)建應(yīng)用程序中一樣 章節(jié)。
  如果一切順利，您的應(yīng)用程序，這將產(chǎn)生以下結(jié)果:[在線試用]