Flex教程 Flex程序开发初步

开发 后端
Flex程序的编写有ActionScript和MXML共同组成,Flex SDK提供了丰富的用户界面窗口工具;希望本文的Flex教程可以帮你初步了解Flex程序的编写。

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应用展示如下数据网格:

  1. ﹤ xml version="1.0" encoding="utf-8"?﹥   
  2.   ﹤ mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"﹥  
  3.  
  4.   ﹤ mx:DataGrid width="100%" height="100%" id="inventoryTable"/﹥  
  5.  
  6.   ﹤ /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元素的内容。

  1. ﹤ html﹥   
  2.   ﹤ head﹥  
  3.  
  4.   ﹤ meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/﹥  
  5.  
  6.   ﹤ script type="text/javascript" src="swfobject.js"/﹥  
  7.  
  8.   ﹤ script type="text/javascript"﹥  
  9.  
  10.   swfobject.embedSWF("BooksInventory.swf",  
  11.  
  12.   "replaceContent",  
  13.  
  14.   "600", "400",  
  15.  
  16.   "10.0.0", "playerProductInstall.swf");  
  17.  
  18.   ﹤ /script﹥  
  19.  
  20.   ﹤ /head﹥  
  21.  
  22.   ﹤ body﹥  
  23.  
  24.   ﹤ div id="replaceContent"﹥  
  25.  
  26.   ﹤ !-- Original HTML table here--﹥  
  27.  
  28.   ﹤ /div﹥  
  29.  
  30.   ﹤ /body﹥  
  31.  
  32.   ﹤ /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()的参数:

  1.  ﹤ html﹥   
  2.   ﹤ head﹥  
  3.  
  4.   ﹤ meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/﹥  
  5.  
  6.   ﹤ script type="text/javascript" src="swfobject.js"/﹥  
  7.  
  8.   ﹤ script type="text/javascript"﹥  
  9.  
  10.   var flashvars = {  
  11.  
  12.   bookInventory: '[' +  
  13.  
  14.   '{"Title":"Programming in Scala", ' +  
  15.  
  16.   '"Author(s)":"Odersky, Martin. Lex Spoon. Bill Venners",' +  
  17.  
  18.   '"Year": 2008,' +  
  19.  
  20.   '"Publisher": "Artima Press", ' +  
  21.  
  22.   '"Price": 49.95, ' +  
  23.  
  24.   '"Stock": 1520' +  
  25.  
  26.   '}, ' +  
  27.  
  28.   '{"Title":"Essential ActionScript 3", ' +  
  29.  
  30.   '"Author(s)": "Moock, Colin", ' +  
  31.  
  32.   '"Year": 2007,' +  
  33.  
  34.   '"Publisher": "O\'Reilly", ' +  
  35.  
  36.   '"Price": 47.95, ' +  
  37.  
  38.   '"Stock": 2500' +  
  39.  
  40.   '}, ' +  
  41.  
  42.   '{"Title":"Programming Erlang", ' +  
  43.  
  44.   '"Author(s)": "Armstrong, Joe", ' +  
  45.  
  46.   '"Year": 2007,' +  
  47.  
  48.   '"Publisher": "Pragmatic", ' +  
  49.  
  50.   '"Price": 32.95, ' +  
  51.  
  52.   '"Stock": 3525' +  
  53.  
  54.   '}' +  
  55.  
  56.   ']'  
  57.  
  58.   };  
  59.  
  60.   swfobject.embedSWF("BooksInventory.swf",  
  61.  
  62.   "replaceContent",  
  63.  
  64.   "600", "400",  
  65.  
  66.   "10.0.0", "playerProductInstall.swf",  
  67.  
  68.   flashvars);  
  69.  
  70.   ﹤ /script﹥  
  71.  
  72.   ﹤ /head﹥  
  73.  
  74.   ﹤ body﹥  
  75.  
  76.   ﹤ div id="replaceContent"﹥  
  77.  
  78.   ﹤ !-- Original HTML table here--﹥  
  79.  
  80.   ﹤ /div﹥  
  81.  
  82.   ﹤ /body﹥  
  83.  
  84.   ﹤ /html﹥ 

列表三,HTML中公开的FlashVars

处理JSON

设定初始化值之前,我们希望应用程序能够检索bookInventory flashVar,作为表格数据源分配它的值。接下来的代码在Flex应用中的实现如下:

  1.   ﹤ xml version="1.0" encoding="utf-8"?﹥   
  2.   ﹤ mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
  3.  
  4.   creationComplete="onCreationComplete()"﹥  
  5.  
  6.   ﹤ mx:Script﹥  
  7.  
  8.   ﹤ ![CDATA[  
  9.  
  10.   import com.adobe.serialization.json.JSON;  
  11.  
  12.   private function onCreationComplete():void {  
  13.  
  14.   var invParam:String = Application.application.parameters.bookInventory;  
  15.  
  16.   inventoryTable.dataProvider = JSON.decode(invParam) as Array;  
  17.  
  18.   }  
  19.  
  20.   ]]﹥  
  21.  
  22.   ﹤ /mx:Script﹥  
  23.  
  24.   ﹤ mx:DataGrid width="100%" height="100%" id="inventoryTable"/﹥  
  25.  
  26.   ﹤ /mx:Application﹥ 

 

【编辑推荐】

  1. Java+Flex打造完美RIA应用
  2. Flex垃圾回收和性能优化的一些总结
  3. Flex和Jsp之间中文参数的传递
  4. Flex编程中需要注意的Namespace用法
  5. 将Flex与Spring集成框架
责任编辑:佚名 来源: IT专家网
相关推荐

2010-07-30 15:18:26

Flex

2016-11-04 10:49:48

微信小程序

2010-07-30 13:40:59

Flex开发

2010-02-06 14:19:26

ibmdwGoogleMap

2010-08-02 09:10:36

Flex模块化

2010-08-09 09:20:51

Flex程序设计

2010-08-03 13:06:15

Flex Builde

2010-08-12 15:52:34

Flex应用程序

2010-08-03 14:18:02

Flex开发工具

2010-01-04 18:22:03

Ubuntu flex

2010-08-05 13:27:06

Flex布局

2010-08-11 11:31:49

2010-08-03 14:37:30

Flex入门教程

2010-07-27 15:53:15

2010-07-30 15:49:10

2010-08-12 15:44:25

Flex应用程序

2011-12-03 20:25:53

2010-07-27 13:46:18

Flex swf

2010-07-27 15:36:15

Flex swf

2010-08-03 14:24:37

Flex与java集成
点赞
收藏

51CTO技术栈公众号