FLEX4_下拉Window技术

1.概述
下拉窗体技术在很多地方都要运用到，效果如
     
现在有三种实现技术，下面分别简述

2.通过flexlib开源项目的WindowShade实现
      演示地点：
      优点：功能强大，复用性好，有发展钱途
      缺点：在FLEX4下无法实现open/close时变换图标
      本人虽然通过变通的方法实现，但是不是最理想解决方案

3.通过展示Panel实现
       优点：直接继承panel，实现简单，通过改变panel的长度实现open/close
       缺点：界面死板，header无法设置图标，必须通过点击button才能实现open/close

源代码如下

package flexlib
{
    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="/assets/bullet_green.png")]
        private var backgroup_img:Class;

        [Embed(source="/assets/bullet_red.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="down";
            btn.width=18;
            btn.height=12;
            btn.addEventListener(MouseEvent.CLICK,resize_panel);
            can.addChild(btn);
            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();
        }
    }
}

运行代码如下

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx=""
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:ns="flexlib.*"
               minWidth="955" minHeight="600">
    <ns:define_panel width="800" height="600"/>
</s:Application>

4.通过开源扩展Panel实现
       演示地址：
       优点：直接继承panel，实现简单，通过改变panel的长度实现open/close
       缺点：好象无法在FLEX4下修改源代码，好象无法设置图标，通过双击实现实现open/close
运行代码

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx=""
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:containers="com.arc90.flexlib.containers.*"
               minWidth="955" minHeight="600">
    <containers:CollapsiblePanel title="Collapsible Panel" status="This is status text."   collapseDuration="200" width="400"
                                  height="400"/>
</s:Application>

5.通过状态切换实现
       优点：不知
       缺点：代码大，暂无法运行
代码如下
SkinShade.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:SkinnableContainer xmlns:fx=" "
                      xmlns:s="library://ns.adobe.com/flex/spark"
                      xmlns:mx="library://ns.adobe.com/flex/mx"
                      width="96%" height="70"
                      skinClass="flexlib.MySin">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>


    <fx:Script>
        <![CDATA[
        import com.greensock.TweenMax;
        import com.zctt.alltouch.system.common.event.SysteMenuEvent;

        private var data:Object;

        protected function btnClick(event:MouseEvent):void{
        var btn:Button = event.currentTarget as Button;
        if(btn.styleName == 'downBtn'){
        btn.styleName = 'upBtn';
        TweenMax.to(this,0.6,{height:200});
        info.verticalScrollPolicy = 'auto';
        info.horizontalScrollPolicy = 'auto';
        }else{
        btn.styleName = 'downBtn';
        info.verticalScrollPolicy = 'off';
        info.horizontalScrollPolicy = 'off';
        TweenMax.to(this,0.6,{height:70});
        }
        }

        public function init(obj:Object):void{
        this.data = obj;
        info.text = obj.description;
        title.text = obj.name;
        }

        protected function change(event:MouseEvent):void
        {
        this.dispatchEvent(new SysteMenuEvent(SysteMenuEvent.CHANGE,data));
        }

        ]]>
    </fx:Script>
    <s:Group width="100%" height="35">
        <mx:Image source="assets/bullet_green.png" left="10" bottom="8"/>
        <mx:Label id="title" left="30" bottom="6" height="23"/>

        <mx:Label htmlText="进入" right="70" bottom="8" click="change(event)"/>
        <mx:Button styleName="downBtn" right="30" bottom="8" buttonMode="true" click="btnClick(event)"/>
        <mx:HRule width="98%" height="6" bottom="-2" horizontalCenter="0"/>
    </s:Group>
    <s:Group width="100%" height="100%">
        <mx:TextArea height="100%" id="info" selectable="false" focusEnabled="false" focusAlpha="0" borderVisible="false" width="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off" borderStyle="none" left="60" right="60"/>
    </s:Group>
</s:SkinnableContainer>

mysin.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx=" " xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb=" " alpha.disabled="0.5">

    <fx:Metadata>
        <![CDATA[
        /**
        * @copy spark.skins.spark.ApplicationSkin#hostComponent
        */
        [HostComponent("spark.components.SkinnableContainer")]
        ]]>
    </fx:Metadata>

    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>

    <!--- Defines the appearance of the SkinnableContainer class's background. -->












    
            
              
			  
			  
				
window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
				
			  
              阅读(3468) | 评论(0) | 转发(0) |
			                
            
            
            
              0
              上一篇：mx.core.IDataRenderer
              下一篇：FLEX4_显示滚动条