Flex中如何扩展LinkButton控件并且添加自定义的样式的例子

By Minidxer | September 9, 2008

接下来的例子演示了Flex中如何扩展LinkButton控件并且添加自定义的样式。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application name="LinkButton_skin_test"
  3.         xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         xmlns:comps="comps.*"
  5.         layout="vertical"
  6.         verticalAlign="middle"
  7.         backgroundColor="white">
  8.  
  9.     <mx:ApplicationControlBar dock="true">
  10.         <mx:Form styleName="plain">
  11.             <mx:FormItem label="enabled:">
  12.                 <mx:CheckBox id="checkBox" selected="true" />
  13.             </mx:FormItem>
  14.         </mx:Form>
  15.     </mx:ApplicationControlBar>
  16.  
  17.     <comps:CustomLinkButton1 id="linkButtonMXML"
  18.             label="LinkButton (MXML)"
  19.             toggle="true"
  20.             enabled="{checkBox.selected}"
  21.             skin="skins.CustomLinkButtonSkin1"
  22.             rollOverColor="red"
  23.             selectionColor="haloOrange"
  24.             toggleBackgroundColor="yellow" />
  25.  
  26.     <comps:CustomLinkButton2 id="linkButtonAS"
  27.             label="LinkButton (ActionScript)"
  28.             toggle="true"
  29.             enabled="{checkBox.selected}"
  30.             skin="skins.CustomLinkButtonSkin1"
  31.             rollOverColor="red"
  32.             selectionColor="haloOrange"
  33.             toggleBackgroundColor="yellow" />
  34.  
  35. </mx:Application>

下面是CustomLinkButton1.mxml的代码：

Download: CustomLinkButton1.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:LinkButton xmlns:mx="http://www.adobe.com/2006/mxml">
  3.  
  4.     <mx:Metadata>
  5.         [Style(name="toggleBackgroundColor",
  6.                 type="uint",
  7.                 format="Color",
  8.                 inherit="yes")]
  9.     </mx:Metadata>
  10.  
  11.     <mx:Script>
  12.         <![CDATA[
  13.             override public function set enabled(value:Boolean):void {
  14.                 super.enabled = value;
  15.                 useHandCursor = value;
  16.             }
  17.         ]]>
  18.     </mx:Script>
  19.  
  20. </mx:LinkButton>

下面是CustomLinkButton2.as的代码：

Download: CustomLinkButton2.as
  1. package comps {
  2.     import mx.controls.LinkButton;
  3.  
  4.     [Style(name="toggleBackgroundColor",
  5.             type="uint",
  6.             format="Color",
  7.             inherit="yes")]
  8.  
  9.     public class CustomLinkButton2 extends LinkButton {
  10.         public function CustomLinkButton2() {
  11.             super();
  12.         }
  13.  
  14.         override public function set enabled(value:Boolean):void {
  15.             super.enabled = value;
  16.             useHandCursor = value;
  17.         }
  18.     }
  19. }

下面是CustomLinkButtonSkin1.as的代码：

Download: CustomLinkButtonSkin1.as
  1. package skins {
  2.     import mx.skins.halo.LinkButtonSkin;
  3.     import mx.styles.StyleManager;
  4.  
  5.     public class CustomLinkButtonSkin1 extends LinkButtonSkin {
  6.         public function CustomLinkButtonSkin1() {
  7.             super();
  8.         }
  9.         override protected function updateDisplayList(w:Number, h:Number):void {
  10.             super.updateDisplayList(w, h);
  11.  
  12.             // Inherited styles
  13.             var cornerRadius:Number = getStyle("cornerRadius");
  14.             var rollOverColor:uint = getStyle("rollOverColor");
  15.             var selectionColor:uint = getStyle("selectionColor");
  16.  
  17.             // Custom styles
  18.             var toggleBackgroundColor:uint = getStyle("toggleBackgroundColor") || getStyle("themeColor");
  19.  
  20.             graphics.clear();
  21.  
  22.             switch (name) {
  23.                 case "upSkin":
  24.                     // Draw invisible shape so we have a hit area.
  25.                     drawRoundRect(
  26.                             0,                /* x */
  27.                             0,                /* y */
  28.                             w,                /* width */
  29.                             h,                /* height */
  30.                             cornerRadius,    /* cornerRadius */
  31.                             0,                /* color */
  32.                             0.0                /* alpha */
  33.                         );
  34.                     break;
  35.  
  36.                 case "selectedUpSkin":
  37.                 case "selectedOverSkin":
  38.                     drawRoundRect(0, 0, w, h, cornerRadius, toggleBackgroundColor, 1.0);
  39.                     break;
  40.  
  41.                 case "overSkin":
  42.                     drawRoundRect(0, 0, w, h, cornerRadius, rollOverColor, 1.0);
  43.                     break;
  44.  
  45.                 case "selectedDownSkin":
  46.                 case "downSkin":
  47.                     drawRoundRect(0, 0, w, h, cornerRadius, selectionColor, 1.0);
  48.                     break;
  49.  
  50.                 case "selectedDisabledSkin":
  51.                     // Draw 20% alpha shape so we have a hit area.
  52.                     drawRoundRect(0, 0, w, h, cornerRadius, toggleBackgroundColor, 0.2);
  53.                     break;
  54.  
  55.                 case "disabledSkin":
  56.                     // Draw invisible shape so we have a hit area.
  57.                     drawRoundRect( 0, 0, w, h, cornerRadius, 0, 0.0);
  58.                     break;
  59.             }
  60.         }
  61.     }
  62. }
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Flex | No Comments » | 752 views Tags: , ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll