項目名稱輸入 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。


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

12下一頁閱讀全文