FleaPHP 的 Ajax 支持和 WebControls

原文地址： http://www.fleaphp.org/bbs/viewthread.php?tid=40

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 >

实际效果：



假如是从数据库取出的数据，那么用 array_hashmap() 转换一下记录集，就可以做为 items 属性来显示一个单选按钮组。

另一个例子，显示一个多选框：

<? php webcontrol( ' checkbox ' ,   ' keep_password ' ,
     array (
         ' caption '   =>   ' 记住我的密码 ' ,
    )
);  ?>

生成的 XHTML 代码如下：

< input  type ="checkbox"  name ="keep_username"  id ="keep_username"  value ="1"   />< label  for ="keep_username"   > 在此计算机上保留我的登录信息 </ label >

实际效果：



＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

Ajax 支持和 WebControls 将在 FleaPHP 1.0.70 版本中发布。

目前的开发进度请参考： http://www.qeeyuan.com:8090/browse/FLEA?report=com.atlassian.jira.plugin.system.project:roadmap-panel

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1432956