Flex开发WEB应用

1.为什么要使用flex开发WEB应用？
        说些自己的开发的体会，网上有的我就不说了。flash作为UI的view层，最大的优势是跨OS平台和可兼容Browser。
        只需要关心flex相关代码编写，而不用考虑浏览器之间的兼容性，且实现的UI效果和用户体验均超过html+ajax。
        主流的ajax(如JQuery、ext等)+HTML（DIV+CSS）在面对多浏览器时，耗费了前端人员太多的精力，需要超量的js和css兼容性代码。

 

2.Flex是什么？
       Flex 是一个免费的开放源框架，可用于构建交互性较高、具有表现力的 Web 应用程序，这些应用程序一致地部署在所有主要浏览器、桌面和操作系统中。
        Flex 提供一个现代、基于标准的语言和编程模型，该模型支持公共设计模式。 使用基于 XML 的声明性语言 MXML 描述 UI 布局和行为，使用面向对象的 ActionScript 3.0 编程语言创建客户端逻辑。
     Flex 还包含一个丰富的组件库和一个交互式 Flex 应用程序调试器，组件库中的上百个久经考验、可扩展的 UI 组件可用于创建富 Internet 应用程序 (RIA)。

 

3.开发flex用什么IDE工具？
       Adobe Flash Builder 4 软件可以加快 Flex 应用程序开发。它是一个基于 Eclipse 的开发工具，支持智能编码、交互式遍历调试以及可视设计 RIA 的用户界面布局、外观和行为。Flash Builder 4 包含整个 Flex 框架，包括编译器、组件库和调试器。其中组件库非常丰富，拖拽可以搞定。顺便赞一下Eclipse，开发java、php、ruby、lotus form等工具都用了它，Eclipse显然已经超越了IDE本身，成为一个开发平台。

 

4.flex与后端交互
      flex通过HTTPService和后端java、php、.net等后端语言交互，本文指的php交互。
     通过fb创建flex project，通过观察目录结构及其文件，可以得出为何UI层可以兼容多个浏览器，为何用户体验和ajax相当。
       mxml文件： XML的声明性语言MXML描述UI布局和行为，类似与HTML(DIV+CSS);
       as文件：用于编写客户端(浏览器端)的逻辑，类似与JavaScript；
       swf文件：用于生成必须的FLash模板。

 

5.FLex+PHP demo：
    mxml文件：
     

1 <? xml version="1.0" encoding="utf-8" ?>
2   < s:Application xmlns:fx ="http://ns.adobe.com/mxml/2009"
3 xmlns:s ="library://ns.adobe.com/flex/spark"
4 xmlns:mx ="library://ns.adobe.com/flex/mx" minWidth ="955" minHeight ="600" creationComplete ="send_data()" >
5   < fx:Declarations >
6 < s:HTTPService id ="userRequest" url ="http://localhost/flex_service.php" useProxy ="false" method ="POST" >
7 < mx:request xmlns ="" >
8 < username > {username.text} </ username >
9 < emailaddress > {emailaddress.text} </ emailaddress >
10 </ mx:request >
11 </ s:HTTPService >
12   </ fx:Declarations >
13 < fx:Script > <!-- 类比js -->
14 <![CDATA[
15 private function send_data():void {
16 userRequest.send();
17 }
18 ]]>
19 </ fx:Script >
20 < mx:Form x ="20" y ="10" width ="300" > <!-- 类比html中的form -->
21 < mx:FormItem >
22 < s:Label text ="Username" />
23 < s:TextInput id ="username" />
24 </ mx:FormItem >
25 < mx:FormItem >
26 < s:Label text ="Email Address" />
27 < s:TextInput id ="emailaddress" />
28 </ mx:FormItem >
29 < s:Button label ="Submit" click ="send_data()" />
30 </ mx:Form >  

31 < mx:DataGrid id ="dgUserRequest" x ="20" y ="160"
32 dataProvider ="{userRequest.lastResult.users.user}" >
33 < mx:columns > <!--类比html中的table，或者C#中的DataGrid-->
34 < mx:DataGridColumn headerText ="User ID" dataField ="userid" />
35 < mx:DataGridColumn headerText ="User Name" dataField ="username" />
36 < mx:DataGridColumn headerText ="Email Address" dataField ="emailaddress" />
37 </ mx:columns >
38 </ mx:DataGrid >
39 < s:TextInput x ="23" y ="330" id ="selectedemailaddress" text ="{dgUserRequest.selectedItem.emailaddress}" />
40 < s:Button x ="189" y ="337" label ="按钮" /> <!-- 你懂得 -->
41 </ s:Application >

使用<mx:HTTPService>标签在MXML文件中，表示一个HTTPService 对象，当你调用HTTPService 对象的Send()方法,  它向指定的URL发送一个HTTP请求.并且返回一个HTTP响应。使用HTTP GET或者POST方法，当你设置了userProxy属性为TRUE时而且你使用了代理服务器的时候，你也可以使用HTTP HEAD,OPTIONS,TRACE,和DELETE方法。

 

 PHP代码：

1 <? php
2 define ( " DATABASE_SERVER " , " localhost " );
3 define ( " DATABASE_USERNAME " , " root " );
4 define ( " DATABASE_PASSWORD " , " ****** " );
5 define ( " DATABASE_NAME " , " **** " );
6 // connect to the database.
7 $mysql = mysql_connect (DATABASE_SERVER , DATABASE_USERNAME , DATABASE_PASSWORD);
8 mysql_select_db ( DATABASE_NAME );
9 // Quote variable to make safe
10 function quote_smart( $value )
11 {
12 // Stripslashes
13 if ( get_magic_quotes_gpc ()) {
14 $value = stripslashes ( $value );
15 }
16 // Quote if not integer
17 if ( ! is_numeric ( $value )) {
18 $value = " ' " . mysql_real_escape_string ( $value ) . " ' " ;
19 }
20 return $value ;
21 }
22 if ( $_POST [ " emailaddress " ] AND $_POST [ " username " ])
23 {
24 // add the user
25 $Query = sprintf ( " INSERT INTO users VALUES ('', %s, %s) " ,
26 quote_smart( $_POST [ ' username ' ]) , quote_smart( $_POST [ ' emailaddress ' ]));
27 $Result = mysql_query ( $Query );
28 }
29 // return a list of all the users
30 $Query = " SELECT * from users " ;
31 $Result = mysql_query ( $Query );
32 $Return = " <users> " ;
33 while ( $User = mysql_fetch_object ( $Result ) )
34 {
35 $Return .= " <user><userid> " . $User -> userid . " </userid><username> " .
36 $User -> username . " </username><emailaddress> " .
37 $User -> emailaddress . " </emailaddress></user> " ;
38 }
39 $Return .= " </users> " ;
40 mysql_free_result ( $Result );
41 print ( $Return )
42 ?>

php端首先创建mysql的DB连接，然后通过post获取flex端发送过来的数据，再次把数据插入db，最后拼xml string，向Flex端下发xml数据流。

 

末了，这两年架构细节上各家都在相互借鉴，如remote control（xmlhttprequest、httpservice、webservice），各类mvc framework细节（IOC、Annotations）等，json 交互(xstream、seam)。前端框架设计模式也火了起来，推荐swiz framework，前端也mvc了，很有意思~~~

转载于:https://www.cnblogs.com/villion/archive/2010/11/29/1891424.html