Flex技術(shù)介紹

1、FLEX技術(shù)介紹1 技術(shù)概述(Tech Reference)1.1 FLEX簡介 Flex是Adobe公司推出的一系列工具和技術(shù)，使開發(fā)人員可以開發(fā)和部署可升級的富互聯(lián)網(wǎng)應(yīng)用程序（RIA）。富互聯(lián)網(wǎng)應(yīng)用程序（RIA）是指像開發(fā)Web網(wǎng)頁一樣的簡單方式來部署富客戶端程序。這種程序具有比HTML更加健壯、反應(yīng)更加靈敏和互動性更豐富的特點。RIA利用相對健壯的客戶端描述引擎。這個引擎能夠提供內(nèi)容密集、響應(yīng)速度快和圖形豐富的用戶界面。并可利用豐富的控件庫隨時、快速的構(gòu)建富客戶端程序。RIA的另一個好處是，數(shù)據(jù)能夠被緩存在客戶端，從而可以實現(xiàn)一個比基于HTML的響應(yīng)速度更快且數(shù)據(jù)往返于服務(wù)器次數(shù)更少的用

2、戶界面。1.2 FLEX特點Flex可以在企業(yè)內(nèi)部或在Web上創(chuàng)建富互聯(lián)網(wǎng)應(yīng)用程序（RIA）。它使企業(yè)能夠創(chuàng)建個性化的豐富多媒體應(yīng)用程序，極大地提高用戶的體驗，徹底革新人與Web的交互關(guān)系。包括：增強用戶體驗、完善的開發(fā)環(huán)境、通用的配置環(huán)境、企業(yè)級的特征、消除頁面加載、標準的架構(gòu)、與瀏覽器兼容、AIR應(yīng)用程序、可集成HTML、JavaScript、Ajax。1.3 FLEX開發(fā)環(huán)境IDE：Flex Builder3。Flash Player插件：Install Flash Player 9 ActiveX.exe，Install Flash Player 9 Plugin.exe。1.4 FL

3、EX項目結(jié)構(gòu)MXML：MXML是一種XML標識語言，用于進行組件布局。MXML中的組件包括了可視組件和非可視組件。非可視組件可以是從服務(wù)器中讀取的數(shù)據(jù)源或用戶組件綁定至服務(wù)器中的數(shù)據(jù)。就像HTML一樣，MXML提供標簽來定義界面。但MXML比HTML更結(jié)構(gòu)化，提供更豐富的標簽集。用戶可根據(jù)需要，在MXML組件的基礎(chǔ)上進行擴展，從而創(chuàng)建自定義組件。MXML與HTML最大不同在于，MXML定義的應(yīng)用程序最終被編譯為SWF文件，由Flash Player來執(zhí)行。Flash Player下執(zhí)行MXML應(yīng)用程序比HTML應(yīng)用程序更加豐富、動感。MXML代碼效果圖ActionScript3.0：Actio

4、nScript3.0是運行于Flash Player運行環(huán)境的編程語言，使用新的ActionScript虛擬機AVM2。AVM2使用新的二進制指令集，并在性能上有很大改進。同時，ActionScript3.0使用面向?qū)ο竽Ｐ?，擴展和提高了應(yīng)用程序接口。ActionScript3.0代碼被FlexBuilder或Flash中的編譯器編譯成二進制數(shù)據(jù)。這種二進制數(shù)據(jù)被裝入SWF文件中，然后運行于Flash Player運行環(huán)境中。Flex工程中可有兩種方式使用ActionScript3.0代碼：一種是在MXML文件的<mx:Script>標簽下使用，另一種是直接在AS文件中編寫。AS代

5、碼效果圖CSS：控制Flex組件樣式。效果圖1.5 RSL介紹減少應(yīng)用SWF文件大小的一個方法就是將一些共享的外部資源拆分出去，成為一個獨立的文件，這樣可以單獨地加載緩存到客戶端，這些共享資源可以由多個應(yīng)用在運行時進行加載，但是傳遞到客戶端的動作只會發(fā)生一次，這些共享文件被稱為運行時共享庫（Runtime Shared Libraries）或簡寫為RSL。如果你有多個應(yīng)用而且這些應(yīng)用共享一些核心組件或者類，那么作為RSL，用戶只會唯一的一次加載這些資源。只要應(yīng)用在同一個域中，這些應(yīng)用共享同一個緩存的RSL，這樣應(yīng)用文件的大小就減小了。使用RSL的應(yīng)用越多，效果越好，如果只有一個應(yīng)用，總的文件大

6、小不但不減小，反而會增大。操作：在Flex項目目錄上點擊鼠標右鍵，選擇Properties，彈出屬性窗口，繼續(xù)選擇Flex Build Path屬性，點擊Library path，把Framework linkage選擇改成Runtime Shared Library（RSL）即可。操作圖1.6 安全沙箱用Flex進行URL調(diào)用網(wǎng)頁(jsp文件放在tomcat下的webapps下)上的數(shù)據(jù)時，如果Flex生成的程序在工程所在路徑時沒有任何問題，可如果把程序文件的路徑更改后，就會報安全沙箱問題，解決方法就是在tomcat的安裝目錄下的%tomcat%/webapps/ROOT/下放置一個名叫cr

7、ossdomain.xml的文件，記住，名字必須是crossdomain，不然不起作用，crossdomain.xml文件的內(nèi)容是：<?xml version="1.0"?><!DOCTYPE cross-domain-policySYSTEM "<cross-domain-policy><allow-access-from domain="*" /></cross-domain-policy> 然后重新啟動tomcat后運行程序即可如果要限制訪問的網(wǎng)站可以在<allow-a

8、ccess-from domain="*" />中的 *改成網(wǎng)站名，如改成<allow-access-from domain="" />還有一種情況，當我們將bin里的程序以及文件拷貝到其他地方時運行報錯，是因為FLEX編譯的SWF文件，只能選擇訪問本地文件或訪問網(wǎng)絡(luò)文件，二者只能取一，而Flex 編譯的默認選項是只能訪問網(wǎng)絡(luò)文件，所以你將bin里的東西COPY到其他地方就不能讀取了。而你在默認的bin目錄下可以讀取得到，是因為FLEX認為你是在IDE環(huán)境種，這時是沒有這個所謂的安全限制的。 解決辦法就是在編譯時，加個參數(shù) -use-n

9、etwork=false 就OK了 (FB里,選菜單Project>Properties>Flex Compiler輸入這個參數(shù)) 但這樣做的話,你的SWF就不能讀取網(wǎng)絡(luò)的數(shù)據(jù)了。1.7 圖形報表設(shè)計以柱狀圖為例，下圖為MXML與AS代碼。MXML組件標簽：MXML代碼ActionSctipt實現(xiàn)代碼：AS代碼效果圖1.8 FLEX開發(fā)技巧MXML設(shè)計技巧：可以點擊Design對其進行設(shè)計，在FB左邊的Components庫中顯示了所有的組件模型，開發(fā)人員可以通過拖拽的方式把相應(yīng)的組件放到MXML文件中，再點擊Source會發(fā)現(xiàn)已生成MXML標簽。在FB右邊是對組件的樣式設(shè)置，使用

10、起來跟Dreamweaver一樣。效果圖CSS設(shè)計技巧：同樣是點擊Design按鈕，改變Style選擇，選擇你需要修改的組件，在FB右邊可見相應(yīng)組件樣式設(shè)置選項，開發(fā)人員可隨意定制樣式。下圖以Button組件為例：效果圖2 Java開發(fā)模型(Application Development)2.1 開發(fā)模型圖表組件架構(gòu)邏輯視圖實現(xiàn)圖2.2 數(shù)據(jù)封裝API2.2.1 數(shù)據(jù)模型請先看XML格式，有助于更好的理解數(shù)據(jù)模型的設(shè)計原理。 數(shù)據(jù)模型類定義. Graph. Chart. DataSet. Item 層次結(jié)構(gòu) 具體類分析2.2.2 XML模板2.2.2.

11、1 實現(xiàn)類定義com.handlewell.chart.util. ChartUtils 分析/ 按Graph的內(nèi)容直接輸出xml數(shù)據(jù)給圖形控件public static void render(HttpServletResponse resp,Graph bean) / 把XML內(nèi)容直接給圖形控件public static void render(HttpServletResponse resp,String xml) / 把Graph解析成XML，輸出到指定的流中public static void render(OutputStream out,Graph bean) /

12、把XML內(nèi)容直接輸出到指定流中public static void render(OutputStream out,String xml) 模板：. graph.ftl2.2.3 圖形報表封裝 類定義com.handlewell.chart.service. ChartManager 分析3 FLEX與開發(fā)框架整合及實例演示3.1 View層把編譯后的Flex文件引入頁面，如圖：3.2 Control層在Servlet或Action中，引入ChartManager對象，使用其提供的接口，生成Flex程序所需的XML流。如圖：3.3 實例 3.3.1 A

13、ction拼裝XMLList<DataSet> datasets = new ArrayList();/ 數(shù)據(jù)源集合List<Chart> charts = new ArrayList();/ 圖形報表集合String hql = "select id,item from Table"List list = beanManager.find(hql);DataSet dataset = chartManager.createDataSet(list, "Name", "*.do");/ 創(chuàng)建數(shù)據(jù)源dataset

14、s.add(dataset);Chart chart = chartManager.createPieChart(datasets);/ 創(chuàng)建柱狀圖報表樣式charts.add(chart);String xhql = "select item from Table"List xlist = beanManager.find(xhql);List xaxis = chartManager.createXaxis(xlist);/ 橫坐標集合chartManager.createGraph(response, charts, xaxis, "橫坐標", "縱坐標", "");3.3.2 Flex Object對象指定U