1、反射 actionscript教程 actionscactionscript反射actionscript教程actionscript3 actionscript eval為actionscript導(dǎo)出actionscript2.0 actionscript xml從標(biāo)簽時(shí)代到富客戶端：從Web 1.0到Flex作者James Ward&Shashank Tiwari譯者韓鍇發(fā)布于下午8時(shí)4分社區(qū)Java主題RIA,Web 2.0,Web框架簡介iPhone的成功明白無誤地說明了一個事實(shí)：用戶希望在他們的軟件體驗(yàn)中感受到更多的交互。更多的交互可以讓用戶更好地利用程序的特性，提高他們的效率。這就是

2、為什么交互不僅僅在個人信息管理程序中、而且在企業(yè)級業(yè)務(wù)程序中也是非常關(guān)鍵的。良好交互性的最大受益者是各種涉及到數(shù)據(jù)可視化的企業(yè)應(yīng)用程序，因?yàn)楦叩男手苯愚D(zhuǎn)化為了更好的決策，也立即會變?yōu)樯虡I(yè)利潤。Dashboard是最典型的數(shù)據(jù)可視化應(yīng)用程序。最具諷刺意味的是，今天大多數(shù)Dashboard在創(chuàng)建高效的用戶體驗(yàn)的過程中，缺少交互性。因此我們決定一點(diǎn)點(diǎn)地美化一個典型的Web 1.0的Dashboard，給它增加更多的交互和豐富的功能。我們不會從頭開始創(chuàng)建完整的應(yīng)用程序，這未免是在重復(fù)發(fā)明車輪。相反，我們會重新設(shè)計(jì)界面，并把它整合到現(xiàn)有的服務(wù)器端架構(gòu)中。通過這次學(xué)習(xí)，我們會完成一個簡單但有意義的轉(zhuǎn)換

3、。相關(guān)廠商內(nèi)容通過Oracle SQL、Linux和Ruby解決與數(shù)據(jù)集相關(guān)的問題基于浪潮Loushang統(tǒng)一平臺的電力行業(yè)解決方案IDC：SOA中國路線圖技術(shù)分析報(bào)告下載我們在練習(xí)中使用的Dashboard是開源的Pentaho BI套件的一部分。數(shù)據(jù)和視圖來自于Pentaho BI發(fā)行版中的示例應(yīng)用程序。盡管我們的示例程序是一個Dashboard應(yīng)用程序，但是其中的概念可以用于任何需要從Web 1.0遷移到RIA的項(xiàng)目中。我們選用的RIA工具集是Adobe Flex。我們在此討論的內(nèi)容，全部是基于Flex框架、Flash VM以及相關(guān)支持庫的。如果你想親自動手完成本文介紹的內(nèi)容，應(yīng)該安裝下

4、面的軟件：*免費(fèi)的Flex SDK,Flash Player 9(安裝在瀏覽器中)以及Flex Builder 3Public Beta 2(可選的)*Pentaho 1.6 Demo Bundle記住首先要啟動Pentaho服務(wù)器、登錄到Dashboard，然后才能運(yùn)行Flex界面。Flex界面假設(shè)你已經(jīng)登錄并通過驗(yàn)證了。源代碼還假設(shè)服務(wù)器會監(jiān)聽8080端口、等待HTTP請求。如果你的Pentaho HTTP服務(wù)器需要監(jiān)聽其他的端口，請修改源代碼。為了方便那些希望跳過安裝Pentaho服務(wù)器這步驟的人，下載的Pentaho源代碼綁定包中還包含一個偽數(shù)據(jù)集版本的Flex界面?，F(xiàn)在已經(jīng)萬事俱備了

5、，下面可以仔細(xì)研究我們的示例程序了?？纯次业腜entaho Dashboard首先是免責(zé)聲明-這篇文章能夠僅僅提供了一點(diǎn)淺嘗輒止的體驗(yàn)。盡管不是必須的，不過如果你希望在深入學(xué)習(xí)本文前先了解一些背景知識的話，可以到或者去看看。這篇文章也沒有打算講述創(chuàng)建可維護(hù)的代碼構(gòu)架的最佳實(shí)踐，或者用戶界面的設(shè)計(jì)實(shí)踐。比如，盡管使用Ely Greenfield的Chart drill down組件demo可以改進(jìn)用戶體驗(yàn)，但是它也會讓你付出更多的努力才能設(shè)置并運(yùn)行示例程序，因此我們在示例中并沒有選用它。我們希望為那些只想簡單了解一下代碼的人，提供一種單純的復(fù)制與粘貼

