论坛徽章:: 0

电梯直达

1楼 [收藏(0)] [报告]

发表于 2006-12-06 14:51 |只看该作者 |倒序浏览

FleaPHP 现在具有了基本的 Ajax 支持，示例代码如下：

首先在控制器显示模版的动作方法中有如下代码：

/**
* 显示登录界面
*/
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');
}

复制代码

_registerFormEvent() 是 FLEA_Controller_Action 的一个方法，用来注册一个表单的事件。
如果是注册控件（例如文本框）的事件，则用 _registerEvent() 方法。

两个方法的参数是一样的，第一个参数都是控件或者表单的ID，第二个参数是要注册的 DOM 事件（例如 click、change、submit）。第三个参数是当前控制器中用于响应该事件的动作名。第四个参数则是一些 Ajax 事件的属性。

上面代码里面为一个名为 form_login 的表单注册了一个 submit 事件，响应该事件的动作名是 OnFormLoginSubmit。

init_webcontrols(); 是用于初始化 WebControls，因为 Login.php 模版会用到 WebControls。

所以这个控制器还有一个方法如下：

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 '您输入的用户名或密码不正确';
}
}

复制代码

这个方法里面，判断用户登录是否成功。成功就用 ajax_redirect() 重定向浏览器，失败则显示出错信息。要注意的是，ajax_redirect() 要求事件 Ajax 属性中的 evalScripts 必须为 true。这样才能成功的重定向浏览器。

整个控制器的代码：

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 '您输入的用户名或密码不正确';
}
}
}

复制代码

非常简单，不需要修改任何应用程序设置，也不需要从特别的对象继承。而且只有在显示模版的动作方法中才需要注册事件（会载入 Ajax 的支持文件），其他动作方法不需要载入任何与 Ajax 相关的文件，提高了性能。

客户端需要的 JavaScript 会自动生成：

<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>

复制代码

前面是服务端的代码，现在来看看客户端的代码。

客户端主要是模版，其中必须载入 mootools.js 文件：

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

复制代码

mootools.js 文件在 FLEA/Ajax 目录中，需要复制到应用程序的 scripts 目录中。

前面我们为名为 form_login 的表单注册了事件，所以我们的页面里面必须有一个名为 form_login 的表单，不然是不会正确执行的。

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

复制代码

表单中增加一个提交按钮，点击后，我们在服务端注册的事件就会执行。

就这么简单？YES

除了注册事件、载入 JS 外，其他工作都由 FleaPHP 完成。

FleaPHP 以前版本中有一个 FLEA/Helper/Html.php 文件，其中有许多生成页面控件（文本框、列表框）的方法。

不过这些方法虽然很容易使用，但是不够灵活，所以现在 FleaPHP 中提供了全新的 WebControls 组件。这个组件自带一组控件，还可以随意扩展。要使用这个组件，预先调用一下 init_webcontrols() 全局函数就可以了。

然后就可以用下面的代码创建各种控件：

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

复制代码

这段代码生成下面的 XHTML 代码（不支持 HTML）：

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

复制代码

与以前的 html_textbox() 相比，新的 webcontrols() 函数更灵活，可以为控件指定任意数量的属性。

看一个稍微复杂点的例子：

<?php webcontrol('radiogroup', 'myoption',
array(
'items' => array(
'选项 1' => 1,
'选项 2' => 2,
'选项 3' => 3,
'选项 4' => 4
),
'selected' => 2,
'class' => 'blue_options',
)
); ?>

复制代码

生成的 XHTML 代码如下：

<input type="radio" name="myoption" id="myoption_0" value="1" class="blue_options" /><label for="myoption_0" >选项 1</label><br />
<input type="radio" name="myoption" id="myoption_1" value="2" class="blue_options" /><label for="myoption_1" >选项 2</label><br />
<input type="radio" name="myoption" id="myoption_2" value="3" checked="checked" class="blue_options" /><label for="myoption_2" >选项 3</label><br />
<input type="radio" name="myoption" id="myoption_3" value="4" class="blue_options" /><label for="myoption_3" >选项 4</label>

复制代码

实际效果：