深瞳

夜如深瞳,瞳深如夜

  :: :: 博问 :: 闪存 :: :: 联系 :: 订阅 订阅 :: 管理 ::

本文章最新版本请参见:http://www.deepcast.net/wiki/ow.asp?Flash和PHP的整合

本文将使用Adobe Flex Builder2和PHP创建一个小型应用程序实例,从MYSQL数据库相应表中读出包括姓名和邮件地址等数据并显示给用户,用户还可以添加新的姓名和邮件地址进入数据库。

注意:http://www.adobe.com/devnet/flex/articles/flex2_php.html 官网上有Mike Potter提供的Flex 2 Beta 3. I 的例子,但是其中有一些代码可能是抄漏抄错,所以我在学习完后,特地把自己验证过的代码贴出来,供大家参考使用。

一,系统要求:

1,请先安装Flex Builder 2 (包括了SDK)

2, PHP

3, MYSQL和APACHE(IIS也可)

二,预备知识:

对简单的PHP开发和XML基础比较熟悉即可。

三,MYSQL的准备工作

先在Mysql上创建数据库Sample,然后运行如下SQL代码sample.rar以创建表Users。

四,PHP脚本

然后,你就要开始写添加用户和输出XML(给FLEX程序使用的)的PHP脚本了。该脚本比较简单,只有25行。请注意,其中,quote_smart 函数是符合PHP.Net 官网的规范来验证用户输入安全所用。function as a best practice to help verify user input, according to the PHP.Net

以下是放在Apache根目录下的getuser.php文件:

<?php
Define( "DATABASE_SERVER", "localhost" );//数据库服务器地址
Define( "DATABASE_USERNAME", "root" );//数据库登录名
Define( "DATABASE_PASSWORD", "123456" );//数据库登录密码
Define( "DATABASE_NAME", "sample" );//数据库名

//连接数据库

$mysql = mysql_connect(DATABASE_SERVER, DATABASE_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"])
{
      //add the user
      $Query = sprintf("INSERT INTO users VALUES (NULL, %s, %s)", quote_smart($_POST["username"]), quote_smart($_POST["emailaddress"]));

      $Result = mysql_query( $Query );
}

//return a list of all the users
$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)
?>

请注意,$_POST ["变量名"]形式用来表示从Flex程序中传递到PHP脚本中的变量。在上例中就是FLEX中传来的emailaddress 和 username。用户输入符合验证安全规范的上述emailaddress 和 username之后,PHP就把它们添加入数据库以添加新用户,然后PHP会输出XML格式的用户列表。

你是无法直接从PHP向FLEX传递变量的,你可以先把变量输出成XML,然后FLEX读取XML取得传回的数据,这样就最终改变了FLEX表现层中的数据。同样的,你也可以用上面同样的PHP脚本作为后台程序,把数据从PHP中输出到移动电话上,你只需要改写一下前端的显示就可以了。

到此为止,涉及的PHP脚本和MYSQL数据库都是旧的内容。之后我们就要开始创建应用程序的界面了。

五,使用FLEX创建用户界面

Flex 应用程序把 ActionScript 3.0和MXML结合使用。ActionScript是基于ECMAScript (类似于JavaScript)的, 因此它对于WEB开发者来说应该是很熟悉的。MXML是基于XML的FLEX应用程序的表现层。从本质上来看,就是用XML定义用户界面的布局,用ActionScript.来对用户界面进行脚本编程。本文所用到的MXML也仅有26行代码:

<!-- 第一行是XML档声明。-->
<?xml version="1.0" encoding="utf-8"?>

<!-- 第二行是应用程序声明,提供MX组件的命名空间,布局方式是绝对定位,最后是声明调用id为userRequest的对象的send()函数-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" layout="absolute" creationComplete="userRequest.send()">

<!-- 设置HTTPService和前例所创建的PHP脚本之间发送和接收数据。设置了HTTPService的id为userRequest,设置了PHP脚本文件所在的URL,设置了不使用代理服务器,设置了提交方式是POST,当然也可以用GET方式,不过相应要修改PHP脚本的变量名-->
   <mx:HTTPService id="userRequest" url="http://localhost/getuser.php" useProxy="false" method="POST">
      <mx:request xmlns="">

<!-- 设置了username的值为ID为username的元素的text属性的值(username.text) ,也设置了传递到PHP的变量 _POST["emailaddress"] 的值为ID为emailaddress的元素的text属性的值(emailaddress.text)。大括号把变量绑定到了界面元素的值上,这就是说,如果把<username>改成<user_name>, 那么相应地传递到PHP的变量就改为_POST["user_name"],而相反地,如果把(username.text) 改成{user_name.text}了,那么你就必须修改MXML中的<username>改成<user_name>。-->
         <username>{username.text}</username><emailaddress>{emailaddress.text}</emailaddress>
      </mx:request>
   </mx:HTTPService>

<!-- 然后创建一个简单的窗体,其中按钮点击则激发userRequest.send()调用。-->
   <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>

<!-- 创建一个DataGrid组件来显示userRequest HTTPService取回的数据。请注意必须绑定它到user元素而非其上层的users外包元素。而DataGrid组件自带有很方便的列排序和高亮当前行功能。
最后,是一个显示和当前用户相对应的邮件地址dgUserRequest.selectedItem.emailaddress的文本框。-->
   <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>

从PHP取回的XML内容如下:
<users>
<user>
<userid>1</userid>
<username>Joe Schmoe</username>
<emailaddress>joe@schmoe.com</emailaddress>
</user>
<user>
<userid>2</userid>
<username>Betty Schmoe</username>
<emailaddress>betty@schmoe.com</emailaddress>
</user>
</users>

整个使用PHP后台来添加和取回MYSQL数据的小FLASH应用程序就到处为止了。所有的代码文件flexphp.rar在此提供下载。

本文章最新版本请参见:http://www.deepcast.net/wiki/ow.asp?Flash和PHP的整合

posted on 2006-08-04 19:06  深瞳  阅读(1431)  评论(0编辑  收藏  举报