6、的體驗(yàn)。如果混入了第三方的組件或者一個實(shí)實(shí)在在的MVC架構(gòu)，將會令這個體驗(yàn)變得復(fù)雜。如果你想進(jìn)一步深入挖掘這些主題，可以在網(wǎng)上或者Adobe Developer Connection上找到大量的相關(guān)文章。為了讓你能夠?qū)ξ覀兗磳?chuàng)建的東西有一個了解，我們先來看看最終的效果。查看Demo。而Pentaho Dashboard最初的樣子卻是這樣的：正如前文提到的，我們使用Flex創(chuàng)建新的Dashboard。這個基于Flex的Dashboard是用聲明式的MXML語言和過程式的ActionScript語言編寫的，并利用免費(fèi)的Flex SDK編譯為SWF文件。SWF文件是Flash Player VM上

7、的字節(jié)碼。你可以在瀏覽器中運(yùn)行SWF文件，或者通過Adobe整合運(yùn)行時(shí)(AIR)將它轉(zhuǎn)化為一個桌面應(yīng)用程序。讓我們先來看看創(chuàng)建新的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 f

8、ree 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

9、 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

10、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 Appl

11、ications 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 be

12、low.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

13、 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 S

14、ales 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 metho

15、d 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 th

16、e 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 bas

17、ed 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 Arr

18、ayCollection()；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

19、.private function updateTopTenCustomersRevenue()：voidif(topTenCustomersRevenue_selectedTerritory+_+_selectedProductLine=undefined)topTenCustomersRevenue_selectedTerritory+_+_selectedProductLine=new ArrayCollection()；var p：Object=new Object()；if(_selectedTerritory！=*)p.territory=_selectedTerritory；if

20、(_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

21、 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：Ar

22、rayCollection=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)；/Si

23、milar 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.Bod

24、y.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 Sa

25、les 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 Obje

26、ct()；=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 fu

27、nction 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=h

