自定义Flex Panel

自定义Flex Panel

做过很多 B/S、C/S架构的项目，关于B/S架构下的RIA 做过一些，但绝大多数都是自己做框架，如根据参数为页面返回2D图形、为图形加监听、为Grid建立排序等，成熟RIA框架用的不多，公司近期为国外开发一个网络探索工具，需要用到FLEX，FLEX技术以前项目中用到过，一般在项目占很少比例，像这次全部采用FLEX是第一次遇到，本人在开发中遇到一个小问题，就是重写PANEL控件以求达到更改PANEL外观的目的，发现网络上许多同仁都是介绍该如何更改样式，而没有达到重写的目地,同时发现网络上关于此的文章极少，现将自己的方式贴出，希望能对大家有所帮助。

现将重写PANEL的简单步骤列出，最后做代码汇总：

1. 重写一个组件，最好的方式就是继承现有组件
public class define_panel extends Panel
{
}
2. 需要重写panel 组件的3个方法，
updateDsiplayList();
createChildren(); //此方法内可添加一些组件，放入自定义PANEL中
layoutChrom(); //组件的布局指定

layoutChrom 方法在初次渲染及其事件中会多次调用
3. rowChildren.addChildren方法可以将组件添加到容器中来，但子组件应该设置相对与父容器的X、Y坐标，以求更好的显示效果。

4. 本文的思路大体上就是继承PANEL，创建Canvas,这个Canvas上可以添加各种组件（当然你也可以绘制各种图形做成组件），用我们定义的这个Canvas去覆盖PANEL 的title部分。

5. 全部代码如下

define_panel.as

package custom_commpont
{
import flash.events.MouseEvent;
import mx.containers.Canvas;
import mx.containers.Panel;
import mx.controls.Button;
import mx.controls.Image;
import mx.core.*;
import mx.effects.Resize;
import mx.effects.easing.Bounce;
import mx.styles.*;

public class define_panel extends Panel
{

public var btn:Button;
public var can:Canvas;
public var resize:Resize=new Resize();



[Embed(source="../resources/img/defpanel_backimg.jpg")]
private var backgroup_img:Class;

[Embed(source="bulletCheck.png")]
private var ion:Class;


private var iimg:Image=new Image();


//private var img:Image=Image(backgroup_img);

public function define_panel()
{

super();
resize.heightTo=this.height;
resize.easingFunction=Bounce.easeOut;


}



/**
* override updateDisplayList method
*/

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{

super.updateDisplayList(unscaledWidth, unscaledHeight);

titleBar.visible = true;

}

override protected function createChildren():void
{
iimg.source="http://blog.minidx.com/ext02/image2.jpg";



super.createChildren();


can=new Canvas();
can.width=this.width;
can.height=36;
can.toolTip="canvas";
can.setStyle("backgroundColor","blue");
can.setStyle("backgroundAlpha","0.31");
// can.setStyle("backgroundImage","resources/img/defpanel_backimg.jpg");

btn=new Button();
btn.label="最大化/最小化";
btn.width=18;
btn.height=12;
btn.addEventListener(MouseEvent.CLICK,resize_panel);




can.addChild(btn);
// can.addChild(btn1);


this.addChild(iimg);
super.titleIcon=ion;
this.rawChildren.addChild(can);

}

protected override function layoutChrome(unscaledWidth: Number, unscaledHeight:Number):void {
//trace("++1");
super.layoutChrome(unscaledWidth,unscaledHeight);

btn.move(can.width-35,10);
// btn1.move(can.width-btn.width-45,10);
can.move(0,0);



}

private function resize_panel(evt:MouseEvent):void{

resize.heightTo=resize.heightTo==this.titleBar.height?400:this.titleBar.height;

// trace(( resize.heightTo=resize.heightTo==this.titleBar.height?300:this.titleBar.height));
resize.duration=1000;

resize.easingFunction = resize.easingFunction==Bounce.easeOut?Bounce.easeIn:Bounce.easeOut;

resize.target=this;

resize.play();



}


}
}

definepanel.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns="custom_commpont.*">
<ns:define_panel width="400" height="400" id="defpanel" title="自定义PANEL" fontSize="18" x="398" y="193">




</ns:define_panel>
</mx:Application>