只要是java程序员都会喜欢flex的

在这里想表达的是flex是一种面对对象的语言，我是一个java程序员，由于这点我真的很喜欢flex。
一个简单的例子。通常对某个事物进行Edit,View,Add的操作会在一个页面文件编写代码。
因为不同操作的页面都差不多。
当View时页面不可编辑，
当Edit时页面会填充之前对象的信息，
当Add时页面会是等待用户填充信息的。
Edit和Add可能会有Save Button,而View就不会有。
Edit和Add可以编辑，而View不能编辑。
Edit和View页面有对象的信息，而Add是空白信息，等待用户填写。
面对这些我们该如何设计呢？

(我画了UML图搞了半天,没贴上来.呵呵,博客新手来着)
这里我们需要一个父页面，布局，相同的页面元素(save,reset按扭等)放到父页面。
还有一些类似的操作和事件啊如reset(),saveOrUpdate(),validate()放到父页面,子页面可以重写.


这里先编写一个父类 PageItem.mxml，将一些子页面都会用到的属性,方法放在里面。

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
    xmlns:mx="http://www.adobe.com/2006/mxml"
    width="100%"
    height="100%"
        creationComplete="init();"
>
//自定义一些共有的事件
    <mx:Metadata>
        [Event(name="javaeye_addBean",          type="com.javaeye.events.DetailsSectionEvents")]
        [Event(name="javaeye_saveBean",         type="com.javaeye.events.DetailsSectionEvents")]
        [Event(name="javaeye_updateBean",       type="com.javaeye.events.DetailsSectionEvents")]
      //省略...
    </mx:Metadata>
    <mx:Script>
    <![CDATA[
        //import some class we need.

        //表示页面状态的常数
        public static const ADD_MODE:String = "toAdd";
        public static const EDIT_MODE:String = "toEdit";
    public static const VIEW_MODE:String = "toView";

        //页面布局相同,并且很多相同页面元素控件,子页面继承使用。在此未提及
       //Box Content
    public var javaeye_boxContent:Array;
    //Box Buttons
    public var javaeye_boxButtons:Array;

        /////////////////////////////////
    // PAGE MANIPULATION FUNCTIONS //
    /////////////////////////////////
    /** function called upon creationComplete */
    protected function init():void
    {}

        /** enable or disable the appropriate components
          * according to pageState */
        public function javaeye_changePageState(pageState:String):void
    {
        this.pageState = pageState;
        changeButtons(pageState);
    }
    public function javaeye_getPageState():String
    {
        return this.pageState;
    }
    /** hide or show the appropriate action buttons
         * in detail page according to pageState */
        protected function changeButtons(pageMode:String):void
    {}
        //这里还有一些方法，saveOrUpdateItem,restForm(),validateForm().页面布局,页面元素 省略...
    ]]>
    </mx:Script>
</mx:Canvas>

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
	xmlns:mx="http://www.adobe.com/2006/mxml"
	width="100%" 
	height="100%"
        creationComplete="init();"
>	
//自定义一些共有的事件
	<mx:Metadata>
	 	[Event(name="javaeye_addBean", 			type="com.javaeye.events.DetailsSectionEvents")]
	 	[Event(name="javaeye_saveBean", 		type="com.javaeye.events.DetailsSectionEvents")]
	 	[Event(name="javaeye_updateBean", 		type="com.javaeye.events.DetailsSectionEvents")]
      //省略...
	</mx:Metadata> 
	<mx:Script>
	<![CDATA[
        //import some class we need.
        
        //表示页面状态的常数
        public static const ADD_MODE:String = "toAdd";
        public static const EDIT_MODE:String = "toEdit";
	public static const VIEW_MODE:String = "toView";

        //页面布局相同,并且很多相同页面元素控件,子页面继承使用。在此未提及
       //Box Content
	public var javaeye_boxContent:Array;
	//Box Buttons
	public var javaeye_boxButtons:Array;

        /////////////////////////////////
	// PAGE MANIPULATION FUNCTIONS //
	/////////////////////////////////
	/** function called upon creationComplete */
	protected function init():void
	{}

       	/** enable or disable the appropriate components 
       	  * according to pageState */
       	public function javaeye_changePageState(pageState:String):void
	{
		this.pageState = pageState;
		changeButtons(pageState);
	}	
	public function javaeye_getPageState():String
	{
		return this.pageState;
	}
	/** hide or show the appropriate action buttons
       	 * in detail page according to pageState */
       	protected function changeButtons(pageMode:String):void
	{}
        //这里还有一些方法，saveOrUpdateItem,restForm(),validateForm().页面布局,页面元素 省略...
    ]]>
	</mx:Script>
</mx:Canvas>

自定义事件类 DetailsSectionEvents

package com.javaeye.events
{
    import flash.events.Event;

    public class DetailsSectionEvents extends Event
    {
            //Event Type
        public static const SAVE:String   = "javaeye_saveBean";
        public static const UPDATE:String   = "javaeye_updateBean";
            //省略...

        private var bean:Object;

        public function DetailsSectionEvents(type:String, bean:Object=null)
        {
            super(type,true);
            this.bean = bean;
        }

        override public function clone():Event
        {
            return new DetailsSectionEvents(type, bean);
        }
        //控制器监听并接受到事件时，可以得到当前的对象
        public function cme_getBean():Object
        {
            return this.bean;
        }
    }
}

