flex调色板功能实现
需求描述：调色板（假设通过RGB调节），可以通过选择或者输入改变，也收到socket发送的RGB值后改变。另外，主界面有滑动条调节亮度。如果不用socket发送RBG，则可以直接参照列出的参考网址2即可。
成品及文件的说明如下：
CustomSocket.as完整代码：
package {
import flash.errors.*;
import flash.events.*;
import flash.net.Socket;
public class CustomSocket extends Socket {
public var receivetext:String = "";
public function CustomSocket(host:String = null, port:uint = 0) {
super();
configureListeners();
if (host && port) {
super.connect(host, port);
}
}
private function configureListeners():void {
addEventListener(Event.CLOSE, closeHandler);
addEventListener(Event.CONNECT, connectHandler);
addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler);
addEventListener(ProgressEvent.SOCKET_DATA, socketDataHandler);
}
private function closeHandler(event:Event):void {
trace("closeHandler: " + event);
}
private function connectHandler(event:Event):void {
trace("connectHandler: " + event);
}
private function ioErrorHandler(event:IOErrorEvent):void {
trace("ioErrorHandler: " + event);
}
private function securityErrorHandler(event:SecurityErrorEvent):void {
trace("securityErrorHandler: " + event);
}
private function socketDataHandler(event:ProgressEvent):void {
trace("socketDataHandler: " + event);
receivetext = readUTFBytes(bytesAvailable);
}
}
}
socket文件的一些说明：
1、主要用到的函数是连接函数和读取，其他只是由于程序完整性列出。
2、由于客户端需要收到RGB值进行改变，所以需要添加read，即最后一个函数
mxml完整代码：
<?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" minWidth="955" minHeight="600"
creationComplete="initApp()">
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.utils.ColorUtil;
public var socket:CustomSocket = new CustomSocket("127.0.0.1", 8001);
protected function ChangeHandler():void{
var brite:uint=slider.value;
var adjustedColor:uint = ColorUtil.adjustBrightness(colorPicker.selectedColor, brite);
box.setStyle("backgroundColor",adjustedColor);
socket.writeUnsignedInt(colorPicker.selectedColor);
socket.flush();//发送当前RGB
}
protected function initApp():void{
socket.addEventListener(ProgressEvent.SOCKET_DATA,socketDataHandler);
}
protected function socketDataHandler(event:ProgressEvent):void{
colorPicker.selectedColor = Number(Number("0x" + socket.receivetext).toString(10));
box.setStyle("backgroundColor",colorPicker.selectedColor);
}
]]>
</fx:Script>
<mx:ColorPicker x="59" y="168" change="ChangeHandler()" id="colorPicker"/>
<s:HSlider x="145" y="168" width="288" height="22"
maximum="150" minimum="0"
change="ChangeHandler()" id="slider"/>
<s:Label x="145" y="198" text="亮度" height="19"/>
<s:BorderContainer x="57" y="257" id="box"/>
<s:Label x="57" y="370" text="示范颜色" width="51" height="11"/>
</s:Application>
关于MXML的一些说明：
1、ColorPicker控件只根据选择的或者收到的RGB值显示颜色，对亮度没有影响，所以添加BorderContainer控件用于显示示范颜色，在收到socket发送的RGB值时，2个控件同时更新，所以直接将selectedColor属性赋值为收到的值，且container直接setStyle为selectedColor
2、考虑到socket发送值可能改变RGB值，所以程序启动就开始监听socket
3、Hslider和ColorPicker中值的变化都会改变显示，所以两个共用change响应函数。一点小问题是，当发送当前RGB到服务器验证的时候，由于滑动，会收到过多的数据
4、滑动条主要用到ColorUtil类。ColorUtil 类是一个全静态类，其方法用于处理 Flex 内的 RGB 颜色。不创建 ColorUtil 的实例；只是调用如 ColorUtil.adjustBrightness() 之类的静态方法。这里调用的adjustBrightness()方法，虽然理论上，第二个参数范围为 -255 到 255；-255 生成黑色，255 生成白色。如果此参数为 0，则返回的 RGB 颜色与原始颜色相同。不过这里由于调解后效果不明显， 改为0-150了，另外，可以参考adjustBrightness2()方法。
6、为了更清晰的表示RGB，我们可以参考网址1添加函数，然后label控件绑定，将colorPicker的selectedColor用如下函数：
private function fixedInt(value:int, mask:String):String
{
return String(mask + value.toString(16)).substr(-mask.length).toUpperCase();
}
运行结果：
服务端输入RGB：66ff66后
客户端变为：（当然，初始时为黑色）
调解颜色后：
此时，server也收到传送的RGB值，当然，由于滑动条的原因，比较多，不过数值为66ff66
至此，搞定。
至今搞定的flex都是小东东，只是可能性设计，明天居然让搭web服务器，哎。。。。
参考网址：
1、http://javacrazyer.iteye.com/blog/732631 //获取单独的flex值
2、http://blog.minidx.com/2008/08/02/1209.html //利用colorutil调节亮度