移動化一個(gè)workshop示例應(yīng)用程序?qū)W習(xí)資料學(xué)習(xí)資料

1、.移動化一個(gè)Workshop示例應(yīng)用程序時(shí)間:2005-05-08作者:Paul Mc Galey瀏覽次數(shù): 本文關(guān)鍵字:MobileAware Mobility Extension, WebLogic Workshop文章工具 推薦給朋友 打印文章 本文是六篇系列指導(dǎo)文章中的第一篇,這個(gè)系列將介紹如何使用MobileAware Mobility Extension將您的Workshop應(yīng)用程序移動化下面,我們將介紹如何把一個(gè)Workshop應(yīng)用程序移動化并且能夠被發(fā)送到所有移動設(shè)備上,其中包括那些無法解析HTML的設(shè)備 我們將演示所需的三個(gè)簡單步驟,用它們來移動

2、化包括在WebLogic Platform 8.1.2中的“TutorialsApp”的“FirstPageFlow”組件準(zhǔn)備工作· 確保WebLogic Platform 8.1.2及其示例都已經(jīng)安裝· 安裝并配置所選擇的移動設(shè)備模擬器· 在示例Workshop Domain中安裝MobileAware Device Database1. Tools->WebLogic Server->Start WebLogic Server 2. Tools->Mobility->Install MobileAware Device Database

3、 啟動Multi-Channel1. 打開Platform TutorialsApp· 在從Windows Explorer中雙擊<bea_dir>weblogic81samplesplatform TutorialsAppTutorialsApp.work · 或者,從Workshop中使用“File->Open->Application.”瀏覽到該文件并點(diǎn)擊“Open”2. 啟動Multi-Channel· 右擊FirstPageFlow· 從下拉菜單中選擇“Enable multi-channel”步驟1:將頁面移動化 打開

4、FirstPageFlowlogin_pageslogin.jsp從Workshop的Palette(通常在底部靠左處)的Mobility選項(xiàng)卡中把“Mobilize Page”圖標(biāo)拖到Design View中 在頁面頂部中會出現(xiàn)一行消息:“This page contains mobility markup”(“本頁已包含移動標(biāo)記”) 點(diǎn)擊此消息一次,然后您就會看到一個(gè)標(biāo)簽<mm:page>被插入到這個(gè)JSP文件中在設(shè)計(jì)視圖框底部會顯示出來步驟2:編組 接著,我們將對JSP頁面進(jìn)行標(biāo)記,以選中并封裝需要被顯示在小屏幕設(shè)備上的重要信息這個(gè)動作成為“編組”這里,我們將介紹的重點(diǎn)放到頁

5、面上的用戶登錄表單 選擇設(shè)計(jì)視圖中的form元素在form中點(diǎn)擊,接著在設(shè)計(jì)視圖底部的文檔層次結(jié)構(gòu)路徑中點(diǎn)擊<form>元素這是最簡單的方法<form>元素會變成粗體并且在設(shè)計(jì)視圖中會出現(xiàn)一個(gè)選擇框 現(xiàn)在,把“Group”圖標(biāo)(不是“Group Reference”)從Palette拖到頁面中 組標(biāo)簽是一組“wrapping”移動標(biāo)簽中的一個(gè) 當(dāng)在設(shè)計(jì)視圖中選擇了一個(gè)元素,您可以選擇是用標(biāo)簽包裹此元素或者它的內(nèi)容在本例中,我們用<mm:group>標(biāo)簽包裹我們剛選擇的form元素所以我們選中對話框中的對應(yīng)單選按鈕 您可以為這個(gè)組添加一個(gè)合適的ID和Title

6、例如,我們都填寫“Login”,然后點(diǎn)擊OK步驟3:給“菜單驅(qū)動”設(shè)備添加布局 第三步是為“菜單驅(qū)動”設(shè)備添加一個(gè)布局 把“Layout”圖標(biāo)從面板拖到頁面中 注意:“菜單驅(qū)動”設(shè)備是小屏幕設(shè)備且通常只有有限的輸入功能對這類設(shè)備,由基于菜單的層次導(dǎo)航來定位信息比傳統(tǒng)的PC瀏覽器上的平面布局要更合適 此時(shí)將出現(xiàn)一個(gè)對話框,使您可為布局文件選擇一個(gè)名字,并且指定該布局所對應(yīng)的設(shè)備類這里,缺省值對兩個(gè)選項(xiàng)都合適 點(diǎn)擊OK將執(zhí)行兩個(gè)操作首先,在JSP頁面中插入一個(gè)<mm:layout>標(biāo)簽來指定“IsMenuDriven”類的設(shè)備要使用哪個(gè)布局文件然后,創(chuàng)建這個(gè)布局文件,其中包含了對頁面中

7、所有組的引用,接著打開這個(gè)新文件在本例中只有一個(gè)組,所以所生成的布局結(jié)構(gòu)中也只含有一個(gè)引用完成 注冊頁面現(xiàn)在可以被轉(zhuǎn)移到移動設(shè)備上了· 點(diǎn)擊Control-S來保存所有的文件· 打開Tutorial的頁面流控制器FirstPageFlowinvestigateJPFInvestigateJPFController.jpf · 在Workshop的測試瀏覽器中觀看此頁面· 啟動您的模擬器 只需點(diǎn)擊移動性工具條中的一個(gè)模擬器啟動按鈕,您就能在模擬器中看到您的頁面了 您的移動頁面看起來可能跟下面的相似這取決于所使用的模擬器改進(jìn)用戶體驗(yàn) 缺省情況下,在菜單驅(qū)動設(shè)

8、備中首先顯示的是一列鏈接,即布局中的組標(biāo)題選擇組標(biāo)題,就可以顯示組的完整內(nèi)容 在我們的例子中,因?yàn)橹挥幸粋€(gè)組,所以第一屏只含有一個(gè)稱為“Login”的鏈接您會想到讓組的內(nèi)容在第一屏全屏顯示,從而使用戶更方便地使用 通過改變組的特性,這很容易辦到· 返回到您的布局文件· 點(diǎn)擊名為“Group 'Login'”的藍(lán)色框· 在特性編輯器中,使用下拉列表把“display”的值從“headings”變成“all”· 按Control-S來再次保存所有的文件 現(xiàn)在,用戶就能在第一頁中看到注冊表而不是一個(gè)鏈接了繼續(xù) 用同樣的三個(gè)步驟,把應(yīng)用程序的第二

9、個(gè)頁面也移動化(FirstPageFlowinvestigateJPFrequest.jsp). 1. 頁面移動化:· 把“Mobilize Page”圖標(biāo)從Mobility Palette拖到頁面中2. 編組:· 使用設(shè)計(jì)視圖和層次結(jié)構(gòu)路徑選擇<netui:form:>元素· 拖入“Group”圖標(biāo)· 選擇“Wrap selected <netui:form>”· 輸入ID和Title(例如,都輸入"Request")3. 創(chuàng)建布局:· 從Mobility面板中拖動“Layout”圖標(biāo)&#

10、183; 點(diǎn)擊OK接受缺省設(shè)置· 點(diǎn)擊Request組并用特性編輯器把“display”設(shè)置為“all” 按control-S來保存文件,并在您的測試瀏覽器和模擬器中觀看它們確保每次您啟動時(shí)都返回到JPF文件而不是直接打開JSP更進(jìn)一步 對FirstPageFlowinvestigateJPFresponse.jsp.重復(fù)上面的步驟 試著把圖表和“Request another credit report”分別編組注意這兩個(gè)組在布局文件中是如何顯示的,另外,它們可以分別設(shè)置為顯示“headings”或“all” 把<table-model>標(biāo)簽拖到表中,觀察它是如何設(shè)定H

11、TML移動設(shè)備排列表的格式的結(jié)束語 僅通過三個(gè)簡單的拖放步驟,您就能把一個(gè)應(yīng)用程序轉(zhuǎn)移到移動設(shè)備上了這是通過向已有應(yīng)用程序添加標(biāo)記來實(shí)現(xiàn)的這樣就不必刪除或重放任何已經(jīng)存在的HTML或者NETUI標(biāo)簽 您已經(jīng)看到用編組把頁面中的重要信息轉(zhuǎn)移到移動設(shè)備上是多么簡單了您還能用移動性標(biāo)簽特性來為那些內(nèi)容操縱布局和導(dǎo)航MobileAware的Mobile Interaction Server可以根據(jù)需要來轉(zhuǎn)換內(nèi)容,以便轉(zhuǎn)移到所有的移動設(shè)備上 請把您對本文的反饋返回到bea附加資料· BEA WebLogic Workshop的MobileAware移動性擴(kuò)展o 到MobileAware Web site可以申請一個(gè)免費(fèi)的BEA WebLogic Workshop MobileAware Mobility Extension評估版· 設(shè)備模擬器和模仿器所有的大電信公司都為他們的設(shè)備提供了軟件開發(fā)包下面是一些鏈接,您可從中下載模擬器來測試您的代碼o Openwave Phone Simulator: o