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

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

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

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

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

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

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

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

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

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

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

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

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

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

在區(qū)域加入

頁(yè)面載入中 .....

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

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

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

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

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

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

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

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

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

   為了方便顯示，在 body 標(biāo)簽里加入 onload="showbg();", 頁(yè)面加載完成后，即可看見(jiàn)調(diào)整后的 bgdiv 的已經(jīng)充滿了整個(gè)頁(yè)面。
調(diào)整 wait 框的顯示位置原理也類似，函數(shù)為：
function showwait()
{
showbg(); // 顯示 bgdiv
var loading=document.getElementById("loaddiv");// 獲得 loading 對(duì)象
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，上述的代碼才會(huì)有效果，因?yàn)樯鲜龃a的位置是按照絕對(duì)位置來(lái)設(shè)置的。

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

  我們?cè)谏鲜鯟SS屬性中，均加入display：none;則打開(kāi)頁(yè)面的時(shí)候，不顯示效果。

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

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

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

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

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

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

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

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

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

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

12 下一頁(yè)閱讀全文

您可能感興趣的文章: