用html css javascript打造自己的RIA圖文教程第1/2頁

更新時(shí)間：2009年07月09日 09:46:55 作者：

用html&css&javascript打造自己的RIA之一,包括了配置等

在制作之前，先建立開發(fā)環(huán)境。
打開netbeans6.1，在項(xiàng)目工作區(qū)，右擊新建項(xiàng)目，選擇Web目錄下的Web應(yīng)用程序。

項(xiàng)目名稱輸入 RIADemo 。
用htmlcssjavascript打造自己的RIA之一 - 無余如塵 - 天涯海角

選擇運(yùn)行的服務(wù)器以及 java ee 標(biāo)準(zhǔn)。
用htmlcssjavascript打造自己的RIA之一 - 無余如塵 - 天涯海角

在這里選擇tomcat5.0，j2ee1.4,本文介紹例子，并不依賴于服務(wù)器，因?yàn)閔tml&css&javascript本身都是靜態(tài)的，做完以后就是一個(gè)html文件。嚴(yán)格意義上的web程序肯定是要有一個(gè)服務(wù)器來運(yùn)行的，netbeans還是采用了這種管理理念。
在這一步，已經(jīng)可以點(diǎn)擊完成建立項(xiàng)目，下一步是選擇框架，這里，為了簡單純凈，不選擇任何框架。
建立好項(xiàng)目后，項(xiàng)目工作區(qū)項(xiàng)目結(jié)構(gòu)如下：
用htmlcssjavascript打造自己的RIA之一 - 無余如塵 - 天涯海角

因?yàn)槭庆o態(tài)的，所以不需要關(guān)注 Web 頁目錄外的任何東西。
為了方便管理，還需要在 Web 頁目錄下新建兩個(gè)目錄， inc 以及 images ，相當(dāng)簡單，這里不再贅述。
第一個(gè)例子，頁面請求時(shí)的 wait ，效果如圖：
用htmlcssjavascript打造自己的RIA之一 - 無余如塵 - 天涯海角

這個(gè)例子是在當(dāng)前頁面中執(zhí)行某個(gè)操作，還未離開或者返回操作結(jié)果前，凍結(jié)本頁面，顯示一個(gè)wait框。作用是提示用戶，頁面正在載入。特別是對于某些大批量數(shù)據(jù)的請求，該UI可以減輕客戶因長時(shí)間等待而引起的煩躁。
簡單分析一下，這個(gè)例子由2個(gè)要點(diǎn)組成。
1 ，靜態(tài)元素
2 ，該框何時(shí)出現(xiàn)何時(shí)消失
該效果中的UI是一個(gè)有l(wèi)oading的框，該框處于變暗的背景上。
對于靜態(tài)元素，不論其表現(xiàn)成什么樣子，其本質(zhì)總是HTML,CSS和javascript，當(dāng)然嵌入控件的除外，比如flash，事實(shí)上嵌入的控件已經(jīng)不在html等靜態(tài)元素的范圍內(nèi)了。
該例中，帶有l(wèi)oading的框?qū)嶋H上只是一個(gè)包含了具有滾動效果的圖片和普通文本的div,只不過該div，用CSS進(jìn)行了美化，然后結(jié)合網(wǎng)頁的特點(diǎn)，使用javascript來控制該div顯示和消失。
那么，如何來制作這樣的效果，為了清晰地說明整個(gè)制作過程，暫不論javascript，先制作出該div。
在web頁目錄下，右擊，新建-->html

用htmlcssjavascript打造自己的RIA之一 - 無余如塵 - 天涯海角

選擇 html ，給文件命名index
頁面建立后，還需要的素材就是具有滾動效果的圖片 loading.gif ，把該圖片拷貝至 images 文件夾下。
接下來，新建一個(gè) CSS 文件，在 inc 文件夾上右擊，新建 --> 其他 , 在其他目錄中選擇層疊樣式表，如圖：
用htmlcssjavascript打造自己的RIA之一 - 無余如塵 - 天涯海角

取名 style ，點(diǎn)擊完成，生成 CSS 文件，通過該步驟新建的 CSS ，自動生成了一個(gè)樣式 root ，把光標(biāo)移動到 root 樣式表的范圍內(nèi)， netbeans 會顯示一個(gè)針對 CSS 的樣式生成器窗口，同時(shí)還有一個(gè)效果預(yù)覽窗口，如下圖：
用htmlcssjavascript打造自己的RIA之一 - 無余如塵 - 天涯海角

