在这里想表达的是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>
自定义事件类 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;
}
}
}
只要是正对某个对象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>
这里涉及到了继承和多态。等我辞工后,想仔细认真学习下设计模式,并将他运用到自己的flex工程中...
flex面对对象的编程思想,还有flex那种绚丽的效果.我非常看好和喜欢她!!
分享到:
相关推荐
Java程序员学习Flex和BlazeDS.doc
下载不扣分,回帖加1分。 此压缩包, 【包括】 1>一套Flex基础教程的PPT。 2>FLEX和JAVA整合的技术...│ Flex.pdf │ J2EE项目整合FLEX项目.doc │ 在eclipse 的一个项目中同时开发j2ee模块和flex 客户端模块.doc │
博文链接:https://hacker47.iteye.com/blog/182364
博文链接:https://hacker47.iteye.com/blog/182371
在分享这几种配置之前,先简单的介绍一下需要用到的...Flex+Java配置:第一种: Java工程和 Flex 工程独立,这种方式也是很多人使用的方式, Flex程序员和 Java程序员相互独立的工作.第二种:Flex工程加入 Java 元素.
Flex程序员开发指南
为一个 Java程序员学习 Flex,关心的就是怎样将 Flex和 Java进行结合交互。带着Java程序 员的思维,一开始学习 Flex 并没有按部就班的学习 Flex 的基础知识,而是想搞清楚 Flex 到 底怎样和 Java 交互的。经过了一个...
RIA在Web应用体系结构中提供富客户端操作体验,其目标是整合桌面客户端和WEB应用程序的优势,而常用的开发技术就是如上提到的Java,JavaScript,Flash/Flex。AJAX既不是一个产品也不是一项新技术,但它确实是RIA体系...
作为一个Java程序员学习Flex,关心的就是怎样将Flex和Java进行结合交互,本文手把手教你如何整合Flex和Java。
不是自己写的,但是能够解决java程序员学习flex过程中的种种问题,经过本人验证完全适合阅读。
第一种:Java工程和Flex工程独立,这种方式很多人在使用,Flex程序员和Java程序员相互独立的工作。 第二种:Flex工程加入Java元素。(编译出来为html文件) 第三种:由Web project工程反向加入Flex,也就是...
Flex+Blazed+J2EE 框架塔建,基本链接方式模板,封装flex代码,显示mxml与as剥离。flex代码分为3层,组件、控制、显示。包含大量注释,案例,帮助你10分钟理解felx开发,...创建了java程序员操作flex框架代码的桥梁。
Flex例子Flex例子Flex例子Flex例子Flex例子Flex例子