分类： Java
2009-07-07 18:05:07
除ActionScript之外，Flex库为用户界面设计提供一种基于XML的领域特定语言，MXML。Flex编译可以将MXML代码转换为ActionScript，然后将ActionScript代码转变为Flash bytecode。开源Flex SDK包括一系列丰富的用户界面窗口工具，并且那里也有一个欣欣向荣的可共享的第三方Flex库。
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="com/2006/mxml" layout="absolute"> < mx:DataGrid width="100%" height="100%" id="inventoryTable"/> < /mx:Application> |
Flex应用在MXML中有完整的描述，并且在应用程序元素里面包括一个公开的Flex数据网格组件。数据网格是一种ActionScript 类，就像任何一种ActionScript类，它也可以从MXNL中使用：编译者将会从XML名字空间以及标签名称中找到ActionScript类名 称。
ActionScript语言支持工具，并且ActionScript对象工具可以在MXML中被指定，就像XML属性值。实例中的数据网格被分配了一种id特质，定义了一种方法来引入网格组件。我们也确定网格必须扩展到与Flex应用具有同样得深度和广度。
这种应用程序编译的结果是二进制文件，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 tablehere-->
< /div>
< /body>
< /html>
列表三，HTML中公开的FlashVars处理JSON
设定初始化值之前，我们希望应用程序能够检索bookInventory flashVar，作为表格数据源分配它的值。接下来的代码在Flex应用中的实现如下：
| < xml version="1.0" encoding="utf-8"?>
< mx: xmlns:mx="/2006/mxml" layout="absolute" creationComplete="onCreationComplete()"> < mx:> < ![CDATA[ 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> |