28、andleTResult(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

29、-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 heigh

30、t=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 embedded

31、ActionScriptcode.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

32、 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：ser

33、ies/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 sele

34、ctedProductLine=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 defi

35、ned 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 i

36、d=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下載并查看源代碼。注意應(yīng)用程序有兩個版本。一個是使用偽數(shù)據(jù)集的pentaho_dashboard_demo.mxml，另一個是會連接到真實(shí)的Pentaho服務(wù)器以獲取

37、數(shù)據(jù)的pentaho_dashboard.mxml。遷移過程向RIA遷移的過程的第一步是設(shè)計(jì)一個新界面。同時(shí)你還需要明確如何向應(yīng)用程序暴露出數(shù)據(jù)和服務(wù)。Pentaho已經(jīng)為我們暴露出了數(shù)據(jù)和服務(wù)，所以留下來最難的部分是把數(shù)據(jù)解析為Flex Charting組件所期望的格式。最終你可以將后端的服務(wù)與新的界面掛接到一起。讓我們來深入每一步的細(xì)節(jié)。設(shè)計(jì)新的接口創(chuàng)建新RIA接口的最佳思考方式是什么?不是考慮如何使現(xiàn)有的接口更豐富，而是要以用戶希望如何查看以及與數(shù)據(jù)交互為出發(fā)點(diǎn)，重新進(jìn)行思考。在這個過程中，設(shè)計(jì)師會發(fā)揮很大的作用。如果可能，盡可能地發(fā)揮他們的創(chuàng)造性。作為開發(fā)者，你可以先創(chuàng)建一個原型。為了

38、提高效率，你需要創(chuàng)建一個模擬數(shù)據(jù)集。你可以在Sales_by_Productline.xaction、Sales_by_Territory.xaction和topnmdxquery.xaction文件中找到我們使用的數(shù)據(jù)集。在例子中，我把模擬數(shù)據(jù)集做成與Pentaho暴露出來的Web Services很相似。盡管這不是必須的，但它簡化了掛接到真正的服務(wù)上所需的工作。有了模擬數(shù)據(jù)集，我們可以在設(shè)計(jì)上進(jìn)行更快的迭代了。我們所做的設(shè)計(jì)看上去與原來的Dashboard幾乎一樣。如果有一位設(shè)計(jì)師幫助我們(實(shí)際上并沒有)，我們可以拿出更有創(chuàng)造性的產(chǎn)品。盡管如此，我們這些開發(fā)者還是能夠創(chuàng)建出有更多交互的Da

39、shboard。我們其實(shí)可以設(shè)計(jì)出更復(fù)雜的界面來，但是在這個例子中，還是希望保持代碼易于閱讀和理解。創(chuàng)建UI的代碼相當(dāng)直接。下面的MXML代碼就能創(chuàng)建一個PieChart：mx：PieChart width=100%height=100%mx：series mx：PieSeries nameField=TERRITORYfield=SOLD_PRICElabelPosition=insideWithCalloutlabelField=TERRITORY/mx：series/mx：PieChart為了增加交互性，你可以添加一個itemClick事件處理器：mx：itemClick selecte

40、dTerritory=event.hitData.item.TERRITORY；var explodeData：Array=；explodeDataterritoryRevenue.getItemIndex(event.hitData.item)=0.15；tPie.series0.perWedgeExplodeRadius=explodeData；/mx：itemClick當(dāng)我們設(shè)置selectedTerritory時(shí)(就像在itemClick事件處理器中所做的)，會引起一些其他的動作。這個例子中，我們希望刷新數(shù)據(jù)集，這個數(shù)據(jù)集與相應(yīng)的餅圖綁定到一起了：public function set

41、 selectedTerritory(territory：String)：void_selectedTerritory=territory；updateProductLineRevenue()；updateTopTenCustomersRevenue()；我們也可以很簡單地為數(shù)據(jù)集已改變的Chart增加一個平滑的轉(zhuǎn)化。第一件要做到事情就是添加一個我們打算使用的效果的實(shí)例mx：SeriesInterpolate id=plEffect/我們還需要把showDataEffect綁定到效果的實(shí)例上，這樣，當(dāng)數(shù)據(jù)發(fā)生變化后，就可以通知餅狀圖使用這個效果了mx：PieSeries nameField=P

42、RODUCTLINEfield=REVENUElabelPosition=insideWithCalloutshowDataEffect=plEffectlabelField=PRODUCTLINE/我們也可能想增加一個鼠標(biāo)懸浮時(shí)的提示：mx：PieChart id=tPiewidth=100%height=100%showDataTips=truedataTipFunction=formatTPieDataTipdataTipFunction被命名為formatTPieDataTip，后者返回一個自定義的字符串：private function formatTPieDataTip(hitda

43、ta：HitData)：Stringreturnb+hitdata.item.TERRITORY+b br+cf.format(hitdata.item.SOLD_PRICE)；我們可以指定很多其他的風(fēng)格來自定義應(yīng)用程序的感觀(look and feel)。開發(fā)者可以將風(fēng)格內(nèi)聯(lián)在屬性中，也可以定義在外部的CSS文件中。暴露后端使用Pentaho，我們可以很容易地發(fā)現(xiàn)Web Service并與之交互。Web Service給我們提供了用于Dashboard的數(shù)據(jù)?？梢苑祷匕凑諈^(qū)域分布的銷售版圖的URL是(在本地運(yùn)行時(shí))：這里。有些URL會攜帶參數(shù)，來確定返回什么數(shù)據(jù)集。例如，十大客戶的Web S

44、ervice可以帶有兩個參數(shù)，區(qū)域和產(chǎn)品類型，它們共同決定了應(yīng)該返回哪些信息。將前端掛接到后端要想把前端掛接到后端，你首先要創(chuàng)建一個HTTPService(如果使用的是SOAP，則創(chuàng)建WebService)：mx：HTTPService id=tSrvurl=olution=samples&path=steel-wheels/homeDashboard&action=Sales_by_Territory.xa ctionresult=handleTResult(event)/result屬性指定了響應(yīng)從服務(wù)器返回后要執(zhí)行的代碼。在這個例子中，我們只要調(diào)用一個名為handleTResult的方法

45、，并傳遞一個Event類型的參數(shù)就可以了。這個方法負(fù)責(zé)把我們接收到的數(shù)據(jù)轉(zhuǎn)換為Charts所需的樣式。無論我們在使用Charts還是其他諸如DataGrid之類的組件，都需要一些簡單的處理。在這個例子中，我們要對數(shù)據(jù)做一些處理然后再把它交給Chart。private function handleTResult(event：ResultEvent)：voidterritoryRevenue=new ArrayCollection()；tPie.dataProvider=territoryRevenue；var hdr：ArrayCollection=event.result.Envelope.

46、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)；在這個例子里，所有的代碼都放到一個文件中了。在實(shí)際的項(xiàng)目中，我們會按照模型、視

47、圖和控制器的架構(gòu)將它拆分到不同的文件中。我們在其他的時(shí)間里詳細(xì)討論如何使用正確的設(shè)計(jì)模式來構(gòu)建大型的應(yīng)用程序。至此，我們就完成了這個示范的應(yīng)用程序。從現(xiàn)在開始到本文結(jié)束，我們將通過Adobe Flex討論RIA的一些有趣的方面。這個示例的精彩之處為何?這個簡單的示例證明了對于傳統(tǒng)的Web應(yīng)用程序來說，豐富的、帶有更多交互的用戶界面是多么重要。這個程序的美妙之處，是它為現(xiàn)有的程序提供一個很棒的界面，卻不需要進(jìn)行大量的重構(gòu)。這種便利一部分要?dú)w因于Pentaho暴露出了它的服務(wù)器端調(diào)用，另一部分歸因于Flex能夠平穩(wěn)地消化掉這些服務(wù)的能力，這得利于Flex的組件和數(shù)據(jù)綁定模型。這里示例同樣示范了如何謹(jǐn)慎地選擇、匹配各種技術(shù)。一個優(yōu)