自定义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>

评论

1 楼 guying1028 2011-05-19  

背景图片还是加不上啊............