反射actionscript教程a.doc

反射 actionscript教程 actionscactionscript反射actionscript教程actionscript3 actionscript eval为actionscript导出actionscript2.0 actionscript xml从标签时代到富客户端：从Web 1.0到Flex作者James Ward&Shashank Tiwari译者韩锴发布于下午8时4分社区Java主题RIA,Web 2.0,Web框架简介iPhone的成功明白无误地说明了一个事实：用户希望在他们的软件体验中感受到更多的交互。更多的交互可以让用户更好地利用程序的特性，提高他们的效率。这就是为什么交互不仅仅在个人信息管理程序中、而且在企业级业务程序中也是非常关键的。良好交互性的最大受益者是各种涉及到数据可视化的企业应用程序，因为更高的效率直接转化为了更好的决策，也立即会变为商业利润。Dashboard是最典型的数据可视化应用程序。最具讽刺意味的是，今天大多数Dashboard在创建高效的用户体验的过程中，缺少交互性。因此我们决定一点点地美化一个典型的Web 1.0的Dashboard，给它增加更多的交互和丰富的功能。我们不会从头开始创建完整的应用程序，这未免是在重复发明车轮。相反，我们会重新设计界面，并把它整合到现有的服务器端架构中。通过这次学习，我们会完成一个简单但有意义的转换。相关厂商内容通过Oracle SQL、Linux和Ruby解决与数据集相关的问题基于浪潮Loushang统一平台的电力行业解决方案IDC：SOA中国路线图技术分析报告下载我们在练习中使用的Dashboard是开源的Pentaho BI套件的一部分。数据和视图来自于Pentaho BI发行版中的示例应用程序。尽管我们的示例程序是一个Dashboard应用程序，但是其中的概念可以用于任何需要从Web 1.0迁移到RIA的项目中。我们选用的RIA工具集是Adobe Flex。我们在此讨论的内容，全部是基于Flex框架、Flash VM以及相关支持库的。如果你想亲自动手完成本文介绍的内容，应该安装下面的软件：*免费的Flex SDK,Flash Player 9(安装在浏览器中)以及Flex Builder 3Public Beta 2(可选的)*Pentaho 1.6 Demo Bundle记住首先要启动Pentaho服务器、登录到Dashboard，然后才能运行Flex界面。Flex界面假设你已经登录并通过验证了。源代码还假设服务器会监听8080端口、等待HTTP请求。如果你的Pentaho HTTP服务器需要监听其他的端口，请修改源代码。为了方便那些希望跳过安装Pentaho服务器这步骤的人，下载的Pentaho源代码绑定包中还包含一个伪数据集版本的Flex界面。现在已经万事俱备了，下面可以仔细研究我们的示例程序了。看看我的Pentaho Dashboard首先是免责声明-这篇文章能够仅仅提供了一点浅尝辄止的体验。尽管不是必须的，不过如果你希望在深入学习本文前先了解一些背景知识的话，可以到或者去看看。这篇文章也没有打算讲述创建可维护的代码构架的最佳实践，或者用户界面的设计实践。比如，尽管使用Ely Greenfield的Chart drill down组件demo可以改进用户体验，但是它也会让你付出更多的努力才能设置并运行示例程序，因此我们在示例中并没有选用它。我们希望为那些只想简单了解一下代码的人，提供一种单纯的复制与粘贴的体验。如果混入了第三方的组件或者一个实实在在的MVC架构，将会令这个体验变得复杂。如果你想进一步深入挖掘这些主题，可以在网上或者Adobe Developer Connection上找到大量的相关文章。为了让你能够对我们即将创建的东西有一个了解，我们先来看看最终的效果。查看Demo。而Pentaho Dashboard最初的样子却是这样的：正如前文提到的，我们使用Flex创建新的Dashboard。这个基于Flex的Dashboard是用声明式的MXML语言和过程式的ActionScript语言编写的，并利用免费的Flex SDK编译为SWF文件。SWF文件是Flash Player VM上的字节码。你可以在浏览器中运行SWF文件，或者通过Adobe整合运行时(AIR)将它转化为一个桌面应用程序。让我们先来看看创建新的Dashboard的源代码。?xml version=1.0encoding=utf-8?mx：Application xmlns：mx=creationComplete=initApp()layout=horizontalmx：Script！CDATA/import classes used inActionScriptand not used in the MXML/ActionScriptis code generated from MXML by the free Flex SDKs mxmlc compiler/The generatedActionScriptcan be viewed if you pass mxmlc the-compiler.keep-generated-actionscript argument import mx.charts.HitData；import mx.collections.ArrayCollection；import mx.rpc.events.ResultEvent；/Bindable is ametadata/annotation which generates event code so that the variable/can be used in an MXML Binding Expression,ie.dataProvider=territoryRevenueBindablepublic var territoryRevenue：ArrayCollection；Bindablepublic var productlineRevenue：Object；Bindablepublic var topTenCustomersRevenue：Object；/Variables inActionScripthave namespaces like in Java.You can use the typical public,/private,and protected namespaces as well as create your own namespaces/Object types are specified with acolon character and are optional but recommended.private var _selectedTerritory：String=*；private var _selectedProductLine：String=*；/the initApp function is called when the Applications creationComplete event is fired(see the mx：Application tag above private function initApp()：void/initializes our data caches productlineRevenue=new Object()；topTenCustomersRevenue=new Object()；/initiates the request to the server to get the Sales by Territory data/tSrv is defined in MXML below.It could also have been defined inActionScriptbut would have been slightly more verbose tSrv.send()；/Since the Sales by Product Line and Top Ten Customer Sales depend on the selected territory/we make acall to the functions that will fetch the data based on the selected territory(or pull it from cache)/in this case the selected territory is*or our indicator for all.When the users selects anew territory/these methods will be called again but the selected territory will be different updateProductLineRevenue()；updateTopTenCustomersRevenue()；/Setter method that causes the data stores for the Sales by Product Line and Top Ten Customer Sales/to be updated and the charts to be updated accordingly public function set selectedTerritory(territory：String)：void/update the private backing variable _selectedTerritory=territory；updateProductLineRevenue()；updateTopTenCustomersRevenue()；/Getter method that returns the selected Territory/This method has the Bindable metadata/annotation on it so that the selectedTerritory property can/be used in abinding expressionBindablepublic function get selectedTerritory()：Stringreturn _selectedTerritory；/Setter method similar to selectedTerritory but for the selected product line public function set selectedProductLine(productLine：String)：void_selectedProductLine=productLine；updateTopTenCustomersRevenue()；Bindablepublic function get selectedProductLine()：Stringreturn _selectedProductLine；/If the data is in cache then just directly update the chart based on the selected territory./If the data is not in cache then assemble the name value pairs that are needed by the/web service request,then make the request.private function updateProductLineRevenue()：voidif(productlineRevenue_selectedTerritory=undefined)productlineRevenue_selectedTerritory=new ArrayCollection()；var p：Object=new Object()；if(_selectedTerritory！=*)p.territory=_selectedTerritory；plSrv.send(p)；elseplPie.dataProvider=productlineRevenue_selectedTerritory；/Similar to updateProductLineRevenue except that both the selected territory and/the selected product line determine the data set.private function updateTopTenCustomersRevenue()：voidif(topTenCustomersRevenue_selectedTerritory+_+_selectedProductLine=undefined)topTenCustomersRevenue_selectedTerritory+_+_selectedProductLine=new ArrayCollection()；var p：Object=new Object()；if(_selectedTerritory！=*)p.territory=_selectedTerritory；if(_selectedProductLine！=*)ductline=_selectedProductLine；ttcSrv.send(p)；elsettcBar.dataProvider=topTenCustomersRevenue_selectedTerritory+_+_selectedProductLine；/This function handles aresponse from the server to get the Sales by territory.It reorganizes that data/into aformat that the chart wants it in.The tPie chart notices changes to the underlying ArrayCollection/that happen inside the for each loop.When it sees changes it updates its view of the data.private function handleTResult(event：ResultEvent)：voidterritoryRevenue=new ArrayCollection()；tPie.dataProvider=territoryRevenue；var hdr：ArrayCollection=event.result.Envelope.Body.ExecuteActivityResponse.swresultCOLUMN-HDR-ROWCOLUMN-HDR-ITEM；for each(var pl：Object in event.result.Envelope.Body.ExecuteActivityResponse.swresultDATA-ROW)var spl：Object=new Object()；splhdr0=plDATA-ITEM0；splhdr1=plDATA-ITEM1；territoryRevenue.addItem(spl)；/Similar to handleTResult except that it handles the data for Sales by Product Line private function handlePLResult(event：ResultEvent)：voidvar hdr：ArrayCollection=event.result.Envelope.Body.ExecuteActivityResponse.swresultCOLUMN-HDR-ROWCOLUMN-HDR-ITEM；for each(var pl：Object in event.result.Envelope.Body.ExecuteActivityResponse.swresultDATA-ROW)var spl：Object=new Object()；splhdr0=plDATA-ITEM0；splhdr1=plDATA-ITEM1；productlineRevenue_selectedTerritory.addItem(spl)；plPie.dataProvider=productlineRevenue_selectedTerritory；/Similar to handleTResult except that it handles the data for Top Ten Customer Sales private function handleTTCResult(event：ResultEvent)：voidvar hdr：ArrayCollection=event.result.Envelope.Body.ExecuteActivityResponse.swresultROW-HDR-ROW；var pl：ArrayCollection=event.result.Envelope.Body.ExecuteActivityResponse.swresultDATA-ROW；for(var i：int=0；i pl.length；i+)var spl：Object=new Object()；=hdriROW-HDR-ITEM0；spl.sales=pliDATA-ITEM；topTenCustomersRevenue_selectedTerritory+_+_selectedProductLine.addItemAt(spl,0)；ttcBar.dataProvider=topTenCustomersRevenue_selectedTerritory+_+_selectedProductLine；/This function is called to format the dataToolTips on the tPie chart.private function formatTPieDataTip(hitdata：HitData)：Stringreturnb+hitdata.item.TERRITORY+/b br+cf.format(hitdata.item.SOLD_PRICE)；/mx：Script！-These HTTP Services communicate via HTTP to aserver-mx：HTTPService id=tSrvurl=olution=samples&path=steel-wheels/homeDashboard&action=Sales_by_Territory.xac tionresult=handleTResult(event)/mx：HTTPService id=plSrvurl=olution=samples&path=steel-wheels/homeDashboard&action=Sales_by_Productline.x actionresult=handlePLResult(event)/mx：HTTPService id=ttcSrvurl=solution=samples&path=steel-wheels/homeDashboard&a ction=topnmdxquery.xactionresult=handleTTCResult(event)/！-Non-visual component to format currencys correctly.Used in the formatTPieDataTip function-mx：CurrencyFormatter id=cfprecision=0/！-Effects used to make the charts more interactive-mx：SeriesInterpolate id=plEffect/mx：SeriesSlide id=ttcSlidedirection=right/！-Stacked vertical layout container-mx：VBox height=100%width=40%！-Nice box with optional drop shadows,title bars,and control bars-mx：Panel width=100%height=100%title=Revenue By Territory！-Pie Chart-mx：PieChart id=tPiewidth=100%height=100%showDataTips=truedataTipFunction=formatTPieDataTip！-Sets the itemClick property on the PieChart to the embeddedActionScriptcode.We could have also called afunction defined above.-mx：itemClick/calls the appropriate setter method selectedTerritory=event.hitData.item.TERRITORY；/tells the pie chart to explode the pie wedge the user click on var explodeData：Array=；explodeDataterritoryRevenue.getItemIndex(event.hi tData.item)=0.15；tPie.series0.perWedgeExplodeRadius=explodeData；/mx：itemClick！-Sets the series property on the Pie Chart.-mx：series！-The Pie Series defines how the Pie Chart displays its data.-mx：PieSeries nameField=TERRITORYfield=SOLD_PRICElabelPosition=insideWithCalloutlabelField=TERRITORY/mx：series/mx：PieChart/mx：Panel！-A Binding Expression in the title bar of the Panel uses the Bindable getter for the selectedTerritory property-mx：Panel width=100%height=100%title=Revenue By Product Line(Territory=selectedTerritory)mx：PieChart id=plPiewidth=100%height=100%showDataTips=truemx：itemClick selectedProductLine=event.hitData.item.PRODUCTLINE；var explodeData：Array=；explodeDataproductlineRevenue_selectedTerritory.getItemIndex(event.hitData.it em)=0.15；plPie.series0.perWedgeExplodeRadius=explodeData；/mx：itemClick mx：series！-The showDataEffect on the Series uses Binding to(re)use an effect defined above-mx：PieSeries nameField=PRODUCTLINEfield=REVENUElabelPosition=insideWithCalloutshowDataEffect=plEffectlabelField=PRODUCTLINE/mx：series/mx：PieChart/mx：Panel/mx：VBox mx：Panel width=100%height=100%title=Top 10 Customers(Territory=selectedTerritory|Product Line=selectedProductLine)mx：BarChart id=ttcBarwidth=100%height=100%showDataTips=truemx：series mx：BarSeries xField=salesshowDataEffect=ttcSlide/mx：series mx：verticalAxis mx：CategoryAxis categoryField=name/mx：verticalAxis/mx：BarChart/mx：Panel/mx：Application下载并查看源代码。注意应用程序有两个版本。一个是使用伪数据集的pentaho_dashboard_demo.mxml，另一个是会连接到真实的Pentaho服务器以获取数据的pentaho_dashboard.mxml。迁移过程向RIA迁移的过程的第一步是设计一个新界面。同时你还需要明确如何向应用程序暴露出数据和服务。Pentaho已经为我们暴露出了数据和服务，所以留下来最难的部分是把数据解析为Flex Charting组件所期望的格式。最终你可以将后端的服务与新的界面挂接到一起。让我们来深入每一步的细节。设计新的接口创建新RIA接口的最佳思考方式是什么?不是考虑如何使现有的接口更丰富，而是要以用户希望如何查看以及与数据交互为出发点，重新进行思考。在这个过程中，设计师会发挥很大的作用。如果可能，尽可能地发挥他们的创造性。作为开发者，你可以先创建一个原型。为了提高效率，你需要创建一个模拟数据集。你可以在Sales_by_Productline.xaction、Sales_by_Territory.xaction和topnmdxquery.xaction文件中找到我们使用的数据集。在例子中，我把模拟数据集做成与Pentaho暴露出来的Web Services很相似。尽管这不是必须的，但它简化了挂接到真正的服务上所需的工作。有了模拟数据集，我们可以在设计上进行更快的迭代了。我们所做的设计看上去与原来的Dashboard几乎一样。如果有一位设计师帮助我们(实际上并没有)，我们可以拿出更有创造性的产品。尽管如此，我们这些开发者还是能够创建出有更多交互的Dashboard。我们其实可以设计出更复杂的界面来，但是在这个例子中，还是希望保持代码易于阅读和理解。创建UI的代码相当直接。下面的MXML代码就能创建一个PieChart：mx：PieChart width=100%height=100%mx：series mx：PieSeries nameField=TERRITORYfield=SOLD_PRICElabelPosition=insideWithCalloutlabelField=TERRITORY/mx：series/mx：PieChart为了增加交互性，你可以添加一个itemClick事件处理器：mx：itemClick selectedTerritory=event.hitData.item.TERRITORY；var explodeData：Array=；explodeDataterritoryRevenue.getItemIndex(event.hitData.item)=0.15；tPie.series0.perWedgeExplodeRadius=explodeData；/mx：itemClick当我们设置selectedTerritory时(就像在itemClick事件处理器中所做的)，会引起一些其他的动作。这个例子中，我们希望刷新数据集，这个数据集与相应的饼图绑定到一起了：public function set selectedTerritory(territory：String)：void_selectedTerritory=territory；updateProductLineRevenue()；updateTopTenCustomersRevenue()；我们也可以很简单地为数据集已改变的Chart增加一个平滑的转化。第一件要做到事情就是添加一个我们打算使用的效果的实例mx：SeriesInterpolate id=plEffect/我们还需要把showDataEffect绑定到效果的实例上，这样，当数据发生变化后，就可以通知饼状图使用这个效果了mx：PieSeries nameField=PRODUCTLINEfield=REVENUElabelPosition=insideWithCalloutshowDataEffect=plEffectlabelField=PRODUCTLINE/我们也可能想增加一个鼠标悬浮时的提示：mx：PieChart id=tPiewidth=100%height=100%showDataTips=truedataTipFunction=formatTPieDataTipdataTipFunction被命名为formatTPieDataTip，后者返回一个自定义的字符串：private function formatTPieDataTip(hitdata：HitData)：Stringreturnb+hitdata.item.TERRITORY+b br+cf.format(hitdata.item.SOLD_PRICE)；我们可以指定很多其他的风格来自定义应用程序的感观(look and feel)。开发者可以将风格内联在属性中，也可以定义在外部的CSS文件中。暴露后端使用Pentaho，我们可以很容易地发现Web Service并与之交互。Web Service给我们提供了用于Dashboard的数据。可以返回按照区域分布的销售版图的URL是(在本地运行时)：这里。有些URL会携带参数，来确定返回什么数据集。例如，十大客户的Web Service可以带有两个参数，区域和产品类型，它们共同决定了应该返回哪些信息。将前端挂接到后端要想把前端挂接到后端，你首先要创建一个HTTPService(如果使用的是SOAP，则创建WebService)：mx：HTTPService id=tSrvurl=olution=samples&path=steel-wheels/homeDashboard&action=Sales_by_Territory.xa ctionresult=handleTResult(event)/result属性指定了响应从服务器返回后要执行的代码。在这个例子中，我们只要调用一个名为handleTResult的方法，并传递一个Event类型的参数就可以了。这个方法负责把我们接收到的数据转换为Charts所需的样式。无论我们在使用Charts还是其他诸如DataGrid之类的组件，都需要一些简单的处理。在这个例子中，我们要对数据做一些处理然后再把它交给Chart。private function handleTResult(event：ResultEvent)：voidterritoryRevenue=new ArrayCollection()；tPie.dataProvider=territoryRevenue；var hdr：ArrayCollection=event.result.Envelope.Body.ExecuteActivityResponse.swresultCOLUMN-HDR-ROWCOLUMN-HDR-ITEM；for each(var pl：Object in event.result.Envelope.Body.ExecuteActivityResponse.swresultDATA-ROW)var spl：Object=new Object()；splhdr0=plDATA-ITEM0；splhdr1=plDATA-ITEM1；territoryRevenue.addItem(spl)；在这个例子里，所有的代码都放到一个文件中了。在实际的项目中，我们会按照模型、视图和控制器的架构将它拆分到不同的文件中。我们在其他的时间里详细讨论如何使用正确的设计模式来构建大型的应用程序。至此，我们就完成了这个示范的应用程序。从现在开始到本文结束，我们将通过Adobe Flex讨论RIA的一些有趣的方面。这个示例的精彩之处为何?这个简单的示例证明了对于传统的Web应用程序来说，丰富的、带有更多交互的用户界面是多么重要。这个程序的美妙之处，是它为现有的程序提供一个很棒的界面，却不需要进行大量的重构。这种便利一部分要归因于Pentaho暴露出了它的服务器端调用，另一部分归因于Flex能够平稳地消化掉这些服务的能力，这得利于Flex的组件和数据绑定模型。这里示例同样示范了如何谨慎地选择、匹配各种技术。一个优