在Flex中使用Delegate pattern來設(shè)計更好的對話框作者:未知 【字體:
大 中 小】【顏色:
紅 綠 藍(lán) 黑】
在Flex中使用Delegate pattern來設(shè)計更好的對話框
不同于C#和Java, Flex 并沒有定義一個明確的Dialog模式,我們常常使用popUp作為對話框, 可是每個人的實(shí)現(xiàn)方法各不相同,因此在這里我想介紹一種比較靈活的設(shè)計供大家參考.
Delegate是Flex中很有用的一個utility類,它起到了封裝一個callback同時保留其this指針的作用。它的用法很類似于C#中的Delegate只不過由于javascript是weak type,所以實(shí)現(xiàn)上更容易些。
我們可以在大多數(shù)需要callback的地方使用Delegate,而不用擔(dān)心this的問題。關(guān)于這個class的用法DevNet上有詳細(xì)的介紹,我就不多羅嗦了。這里主要用Delegate來設(shè)計一個比較靈活的Dialog。
在 應(yīng)用設(shè)計中,我們應(yīng)該注意到每個popup dialog應(yīng)該盡可能地被重復(fù)利用,打個比方一個輸入用戶信息的dialog, 即可能被建立用戶的函數(shù)使用也可能被修改用戶的函數(shù)使用。因此這個 dialog class不應(yīng)該依賴于它的parent.其作用就是接受一個user object讓用戶編輯并且在用戶按了ok后調(diào)用指定的callback并傳入被修改的user object.
以 下范例演示了如何利用Delegate來傳遞用戶數(shù)據(jù), 當(dāng)用戶調(diào)用createUser()的時候,Delegate封裝了onCreateUser()這個callback函數(shù),而當(dāng)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();
}