本文来自国外：http://www.sitepoint.com/article/pimp-php-app-flex/
Flex是Adobe的开源WEB应用框架，用于WEB或者桌面应用的快速开发。Flex可以让你制作软件，该软件然后编入一个Flash (SWF)文件中；在安装了Flash 插件后，该软件可以在任何浏览器中运行。最棒的是，它使用起来非常有趣。你可以轻松地编写出界面超眩的应用程序：令人影响深刻的效果，你只需再加上几行代码，就可以添加到你的应用程序里。这样，在短短的时间里，你就可以编写出超酷的应用程序了。哇，我是不是说过这个用起来很有趣啊？
如果你以前没接触过Flex, 那就读读我们前面的Flex辅导课程吧。你可以了解Flex Builder的整个安装环境，和Flex开发的一些关键概念。
在本文中，我们会进一步学会将PHP和Flex结合起来: 在使用PHP的Flex中，制作一个产品信息widget，以提取产品信息。在开始之前，从Adobe中获取一份Flex Builder 3的演示版――我们将要用它来制作我们的widget。
范例Widget
我们将要制作的小widget 会显示产品的图像，并附有说明和产品信息页面的链接。它由这些基本元素构成：
· 一个Flex 应用程序以呈现widget;
· 一个包含Flash的HTML页面；
· 然后，一个PHP脚本将以XML或者JSON形式显示产品数据
首先，我们将产品信息嵌入Flex应用程序中，同时建立我们的widget。一旦我们整理出Flex部分，我们将改变代码以学会从XML文件中提取数据。
开始，我们使用Flex Builder创建新的Flex项目。输入ProductWidget做为项目的名称，确保应用程序的类型适应WEB应用程序，然后按Finish键。
这样就构建了一个基本的项目，包括一个模板HTML文件上载和显示应用程序，及一个裸骨应用程序－ProductWidget.mxml。除非你已改变了Flex Builder layout，在屏幕右边的文本编辑器里可看到主要的应用程序文件。确保ProductWidget.mxml文件在编辑器里显示。如果你不能确保，在左边的文件树里寻找一个名为ProductWidget.mxml的文件，然后双击该文件，以确保上载了正确的文件。
在文件里，你会看到Flex应用程序的启动，包含在mx:Application标签里。我们将给widget增加一个box, 为图像增加一个占位符号，和一个包含链接的按钮。在mx:Application标签之间，添加以下代码：
mx:VBox 是一个layout布局组件，以确保图像和链接按钮在其下各自显示。两项均为150像素宽。
在工具栏里点击Run按钮（绿色按钮，内有白色箭头）以确保各项正常工作。浏览器应该打开并显示比较空白的页面，在左上角是我们之前创建的LinkButton。
下一步，我们将向Flex应用程序输入产品图像，按钮文字和按钮链接。
传递参数
将参数传递给Flex的最基本的方法是：向包含我们的widget的HTML模板添加参数。举例说明，我们需要提供三项数值：
· 显示图像的URL (imageURL)
· 产品说明(productTitle)
· 关于产品详细信息的链接(productLink)
我们需改变位于html-template 文件里的HTML模板，达到此目的。在缺省条件下，如果客户端需要安装Flash插件的话，该文件含有可检测Flash插件的代码，及安装链接。一旦完成，它同时包含向Flex 应用程序传递参数的代码。
在文件里，对于函数AC_FL_RunContent有两个呼叫。一个是确保你使用的是用来呼叫你的SWF文件的（另外一个是检测过期版本后呼叫更新Flash Player的）。在我的模板里，它大约在77行。该呼叫包含所有传递给Flex应用程序的模板。为了向你的Flex应用程序传递数据，你需要添加一个额外的参数flashVars，该参数可包含几个其它以HTML URL编码的参数，如同GET呼叫里的变量一样。我正使用来自stock.xchng by nitewind23的免费图像，图像的详细屏幕在本展示中当作一个产品。
如果使用者在浏览器上启动了JavaScript，这就完全可以运行起来了。对没使用JavaScript启动浏览器的使用者来说，你也需要在模板的noscript栏里添加参数。
我们的应用程序会从HTML模板里接收参数――现在，我们需要告知应用程序怎样使用它们。
在.mxml文件里的代码要求放在mx:Script栏里。我们在mx:VBox:的闭括号后添加该栏。
最后范例的完成源，参见Listing 3.
HTTP请求的参数使用
现在，我们所有范例都直接请求数据。在真实的使用中，有可能你需要向相关的services 传递参数，如搜索语或标签。要在HTTPService里设定参数，你添加一个包含了需要传递的参数的mx:Request 标签，和一个请求的方法。如我们想要传递一个search参数，那就是：
开始吧！
你看到了，将Flex和PHP结合起来非常简单。如果你的PHP应用程序暴露返回XML或者JSON数据的服务，Flex可以瞬时抓取该数据。有意思的编码！
onCreationComplete 读取从HTML文件传递来的参数，呼叫另外一个函数setData, 该函数将以我们从HTML模板接收到的参数占据变量。鉴于在应用程序创建后立即呼叫此方法，我们可以确定数据在一开始就设定了。
setData 函数需三个参数：imageURL, productTitle, 和 productLink。 我们将使用imageURL 以设定图像的源，并可使用productTitle 设定显示在链接按钮上的标签。productLink 需要保存在我们刚定义的linkURL 变量里，从而我们可以在使用者点击链接时即使用它。
最后，onLinkClicked函数将跳转到在变量linkURL里定义的链接。我们在下一步将会将该函数附加到按钮上。
我们回到之前创建的mx:VBox 标签，来寻找链接按钮。如下所示，我们会添加一个click handler：
<mx:LinkButton label="LinkButton" id="link" click="onLinkClicked()"/>
最后，一旦上传了该应用程序，我们就需要在进行此操作。我们将在应用程序上添加一个handler creationComplete该元素创建完毕后立即运行onCreationComplete函数。在最上处寻找mx:Application标签，并添加handler：
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="onCreationComplete()" >
完整的.mxml 文件应该像Listing 1.中的代码一样。
所有完成。按RUN按钮，试下吧！结果如下所示：
添加一点趣味吧！
太容易了。我们来给应用程序添加一点眼珠糖果，然后在图像里渐隐。就是在mx:Image 标签里添加completeEffect="Fade"：
<mx:Image id="image" height="150" completeEffect="Fade"/>
现在，再次运行该程序－你应该确保小鸭子的图像会渐渐隐退。在Flex里有很多预定义的效果；定制或者创建属于你的效果都非常容易。如需了解更多，请参阅Adobe LiveDocs的使用效果Working with effects。
现在，我们已经有了基本框架，以根据数据提供Flex应用程序。下一步就应该以更为令人激动的方式提供此类数据了：让我们使用PHP来创建XML，运用我们的程序吧。
使用XML数据
如果你的应用程序能产生XML数据，该教程的下半部分将向你展示如果在Flex里处理此类数据。我们可以轻松地创建XML，阅读XML，而对XML的Flex支持也是简明有效的。这就是为什么我们要使用它。让我们来看看为此我们需要做的工作吧。
在我们开始前: 重点是我们应该记住Flash对从另外的域来获得SWF存储处的数据要求非常严格。你或者需要在PHP脚本的域运行Flex应用程序，或者在PHP的服务器上创建一个跨域策略。如需了解有关跨域策略和Flash安全模式的更多信息，请阅读Adobe 开发者论坛(Adobe Developer Connection)文章。
鉴于我们将要使用HTTP 提取数据，我们将使用名为HTTPService的Flex class，以处理所有重要的事项。我们将告知HTTPService在哪里连接，如何处理返回的数据。
为了试一下，我们需要为一个简单的PHP数据提供编码。在真实的情况下，你将要从一个数据库中提取信息。但是在这里范例中，我们简单些，硬编码这些数值。这里是一个PHP脚本，使用函数读取数据，创建一个变量保留数据，然后以XML格式输出数据：
在我们的Flex应用程序里，通过给编码增添HTTPService 栏，我们将定义一个指向PHP页面的HTTPService。在此栏里，我们需要为我们的服务(id)定义一个独特的名字，从而可以在我们的ActionScript编码，呼叫URL(url)和结果格式(resultFormat)里使用。
需要记住的一点就是呼叫是异步的：send方法将会即刻返回，服务被呼叫。那么，我们怎样获取数据呢？HTTPService 为此提供两种回调方法：一个用于结果成功时(result),另外一个用于结果失败时(fault)。
这里是我们将要使用的编码，以定义我们的HTTPService 栏，我们把该栏放置在mx:Script 栏之前：
当HTTPService 检索XML时，你应该设定e4x （ECMAScript for XML）的标准格式，resultFormat。使用此结果类型，我们就可以在使用返回的XML时运用一系列便捷的JavaScript函数。
如果你还在想它为什么叫ECMAScript而不是JavaScript，呵呵，国际标准组织Ecma International group定义了JavaScript的语言标准。其思路就是JavaScript的不同执行（例如，不同的浏览器）应该至少定义Ecma International group所定义的功能。此核心脚本语言也称为ECMAScript。
下一步，我们需要确定怎样处理从HTTPService获取的数据。我们知道结果格式，因此我们可以简单地把结果当作XML。这样我们可以在XML把数据当作一般的目标予以读取。将会映射最高层的元素（在这个范例里就是data数据），作为真正的XML目标（在这个范例里就是(xmlData)，因此我们可以通过使用xmlData产品读取产品级。鉴于XML可能包含几个产品元素，需要确定我们需要的是哪个。
在此范例中，通常是第一个(xmlData.product[0])。产品下的元素可以通过它们的元素直接读取。将数据传递给我们现有的setData函数就可以达到目的。我们可以在一个函数serviceLoaded中完成所有这些任务：
当HTTPService出现问题时，我们也需要定义另外一个函数serviceError。通常，你会重试或者指定另外一个更有意义的行动。不过现在，我们仅仅添加一个追踪任务：
private function serviceError(event: FaultEvent) : void
{
trace("Unable to get XML:" + event.fault.message);
}
Listing 2 显示了XML版的全部源，及我们的HTTPService和相关函数。
下一步，我们将考虑如何消费以JSON格式提供的数据。
使用JSON
现在我们将改变范例，以使用以JSON格式提供的数据。如果你不了解此概念，在JSON的网站上有详细的解释说明：
JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。
在 Flex里使用JSON, 我们需要加入一个程序库ActionScript 3 Corelib，它提供对JSON的支持，MD5 散列和其它一些有用的功能，而这些功能现在Flex都尚未提供。你可以从它的GOOGLE代码项目（Google Code project）页面下载程序库。
解开（unzip） 文件，注意你存放文件的位置。我们需要告知下一步Flex Builder在哪里找到它。
回到Flex Builder，右击你的ProductWidget项，从菜单中选择属性（Properties）。现在点击Flex Build Path，选择Library Path标签。你就应该是看到这样一个窗口：
点击Add SWC，导航到你解开文件的地方。所需的SWC文件可以在library’s lib/ subfolder里找到，名为as3corelib.swc。在选择了文件后，点击OK，Flex Builder就会与JSON编码数据愉快地合作。
让我们检查下要用来在PHP里创建JSON格式数据的代码。PHP5已经提供了对JSON的支持，但是在老一些的版本里，你需要一个额外的PHP程序库――我建议你从PEAR（PHP Extension and Application Repository）下载使用Services_JSON library。
输出JSON文本的PHP代码与XML范例非常相似。这次，我们首先定义一个级以保存数据，然后填入空数据。最后，我们输出JSON编码实例：
非常直接!
在Flex上， 我们需要完成重要的几步：首先，我们必须包含来自添加的程序库的JSON类；然后，我们要改变HTTPService 栏指向新的服务；最后，我们要更改serviceLoaded 方法解码JSON文本。
首先，在mx:Script 栏的顶端，我们指导Flex使用来自ActionScript 3 Corelib library 的JSON类：
import com.adobe.serialization.json.JSON;
我们还要告知HTTPService JSON服务的位置。JSON 结果会以文本形式返回，因此我们也需要更改resultFormat为文本：
最后，我们需要更改serviceLoaded方法，以解码JSON文本成为Flex实例。下面是serviceLoaded的一个新版本：
扫一扫
121
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
