用html css javascript打造自己的RIA圖文教程第1/2頁
更新時間：2009年07月09日 09:46:55 作者：
用html&css&javascript打造自己的RIA之一,包括了配置等
在制作之前，先建立開發(fā)環(huán)境。
打開netbeans6.1，在項目工作區(qū)，右擊新建項目，選擇Web目錄下的Web應(yīng)用程序。
項目名稱輸入 RIADemo 。
選擇運行的服務(wù)器以及 java ee 標(biāo)準(zhǔn)。
在這里選擇tomcat5.0，j2ee1.4,本文介紹例子，并不依賴于服務(wù)器，因為html&css&javascript本身都是靜態(tài)的，做完以后就是一個html文件。嚴(yán)格意義上的web程序肯定是要有一個服務(wù)器來運行的，netbeans還是采用了這種管理理念。
在這一步，已經(jīng)可以點擊完成建立項目，下一步是選擇框架，這里，為了簡單純凈，不選擇任何框架。
建立好項目后，項目工作區(qū)項目結(jié)構(gòu)如下：
因為是靜態(tài)的，所以不需要關(guān)注 Web 頁目錄外的任何東西。
為了方便管理，還需要在 Web 頁目錄下新建兩個目錄， inc 以及 images ，相當(dāng)簡單，這里不再贅述。
第一個例子，頁面請求時的 wait ，效果如圖 ：
這個例子是在當(dāng)前頁面中執(zhí)行某個操作，還未離開或者返回操作結(jié)果前，凍結(jié)本頁面，顯示一個wait框。作用是提示用戶，頁面正在載入。特別是對于某些大批量數(shù)據(jù)的請求，該UI可以減輕客戶因長時間等待而引起的煩躁。
簡單分析一下，這個例子由2個要點組成。
1 ，靜態(tài)元素
2 ，該框何時出現(xiàn)何時消失
該效果中的UI是一個有l(wèi)oading的框，該框處于變暗的背景上。
對于靜態(tài)元素，不論其表現(xiàn)成什么樣子，其本質(zhì)總是HTML,CSS和javascript，當(dāng)然嵌入控件的除外，比如flash，事實上嵌入的控件已經(jīng)不在html等靜態(tài)元素的范圍內(nèi)了。
該例中，帶有l(wèi)oading的框?qū)嶋H上只是一個包含了具有滾動效果的圖片和普通文本的div,只不過該div，用CSS進行了美化，然后結(jié)合網(wǎng)頁的特點，使用javascript來控制該div顯示和消失。
那么，如何來制作這樣的效果，為了清晰地說明整個制作過程，暫不論javascript，先制作出該div。
在web頁目錄下，右擊，新建-->html
選擇 html ，給文件命名index
頁面建立后，還需要的素材就是具有滾動效果的圖片 loading.gif ，把該圖片拷貝至 images 文件夾下。
接下來，新建一個 CSS 文件，在 inc 文件夾上右擊，新建 --> 其他 , 在其他目錄中選擇層疊樣式表，如圖：
取名 style ，點擊完成，生成 CSS 文件，通過該步驟新建的 CSS ，自動生成了一個樣式 root ，把光標(biāo)移動到 root 樣式表的范圍內(nèi)， netbeans 會顯示一個針對 CSS 的樣式生成器窗口，同時還有一個效果預(yù)覽窗口，如下圖：
編輯器右邊的生成器窗口，提供了很多屬性的 GUI 設(shè)置，并會自動生成對應(yīng)的代碼，而編輯器的下方則是該樣式的預(yù)覽效果，比如，筆者在字體面板里，樣式選擇 italic ，粗細(xì)選擇 bold ，再選擇下劃線，顏色選擇 #ff0099( 紅色的一種 ) ，選擇顏色時會彈出顏色選擇器，選擇對應(yīng)的顏色，則預(yù)覽效果如下圖：
編輯器自動生成了代碼，而預(yù)覽框里也顯示了應(yīng)用后的效果，這一點 netbeans 是做地相當(dāng)不錯了。
需要說明的是，工具生成的代碼固然簡單，但是肯定沒有自己手寫來地靈活，好控制。
在這里，定義我們需要的等待框的樣式
.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 文件上右擊，選擇運行文件
則自動彈出瀏覽器，顯示效果如下：
一個框就出現(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)在是效果如下：
至此該 UI 制作完成。
接下來制作如何使網(wǎng)頁變暗，并且不能點擊。
網(wǎng)頁的變暗，最簡單的辦法就是把網(wǎng)頁的背景色改成暗色，不過這個顯然是沒有意義的，因為改成暗色后，頁面上的元素依然可以點擊。
那么如何實現(xiàn)背景變暗，并且不能點擊呢？
再分析靜態(tài)網(wǎng)頁的原理，變暗肯定是通過調(diào)整色彩來實現(xiàn)，而要實現(xiàn)不能點擊，則可以通過，替換點擊對象來實現(xiàn)，即在要點擊的對象上，則生成一個對象，而這個對象是透明的，那么當(dāng)用戶點擊的時候，他點擊到的實際上是擋在底層對象上的透明對象，這樣就給用戶造成點擊無效的錯覺，如下圖：
如果物體 B 是透明的，而且緊挨著物體 A ，第三方如果試圖接觸物體 A ，碰到的僅僅是物體 B ，那么一切針對 A 的接觸將是無效的。
分析到這里，我們要做的就是有這個特殊效果的 div ，說到底還是一個 CSS 的制作和應(yīng)用。
而暗色透明效果，可以通過 CSS 的濾鏡屬性來獲得，重新一定一個新的樣式 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ū)域，再加入 :
, 運行文件，效果如下：
到這里， UI 的設(shè)計就完成了，但是我們看到的 div 大小是 500*500 ，并沒有充滿整個頁面，而且 wait 框也并沒有居中，而且一開始效果就已經(jīng)出來了，這樣顯然是不能直接使用的，真正在用的時候，我們需要背景充滿整個頁面， wait 框需要居中顯示，而且我們要能夠控制該效果什么時候出現(xiàn)，什么時候消失。
那么這些工作，就需要依靠 javascript 來完成了。
javascript 幾乎可以控制頁面上所有的靜態(tài)元素，而上述效果正式通過控制背景 div 和 wait 框來實現(xiàn)。
在 javascript 中，要取得頁面上的某個元素，最簡單的方法是給目標(biāo)對象的 ID 屬性賦一個值，然后通過 javascript 的 getElementbyId 來獲得。
在這里，先給 bgdiv 的 ID 屬性賦值，如：
我們先解決第一個問題，即通過 javascript 來設(shè)置層的大小以充滿整個頁面。
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 ，因為 scollWidth 包含了滾動條可?????????到的部分，而 clientWidth 沒有，只是可見的部分。
上面的函數(shù)中 width ，這里采取了 clientWidth ，因為按照網(wǎng)頁設(shè)計的基本原則，設(shè)計出的網(wǎng)頁包含橫向滾動條是相當(dāng)不友好的，因為鼠標(biāo)只能上下滾動，而并不能左至右滾動，因此這里直接取 clientWidth ，意為保證整個項目中不會出現(xiàn)橫向滾動條。
下面高度的設(shè)置則是考慮了有豎向滾動條和沒有豎向滾動條時的兼容性。
通過上述函數(shù)可以保證，調(diào)出來的 bgdiv 可以充滿整個屏幕。
在 inc 文件夾下，新建一個 javascript 文件，把上述函數(shù)拷貝進去，在頁面中加入以下代碼以引入該函數(shù)
為了方便顯示，在 body 標(biāo)簽里加入 onload="showbg();", 頁面加載完成后，即可看見調(diào)整后的 bgdiv 的已經(jīng)充滿了整個頁面。
調(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框位于暗色透明的背景上。
在這里需要強調(diào)的是CSS屬性的position屬性，該屬性一定要設(shè)置為absolute，上述的代碼才會有效果，因為上述代碼的位置是按照絕對位置來設(shè)置的。
上述的效果是一打開頁面就顯示，如果要自己控制其是否顯示，則需要用到CSS的屬性display，當(dāng)值為block時顯示，為none時不顯示。
我們在上述CSS屬性中，均加入display：none;則打開頁面的時候，不顯示效果。
然后在showbg函數(shù)中加入 bgdiv.style.display=”block”;
在showwait函數(shù)中加入 loading.style.display=”none”;
在頁面的body區(qū)域加入顯示 ，運行頁面，只可以看到顯示鏈接，點擊顯示鏈接后，會顯示我們需要的效果，如圖：
這樣出現(xiàn)的效果，并不會消失。筆者在平時的學(xué)習(xí)工作中，也發(fā)現(xiàn)了一個現(xiàn)象，在頁面上點擊一個鏈接（即向服務(wù)器發(fā)送一個請求），當(dāng)服務(wù)器還沒有處理結(jié)束，沒有返回頁面給客戶端的時候，頁面本身是不會有變化的，而所謂的網(wǎng)速慢也是這樣，點擊了沒反映，當(dāng)服務(wù)器處理結(jié)束后，才把html放回給用戶，頁面才開始變化。那么，如果在點擊鏈接的時候，觸發(fā)showwait事件，該效果就會出現(xiàn)，直到服務(wù)器處理請求結(jié)束，頁面發(fā)生重定向而消失。
比如，我們把顯示的代碼改為顯示 然后運行頁面，再點擊顯示，我們可以看到出現(xiàn)wait框，等頁面消失就出現(xiàn)了Sun的主頁。
我們回頭看一下，事實上該例子并沒有特殊的東西，只是對HTML，CSS和javascript的要求非常高，只有對這三個靜態(tài)元素比較熟悉了，才能把握好。而且在這里，對美工也有一定的要求，需要說明的是wait的滾動圖片以及背景圖片并不是筆者所做，是用的ext框架的圖片，wait框的CSS樣式也是參考的ext的。
值得一說的是，netbeans6.1的編輯器對javascript做了比較豐富的提示支持，不光有關(guān)鍵字的支持，還有對兼容瀏覽器的提示，甚至提供了一些簡單的例子。
本文花了很大的篇幅，講解了一個并不復(fù)雜的例子，目的在于通過詳細(xì)的思考和開發(fā)流程，來給讀者深入剖析如何開發(fā)自己的RIA。
可以看出，要制作這種類型的RIA，盡管還是需要一定的美工基礎(chǔ)以及頁面設(shè)計能力，但其基本制作步驟，不外乎以下兩步：
1.利用HTML和CSS制作自己的UI。
2.仔細(xì)研究頁面的行為模式，編寫何時的javascipt來控制UI。
在下一篇文章里，筆者將給大家介紹一個比較復(fù)雜的綜合性的例子，包含了彈出對話框，彈出菜單，特殊效果的層以及拖動的窗口等效果。
相關(guān)文章
解讀controller層,service層,mapper層,entity層的作用與聯(lián)系
這篇文章主要介紹了關(guān)于controller層,service層,mapper層,entity層的作用與聯(lián)系,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
SpringBoot使用RedisTemplate.delete刪除指定key失敗的解決辦法
本文主要介紹了SpringBoot使用RedisTemplate.delete刪除指定key失敗的解決辦法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
解決@NonNull @org.jetbrains.annotations.NotNull報紅的問題
這篇文章主要介紹了解決@NonNull @org.jetbrains.annotations.NotNull報紅的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
下面小編就為大家?guī)硪黄狫ava基礎(chǔ)的幾道練習(xí)題(分享)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，希望可以幫到你2021-07-07
Spring整合Quartz實現(xiàn)定時任務(wù)調(diào)度的方法
下面小編就為大家?guī)硪黄猄pring整合Quartz實現(xiàn)定時任務(wù)調(diào)度的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
springboot項目中的bootstrap.yml配置不生效的原因及解決(沒有自動提示)
新創(chuàng)建一個 springboot項目,添加了 bootstrap.yml 文件,發(fā)現(xiàn)文件并沒有如預(yù)期變成綠色葉子,編寫的時候也沒有自動提示,啟動的時候,發(fā)現(xiàn)端口是8080,由此發(fā)現(xiàn)配置并沒有生效,所以本文給大家講解了springboot項目中的bootstrap.yml配置不生效的原因及解決2024-01-01
這篇文章主要介紹了java加密算法--MD5加密和哈希散列帶秘鑰加密算法源碼的相關(guān)資料,這里附實例代碼，幫助到大家學(xué)習(xí)理解，需要的朋友可以參考下2016-11-11
mybatis實現(xiàn)mapper配置并查詢數(shù)據(jù)的思路詳解
這篇文章主要介紹了mybatis實現(xiàn)mapper配置并查詢數(shù)據(jù),本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
Mybatis傳參為逗號分隔的字符串情形進行in條件查詢方式
這篇文章主要介紹了Mybatis傳參為逗號分隔的字符串情形進行in條件查詢方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
Java Spring的數(shù)據(jù)庫開發(fā)詳解
這篇文章主要介紹了Spring的數(shù)據(jù)庫開發(fā)，主要圍繞SpringJDBC和Spring Jdbc Template兩個技術(shù)來講解，文中有詳細(xì)的代碼示例，需要的小伙伴可以參考一下2023-04-04