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

項目名稱輸入RIADemo 。

選擇運行的伺服器以及java ee 標準。

這裡選擇tomcat5.0，j2ee1.4,本文介紹例子，並不依賴伺服器，因為html&css&javascript本身都是靜態的，做完以後就是一個html檔。嚴格意義上的web程式肯定是要有一個伺服器來運作的，netbeans還是採用了這種管理理念。
在這一步，已經可以點擊完成建立項目，下一步是選擇框架，這裡，為了簡單純淨，不選擇任何框架。
建立好專案後，專案工作區專案架構如下：

因為是靜態的，所以不需要關注Web 頁目錄外的任何東西。
為了方便管理，還需要在Web 頁目錄下新建兩個目錄， inc 以及images ，相當簡單，這裡不再贅述。
第一個例子，頁面請求時的wait ，效果如圖：

這個範例是在目前頁面中執行某個操作，還未離開或返回操作結果前，凍結本頁面，顯示一個wait框。作用是提示用戶，頁面正在載入。特別是對於某些大批量資料的請求，該UI可以減輕客戶因長時間等待而引起的煩躁。
簡單分析一下，這個例子由2個重點組成。
1 ，靜態元素
2 ，該框何時出現何時消失該效果中的UI是一個有loading的框，該框處於變暗的背景上。
對於靜態元素，不論其表現成什麼樣子，其本質總是HTML,CSS和javascript，當然嵌入控制項的除外，例如flash，事實上嵌入的控制項已經不在html等靜態元素的範圍內了。
在這個例子中，帶有loading的框實際上只是一個包含了具有滾動效果的圖片和普通文本的div,只不過該div，用CSS進行了美化，然後結合網頁的特點，使用javascript來控制該div顯示和消失。
那麼，如何來製作這樣的效果，為了清楚地說明整個製作過程，暫不論javascript，先製作出該div。
在web頁目錄下，右鍵，新建-->html

選擇html ，為文件命名index
頁面建立後，還需要的素材就是具有滾動效果的圖片loading.gif ，把圖片拷貝至images 資料夾下。
接下來，新建一個CSS 文件，在inc 資料夾上右鍵，新建--> 其他, 在其他目錄中選擇層疊樣式表，如圖：

取名style ，點擊完成，產生CSS 文件，透過該步驟新建的CSS ，自動產生了一個樣式root ，把遊標移到root 樣式表的範圍內， netbeans 會顯示一個針對CSS 的樣式產生器窗口，同時還有一個效果預覽窗口，如下圖：

編輯器右邊的生成器窗口，提供了許多屬性的GUI 設置，並會自動產生對應的程式碼，而編輯器的下方則是該樣式的預覽效果，例如，筆者在字體面板裡，樣式選擇italic ，粗細選擇bold ，再選擇底線，顏色選擇#ff0099( 紅色的一種) ，選擇顏色時會彈出顏色選擇器，選擇對應的顏色，則預覽效果如下圖：

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

在區域加入

儲存文件，在index.html 文件上右鍵，選擇運行文件

則自動彈出瀏覽器，顯示效果如下：

一個框就出現了，細心的讀者可以發現，該UI 和一開始演示的略有不同，如果在剛才定義的loading 樣式中加入，如下代碼：
background:white url(../images/block-bg.gif) repeat-x; /* 被套用樣式物件的背景，並設定成橫向重複*/
當然還需要加入背景圖block-bg.gif ，加入背景圖後，現在是效果如下：

至此該UI 製作完成。
接下來製作如何使網頁變暗，並且不能點擊。
網頁的變暗，最簡單的方法就是把網頁的背景色改成暗色，不過這個顯然是沒有意義的，因為改成暗色後，頁面上的元素依然可以點擊。
那麼如何實現背景變暗，不能點擊呢？
再分析靜態網頁的原理，變暗肯定是透過調整色彩來實現，而要實現不能點擊，則可以通過，替換點擊對象來實現，即在要點擊的對像上，則生成一個對象，而這個對像是透明的，那麼當用戶點擊的時候，他點擊到的實際上是擋在底層對像上的透明對象，這樣就給用戶造成點擊無效的錯覺，如下圖：

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

在body 區域，再加入:
, 運行文件，效果如下：

