
平臺(tái) 論壇博客文庫(kù)

› 論壇 › 程序設(shè)計(jì) › PHP › FleaPHP 的 Ajax 支持和 WebControls

最近訪問(wèn)板塊

查看: 2648 | 回復(fù): 5

FleaPHP 的 Ajax 支持和 WebControls [復(fù)制鏈接]

dualface

豐衣足食

論壇徽章:: 0

電梯直達(dá)

1樓 [收藏(0)] [報(bào)告]

發(fā)表于 2006-12-06 14:51 |只看該作者 |倒序?yàn)g覽

FleaPHP 現(xiàn)在具有了基本的 Ajax 支持，示例代碼如下：

首先在控制器顯示模版的動(dòng)作方法中有如下代碼：

/**
* 顯示登錄界面
*/
function actionIndex()
{
$this->_registerFormEvent('form_login', 'submit', 'OnFormLoginSubmit',
array(
'beforeRequest' => "\$('loginFailed').setHTML('');",
'evalScripts' => true,
'update' => 'loginFailed'
)
);
$ajax =& $this->_getAjax();
init_webcontrols();
include(TPL_DIR . '/Login.php');
}

復(fù)制代碼

_registerFormEvent() 是 FLEA_Controller_Action 的一個(gè)方法，用來(lái)注冊(cè)一個(gè)表單的事件。
如果是注冊(cè)控件（例如文本框）的事件，則用 _registerEvent() 方法。

兩個(gè)方法的參數(shù)是一樣的，第一個(gè)參數(shù)都是控件或者表單的ID，第二個(gè)參數(shù)是要注冊(cè)的 DOM 事件（例如 click、change、submit）。第三個(gè)參數(shù)是當(dāng)前控制器中用于響應(yīng)該事件的動(dòng)作名。第四個(gè)參數(shù)則是一些 Ajax 事件的屬性。

上面代碼里面為一個(gè)名為 form_login 的表單注冊(cè)了一個(gè) submit 事件，響應(yīng)該事件的動(dòng)作名是 OnFormLoginSubmit。

init_webcontrols(); 是用于初始化 WebControls，因?yàn)?Login.php 模版會(huì)用到 WebControls。

所以這個(gè)控制器還有一個(gè)方法如下：

function actionOnFormLoginSubmit()
{
$username = isset($_POST['username']) ? $_POST['username'] : '';
$password = isset($_POST['password']) ? $_POST['password'] : '';
if ($username == 'dualface' && $password == '123456') {
ajax_redirect(url('Welcome'));
} else {
echo '您輸入的用戶名或密碼不正確';
}
}

復(fù)制代碼

這個(gè)方法里面，判斷用戶登錄是否成功。成功就用 ajax_redirect() 重定向?yàn)g覽器，失敗則顯示出錯(cuò)信息。要注意的是，ajax_redirect() 要求事件 Ajax 屬性中的 evalScripts 必須為 true。這樣才能成功的重定向?yàn)g覽器。

整個(gè)控制器的代碼：

class Controller_Default extends FLEA_Controller_Action
{
/**
* 顯示登錄界面
*/
function actionIndex()
{
$this->_registerFormEvent('form_login', 'submit', 'OnFormLoginSubmit',
array(
'beforeRequest' => "\$('loginFailed').setHTML('');",
'evalScripts' => true,
'update' => 'loginFailed'
)
);
$ajax =& $this->_getAjax();
init_webcontrols();
include(TPL_DIR . '/Login.php');
}
function actionOnFormLoginSubmit()
{
$username = isset($_POST['username']) ? $_POST['username'] : '';
$password = isset($_POST['password']) ? $_POST['password'] : '';
if ($username == 'dualface' && $password == '123456') {
ajax_redirect(url('Welcome'));
} else {
echo '您輸入的用戶名或密碼不正確';
}
}
}

復(fù)制代碼

非常簡(jiǎn)單，不需要修改任何應(yīng)用程序設(shè)置，也不需要從特別的對(duì)象繼承。而且只有在顯示模版的動(dòng)作方法中才需要注冊(cè)事件（會(huì)載入 Ajax 的支持文件），其他動(dòng)作方法不需要載入任何與 Ajax 相關(guān)的文件，提高了性能。