編輯器右邊的生成器窗口，提供了很多屬性的 GUI 設(shè)置，并會自動生成對應(yīng)的代碼，而編輯器的下方則是該樣式的預(yù)覽效果，比如，筆者在字體面板里，樣式選擇 italic ，粗細(xì)選擇 bold ，再選擇下劃線，顏色選擇 #ff0099( 紅色的一種 ) ，選擇顏色時(shí)會彈出顏色選擇器，選擇對應(yīng)的顏色，則預(yù)覽效果如下圖：
用htmlcssjavascript打造自己的RIA之一 - 無余如塵 - 天涯海角

編輯器自動生成了代碼，而預(yù)覽框里也顯示了應(yīng)用后的效果，這一點(diǎn) netbeans 是做地相當(dāng)不錯(cuò)了。
需要說明的是，工具生成的代碼固然簡單，但是肯定沒有自己手寫來地靈活，好控制。
在這里，定義我們需要的等待框的樣式
.loading
{
border:2px solid #a3bad9;/* 被應(yīng)用樣式對象的邊框的樣式 */
color:#003366; /* 被應(yīng)用樣式對象中的內(nèi)容的顏色 */
padding:10px; /* 被應(yīng)用樣式對象中的內(nèi)容距離樣式邊框的距離 ( 上，下，左，右 ) */
margin:0; /* 被應(yīng)用樣式對象與其周圍元素的距離 ( 上，下，左，右 ) */
z-index:2000; /* 被應(yīng)用樣式對象在網(wǎng)頁中的 z 坐標(biāo)的值 */
width:205px; /* 被應(yīng)用樣式對象的寬度 */
text-align:center; /* 被應(yīng)用樣式對象中的內(nèi)容居中 */
position:absolute; /* 被應(yīng)用樣式對象在頁面中的位置顯示方式 */
font-weight: bold; /* 被應(yīng)用樣式對象中的字體的樣式 */
font-size: 13px; /* 被應(yīng)用樣式對象中的字體的大小 */
}
各屬性的具體意思，讀者如果有興趣可以再找資料以做更深一步的了解，這里不做詳述。
建立好 CSS 后，在剛才建立的 index.html 文件的部分，加入以下代碼，以導(dǎo)入 CSS 樣式。

在區(qū)域加入

頁面載入中 .....

保存文件，在 index.html 文件上右擊，選擇運(yùn)行文件
用htmlcssjavascript打造自己的RIA之一 - 無余如塵 - 天涯海角

則自動彈出瀏覽器，顯示效果如下：
用htmlcssjavascript打造自己的RIA之一 - 無余如塵 - 天涯海角

一個(gè)框就出現(xiàn)了，細(xì)心的讀者可以發(fā)現(xiàn)，該 UI 和一開始演示的略有不同，如果在剛才定義的 loading 樣式中加入，如下代碼：
background:white url(../images/block-bg.gif) repeat-x; /* 被應(yīng)用樣式對象的背景，并設(shè)置成橫向重復(fù) */
當(dāng)然還需要加入背景圖 block-bg.gif ，加入背景圖后，現(xiàn)在是效果如下：
用htmlcssjavascript打造自己的RIA之一 - 無余如塵 - 天涯海角

至此該 UI 制作完成。
接下來制作如何使網(wǎng)頁變暗，并且不能點(diǎn)擊。
網(wǎng)頁的變暗，最簡單的辦法就是把網(wǎng)頁的背景色改成暗色，不過這個(gè)顯然是沒有意義的，因?yàn)楦某砂瞪?，頁面上的元素依然可以點(diǎn)擊。
那么如何實(shí)現(xiàn)背景變暗，并且不能點(diǎn)擊呢？
再分析靜態(tài)網(wǎng)頁的原理，變暗肯定是通過調(diào)整色彩來實(shí)現(xiàn)，而要實(shí)現(xiàn)不能點(diǎn)擊，則可以通過，替換點(diǎn)擊對象來實(shí)現(xiàn)，即在要點(diǎn)擊的對象上，則生成一個(gè)對象，而這個(gè)對象是透明的，那么當(dāng)用戶點(diǎn)擊的時(shí)候，他點(diǎn)擊到的實(shí)際上是擋在底層對象上的透明對象，這樣就給用戶造成點(diǎn)擊無效的錯(cuò)覺，如下圖：
用htmlcssjavascript打造自己的RIA之一 - 無余如塵 - 天涯海角

