【正文】 名： 王熹 指導(dǎo)教 師： 周景 講師 2020 年 6 月 摘 要 為了提高用戶體驗(yàn)性，出現(xiàn)了一種新的互聯(lián)網(wǎng)技術(shù)，即 RIA(Rich Inter Application),基于 FLEX 的投票系統(tǒng)便具有 RIA 的特性，這一新的投票系統(tǒng)采用Flex+JSP+MySQL 的構(gòu)架，提高了用戶的視覺感受，能更直觀的反映出投票結(jié)果。運(yùn)用 Flash 是完全可以做 到 flex 的效果的，為什么還需要 flex 呢？這里面有兩個(gè)原因： 1：為了迎合更多的開發(fā)者。富互聯(lián)網(wǎng)應(yīng)用程 序是下一代的將桌面應(yīng)用程序的交互式用戶體驗(yàn)與傳統(tǒng)的 WEB應(yīng)用的部署靈活性和成本分析結(jié)合起來的網(wǎng)絡(luò)應(yīng)用程序。設(shè)計(jì)師和開發(fā)工程師們可以方便地將自己的代碼平移到新的平臺(tái)上，并且發(fā)布、部署的方式比之前的任何一款開發(fā)工具都方便得多，從而使 RIA應(yīng)用有更廣大的開發(fā)者基礎(chǔ)。現(xiàn)在作為針對個(gè)人或企業(yè)級(jí)的應(yīng)用設(shè)計(jì)， Flex 比較有前途，因?yàn)樗菀咨鲜?，美觀，靈活，速度快。 另一方面說， Flex 也不能吃掉 ajax 陣營，畢竟基于瀏覽器的應(yīng)用長期存在了這么多年，熟悉 html 和 javascript 的開發(fā)者又那么多，想讓傳統(tǒng) web 開發(fā)者轉(zhuǎn)到 Flex 上面，那是不太可能的事情。 Web 宣傳方式與傳統(tǒng)宣傳方式相比，網(wǎng)絡(luò)推廣更具優(yōu)勢，成本低，容易維護(hù)，只要用戶聯(lián)網(wǎng)任何時(shí) 候都可以查看信息，而傳統(tǒng)的網(wǎng)絡(luò)程序一般都采用頁面表現(xiàn)內(nèi)容、由服務(wù)器來傳遞數(shù)據(jù)的開發(fā)模式，在頁面中使用 HTML 標(biāo)記語言來表現(xiàn)界面層，而 HTML 只適用于圖文內(nèi)容，在形式上受到很多限制，已漸漸不能滿足網(wǎng)絡(luò)瀏覽者更高的全方位的體驗(yàn)要求，而 Flex 的出現(xiàn)就是為了解決這個(gè)問題 。 Adobe 公司開發(fā)的 Flex 是一個(gè)在開放式的平臺(tái) Eclipse 的基礎(chǔ)上從頭編寫，并集合了 Flex Framework 和 的功能強(qiáng)大的開發(fā)工具。而業(yè)務(wù)邏輯層會(huì)把數(shù)據(jù)儲(chǔ)存層返回的結(jié)果（數(shù)據(jù)）封裝成用戶界面層可以接受的形式，再反饋給用戶界面層，最后由用戶界面層表示出來。該系統(tǒng)對個(gè)人信息錄入包括個(gè)人基本信息和四個(gè)問題選擇，用于最終數(shù)據(jù)統(tǒng)計(jì)，并用餅狀圖顯示統(tǒng)計(jì)結(jié)果。收集基本數(shù)據(jù)，數(shù)據(jù)結(jié)構(gòu)及數(shù)據(jù)處理的流程，然后組成一個(gè)詳盡的數(shù)據(jù)字典，可以給后面具體設(shè)計(jì)打下基礎(chǔ)。第四，查詢投票信息的時(shí)候可以查詢用戶所在地區(qū)的投票次數(shù)。 數(shù)據(jù)庫的 ER 圖 圖 ~圖 說明了用戶信息和投票信息這兩個(gè)數(shù)據(jù)結(jié)構(gòu)的關(guān)系： 圖 實(shí)體之間關(guān)系的 ER圖 圖 用戶信息的實(shí)體 ER圖 圖 投票信息的實(shí)體 ER圖 第 3 章 概要設(shè)計(jì) 系統(tǒng)分析 本系統(tǒng)采用的是傳統(tǒng)軟件編程最常用的 C/S 構(gòu)架（三層結(jié)構(gòu)）， Flex 端為客戶端，JSP 為服務(wù)器端， MySQL 為 DB 端。 Flex 部 分 所 需 要 應(yīng) 用 到 的 組 件 有ViewStack,Canvas,ComboBox,Label,Button,RadioButtonGroup/RadioButton, Image,From,TextInput,HTTPService,states,transition,Panel,PieChart 等等。以下就是需要構(gòu)筑和測試的環(huán)境： JDK 的配置， Tomcat 的配置， Eclipse 的配置，JDK+Tomecat+Eclipse 環(huán)境構(gòu)筑的測試， MySQL 的配置， JSP 帶數(shù)據(jù)庫的測試， Flex Plugin For Eclipse 的配置，在 Eclipse 中測試 Flex 的編譯和運(yùn)行。 用戶登陸模塊的設(shè)計(jì)思想：當(dāng)程序剛剛運(yùn)行的時(shí)候（程序初始化階段）， Flex 端使用 HTTPService 調(diào)用 JSP 端，以便取得用戶的 IP地址， JSP端通過業(yè)務(wù)邏輯處理（組成 SQL 語句）后發(fā)送給 DB端， DB 端再根據(jù)發(fā)送過來的 SQL 語句執(zhí)行某些操作（插入，查詢等操作）。當(dāng)用戶信息錄入完畢后，將用戶的 Email 地址通過 HTTPService 的方式發(fā)送到 JSP端，然后 JSP 端再組成 SQL 語句發(fā)送到 DB端，而DB端得到 JSP端發(fā)送過來的 SQL語句進(jìn)行查詢操作（查詢是否存在相同的 Email地址），并將查詢的結(jié)果返回給 JSP 端。 CREATE TABLE `db_vote` ( `Vote_ID` int(11) NOT NULL auto_increment, `Vote_Name` varchar(100) default NULL COMMENT 39。, `Vote_Area` varchar(100) default NULL COMMENT 39。 COMMENT 39。, `Vote_OccupationsCount` int(11) NOT NULL default 39。, `Vote_Question1` varchar(11) NOT NULL COMMENT 39。 COMMENT 39。, `Vote_Question2Count` int(11) NOT NULL default 39。, `Vote_Question3` varchar(11) default NULL COMMENT 39。 COMMENT 39。, `Vote_IP` varchar(16) default NULL COMMENT 39。 JSP 端的動(dòng)作：得到用戶 IP 地址，查詢用戶的 IP 地址，查詢用戶的 Email 地址，用戶信息和投票結(jié)果的插入，用戶所在地區(qū)的查詢，用戶職業(yè)的查詢，問題 1~問題 3投票結(jié)果的查詢。 五、 功能描述：取得由 Flex 端傳送過來的用戶所在地區(qū)，據(jù)其進(jìn)行數(shù)據(jù)庫的查詢操作，并把查詢后返回的結(jié)果 以 XML 的形式封裝起來。 九、 功能描述：取得由 Flex 端傳送過來的問題 3的投票結(jié)果，據(jù)其進(jìn)行數(shù)據(jù)庫的查詢操作，并把查詢后返回的結(jié)果以 XML的形式封裝起來。而這三個(gè)文件夾又都屬于JspVoteSystem 文件夾， JavaSource/JspVoteSystem/DB 中應(yīng)包含這些文件： 1. 功能描述：連接 MySQL 數(shù)據(jù)庫的 JavaBean。 JavaSource/JspVoteSystem/ControlDB 中應(yīng)包含下面這個(gè)文件： 功能描述：包含對實(shí)體數(shù)據(jù)庫中所有字段的映射，還包括對 IP地址進(jìn)行查詢操作，對 Email 地址進(jìn)行查詢操作，對數(shù)據(jù)庫進(jìn)行插入操作，對用戶的所在地區(qū)進(jìn)行查詢操作，對用戶的職業(yè)進(jìn)行查詢操作，對問題 1~問題 3進(jìn)行的投票結(jié)果進(jìn)行查詢操作，并將以上內(nèi)容組合成 SQL 語句。根據(jù)一般投票系統(tǒng)的特點(diǎn)，可以將上述的界面進(jìn)行一些簡化處理。 3. 功能描述：對一般性消息的處理。 JavaBean 分成可 視組件和非可視組件，在 JSP 中主要使用非可視組件。第二行中 flexvote 是指之前建立的 MySQL 數(shù)據(jù)庫。 Statement stmt = ()。 Statement stmt = ()。本系統(tǒng)使用的是第二種方式。 的編寫： 的功能是取得由 Flex端傳送過來的問題 1 的投票結(jié)果，據(jù)其進(jìn)行數(shù)據(jù)庫的查詢操作，并把查詢后返回的結(jié)果以 XML 的形式封裝起來 。以下就是它們之間編碼的關(guān)系： Flex 的編碼形式： ?xml versiom=””encoding=”utf8”? ，每一個(gè) mxml 文件的第一行都有這個(gè)代碼，可以知道 Flex 端的編碼形式為 utf8,所以 JSP 端和 DB 端也要將編碼設(shè)定為 utf8。 客戶端 Flex的設(shè)計(jì) 對于本系統(tǒng)來說， Flex 端的設(shè)計(jì)和編碼是最重要的，可以這么說，只有一個(gè)設(shè)計(jì)合理的客戶端才能更深刻的體會(huì)到 Flex Vote System的內(nèi)在的優(yōu)點(diǎn)。 ：包括（標(biāo)題，投票者的姓名，投票者的 Email 地址，投票者所在的地區(qū)，投票者的職業(yè)）。 4 的投票內(nèi)容：包括（您可以配合學(xué)習(xí) Flex 的時(shí)間？白天（上午 9:00 至下午 16： 00），晚上（晚上 18： 30 至晚上 21： 00），假日（星期六，日全天），假日（星期六，日擇一天），其他（自行輸入）一個(gè)標(biāo)題和五個(gè)投票項(xiàng)。 ：包括廣告業(yè)，計(jì)算機(jī)編程，計(jì)算機(jī)網(wǎng)絡(luò)，咨詢（管理，營銷等），工程師等。 public static const wl_S_Email:String = 投票者 Email： 。 public static const wl_S_Tellme:String = 這里 。 public static const wl_S_Group1_A:String = 非常熟悉 。 public static const wl_S_Question2:String = 問題 2：您想學(xué)習(xí) Flex 并具體實(shí)現(xiàn) 應(yīng)用么？ 。 public static const wl_S_Group2_D:String = 用不上 。 public static const wl_S_Group3_A:String = 非常愿意 。 public static const wl_S_Question4:String = 問題 4：您可以配合學(xué)習(xí) Flex 的時(shí)間？ 。 public static const wl_S_Group4_D:String = 假日 (星期六、日擇一天 )。 public static const wl_S_PanelChart2:String = 投票者職業(yè) 。 的設(shè)計(jì)： 的功能是對一般性消息的處理，例如提示信息，出錯(cuò)信息等 (全部代碼見附錄 )。 1. 歡迎畫面（控件本章已經(jīng)說明）。 5. 第三個(gè)問題投票畫面（控件如表 所示）。并將這些 Panel 分別命名為 PanelChart1, PanelChart2, PanelChart3, PanelChart4, PanelChart5。 RPC 通信是一個(gè)異步過程，客戶端把數(shù)據(jù)請求發(fā)送給服務(wù)端，然后等待服務(wù)端把結(jié)果返回到 Flex。在 MXML 中使用 HTTPService 對象很方便，格式如下： mx: HTTPService id=“ srv” url=“ ” method=“ post” / 第 5 章 功能測試 用戶信息錄入模塊的功能測試 表 用戶信息錄入模塊測試用例 用戶信息錄入模塊用例測試 模塊編號(hào) : 1001 功能名稱 : 用戶信息錄入 前置測試用例 信息錄入成功 功能完成人 : 王熹 功能點(diǎn) : 錄入 優(yōu)先級(jí) : 高 測試人 : 王熹 修改人 : 王熹 測試步驟 : ： cc Email地址： ： 北京 ： 廣告業(yè)等 預(yù)期結(jié)果 : ，點(diǎn)擊 下一步成功進(jìn)入投票界面 ，系統(tǒng)給出相應(yīng)錯(cuò)誤提示 測試結(jié)果 : 通過 錯(cuò)誤列表 序列 輸入?yún)?shù) 錯(cuò)誤結(jié)果 無 用戶投票模塊的功能測試 表 用戶投票模塊的測試用例 用戶投票模塊用例測試 模塊編號(hào) : 1002 功能名稱 : 用戶對問題進(jìn)行投票 前置測試用例 投票成功 功能完成人 : 王熹 功能點(diǎn) : 投票 優(yōu)先級(jí) : 高 測試人 : 王熹 修改人 : 王熹 測試步驟 : 1 進(jìn)行投票 2 對問題 2 進(jìn)行投票 2 進(jìn)行投票 2 進(jìn)行投票 預(yù)期結(jié)果 : ，點(diǎn)擊下一步成功進(jìn)入結(jié)果統(tǒng)計(jì)餅形圖界面 測試結(jié)果 : 通過 錯(cuò)誤列表 序列 輸入?yún)?shù) 錯(cuò)誤結(jié)果 無 統(tǒng)計(jì)結(jié)果餅形圖模塊功能測試 表 統(tǒng)計(jì)結(jié)果餅形圖模塊測試用例 統(tǒng)計(jì)結(jié)果餅形圖模塊用例測試 模塊編號(hào) : 1003 功能名稱 : 結(jié)果統(tǒng)計(jì)餅形圖 前置測試用例 畫面成功出現(xiàn)五個(gè)餅形圖 功能完成人 : 王熹 功能點(diǎn) : 結(jié)果統(tǒng)計(jì) 優(yōu)先級(jí) : 高 測試人 : 王熹 修改人 : 王熹 測試步驟 : 投票結(jié)束點(diǎn)擊提交 預(yù)期。HTTPService 對象位于 包中，它主要是用來發(fā)送 HTTP 形式的 GET 或 POST請求，這和傳統(tǒng)的網(wǎng)絡(luò)動(dòng)態(tài)語言很相似，比如 CGI， ASP， PHP。關(guān)于具體怎樣實(shí)現(xiàn) transition 效果的代碼，請參考關(guān)鍵代碼那一章。 表 FlexVoteSystem 控件表 ld Source/Title X Y Width Height 含義 TitleWindow Vote System 作為 Flex Vote System 的載體 LinkButton 190 123 Button btnBegin 下一步 44