`
pengyeer
  • 浏览: 33998 次
  • 性别: Icon_minigender_1
  • 来自: 成都
文章分类
社区版块
存档分类
最新评论

只要是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,将一些子页面都会用到的属性,方法放在里面。
Js代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>   
  2. <mx:Canvas   
  3.     xmlns:mx="http://www.adobe.com/2006/mxml"  
  4.     width="100%"    
  5.     height="100%"  
  6.         creationComplete="init();"  
  7. >       
  8. //自定义一些共有的事件   
  9.     <mx:Metadata>   
  10.         [Event(name="javaeye_addBean",          type="com.javaeye.events.DetailsSectionEvents")]   
  11.         [Event(name="javaeye_saveBean",         type="com.javaeye.events.DetailsSectionEvents")]   
  12.         [Event(name="javaeye_updateBean",       type="com.javaeye.events.DetailsSectionEvents")]   
  13.       //省略...   
  14.     </mx:Metadata>    
  15.     <mx:Script>   
  16.     <![CDATA[   
  17.         //import some class we need.   
  18.            
  19.         //表示页面状态的常数   
  20.         public static const ADD_MODE:String = "toAdd";   
  21.         public static const EDIT_MODE:String = "toEdit";   
  22.     public static const VIEW_MODE:String = "toView";   
  23.   
  24.         //页面布局相同,并且很多相同页面元素控件,子页面继承使用。在此未提及   
  25.        //Box Content   
  26.     public var javaeye_boxContent:Array;   
  27.     //Box Buttons   
  28.     public var javaeye_boxButtons:Array;   
  29.   
  30.         /////////////////////////////////   
  31.     // PAGE MANIPULATION FUNCTIONS //   
  32.     /////////////////////////////////   
  33.     /** function called upon creationComplete */  
  34.     protected function init():void  
  35.     {}   
  36.   
  37.         /** enable or disable the appropriate components   
  38.           * according to pageState */  
  39.         public function javaeye_changePageState(pageState:String):void  
  40.     {   
  41.         this.pageState = pageState;   
  42.         changeButtons(pageState);   
  43.     }      
  44.     public function javaeye_getPageState():String   
  45.     {   
  46.         return this.pageState;   
  47.     }   
  48.     /** hide or show the appropriate action buttons  
  49.          * in detail page according to pageState */  
  50.         protected function changeButtons(pageMode:String):void  
  51.     {}   
  52.         //这里还有一些方法,saveOrUpdateItem,restForm(),validateForm().页面布局,页面元素 省略...   
  53.     ]]>   
  54.     </mx:Script>   
  55. </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
Js代码 复制代码
  1. package com.javaeye.events   
  2. {       
  3.     import flash.events.Event;   
  4.        
  5.     public class DetailsSectionEvents extends Event   
  6.     {   
  7.             //Event Type   
  8.         public static const SAVE:String   = "javaeye_saveBean";   
  9.         public static const UPDATE:String   = "javaeye_updateBean";   
  10.             //省略...               
  11.   
  12.         private var bean:Object;   
  13.            
  14.         public function DetailsSectionEvents(type:String, bean:Object=null)   
  15.         {   
  16.             super(type,true);   
  17.             this.bean = bean;   
  18.         }   
  19.            
  20.         override public function clone():Event   
  21.         {   
  22.             return new DetailsSectionEvents(type, bean);   
  23.         }   
  24.         //控制器监听并接受到事件时,可以得到当前的对象   
  25.         public function cme_getBean():Object   
  26.         {   
  27.             return this.bean;   
  28.         }   
  29.     }   
  30. }  
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页面。
Js代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>   
  2. //继承了PageItem类   
  3. <pageItem:PageItem   
  4.     xmlns:mx="http://www.adobe.com/2006/mxml"    
  5. >   
  6.   
  7.     <mx:Script>   
  8.         <![CDATA[   
  9.             override public function javaeye_changePageState(flag:String):void  
  10.             {   
  11.                 super.javaeye_changePageState(flag);   
  12.   
  13.                 if(flag==PageItem.ADD_MODE)   
  14.                 {      
  15.                                    //设置Add状态时页面元素的状态,visible and    includeInLayout 等          
  16.                 }else if(flag==PageItem.EDIT_MODE)   
  17.                 {   
  18.                                    //设置Edit状态时页面元素的状态,   
  19.                 }   
  20.                 else  if(flag==PageItem.VIEW_MODE)   
  21.                 {   
  22.                                    //设置view状态时页面元素的状态,   
  23.                 }   
  24.             }                  
  25.                
  26.             override protected function changeButtons(flag:String):void  
  27.             {   
  28.                 if(flag==DetailPageItem.VIEW_MODE)   
  29.                 {   
  30.                                         //设置控件是否可见,是否加载   
  31.                     showUIComponent(btnDone,false);   
  32.                     showUIComponent(btnReset,false);   
  33.                 }   
  34.                 else if(flag==DetailPageItem.ADD_MODE||flag==DetailPageItem.EDIT_MODE)   
  35.                 {   
  36.                     showUIComponent(btnDone,true);   
  37.                     showUIComponent(btnReset,true);   
  38.                 }   
  39.             }   
  40.                            
  41.                         //save 按钮点击时出发的事件   
  42.             override protected function saveOrUpdateItem():void  
  43.             {   
  44.                            //将页面的信息填充到form中   
  45.                            Object formObj = fillObject();   
  46.                            //抛出事件,并且将Bean传递.control通过事件类型对Bean进行不同操作。   
  47.                             dispatchEvent(new DetailsSectionEvents(DetailsSectionEvents.SAVE,formObj));   
  48.                         }   
  49.        
  50.         ]]>   
  51.     </mx:Script>   
  52.   
  53.       <pageItem:cme_boxContent>   
  54.         <mx:HBox width="100%" paddingRight="22" verticalGap="5" horizontalGap="5">   
  55.             //页面元素继承并扩展父类的.省略....   
  56.         </mx:HBox>       
  57.       </pageItem:cme_boxContent>   
  58.     <pageItem:cme_boxButtons>   
  59.                 //按钮继承ButtonItem.mxml.   
  60.         <navigation:ButtonItem id="btnDone" javaeye_type="save" click="saveOrUpdateItem();" />       
  61.         <navigation:ButtonItem id="btnReset" javaeye_type="reset" click="reset();" />   
  62.     </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现在也开源了,结合上富客户端,能实现很炫的效果,很值得学习

相关推荐

    java程序员试用期转正工作总结.doc

    在该项目中,Java 程序员主要负责 Web 端的模块开发,学习和掌握了 Flex 界面开发、Hibernate 和 Oracle 数据库等技术。此外,Java 程序员还学习了公司的企业文化和产品框架,并与同事沟通、学习经验,希望能更快地...

    Java程序员最全面的学习路线图

    Java程序员在学习和成长过程中需要掌握的技术和知识点是全面且深入的。从基础的前端技术到后端服务器架构,再到开发工具和开发流程,每一项都是Java程序员成长道路上不可或缺的部分。以下详细解析了Java程序员需要...

    FLEX资源——Java程序员学Flex(上)

    博文链接:https://hacker47.iteye.com/blog/182364

    FLEX资源——Java程序员学Flex(下)

    博文链接:https://hacker47.iteye.com/blog/182371

    Flex与Java整合demo

    这种模式下,Flex程序员和Java程序员可以独立工作,配置资料网络上已经很丰富,本文不再赘述。 **第二步**:将Java元素融入Flex工程。 1. 在Flex视图中,新建一个Flex项目,并指定Java源码的根目录。在Flex ...

    2022年java程序员的转正工作总结.docx

    【Java程序员转正工作总结】 作为一名Java程序员,转正不仅是对工作能力的认可,更是个人职业发展的重要里程碑。在2022年的转正工作总结中,我们可以看到这位程序员在多个方面都有所提升,以下是对这些关键点的详细...

    java程序员试用期个人工作总结.doc

    【Java程序员试用期工作总结】 作为一名Java程序员,试用期是一个关键阶段,它不仅涉及到技能的磨练,还包括对工作流程、团队协作和公司文化的适应。以下是对试用期内所涉及的重要知识点的详细阐述: 1. **面向...

    Flex学习大礼包(flex基础教程、flex和java整合)--下载不扣分,童叟无欺

    2&gt;具有FLEX基础的JAVA程序员 3&gt;具有JAVA基础的FLEX程序员 4&gt;JAVA程序员 4&gt;FLEX程序员 【目录如下】 Flex大礼包 └─Flex教程 第01章 Flex简介.ppt 第02章 MXML.ppt 第03章 ActionScript 3.0.ppt 第04章 Flex中的...

    (完整版)JAVA程序员英文简历.doc

    本文将深入分析“完整版JAVA程序员英文简历.doc”,并提供一个综合视角,以期为读者展现一个专业Java程序员的全方位形象。 首先,个人基本信息是简历中最先展示的部分。在本简历中,个人信息简洁明了,凸显了程序员...

    flex与Java及tomcat整合开发

    这是最常见的整合方式,Flex程序员与Java程序员分别负责前端与后端的开发,最后将两者整合在一起。 ##### 方式二:Flex项目加入Java元素 此方式适合团队协作开发,具体步骤如下: 1. **新建Flex项目**:在...

    java程序员个人实习总结范文.doc

    【Java程序员实习总结】 作为一名Java程序员,实习是理论与实践结合的重要阶段,是提升个人专业技能的关键时期。在实习期间,我深入理解了Java开发语言和环境,通过实际项目锻炼了编程能力,同时对公司的开发流程和...

    java程序员试用期转正工作总结范文.doc

    作为一名Java程序员,试用期转正的工作总结是对个人在试用期内的工作表现、学习成果以及问题反思的重要记录。以下是对这段工作总结的详细解读: 1. **技术学习与掌握**: - Java开发语言:在试用期内,员工掌握了...

Global site tag (gtag.js) - Google Analytics