如果物體 B 是透明的，而且緊挨著物體 A ，第三方如果試圖接觸物體 A ，碰到的僅僅是物體 B ，那么一切針對 A 的接觸將是無效的。
分析到這里，我們要做的就是有這個(gè)特殊效果的 div ，說到底還是一個(gè) CSS 的制作和應(yīng)用。
而暗色透明效果，可以通過 CSS 的濾鏡屬性來獲得，重新一定一個(gè)新的樣式 bgdiv
.bgdiv
{
background:#ccc; /* 背景色 */
opacity:.3; /* 透明度 */
filter: alpha(opacity=30); /* 濾鏡透明 */
position:absolute; /* 被應(yīng)用樣式對象在頁面中的位置顯示方式 */
z-index:1000; /* 被應(yīng)用樣式對象在網(wǎng)頁中的 z 坐標(biāo)的值 */
width:500px; /* 被應(yīng)用樣式對象的寬度 */
height:500px; /* 被應(yīng)用樣式對象的高度 */
top: 0px; /* 被應(yīng)用樣式對象距頁面頂部的距離 */
left: 0px; /* 被應(yīng)用樣式對象距頁面左端的距離 */
}

在 body 區(qū)域，再加入 :
, 運(yùn)行文件，效果如下：
用htmlcssjavascript打造自己的RIA之一 - 無余如塵 - 天涯海角

到這里， UI 的設(shè)計(jì)就完成了，但是我們看到的 div 大小是 500*500 ，并沒有充滿整個(gè)頁面，而且 wait 框也并沒有居中，而且一開始效果就已經(jīng)出來了，這樣顯然是不能直接使用的，真正在用的時(shí)候，我們需要背景充滿整個(gè)頁面， wait 框需要居中顯示，而且我們要能夠控制該效果什么時(shí)候出現(xiàn)，什么時(shí)候消失。
那么這些工作，就需要依靠 javascript 來完成了。
javascript 幾乎可以控制頁面上所有的靜態(tài)元素，而上述效果正式通過控制背景 div 和 wait 框來實(shí)現(xiàn)。
在 javascript 中，要取得頁面上的某個(gè)元素，最簡單的方法是給目標(biāo)對象的 ID 屬性賦一個(gè)值，然后通過 javascript 的 getElementbyId 來獲得。
在這里，先給 bgdiv 的 ID 屬性賦值，如：

我們先解決第一個(gè)問題，即通過 javascript 來設(shè)置層的大小以充滿整個(gè)頁面。
function showbg()
{
var bgdiv=document.getElementById("bgdiv"); // 取得 bgdiv 對象
bgdiv.style.width=document.body.clientWidth; // 設(shè)置 bgdiv 對象的寬度為網(wǎng)頁可視區(qū)域的寬度
if (document.body.clientHeight>document.body.scrollHeight) // 設(shè)置 bgdiv 對象的高度為網(wǎng)頁可視區(qū)域的高度
bgdiv.style.height=document.body.clientHeight;
else
bgdiv.style.height=document.body.scrollHeight;
}
在這里需要說明的是 clientWidh 和 scrollWidth 都是表示可視區(qū)域的寬度，區(qū)別在如果網(wǎng)頁中有滾動條，那么 scollWidth 要大于 clientWidth ，因?yàn)?/SPAN> scollWidth 包含了滾動條可?????????到的部分，而 clientWidth 沒有，只是可見的部分。
上面的函數(shù)中 width ，這里采取了 clientWidth ，因?yàn)榘凑站W(wǎng)頁設(shè)計(jì)的基本原則，設(shè)計(jì)出的網(wǎng)頁包含橫向滾動條是相當(dāng)不友好的，因?yàn)槭髽?biāo)只能上下滾動，而并不能左至右滾動，因此這里直接取 clientWidth ，意為保證整個(gè)項(xiàng)目中不會出現(xiàn)橫向滾動條。
下面高度的設(shè)置則是考慮了有豎向滾動條和沒有豎向滾動條時(shí)的兼容性。
通過上述函數(shù)可以保證，調(diào)出來的 bgdiv 可以充滿整個(gè)屏幕。

在 inc 文件夾下，新建一個(gè) javascript 文件，把上述函數(shù)拷貝進(jìn)去，在頁面中加入以下代碼以引入該函數(shù)

   為了方便顯示，在 body 標(biāo)簽里加入 onload="showbg();", 頁面加載完成后，即可看見調(diào)整后的 bgdiv 的已經(jīng)充滿了整個(gè)頁面。
調(diào)整 wait 框的顯示位置原理也類似，函數(shù)為：
function showwait()
{
showbg(); // 顯示 bgdiv
var loading=document.getElementById("loaddiv");// 獲得 loading 對象
loading.style.top=document.body.clientHeight/2+document.body.scrollTop-50;// 設(shè)置 loading 距頂部的距離
loading.style.left=document.body.clientWidth/2-110;// 設(shè)置 loading 距左端的距離
}
在onload事件里調(diào)用showwait，即可顯示wait框位于暗色透明的背景上。

  在這里需要強(qiáng)調(diào)的是CSS屬性的position屬性，該屬性一定要設(shè)置為absolute，上述的代碼才會有效果，因?yàn)樯鲜龃a的位置是按照絕對位置來設(shè)置的。

  上述的效果是一打開頁面就顯示，如果要自己控制其是否顯示，則需要用到CSS的屬性display，當(dāng)值為block時(shí)顯示，為none時(shí)不顯示。

  我們在上述CSS屬性中，均加入display：none;則打開頁面的時(shí)候，不顯示效果。

  然后在showbg函數(shù)中加入 bgdiv.style.display=”block”;

  在showwait函數(shù)中加入 loading.style.display=”none”;

  在頁面的body區(qū)域加入顯示，運(yùn)行頁面，只可以看到顯示鏈接，點(diǎn)擊顯示鏈接后，會顯示我們需要的效果，如圖：
用htmlcssjavascript打造自己的RIA之一 - 無余如塵 - 天涯海角

  這樣出現(xiàn)的效果，并不會消失。筆者在平時(shí)的學(xué)習(xí)工作中，也發(fā)現(xiàn)了一個(gè)現(xiàn)象，在頁面上點(diǎn)擊一個(gè)鏈接（即向服務(wù)器發(fā)送一個(gè)請求），當(dāng)服務(wù)器還沒有處理結(jié)束，沒有返回頁面給客戶端的時(shí)候，頁面本身是不會有變化的，而所謂的網(wǎng)速慢也是這樣，點(diǎn)擊了沒反映，當(dāng)服務(wù)器處理結(jié)束后，才把html放回給用戶，頁面才開始變化。那么，如果在點(diǎn)擊鏈接的時(shí)候，觸發(fā)showwait事件，該效果就會出現(xiàn)，直到服務(wù)器處理請求結(jié)束，頁面發(fā)生重定向而消失。

  比如，我們把顯示的代碼改為顯示然后運(yùn)行頁面，再點(diǎn)擊顯示，我們可以看到出現(xiàn)wait框，等頁面消失就出現(xiàn)了Sun的主頁。
  我們回頭看一下，事實(shí)上該例子并沒有特殊的東西，只是對HTML，CSS和javascript的要求非常高，只有對這三個(gè)靜態(tài)元素比較熟悉了，才能把握好。而且在這里，對美工也有一定的要求，需要說明的是wait的滾動圖片以及背景圖片并不是筆者所做，是用的ext框架的圖片，wait框的CSS樣式也是參考的ext的。
  值得一說的是，netbeans6.1的編輯器對javascript做了比較豐富的提示支持，不光有關(guān)鍵字的支持，還有對兼容瀏覽器的提示，甚至提供了一些簡單的例子。

  本文花了很大的篇幅，講解了一個(gè)并不復(fù)雜的例子，目的在于通過詳細(xì)的思考和開發(fā)流程，來給讀者深入剖析如何開發(fā)自己的RIA。

  可以看出，要制作這種類型的RIA，盡管還是需要一定的美工基礎(chǔ)以及頁面設(shè)計(jì)能力，但其基本制作步驟，不外乎以下兩步：

  1.利用HTML和CSS制作自己的UI。

  2.仔細(xì)研究頁面的行為模式，編寫何時(shí)的javascipt來控制UI。

  在下一篇文章里，筆者將給大家介紹一個(gè)比較復(fù)雜的綜合性的例子，包含了彈出對話框，彈出菜單，特殊效果的層以及拖動的窗口等效果。

12 下一頁閱讀全文

您可能感興趣的文章: