Flex应用程序是由ActionScript 3.0书写的，一个可选静态类型语言，引出面向对象编程的概念和功能。ActionScript 3与JavaScript语法非常相似--大部分JavaScript代码的编译与ActionScript代码是同样有效的--但是仍然增加了与Java类似的，基于类别的设计模型。
除ActionScript之外，Flex库为用户界面设计提供一种基于XML的领域特定语言，MXML。Flex编译可以将MXML代码转换为ActionScript，然后将ActionScript代码转变为Flash bytecode。开源Flex SDK包括一系列丰富的用户界面窗口工具，并且那里也有一个欣欣向荣的可共享的第三方Flex库。用JavaFX写用户界面控制器
Flash Player的流行主要是因为其作为一种先进的矢量图形嵌入，或者是Web页面内的Flash movie。这个设计目标被延续到以后每个Flash Player版本中，使得Flex应用嵌入到HTML页面变得非常容易。
想像一下最初版本的图书馆管理程序就是使用JSP页面展示了可用的详细目录，使用HTML表格标签。如果图书馆在目录内拥有成千上万的标题，用户就必须等待浏览器上面显示一个很长的HTML列表，或者翻阅目录，大概每页上面会有20个标题。
用Flex数据网格组件替代HTML表格会带了几点好处：Flex数据网格可以负载全部的目录清单，因为它的显示速度要比HTML快得多;数据网格支持内置的排序表，列调整以及数据筛选;数据网格列可以具有不同的格式程序，它们基于列表的数据类型;数据网格支持打印。
以下的实例包含了这种资源的代码，为Flex应用展示如下数据网格：
- ﹤ xml version="1.0" encoding="utf-8"?﹥
- ﹤ mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"﹥
- ﹤ mx:DataGrid width="100%" height="100%" id="inventoryTable"/﹥
- ﹤ /mx:Application﹥
列表一，Flex数据网格
Flex应用在MXML中有完整的描述，并且在应用程序元素里面包括一个公开的Flex数据网格组件。数据网格是一种ActionScript类，就像任何一种ActionScript类，它也可以从MXNL中使用：编译者将会从XML名字空间以及标签名称中找到ActionScript类名称。
ActionScript语言支持工具，并且ActionScript对象工具可以在MXML中被指定，就像XML属性值。实例中的数据网格被分配了一种id特质，定义了一种方法来引入网格组件。我们也确定网格必须扩展到与Flex应用具有同样得深度和广度。在Java Web 应用程序上放入YUI Face
这种应用程序编译的结果是二进制文件，BooksInventory.swf。SWF(Shockwave Flash格式)可以使用嵌入方式或者对象HTML标签嵌入到现有的HTML页面。浏览器idiosynchracies使得这种嵌入多少有些复杂;但是开源SWF对象项目使得很多复杂情况的解决变得更加自动化(FlexBuilder也会为SWF文件产生适当的的HTML标签)。
下面的这个片段展示的就是使用SWFObject JavaScript API将BooksInventory.swf嵌入到HTML活着JSP页面中。注意这种技术是如何日益增强HTML页面的：如果Flash Player 的应用版本--版本10在这种情况下--出现，SWFObject's embedSWF()方式将会审核;如果不是，库将会尝试着插入Flash Player。然后将Flex应用放入到600*400像素范围内，替代replaceConten元素的内容。
- ﹤ html﹥
- ﹤ head﹥
- ﹤ meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/﹥
- ﹤ script type="text/javascript" src="swfobject.js"/﹥
- ﹤ script type="text/javascript"﹥
- swfobject.embedSWF("BooksInventory.swf",
- "replaceContent",
- "600", "400",
- "10.0.0", "playerProductInstall.swf");
- ﹤ /script﹥
- ﹤ /head﹥
- ﹤ body﹥
- ﹤ div id="replaceContent"﹥
- ﹤ !-- Original HTML table here--﹥
- ﹤ /div﹥
- ﹤ /body﹥
- ﹤ /html﹥
列表二，嵌入SWF文件到HTML，伴有SWF对象
你可以使用FlashVars从HTML页面传递数据到Flex组件。FlashVars是你指定到Flash Player对象的一个参数，是由名称/值成对组成的，由分隔符&分开。
SWFObject使得这种分配非常容易：它允许JSON-style标记到指定的FlashVars。然后定义JSON数列作为bookInventory的变数值。书籍库存量数据阵列必须在一个String中，因为FlashVar只能被分配String值。如果手工来做这工作就太乏味了，但是JSON数据有可能从一个服务器上的数据源引发，当创建HTML 或者 JSP (或者PHP或者Ruby on Rails)页面的时候。也有可能当页面在客户端完全下载下来以后，使用异步Ajax呼叫检索JSON数据。
The flashvars variable is passed to the Flex application as a parameter to embedSWF():
Flashvars变数被传递到Flex应用，作为embedSWF()的参数：
- ﹤ html﹥
- ﹤ head﹥
- ﹤ meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/﹥
- ﹤ script type="text/javascript" src="swfobject.js"/﹥
- ﹤ script type="text/javascript"﹥
- var flashvars = {
- bookInventory: '[' +
- '{"Title":"Programming in Scala", ' +
- '"Author(s)":"Odersky, Martin. Lex Spoon. Bill Venners",' +
- '"Year": 2008,' +
- '"Publisher": "Artima Press", ' +
- '"Price": 49.95, ' +
- '"Stock": 1520' +
- '}, ' +
- '{"Title":"Essential ActionScript 3", ' +
- '"Author(s)": "Moock, Colin", ' +
- '"Year": 2007,' +
- '"Publisher": "O\'Reilly", ' +
- '"Price": 47.95, ' +
- '"Stock": 2500' +
- '}, ' +
- '{"Title":"Programming Erlang", ' +
- '"Author(s)": "Armstrong, Joe", ' +
- '"Year": 2007,' +
- '"Publisher": "Pragmatic", ' +
- '"Price": 32.95, ' +
- '"Stock": 3525' +
- '}' +
- ']'
- };
- swfobject.embedSWF("BooksInventory.swf",
- "replaceContent",
- "600", "400",
- "10.0.0", "playerProductInstall.swf",
- flashvars);
- ﹤ /script﹥
- ﹤ /head﹥
- ﹤ body﹥
- ﹤ div id="replaceContent"﹥
- ﹤ !-- Original HTML table here--﹥
- ﹤ /div﹥
- ﹤ /body﹥
- ﹤ /html﹥
列表三，HTML中公开的FlashVars
处理JSON
设定初始化值之前，我们希望应用程序能够检索bookInventory flashVar，作为表格数据源分配它的值。接下来的代码在Flex应用中的实现如下：
- ﹤ xml version="1.0" encoding="utf-8"?﹥
- ﹤ mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
- creationComplete="onCreationComplete()"﹥
- ﹤ mx:Script﹥
- ﹤ ![CDATA[
- import com.adobe.serialization.json.JSON;
- private function onCreationComplete():void {
- var invParam:String = Application.application.parameters.bookInventory;
- inventoryTable.dataProvider = JSON.decode(invParam) as Array;
- }
- ]]﹥
- ﹤ /mx:Script﹥
- ﹤ mx:DataGrid width="100%" height="100%" id="inventoryTable"/﹥
- ﹤ /mx:Application﹥
【编辑推荐】
