【導(dǎo)讀】{ "error_code": 17, "error_msg": "Open api daily request limit reached" }

　　

【正文】 維修登記界面 ： 在維修登記界面可以 進(jìn)行維修記錄的管理，進(jìn)行入庫 、 出庫操作 。 圖 44 維修登記界面 維修車輛入庫 窗口 :在 維修車輛入庫 彈出窗口中，用戶可以填寫入庫維修車輛的信息和維修信息，單擊確認(rèn)添加按鈕就可以把記錄添加到數(shù)據(jù)庫中，同時(shí)表格會自動讀取新的數(shù)據(jù)庫數(shù)據(jù)， 然后在 表格里顯示。 整個(gè)過程同樣不需要刷新頁面，用戶在使用時(shí)，就像使用桌面應(yīng)用軟件一樣 流暢 。 圖 45 維修車輛入庫窗口 庫存管理界面 ： 在庫存管理界面中除了增刪改等功能外，還有庫存提醒功能，當(dāng)配件的數(shù)量小于 50的時(shí)候，就會自動標(biāo)紅。如果配件數(shù)量等于 0的話，配件出庫按鈕就不基于 Flex/J2EE 的車輛維修管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn) 26 會顯示。 這樣就可以很直觀的對配 件的庫存情況 進(jìn)行判斷，當(dāng)然庫存管理界面也可以對配件的信息進(jìn)行搜索 。 圖 46 庫存管理界面 設(shè)備管理界面：設(shè)備界面上可以對設(shè)備進(jìn)行出庫和入庫操作，單擊表格左側(cè)的按鈕可以彈出設(shè)備出庫登記畫面，如下圖所示，在出庫登記畫面里可以填寫出庫設(shè)備的數(shù)量，而設(shè)備名稱系統(tǒng)會自動添加。 圖 47 設(shè)備管理界面 27 客戶信息界面：客戶信息界面用來記錄客戶的各種信息并可以對其進(jìn)行檢索。 圖 48 客戶信息界面 同時(shí)每個(gè)界面都有信息搜索功能，當(dāng)用戶點(diǎn)擊搜索按鈕時(shí)就會在數(shù)據(jù)表的下端顯示出搜索界面，在搜索見面中輸入關(guān)鍵字就可以對 數(shù)據(jù)進(jìn)行過濾，把結(jié)果數(shù)據(jù)顯示在表格中，方便用戶查閱。同樣整個(gè)過程不需要刷新頁面。 如下圖為按車牌號搜索： 圖 49 按車牌號 搜索 界面 搜索結(jié)果： 圖 410 搜索結(jié)果 顯示 系統(tǒng) 功能 的實(shí)現(xiàn) 過程 下面 對 整個(gè)實(shí)現(xiàn)過程中具體的幾個(gè)關(guān)鍵點(diǎn) 進(jìn)行闡述 ，并附上實(shí)現(xiàn)代碼。 首先是界面中組件的實(shí)現(xiàn)，在 Flex中組件的實(shí)現(xiàn)可以通過 MXML標(biāo)簽來標(biāo)記或者通過ActionScript動態(tài)生成，本項(xiàng)目中使用到了彈出畫面，就像 Windows操作系統(tǒng)中的窗口基于 Flex/J2EE 的車輛維修管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn) 28 一樣，這樣的設(shè)計(jì)可以給用戶帶來 類似 桌面應(yīng)用的體驗(yàn)，操作更上 手。 現(xiàn)在 以 登錄窗口為例子 來 闡述效果的 實(shí)現(xiàn)過程 ： mx:TitleWindow xmlns:mx= layout=absolute width=358 height=268 showCloseButton=true title=系統(tǒng)登陸 fontSize=12 horizontalAlign=left verticalAlign=middle creationComplete= = txt_username 登錄窗口是一個(gè) 彈出窗口 (Popup Window)是一個(gè)自定義組件，是在 Flex自帶的TitleWindow的基礎(chǔ)上自定義的，它是整個(gè)彈出窗口中最上層的容器 ，接下來的組件都是建立在這個(gè)容器 之 上的，不過作為一個(gè)自定義組件，他不能直接運(yùn)行，要通過 Flex項(xiàng)目的主程序（就是以 mx:Application/mx: Application標(biāo)記的 MXML文件 ）運(yùn)行 。 登陸界面 到注冊界面 的 過渡效果 是通過 Flex的 states和 transitions來實(shí)現(xiàn) 的，F(xiàn)lex不用切換頁面就可以從登陸界面轉(zhuǎn)換到注冊界面 ，整個(gè)過程不需要刷新頁面，大大提高了效率。 Flex一個(gè)重要的精髓就是事件機(jī)制， 下面 以主畫面感應(yīng)登錄窗口 移出 界面的例子來闡述事件機(jī)制在系統(tǒng)中的應(yīng)用 ，具體 代碼如下 登錄窗口 ActionScript代碼 ： private function adminLoginResultHandler():void{ if( == true){ ()。 = true。 (new Event(39。myEvent39。))。 }else{ (39。用戶名或密碼錯(cuò)誤 39。,39。提示 39。)。 } } 主畫面部分 ActionScript代碼 ： private function addLoginWindow():void{ newWin=loginTitleWindow((this,loginTitleWindow,true))。 ?? 省略部分代碼 29 (39。myEvent39。,onPageOpen)。 } 這段代碼實(shí)現(xiàn)了主畫面感應(yīng)登陸窗口移出界面后調(diào)用 onPageOpen方法 來實(shí)現(xiàn)系統(tǒng)的初始化。這個(gè)過程用到了 Flex的事件機(jī)制。 首先 在登錄窗口中的函數(shù) adminLoginResultHandler()是在管理員登陸 成功 以后調(diào)用的 方法 ，在 方法 里定義了一個(gè)新的事件 myEvent，然后通過 dispatchEvent方法將事件分發(fā)出去，從而 myEvent事件被添加到事件流里，等待主畫面捕獲。 在主畫面中同樣也定義了一個(gè)函數(shù)，該 方法 是用來彈出登錄窗口的 ，在函數(shù)里 為將要彈出的登錄畫面添加對 myEvent事件的監(jiān)聽，當(dāng)彈出畫面分發(fā)出 myEvent時(shí)間后，被自己監(jiān)聽到，這樣在主畫面中就可以調(diào)用主畫面的方法 onPageOpen，從而實(shí)現(xiàn)主畫面的初始化。 整個(gè)過程中就是通過事件的分發(fā)與捕獲來實(shí)現(xiàn)主畫面感應(yīng)登陸窗口移出界面的效果。 當(dāng)然這里的用到的事件是自定義的事件 myEvent,在 Flex里有很多定義好的事件類型，對事件機(jī)制的 使用可以為開發(fā)帶來很多便利，同時(shí)可以實(shí)現(xiàn)一些無法實(shí)現(xiàn)的效果。大大增強(qiáng)了 Flex的功能。 Flex的另一個(gè)精髓就是數(shù)據(jù)綁定，下面是數(shù)據(jù)綁定在這個(gè)系統(tǒng)中的一個(gè)應(yīng)用 ： mx:DataGrid id=myDg dataProvider={} 以上代碼是定義一個(gè) Flex數(shù)據(jù)組件 DataGrid的部分代碼該組件用來顯示后臺傳過來的 XML數(shù)據(jù)，并把它作為數(shù)據(jù)源顯示出來 ，如圖所示： 圖 411 數(shù)據(jù)源綁定 顯示圖 其中的 dataProvider屬性代表數(shù)據(jù)源，這里通過一對花括號 {}把傳回的 XML綁定在了 dataProvider上，這樣當(dāng)后臺傳回?cái)?shù)據(jù)后， DataGrid組件就會自動解析 XML文件，并將它顯示出來。 private function search():void{ = ArrayCollection()。 = myFilterFunction。 ()。 } 基于 Flex/J2EE 的車輛維修管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn) 30 } 上面這段代碼是搜索功能實(shí)現(xiàn)的一部分代碼，其中也用到了數(shù)據(jù)綁定，這里將DataGrid的數(shù)據(jù)源賦給了 myDgArrayCollection，它是 ArrayCollection型的變量，可以用來對數(shù)據(jù)進(jìn)行復(fù)雜的排序、過濾等功能。這樣對 myDgArrayCollection的過濾操作就會在調(diào)用 refresh()方法以后同步到 DataGrid的數(shù)據(jù)源，從而 使得 DataGrid刷新 數(shù)據(jù)，顯示過濾后的結(jié)果集 ，實(shí)現(xiàn)搜索的效果 。 當(dāng)然 myDgArrayCollection在定義的時(shí)候要添加 [Bindable]標(biāo)簽，如下： [Bindable] private var myDgArrayCollection:ArrayCollection。 這樣 myDgArrayCollection才能被綁定為 DataGrid的數(shù)據(jù)源 ， 否則 DataGrid將無法感應(yīng) myDgArrayCollection的變化 。 BlazeDS 實(shí)現(xiàn)的 Flex 與 J2EE 的交互 這一部分是本文的一個(gè)研究重點(diǎn)，也是實(shí)現(xiàn)基于 Flex/J2EE 的車輛維修管理系統(tǒng)的技術(shù)重點(diǎn)， 即 Flex 前臺和 Java 后臺的通信 。 BlazeDS 為使用 Flex 或者 AIR 的客戶端程序提供了高度可擴(kuò)展的遠(yuǎn)程訪問和消息服務(wù)。 BlazeDS 為客戶端程序連接到服務(wù)端數(shù)據(jù)、并在多個(gè)客戶端和服務(wù)器間傳送數(shù)據(jù)提供了一系列的服務(wù)。 BlazeDS 實(shí)現(xiàn)了客戶端之間的實(shí)時(shí)消息。 一個(gè) BlazeDS 應(yīng)用包括兩個(gè)部分 [5]：一個(gè)客戶端應(yīng)用程序和一個(gè)服務(wù)端的 J2EE 程序，架構(gòu)如下圖： 圖 412 Blazeds架構(gòu) [5] 31 BlazeDS是開源的 ,所以可以在 Adobe的官網(wǎng)上下載 。 BlazeDS里 的 flex文件夾中包括了 最 重 要 的 四 個(gè) 配 置 文 件 ： 、 、 。 這些文件里包含了 Flex和 Java交互所需的配置， 在這些配置文件里可以修改 Flex和 Java的通信的方式、與后臺 Java交互的文件相對路徑等與后臺通信有關(guān)的信息。 本文使用 service 的通信方式 來實(shí)現(xiàn) Flex 和后臺 J2EE 的交互， 用 tomcat作為 應(yīng)用服務(wù)器 。前端的 MXML 文件通過 BlazeDS 向后臺的 Servlet 發(fā)送 Http 的請求，然后通過 Servlet 調(diào)用 JDBC 訪問數(shù)據(jù)庫，最后 Servlet 將封裝好的 XML 數(shù)據(jù)返回給前臺 Flex 的 MXML 文件 ， MXML 負(fù)責(zé)解析傳回的 XML 從而實(shí)現(xiàn)數(shù)據(jù)的交互。 以上 就是整個(gè) Flex 與后臺 Java 交互的過程， 具體 的流程圖如下： M X M L 文 件 通 過 定義 好 的 d e s t i n a t i o n 向后 臺 的 S e r v l e t發(fā) 送 H t t p S e r v i c e 請 求查 找 p r o x y c o n f i g . x m l在 p r o x y c o n f i g . x m l 配置 文 件 里 找 到 匹 配 的d e s t i n a t i o n 所 對 應(yīng) 的S e r v l e t 在 后 臺 的 映 射后 臺 的 S e r v l e t 接 收F l e x 傳 過 來 的 數(shù) 據(jù)通 過 信 道找 到 后 臺 的 S e r v l e t通 過 J D B C 連 接 數(shù) 據(jù) 庫查 詢 后 臺 數(shù) 據(jù) 庫 并把 數(shù) 據(jù) 并 把 數(shù) 據(jù) 返回 給 S e r v l e t把 數(shù) 據(jù) 封 裝 成 X M L 傳回 到 前 臺 M X M L 文 件 圖 413 Flex 與后臺交互流程圖 首先 Flex 部分需要在 MXML 中申明 Flex 通過 service 所要通信的 Java 類，這里使用的是 Servlet 來接收 Flex 傳過來的值 。 下面以管理系統(tǒng)的維修登記界面的添加維修記錄的功能為例子進(jìn)行分析 Flex 部分的代碼如下： private function saveAddedVehical():void{ if( == 39。39。){ (39。接車序列號不能為空 39。,39。提示 39。)。 }else{ var params:URLVariables = new URLVariables()。 = 。 = 。 = 。 ??? (省略 部分 代碼 ) = 。 基于 Flex/J2EE 的車輛維修管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn) 32 = 。 = 。 (params)。 (this)。 = true。 } } mx:HTTPService id=addVehicalIn destination=addVehicalInServlet fault=(39。添加出錯(cuò)，可能是接車序列號重復(fù)，請檢查 39。,39。提示 39。) useProxy=true/ 這段代碼實(shí)現(xiàn)了 Flex 端把 dataGrid 也就是表格里的數(shù)據(jù)通過 ervice 傳給后臺的 Servlet 接收 。實(shí)現(xiàn)過程是 單擊界面上的 確認(rèn)添加 按鈕 mx:Button x=227 y=515 label=確認(rèn)添加 click=saveAddedVehical() icon=@Embed(source=39。../assets/39。) width=110/ 然后調(diào)用 saveAddedVehical()方法把表單里填的數(shù) 據(jù)存入 URLVariables 類型的變量params 里，然后調(diào)用 (params)方法，把變量通過 ervice 發(fā)送給后臺的 Servlet，中間通過 BlazeDS 實(shí)現(xiàn) 。 要讓 BlazeDS 能夠運(yùn)作首先先要在 Flex 端定義如下的代碼 ： mx:HTTPService id=addVehicalIn destination=addVehicalInServlet fault=(39。添加出錯(cuò)，可能是接車序列號重復(fù)，請檢查 39。,39。提示 39。) useProxy=true/ 其中的 destination屬性的值 對應(yīng) BlazeDS配置文件 destination標(biāo)簽的 id，這需要自己手動添加如下代碼： dest