在Flex中使用Delegate pattern来设计更好的对话框
不同于C#和Java, Flex 并没有定义一个明确的Dialog模式,我们常常使用popUp作为对话框, 可是每个人的实现方法各不相同,因此在这里我想介绍一种比较灵活的设计供大家参考.
Delegate是Flex中很有用的一个utility类，它起到了封装一个callback同时保留其this指针的作用。它的用法很类似于C#中的Delegate只不过由于javascript是weak type,所以实现上更容易些。
我们可以在大多数需要callback的地方使用Delegate,而不用担心this的问题。关于这个class的用法DevNet上有详细的介绍，我就不多罗嗦了。这里主要用Delegate来设计一个比较灵活的Dialog。
在
应用设计中，我们应该注意到每个popup
dialog应该尽可能地被重复利用，打个比方一个输入用户信息的dialog, 即可能被建立用户的函数使用也可能被修改用户的函数使用。因此这个
dialog class不应该依赖于它的parent．其作用就是接受一个user
object让用户编辑并且在用户按了ok后调用指定的callback并传入被修改的user object.
以
下范例演示了如何利用Delegate来传递用户数据,
当用户调用createUser()的时候,Delegate封装了onCreateUser()这个callback函数,而当modifyUser
()的时候,Delegate则封装了onModifyUser()这个callback. 整个过程中User
Dialog并不需要知道究竟是谁在呼叫它.
//--------------------------
// Application.mxml
//-------------------------
function beginPopUp(popUpClass, popUpSize, initObj)
{
var w = popUpSize.w;
var h = popUpSize.h;
initObj.x = (this.width-w)/2;
initObj.y = (this.height-h)/2;
var popUp = popupWindow(popUpClass, initObj);
popUp.setSize(w,h);
return popUp;
}
function createUser()
{
beginPopUp( UserDialog, {w:600, h:450}, {delegate:Delegate.create(this, onCreateUser), title:"Create user", user:new User()});
}
function onCreateUser(newUser:User)
{
trace("Created a new user");
}
function modifyUser(user:User)
{
beginPopUp( UserDialog, {w:600, h:450}, {delegate:Delegate.create(this, onCreateUser), title:"Modify user", user:user});
}
function onModifyUser(modifiedUser:User)
{
trace("Modified a user");
}
//-----------------------
// UserDialog.mxml
//----------------------
function doClose(isOk)
{
if (isOk)
{
delegate(dataObj);
}
this.deletePopUp();
}
|