到這裡， UI 的設計就完成了，但是我們看到的div 大小是500*500 ，並沒有充滿整個頁面，而且wait 框也並沒有居中，而且一開始效果就已經出來了，這樣顯然是不能直接使用的，真正在用的時候，我們需要背景充滿整個頁面， wait 框需要居中顯示，而且我們要能夠控制該效果什麼時候出現，什麼時候消失。
那麼這些工作，就需要靠javascript 來完成了。
javascript 幾乎可以控制頁面上所有的靜態元素，而上述效果正式透過控制背景div 和wait 框來實現。
在javascript 中，要取得頁面上的某個元素，最簡單的方法是給目標物件的ID 屬性賦一個值，然後透過javascript 的getElementbyId 來獲得。
在這裡，先給bgdiv 的ID 屬性賦值，如：

我們先解決第一個問題，透過javascript 來設定層的大小以充滿整個頁面。
function showbg()
{
var bgdiv=document.getElementById("bgdiv"); // 取得bgdiv 對象
bgdiv.style.width=document.body.clientWidth; // 設定bgdiv 物件的寬度為網頁視覺區域的寬度
if (document.body.clientHeight>document.body.scrollHeight) // 設定bgdiv 物件的高度為網頁視覺區域的高度
bgdiv.style.height=document.body.clientHeight;
else
bgdiv.style.height=document.body.scrollHeight;
}
這裡需要說明的是clientWidh 和scrollWidth 都是表示可視區域的寬度，區別在如果網頁中有滾動條，那麼scollWidth 要大於clientWidth ，因為scollWidth 包含了滾動條可?????????到的部分，而clientWidth 沒有，只是可見的部分。
上面的函數中width ，這裡採取了clientWidth ，因為按照網頁設計的基本原則，設計出的網頁包含橫向滾動條是相當不友好的，因為滑鼠只能上下滾動，而並不能左至右滾動，因此這裡直接取clientWidth ，意為確保整個專案中不會出現橫向捲軸。
下面高度的設定則是考慮了有垂直捲軸和沒有垂直捲軸時的相容性。
透過上述函數可以保證，調出來的bgdiv 可以充滿整個螢幕。

在inc 資料夾下，新建一個javascript 文件，把上述函數拷貝進去，在頁面中加入以下程式碼以引入該函數

為了方便顯示，在body 標籤裡加入onload="showbg();", 頁面載入完成後，即可看見調整後的bgdiv 的已經充滿了整個頁面。
調整wait 框的顯示位置原理也類似，函數為：
function showwait()
{
showbg(); // 顯示bgdiv
var loading=document.getElementById("loaddiv");// 取得loading 對象
loading.style.top=document.body.clientHeight/2+document.body.scrollTop-50;// 設定loading 距頂部的距離
loading.style.left=document.body.clientWidth/2-110;// 設定loading 離左端的距離
}
在onload事件裡呼叫showwait，即可顯示wait框位於暗色透明的背景上。

這裡要強調的是CSS屬性的position屬性，該屬性一定要設定為absolute，上述的程式碼才會有效果，因為上述程式碼的位置是依照絕對位置來設定的。

上述的效果是一開啟頁面就顯示，如果要自行控制是否顯示，則需要用到CSS的屬性display，當值為block時顯示，為none時不顯示。

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

然後在showbg函數中加入bgdiv.style.display=”block”;

在showwait函數中加入loading.style.display=”none”;

在頁面的body區域加入顯示，運行頁面，只可以看到顯示鏈接，點擊顯示鏈接後，會顯示我們需要的效果，如圖：

這樣出現的效果，並不會消失。筆者在平時的學習工作中，也發現了一個現象，在頁面上點擊一個連結（即向伺服器發送請求），當伺服器還沒有處理結束，沒有返回頁面給客戶端的時候，頁面本身是不會有變化的，而所謂的網速慢也是這樣，點擊了沒反映，當伺服器處理結束後，才把html放回給用戶，頁面才開始變化。那麼，如果在點擊連結的時候，觸發showwait事件，該效果就會出現，直到伺服器處理請求結束，頁面發生重定向而消失。

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

本文花了很大的篇幅，解釋了一個並不複雜的例子，目的在於透過詳細的思考和開發流程，來給讀者深入剖析如何開發自己的RIA。

可以看出，要製作這種類型的RIA，儘管還是需要一定的美工基礎以及頁面設計能力，但其基本製作步驟，不外乎以下兩步：

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

2.仔細研究頁面的行為模式，寫出何時的javascipt來控制UI。

在下一篇文章裡，筆者將為大家介紹一個比較複雜的綜合性的例子，包含了彈出對話框，彈出選單，特殊效果的層以及拖曳的視窗等效果。