Flex中如何使用ColorPicker控件colorField和labelField属性显示颜色名称的例子

By Minidxer | June 28, 2008

在前面的Flex中将颜色格式化为字符串的例子中，我们了解了Flex中如何利用一个Slider来选取一个方框中0×000000 (black)和0xFFFFFF (white)之间的背景颜色数据，并且将格式化好的数据显示在slider的tooltip中。接下来的例子演示了Flex中如何使用ColorPicker控件colorField和labelField属性，显示颜色的名字。

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


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

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="white">
  3.  
  4.     <mx:Script>
  5.         <![CDATA[
  6.             private function intToHex(color:int = 0):String {
  7.                 var mask:String = "000000";
  8.                 var str:String = mask + color.toString(16).toUpperCase();
  9.                 return "#" + str.substr(str.length - 6);
  10.             }
  11.         ]]>
  12.     </mx:Script>
  13.  
  14.     <mx:Array id="colorPicker_dataProvider">
  15.         <mx:Object name="black" value="0x000000" />
  16.         <mx:Object name="blue" value="0x0000FF" />
  17.         <mx:Object name="green" value="0x008000" />
  18.         <mx:Object name="gray" value="0x808080" />
  19.         <mx:Object name="silver" value="0xC0C0C0" />
  20.         <mx:Object name="lime" value="0x00FF00" />
  21.         <mx:Object name="olive" value="0x808000" />
  22.         <mx:Object name="white" value="0xFFFFFF" />
  23.         <mx:Object name="yellow" value="0xFFFF00" />
  24.         <mx:Object name="maroon" value="0x800000" />
  25.         <mx:Object name="navy" value="0x000080" />
  26.         <mx:Object name="red" value="0xFF0000" />
  27.         <mx:Object name="purple" value="0x800080" />
  28.         <mx:Object name="teal" value="0x008080" />
  29.         <mx:Object name="fuchsia" value="0xFF00FF" />
  30.         <mx:Object name="aqua" value="0x00FFFF" />
  31.         <mx:Object name="magenta" value="0xFF00FF" />
  32.         <mx:Object name="cyan" value="0x00FFFF" />
  33.  
  34.         <mx:Object name="halogreen" value="0x80FF4D" />
  35.         <mx:Object name="haloblue" value="0x009DFF" />
  36.         <mx:Object name="haloorange" value="0xFFB600" />
  37.         <mx:Object name="halosilver" value="0xAECAD9" />
  38.     </mx:Array>
  39.  
  40.     <mx:HBox width="{box.width}">
  41.         <mx:ColorPicker id="colorPicker" dataProvider="{colorPicker_dataProvider}" colorField="value" labelField="name" editable="false" change="box.setStyle('backgroundColor', event.color);" />
  42.         <mx:Label text="{intToHex(colorPicker.selectedColor)} {colorPicker.selectedColor}" />
  43.     </mx:HBox>   
  44.  
  45.     <mx:Box id="box" width="200" height="100" />   
  46.  
  47. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

Topics: Flex | Tags: , , , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads