Flex中如何利用StyleManager.getStyleDeclaration()和setStyle()函数动态设置.errorTip样式的例子

By Minidxer | September 27, 2008

在前面Flex中通过设置borderColor样式和.errorTip CSS分离器改变错误信息提示背景颜色(background color)的例子中，我们了解了如何通过设置borderColor样式和.errorTip CSS分离器改变错误信息提示背景颜色(background color)。接下来的例子演示了Flex中如何利用StyleManager.getStyleDeclaration()和setStyle()函数，动态设置.errorTip样式。

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


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

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application name="errorTip_borderColor_test_2"
  3.         xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         verticalAlign="middle"
  6.         backgroundColor="white">
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             import mx.events.FlexEvent;
  11.  
  12.             private function comboBox_valueCommit(evt:FlexEvent):void {
  13.                 if (comboBox.selectedIndex > -1) {
  14.                     var value:String = comboBox.selectedItem.data;
  15.                     var cssObj:CSSStyleDeclaration;
  16.                     cssObj = StyleManager.getStyleDeclaration(".errorTip");
  17.                     cssObj.setStyle("borderColor", value);
  18.                     textInput.setStyle("errorColor", value);
  19.                     textInput.errorString = errStr;
  20.                 } else {
  21.                     textInput.errorString = "";
  22.                 }
  23.             }
  24.  
  25.             private function button_click(evt:MouseEvent):void {
  26.                 comboBox.selectedIndex = -1;
  27.             }
  28.         ]]>
  29.     </mx:Script>
  30.  
  31.     <mx:Array id="arr">
  32.         <mx:Object label="Red"    data="red" />
  33.         <mx:Object label="Orange" data="haloOrange" />
  34.         <mx:Object label="Yellow" data="yellow" />
  35.         <mx:Object label="Green"  data="haloGreen" />
  36.         <mx:Object label="Blue"   data="haloBlue" />
  37.     </mx:Array>
  38.  
  39.     <mx:String id="errStr">Oh noes, an errata!</mx:String>
  40.  
  41.     <mx:ApplicationControlBar dock="true">
  42.         <mx:Form styleName="plain">
  43.             <mx:FormItem label="errorColor:">
  44.                 <mx:ComboBox id="comboBox"
  45.                         dataProvider="{arr}"
  46.                         prompt="Please select a color:"
  47.                         valueCommit="comboBox_valueCommit(event);" />
  48.             </mx:FormItem>
  49.         </mx:Form>
  50.         <mx:Spacer width="100%" />
  51.         <mx:Button label="Deselect ComboBox"
  52.                 click="button_click(event);" />
  53.     </mx:ApplicationControlBar>
  54.  
  55.     <mx:TextInput id="textInput" />
  56.  
  57. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Flex | Tags: , , , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads