整合 Flex 2 与 PHP

前提

为了实现本文的大部分目标，你需要安装以下的软件和文件:

flex builder 2 (包含 sdk)

• try
• buy

php (安装在本地的一个服务器上)

预备知识

熟悉简单的 php 开发，同时也需要些基本的 xml 知识。

开始

如果你没下载并安装 flex builder 2，那先去安装一个。首先，你必须创建数据库。我给数据库起的名字是 sample，当然你也可以随便你喜欢起名字。下一步，建表以便储存用户数据。下面是 sql 脚本，你可以用它来建表:

create table 'users' ( 'userid' int(10) unsigned not null auto_increment, 'username' varchar(255) collate latin1_general_ci not null, 'emailaddress' varchar(255) collate latin1_general_ci not null, primary key ('userid') ) engine=myisam default charset=latin1 collate=latin1_general_ci auto_increment=3 ;

下一步，你需要创建 php 脚本以便添加用户信息，以及导出 xml 供 flex 应用程序使用。这个脚本相当的简单，而且代码仅仅 25 行。注意，根据 php.net 网站说明，应该使用 quote_smart 函数作为检验用户输入的一个习惯。

<?php define( "database_server", "localhost" ); define( "database_username, "username" ); define( "database_password", "password" ); define( "database_name", "sample" ); //连接数据库 $mysql = mysql_c databaser_username, database_password); mysql_select_db( database_name ); // 给变量加引号保证安全 function quote_smart($value) { // stripslashes if (get_magic_quotes_gpc()) { $value = stripslashes($value); } // quote if not integer if (!is_numeric($value)) { $value = "'" . mysql_real_escape_string($value) . "'"; } return $value; } if( $_post["emailaddress"] and $_post["username"]) { //添加用户 $query = sprintf("insert into users values ('', %s, %s)", quote_smart($_post["username"], quote_smart($_post["emailaddress"])"; $result = mysql_query( $query ); } //返回全部用户的列表 $query = "select * from users"; $result = mysql_query( $query ); $return = "<users>"; while ( $user = mysql_fetch_object( $result ) ) { $return .= "<user><userid>".$user->userid."</userid><username>" . $user->username."</username><emailaddress>" . $user->emailaddress."</emailaddress></user>"; } $return .= "</users>"; mysql_free_result( $result ); print ($return) ?>

下面扼要的解释下 php 代码。$_post 变量由 flex 应用程序的两个必填域获得值: emailaddress 和 username. 如果用户两个信息都输入了，php 代码将在数据库中添加用户信息。然后，php 代码返回一个 xml 格式的用户列表。

注意: 你不能直接在 flex 应用程序中改变 php 变量。你必须首先把它们编码为 xml。通过从数据检索中抽象用户接口，你可以很容易的改变显示数据的方式。例如，你可以使用这个相同的 php 脚本传输数据到这个程序的手机版本。你所需要做的就是编写不同的前台程序，后台 php 脚本保持不变。

到目前为止，对你来说每个东西都应该很熟悉的。你已经有了一个 php 脚本和 mysql 数据库。现在该是开始构建应用程序界面的时间了。

构建用户界面

flex 应用程序综合使用 acti 3.0 和 mxml。acti 基于 ecmascript (类似于 javascript)，所以网络开发人员看它应该挺眼熟。mxml 是用于 flex 应用程序的排版引擎，它是基于 xml 的。本质上，你使用 xml 布置用户界面，然后使用 acti 编写界面程序。界面的 mxml 也是非常简单的 (仅 26 行):

<?xml version="1.0" encoding="utf-8"?> <mx:application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" layout="absolute" creationcomplete="userrequest.send()"> <mx:httpservice id="userrequest" url="http://localhost/flex/php/request.php" useproxy="false" method="post"> <mx:request xmlns=""> <username>{username.text}</username><emailaddress>{emailaddress.text}</emailaddress> </mx:request> </mx:httpservice> <mx:form x="22" y="10" width="493"> <mx:hbox> <mx:label text="username"/> <mx:textinput id="username"/> </mx:hbox> <mx:hbox> <mx:label text="email address"/> <mx:textinput id="emailaddress"/> </mx:hbox> <mx:button label="submit" click="userrequest.send()"/> </mx:form> <mx:datagrid id="dguserrequest" x="22" y="128" dataprovider="{userrequest.lastresult.users.user}"> <mx:columns> <mx:datagridcolumn headertext="user id" datafield="userid"/> <mx:datagridcolumn headertext="user name" datafield="username"/> </mx:columns> </mx:datagrid> <mx:textinput x="22" y="292" id="selectedemailaddress" text="{dguserrequest.selecteditem.emailaddress}"/> </mx:application>

让我们详细地研究每一行。以下是每个 flex 应用程序都会有的前两行:

<?xml version="1.0" encoding="utf-8"?> <mx:application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" layout="absolute" creationcomplete="userrequest.send()">

