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