package com.javaeye.events
{    
	import flash.events.Event;
	
	public class DetailsSectionEvents extends Event
	{
            //Event Type
	    public static const SAVE:String   = "javaeye_saveBean";
	    public static const UPDATE:String   = "javaeye_updateBean";
            //省略...            

	    private var bean:Object;
	    
	    public function DetailsSectionEvents(type:String, bean:Object=null)
	    {
	        super(type,true);
	        this.bean = bean;
	    }
	    
	    override public function clone():Event
	    {
	        return new DetailsSectionEvents(type, bean);
	    }
	    //控制器监听并接受到事件时，可以得到当前的对象
	    public function cme_getBean():Object
	    {
	    	return this.bean;
	    }
	}
}

只要是正对某个对象View,Add或Edit的页面,都继承PageItem页面。

<?xml version="1.0" encoding="utf-8"?>
//继承了PageItem类
<pageItem:PageItem
    xmlns:mx="http://www.adobe.com/2006/mxml"
>

    <mx:Script>
        <![CDATA[
            override public function javaeye_changePageState(flag:String):void
            {
                super.javaeye_changePageState(flag);

                if(flag==PageItem.ADD_MODE)
                {
                                   //设置Add状态时页面元素的状态,visible and    includeInLayout 等
                }else if(flag==PageItem.EDIT_MODE)
                {
                                   //设置Edit状态时页面元素的状态,
                }
                else  if(flag==PageItem.VIEW_MODE)
                {
                                   //设置view状态时页面元素的状态,
                }
            }

            override protected function changeButtons(flag:String):void
            {
                if(flag==DetailPageItem.VIEW_MODE)
                {
                                        //设置控件是否可见,是否加载
                    showUIComponent(btnDone,false);
                    showUIComponent(btnReset,false);
                }
                else if(flag==DetailPageItem.ADD_MODE||flag==DetailPageItem.EDIT_MODE)
                {
                    showUIComponent(btnDone,true);
                    showUIComponent(btnReset,true);
                }
            }

                        //save 按钮点击时出发的事件
            override protected function saveOrUpdateItem():void
            {
                           //将页面的信息填充到form中
                           Object formObj = fillObject();
                           //抛出事件,并且将Bean传递.control通过事件类型对Bean进行不同操作。
                            dispatchEvent(new DetailsSectionEvents(DetailsSectionEvents.SAVE,formObj));
                        }

        ]]>
    </mx:Script>

      <pageItem:cme_boxContent>
        <mx:HBox width="100%" paddingRight="22" verticalGap="5" horizontalGap="5">
            //页面元素继承并扩展父类的.省略....
        </mx:HBox>
      </pageItem:cme_boxContent>
    <pageItem:cme_boxButtons>
                //按钮继承ButtonItem.mxml.
        <navigation:ButtonItem id="btnDone" javaeye_type="save" click="saveOrUpdateItem();" />
        <navigation:ButtonItem id="btnReset" javaeye_type="reset" click="reset();" />
    </pageItem:cme_boxButtons>

<?xml version="1.0" encoding="utf-8"?>
//继承了PageItem类
<pageItem:PageItem
	xmlns:mx="http://www.adobe.com/2006/mxml" 
>

	<mx:Script>
		<![CDATA[
			override public function javaeye_changePageState(flag:String):void
			{
				super.javaeye_changePageState(flag);

				if(flag==PageItem.ADD_MODE)
				{	
                                   //设置Add状态时页面元素的状态,visible and 	includeInLayout 等		
				}else if(flag==PageItem.EDIT_MODE)
				{
                                   //设置Edit状态时页面元素的状态,
				}
				else  if(flag==PageItem.VIEW_MODE)
				{
                                   //设置view状态时页面元素的状态,
				}
			}				
			
			override protected function changeButtons(flag:String):void
			{
	 			if(flag==DetailPageItem.VIEW_MODE)
	 			{
                                        //设置控件是否可见,是否加载
				 	showUIComponent(btnDone,false);
				 	showUIComponent(btnReset,false);
	 			}
	 			else if(flag==DetailPageItem.ADD_MODE||flag==DetailPageItem.EDIT_MODE)
	 			{
	 				showUIComponent(btnDone,true);
				 	showUIComponent(btnReset,true);
	 			}
			}
                        
                        //save 按钮点击时出发的事件
			override protected function saveOrUpdateItem():void
			{
                           //将页面的信息填充到form中
                           Object formObj = fillObject();
                           //抛出事件,并且将Bean传递.control通过事件类型对Bean进行不同操作。
                            dispatchEvent(new DetailsSectionEvents(DetailsSectionEvents.SAVE,formObj));
                        }
	
		]]>
	</mx:Script>

      <pageItem:cme_boxContent>
		<mx:HBox width="100%" paddingRight="22" verticalGap="5" horizontalGap="5">
			//页面元素继承并扩展父类的.省略....
		</mx:HBox>	
      </pageItem:cme_boxContent>
	<pageItem:cme_boxButtons>
                //按钮继承ButtonItem.mxml.
		<navigation:ButtonItem id="btnDone" javaeye_type="save" click="saveOrUpdateItem();" />	
	 	<navigation:ButtonItem id="btnReset" javaeye_type="reset" click="reset();" />
	</pageItem:cme_boxButtons>

这里涉及到了继承和多态。等我辞工后,想仔细认真学习下设计模式,并将他运用到自己的flex工程中...
flex面对对象的编程思想,还有flex那种绚丽的效果.我非常看好和喜欢她!!

评论

3 楼 ddandyy 2008-06-03  

不喜欢界面很炫的东西

2 楼 zgqynx 2008-06-03  

看了这个贴，才知道有flex。看来是落伍很多啊

1 楼 nsrainbow 2008-06-02  

flex现在也开源了，结合上富客户端，能实现很炫的效果，很值得学习