客戶端需要的 JavaScript 會(huì)自動(dòng)生成：

<script language="JavaScript" type="text/javascript">
if (!Object. extend) {
alert('ERROR: mootools JavaScript framework failed.');
}
function ajax_form_login_onsubmit()
{
$('loginFailed').setHTML('');
var myajax = new Ajax(
'/__personal/magazine/www/index.php?controller=Default&action=OnFormLoginSubmit',
{
postBody: this.toQueryString(),
evalScripts: true,
update: "loginFailed"
}
);
myajax.request();
return false;
}
Window.onDomReady(function() {
$('form_login').addEvent('submit', ajax_form_login_onsubmit)
$('form_login').onsubmit = function() { return false; };
});
</script>

復(fù)制代碼

前面是服務(wù)端的代碼，現(xiàn)在來(lái)看看客戶端的代碼。

客戶端主要是模版，其中必須載入 mootools.js 文件：

<script language="JavaScript" type="text/javascript" src="scripts/mootools.js"></script>
<?php $ajax->dumpJs(); ?>

復(fù)制代碼

mootools.js 文件在 FLEA/Ajax 目錄中，需要復(fù)制到應(yīng)用程序的 scripts 目錄中。

前面我們?yōu)槊麨?form_login 的表單注冊(cè)了事件，所以我們的頁(yè)面里面必須有一個(gè)名為 form_login 的表單，不然是不會(huì)正確執(zhí)行的。

<form name="form_login" id="form_login">
................
</form>

復(fù)制代碼

表單中增加一個(gè)提交按鈕，點(diǎn)擊后，我們?cè)诜⻊?wù)端注冊(cè)的事件就會(huì)執(zhí)行。

就這么簡(jiǎn)單？YES

除了注冊(cè)事件、載入 JS 外，其他工作都由 FleaPHP 完成。

FleaPHP 以前版本中有一個(gè) FLEA/Helper/Html.php 文件，其中有許多生成頁(yè)面控件（文本框、列表框）的方法。

不過(guò)這些方法雖然很容易使用，但是不夠靈活，所以現(xiàn)在 FleaPHP 中提供了全新的 WebControls 組件。這個(gè)組件自帶一組控件，還可以隨意擴(kuò)展。要使用這個(gè)組件，預(yù)先調(diào)用一下 init_webcontrols() 全局函數(shù)就可以了。

然后就可以用下面的代碼創(chuàng)建各種控件：

<?php webcontrol('textbox', 'username',
array(
'class' => 'textbox',
'size' => 28,
'maxlength' => 22,
)
); ?>

復(fù)制代碼

這段代碼生成下面的 XHTML 代碼（不支持 HTML）：

<input type="text" name="username" id="username" value="" class="textbox" size="28" maxlength="22" />

復(fù)制代碼

與以前的 html_textbox() 相比，新的 webcontrols() 函數(shù)更靈活，可以為控件指定任意數(shù)量的屬性。

看一個(gè)稍微復(fù)雜點(diǎn)的例子：

<?php webcontrol('radiogroup', 'myoption',
array(
'items' => array(
'選項(xiàng) 1' => 1,
'選項(xiàng) 2' => 2,
'選項(xiàng) 3' => 3,
'選項(xiàng) 4' => 4
),
'selected' => 2,
'class' => 'blue_options',
)
); ?>

復(fù)制代碼

生成的 XHTML 代碼如下：

<input type="radio" name="myoption" id="myoption_0" value="1" class="blue_options" /><label for="myoption_0" >選項(xiàng) 1</label><br />
<input type="radio" name="myoption" id="myoption_1" value="2" class="blue_options" /><label for="myoption_1" >選項(xiàng) 2</label><br />
<input type="radio" name="myoption" id="myoption_2" value="3" checked="checked" class="blue_options" /><label for="myoption_2" >選項(xiàng) 3</label><br />
<input type="radio" name="myoption" id="myoption_3" value="4" class="blue_options" /><label for="myoption_3" >選項(xiàng) 4</label>

復(fù)制代碼

實(shí)際效果：