第一行声明这是一个 xml 文档。第二行声明这是一个应用程序，为 mx 组件提供名字空间，声明布局是绝对的 (意味着你可以以精确的 x 和 y 坐标定位项目。其他的选项有水平布局或者垂直布局)，最后 creationcomplete="userrequest.send()" 指定在加载用户界面完成时，应用程序调用 id 为 userrequest 的 mxml 组件的 send() 函数。

接下来的部分是建立 httpservice 以便利用你编写的 php 脚本发送和接收数据:

<mx:httpservice id="userrequest" url="http://localhost/flex/php/request.php" useproxy="false" method="post"> <mx:request xmlns=""> <username>{username.text}</username><emailaddress>{emailaddress.text}</emailaddress> </mx:request> </mx:httpservice>

在这部分，你设置 id 为 userrequest, 然后提供访问 php 脚本的 url。你设置提交方法为 post (你也可以使用 get，但是那样的话你必须改变 php 脚本中的变量名称)。请求它包含两个变量，username 和 emailaddress。这个代码也把 post 中的变量 username 的值设置为 id 为 username 的元素的 text 属性(username.text)；php 变量 _post["emailaddress"] 的值被设置为 id 为 emailaddress 的元素的 text 属性。使用 { 和 } 大括号可以将变量绑定到用户界面元素的值。

再说几句，如果你将 <username> 改变成 <user_name>, 你必须去修改 php 代码，将变量 _post["username"] 改为 _post["user_name"]。如果你把 {username.text} 改成 {user_name.text}，你必须修改 mxml 代码，把 id 为 username 的元素的 id 改为 user_name。

creating a form

下一步，你将建立一个简单的表单:

<mx:form x="22" y="10" width="493"> <mx:hbox> <mx:label text="username"/> <mx:textinput id="username"/> </mx:hbox> <mx:hbox> <mx:label text="email address"/> <mx:textinput id="emailaddress"/> </mx:hbox> <mx:button label="submit" click="userrequest.send()"/> </mx:form>

注意你可以布局精确表单的 x 和 y 坐标及设置它的精确的宽。然后，两个包含从左到右排列的一个标签和一个文本输入框的 hbox，这两个 hbox 是上下排列的。最后，你的提交按钮出现在表单的结尾。当一个用户点击按钮，应用程序调用 id 为 userrequest 元件的 send() 函数(在这里，是那个 httpservice 元件)。

现在你已经构建了向数据库提交新条目的功能，但是你怎么在 flex 应用程序中显示他们呢？使用如下代码:

<mx:datagrid id="dguserrequest" x="22" y="128" dataprovider="{userrequest.result.users.user}"> <mx:columns> <mx:datagridcolumn headertext="user id" datafield="userid"/> <mx:datagridcolumn headertext="user name" datafield="username"/> </mx:columns> </mx:datagrid> <mx:textinput x="22" y="292" id="selectedemailaddress" text="{dguserrequest.selecteditem.emailaddress}"/> </mx:applicati

这样, 你使用一个 datagrid 组件去利用 userrequest httpservice 返回的 xml 构建它自己的内容。你返回的是一个 xml 文档。这样，你将 datagrid 组件绑定到返回 xml 文档中的用户元素。返回的 xml 看起来像以下这样:

<users> <user> <userid>1</userid> <username>joe schmoe</username> <emailaddress> [email protected]</emailaddress> </user> <user> <userid>2</userid> <username>betty schmoe</username> <emailaddress> [email protected]</emailaddress> </user> </users>

注意，你所绑定的元素是返回的实际元素，不包括这个元素两端的标签。

datagrid 组件显示数据库中人员的用户 id 和用户名。我决定不在 datagrid 中显示 email 地址，但是你也可以添加另外一列去显示它。注意列名元素需要与 xml 元素直接对应。datagrid 组件可以允许使用者对内容进行排序，或者对选中的行高亮显示――你不需要做任何事，它自己会处理！

最后，你加上一个 textinput 组件去显示选中的用户的 email 地址，使用 dguserrequest.selecteditem.emailaddress, 然后加上一个 xml 结束标签。

就是它了。你完成了一个简单的对 mysql 数据库进行提交和检索数据的 flash 应用程序，使用 php 作为后台程序。

接下来的方向

我强烈的希望你下载 flex builder 2，然后利用 php, mysql, 以及 adobe flex 编写一些更复杂的程序。请访问 我的博客来了解更多关于 adobe flex 2 的信息，同时关于未来的文章也请留些建议，以及你打算看到的其他使用同系列技术的例子。你也可能打算阅读我的另一篇文章: 使用 flex 2 和 amfphp.

关于作者

mike potter 进行开发网站和网络应用程序已经超过八年了。在 php 设计方面，他有丰富的经验，构建过加拿大最大的业余体育组织网站：加拿大冰壶协会。开发这个网站之后，他去 oe 工作，在那他帮助实现了一个在 mozilla 网络浏览器中允许的基于 linux 的桌面系统。他帮助开放那个桌面系统的日历程序的源代码，之后在 mozilla 日历项目中工作了一年。mike 在 2005 年加入 adobe，现在作为开源软件和网络开发的传道者工作于开发人员交流部门。