基于HTML5的Dojo-Widget開(kāi)發(fā)完整版_第1頁(yè)
基于HTML5的Dojo-Widget開(kāi)發(fā)完整版_第2頁(yè)
基于HTML5的Dojo-Widget開(kāi)發(fā)完整版_第3頁(yè)
基于HTML5的Dojo-Widget開(kāi)發(fā)完整版_第4頁(yè)
基于HTML5的Dojo-Widget開(kāi)發(fā)完整版_第5頁(yè)
已閱讀5頁(yè)，還剩9頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

基于HTML5的DojoWidget開(kāi)發(fā)簡(jiǎn)介：

當(dāng)前的Web開(kāi)發(fā)存在著兩種趨勢(shì)，一是基于HTML、CSS和JavaScript技術(shù)，比如以Dojo工具包、jQuery等為基礎(chǔ)的HTML頁(yè)面；另一種是基于瀏覽器端運(yùn)行時(shí)，如基于Flash、Silverlight等技術(shù)的RIA應(yīng)用。前者占用的資源少，不需在瀏覽器上安裝插件支持，后者界面更為美觀，且便于實(shí)現(xiàn)一些較為復(fù)雜的展現(xiàn)功能。而且，因?yàn)镴avaScript和Flash等平臺(tái)之間的交互功能很受局限，基于這兩類(lèi)技術(shù)開(kāi)發(fā)的頁(yè)面內(nèi)容很難做深度的集成。HTML5作為新一代的HTML標(biāo)準(zhǔn)，不但對(duì)JavaScript的支持更加完善，同時(shí)還包含了豐富的繪圖功能，這等同于兼具上面提到的兩類(lèi)技術(shù)的各自的優(yōu)勢(shì)。本文主要介紹基于HTML5來(lái)擴(kuò)展DojoWidget，它不僅具有強(qiáng)大的JavaScript邏輯控制，而且具有豐富的頁(yè)面展現(xiàn)和良好的運(yùn)行性能。前言若干年前，很少有人會(huì)想到一家生產(chǎn)電腦的公司會(huì)憑借一款功能設(shè)計(jì)上存在著不少缺陷的手機(jī)在市場(chǎng)上取得巨大的成功。也很少有人會(huì)想到一家曾經(jīng)占據(jù)著智能手機(jī)大部分市場(chǎng)份額的廠商會(huì)落入今天這樣舉步維艱的局面。人們不禁驚訝的發(fā)現(xiàn)，精美的界面、方便的操作對(duì)于消費(fèi)者的吸引力要大于完善的功能及穩(wěn)定的系統(tǒng)。用戶(hù)體驗(yàn)的優(yōu)劣在一定的程度上決定了一個(gè)面向終端用戶(hù)的產(chǎn)品能否在市場(chǎng)上生存。移動(dòng)設(shè)備的設(shè)計(jì)如此，互聯(lián)網(wǎng)應(yīng)用的設(shè)計(jì)亦如此?，F(xiàn)在，互聯(lián)網(wǎng)上充斥著各種精美的CSS式樣、JavaScript特效、Flash動(dòng)畫(huà)等等，來(lái)吸引大眾的眼球以獲得更多的用戶(hù)關(guān)注和經(jīng)濟(jì)收益。這其中存在著兩種流行的設(shè)計(jì)趨勢(shì)。一種是以高級(jí)的JavaScript技術(shù)和CSS技術(shù)為基礎(chǔ)的DHTML，以此來(lái)實(shí)現(xiàn)美觀和交互性強(qiáng)的用戶(hù)界面。這種技術(shù)的優(yōu)勢(shì)是瀏覽器能夠提供天然的支持而不依賴(lài)于任何插件而且能夠很靈活的訪問(wèn)頁(yè)面上的內(nèi)容，但是這種技術(shù)的不足是瀏覽器自身的局限使得一些功能實(shí)現(xiàn)起來(lái)很困難。比如若要實(shí)現(xiàn)網(wǎng)頁(yè)上的矢量繪圖，雖然有VML、SVG等技術(shù)，但是它們不是廣泛支持的標(biāo)準(zhǔn)，需要在不同的瀏覽器上做不同的處理。另一種是在瀏覽器上面安裝某種包含運(yùn)行環(huán)境的插件來(lái)運(yùn)行某些RIA的應(yīng)用，如Flash、Silverlight、JavaFX等，這些技術(shù)都是基于矢量繪圖，能夠呈現(xiàn)絢麗的用戶(hù)界面和靈活多變的用戶(hù)交互。但它們的缺點(diǎn)就是需要在瀏覽器上再安裝插件，而且運(yùn)行效率往往也會(huì)存在著一定的問(wèn)題。新一代的Web頁(yè)面標(biāo)準(zhǔn)HTML5則可以幫助我們很好的解決這一問(wèn)題，它不但提供了很多諸如Web套接字、Web存儲(chǔ)等技術(shù)，而且提供了Canvas以便在Web頁(yè)面上直接進(jìn)行矢量繪圖。作為HTML5標(biāo)準(zhǔn)的一部分，Canvas將天然地被各種瀏覽器支持，而且便于與JavaScript進(jìn)行交互。從某種意義上說(shuō)可以作為當(dāng)前流行的Flash技術(shù)的替代品。所以，HTML5與Flash技術(shù)孰優(yōu)孰劣的爭(zhēng)論這兩年就一直不斷?，F(xiàn)在Web前端開(kāi)發(fā)領(lǐng)域流行著不少JavaScript類(lèi)庫(kù)，如YUILibrary、ExtJS、DojoToolkit等，其中一些封裝了各種前端控件。這些控件的實(shí)現(xiàn)是基于HTML4的標(biāo)準(zhǔn)和復(fù)雜的JavaScript及CSS技術(shù)。但隨著HTML5技術(shù)的發(fā)展，它的各種強(qiáng)大特性為這些控件的結(jié)構(gòu)和功能提供新的設(shè)計(jì)和實(shí)現(xiàn)方式。因此，如何將HTML5的特性靈活的運(yùn)用到前端控件開(kāi)發(fā)就是本文的關(guān)注點(diǎn)。由于HTML5的特性很多，而流行性的JavaScript庫(kù)中的前端控件也五花八門(mén)，本文只能舉例說(shuō)明。讀者可以根據(jù)自身的需求結(jié)合HTML5中的特性開(kāi)發(fā)出各種強(qiáng)大的前端頁(yè)面控件。新一代Web標(biāo)準(zhǔn)——HTML5HTML5是新一代的HTML標(biāo)準(zhǔn)，它里面包含了很多HTML4中沒(méi)有的新標(biāo)簽和應(yīng)用程序接口，如audio標(biāo)簽、video標(biāo)簽、矢量繪圖、Web套接字、離線數(shù)據(jù)存儲(chǔ)等。這些新特性可以使Web頁(yè)面具有更豐富的功能和更好的用戶(hù)體驗(yàn)，其中的很多都可以用在網(wǎng)頁(yè)控件設(shè)計(jì)上，從而使得網(wǎng)頁(yè)上的內(nèi)容更加豐富。在HTML5眾多的功能中，有一個(gè)功能非常重要，它不僅是一項(xiàng)被眾多網(wǎng)頁(yè)設(shè)計(jì)人員期待已久的功能，而且為網(wǎng)頁(yè)的功能和外觀設(shè)計(jì)留下了巨大的空間，它就是HTML5中的矢量繪圖?，F(xiàn)在，不僅不少的業(yè)內(nèi)人士將HTML5的矢量繪圖視作Flash的挑戰(zhàn)者，甚至連Flash的支持廠商Adobe都推出了基于HTML5矢量繪圖的動(dòng)畫(huà)制作工具。本文后面將會(huì)介紹借助HTML5的矢量繪圖技術(shù)實(shí)現(xiàn)DojoWidget。在此之前，為了幫助讀者能夠更好的理解本文的內(nèi)容，這里先對(duì)HTML中的矢量繪圖做一些簡(jiǎn)要的說(shuō)明。HTML5的矢量繪圖的功能由Canvas標(biāo)簽和各種繪圖API構(gòu)成。在JavaScript的腳本中，通過(guò)Canvas節(jié)點(diǎn)可以獲得繪圖上下文，通過(guò)它調(diào)用API就可以繪制各種矢量圖，如下所示。

清單1.利用HTML5Canvas繪制的矩形和三角形 <html><head><script>window.onload=function(){varcanvas=document.getElementById('canvas1');varctx=canvas.getContext('2d');ctx.fillRect(25,25,100,100);ctx.clearRect(45,45,60,60);ctx.strokeRect(50,50,50,50);ctx.beginPath();ctx.moveTo(125,125);ctx.lineTo(205,125);ctx.lineTo(125,205);ctx.fill();}</script></head><body><canvasid="canvas1"height="600"width="600"></canvas></body></html>

圖1.HTML5的Canvas繪制的矩形和三角形

在上面的例子中，我們?cè)谝粋€(gè)HTML的文檔中加入了一個(gè)Canvas標(biāo)簽，利用基于JavaScript的API來(lái)獲得繪圖上下文（Context），并在上面繪制了我們所要的圖形。除了繪制2D圖形，HTML5還支持3D矢量繪圖，它與2D的使用方式類(lèi)似，此處不再詳述。值得注意的是，HTML5還是一個(gè)發(fā)展的標(biāo)準(zhǔn)，至今并沒(méi)有被所有主流瀏覽器全面支持。但是，即使是曾經(jīng)是對(duì)HTML5支持較少的IE瀏覽器也會(huì)在新版本IE9中支持Canvas繪圖等HTML5關(guān)鍵標(biāo)簽技術(shù)。所以相信在不久的將來(lái)，HTML5的普及就會(huì)實(shí)現(xiàn)。DojoWidget近些年，頁(yè)面設(shè)計(jì)的易用性、功能性和交互性已經(jīng)成為了業(yè)界的主流趨勢(shì)。網(wǎng)頁(yè)的功能越來(lái)越豐富，用戶(hù)體驗(yàn)也越來(lái)越舒適。這一切都離不開(kāi)前端以JavaScript和CSS為基礎(chǔ)的DHTML技術(shù)的迅猛發(fā)展。但是，前端大規(guī)模的JavaScript和CSS開(kāi)發(fā)的復(fù)雜度比較高，而且還要支持不同的瀏覽器平臺(tái)，于是誕生了很多JavaScript庫(kù)用來(lái)幫助前端開(kāi)發(fā)者完成較為復(fù)雜的頁(yè)面邏輯同時(shí)屏蔽瀏覽器的差異，如jQuery、YUILibrary、ExtJS等。另外，越來(lái)越多的互聯(lián)網(wǎng)公司也將自己的JavaScript庫(kù)發(fā)布出來(lái)，如淘寶的KISSY、豆瓣的Do等等。每種庫(kù)都支持封裝前端復(fù)雜的控件，如jQureyUI、DojoWidget等，但方式卻不相同。本文選取DojoToolkit作為控件實(shí)現(xiàn)的基礎(chǔ)來(lái)介紹基于HTML5的控件的設(shè)計(jì)思想，當(dāng)然，這種設(shè)計(jì)并不是只能在DojoToolkit上得到實(shí)現(xiàn)，其它的類(lèi)庫(kù)也可以作為實(shí)現(xiàn)基礎(chǔ)。DojoToolkit是當(dāng)前頁(yè)面前端開(kāi)發(fā)領(lǐng)域流行的DHTML庫(kù)，它不但包括豐富的頁(yè)面基礎(chǔ)功能，如CSS選擇器、DOM節(jié)點(diǎn)操作、動(dòng)畫(huà)效果等，還包括良好的面向?qū)ο蟮姆庋b結(jié)構(gòu)和以此為基礎(chǔ)的Dojo控件技術(shù)DojoWidget（簡(jiǎn)稱(chēng)Dijit）。DojoWidget中包含了對(duì)網(wǎng)頁(yè)控件的生命周期管理，包括初始化渲染、屬性映射、事件綁定、控件銷(xiāo)毀等。清單2中給出了一個(gè)簡(jiǎn)單的DojoWidget的實(shí)現(xiàn)。

清單2.一個(gè)簡(jiǎn)單的DojoWidget dojo.declare("com.shy.widget.MyWidget",[dijit._Widget,dijit._Templated],{templateString:"<divdojoAttachEvent=\"onclick:onClick\">${text}</div>",text:"",onClick:function(){alert('onClick');}});清單2定義的DojoWidget會(huì)在頁(yè)面上生成一個(gè)DIV標(biāo)簽并將屬性text的值作為DIV中的內(nèi)容。同時(shí)，一個(gè)onclick事件響應(yīng)被綁定到這個(gè)DIV上。DojoWidget的使用有兩種方法：一種是通過(guò)HTML標(biāo)記的方式將DojoWidget添加到頁(yè)面上；另一種是通過(guò)類(lèi)型實(shí)例化的方式來(lái)初始化一個(gè)實(shí)例。清單3和清單4分別給出了這兩種方法各自的例子。

清單3.通過(guò)HTML標(biāo)記的方式使用DojoWidget <divdojoType="com.shy.widget.MyWidget"text="HelloWorld"/>

清單4.通過(guò)類(lèi)型實(shí)例化的方式使用DojoWidget <divid="testNode"/><scripttype="text/JavaScript">varmyWidget=newcom.shy.widget.MyWidget({text:'HelloWorld'},document.getElementById("testNode"));</script>在一般的基于Dojo的工程項(xiàng)目中，除了Dojo自身提供的各式Widget，開(kāi)發(fā)人員會(huì)根據(jù)實(shí)際項(xiàng)目需要擴(kuò)展Dojo提供的Widget或是重新開(kāi)發(fā)新的Widget。我們?cè)诤竺娴膬?nèi)容里將會(huì)在DojoWidget框架的基礎(chǔ)上，利用HTML5的非凡特性來(lái)實(shí)現(xiàn)新的Widget?；贖TML5的DojoWidget的設(shè)計(jì)如前文所述，HTML5中包含了很多強(qiáng)大的特性，它們的普及和發(fā)展會(huì)給前端頁(yè)面的控件技術(shù)帶來(lái)巨大的變化。本文不去描繪這種改變將會(huì)是什么樣子，而是舉一個(gè)具體的例子來(lái)為讀者掀開(kāi)未來(lái)的一角并由讀者親身品位。HTML5中的很多特性都可以用于頁(yè)面控件功能的實(shí)現(xiàn)，如前文提到的Web套接字、離線存儲(chǔ)、拖拽、矢量繪圖等。本文將利用HTML5中的Canvas矢量繪圖來(lái)渲染DojoWidget的視圖，并在此基礎(chǔ)上設(shè)計(jì)了屬性映射和事件綁定。當(dāng)前，很多網(wǎng)站的頁(yè)面都會(huì)在適當(dāng)?shù)胤綇棾鲆恍?duì)話框，圖2所示是Googlemaps網(wǎng)站上的對(duì)話框，圖3所示的是騰訊的WebQQ網(wǎng)站上的對(duì)話框。一般來(lái)講，網(wǎng)頁(yè)上的對(duì)話框都是通過(guò)DIV或是Table來(lái)進(jìn)行布局。有的設(shè)計(jì)力求簡(jiǎn)潔，如圖2中的對(duì)話框，只用一層DIV表示外框；有的設(shè)計(jì)則力求美觀，如圖3中的對(duì)話框，用了9個(gè)DIV來(lái)描述外框。頁(yè)面上的對(duì)話框的外觀設(shè)計(jì)的關(guān)鍵是邊框的設(shè)計(jì)。以往的技術(shù)，如圖2和圖3都是利用DIV加一些式樣和背景圖片來(lái)實(shí)現(xiàn)對(duì)話框。但HTML5中的canvas給了我們另外一種實(shí)現(xiàn)頁(yè)面上控件外觀的手段，就是用矢量圖將對(duì)話框的邊框“畫(huà)”出來(lái)，而不是通過(guò)DIV“拼”出來(lái)。這樣可以利用矢量圖技術(shù)來(lái)為對(duì)話框增加各種新特性，比如對(duì)話框的陰影、圓角、漸變等各種效果，再比如特殊形狀的對(duì)話框，如橢圓形，菱形等等。此外，利用矢量繪圖技術(shù)去“畫(huà)”對(duì)話框的另一個(gè)好處就是可以很方便的調(diào)整大小和形狀。例如要求設(shè)計(jì)一個(gè)橢圓形的對(duì)話框并且可以設(shè)置尺寸，如果沒(méi)有矢量繪圖，或許還可以用橢圓背景圖片來(lái)實(shí)現(xiàn)，但設(shè)置大小的需求就很難實(shí)現(xiàn)。所以HTML5中的矢量繪圖確實(shí)能為頁(yè)面前端控件的外觀設(shè)計(jì)帶來(lái)靈活性。我們這里會(huì)用HTML5的Canvas實(shí)現(xiàn)對(duì)話框控件。

圖2.GoogleMaps網(wǎng)站上彈出的對(duì)話框圖3.騰訊的WebQQ網(wǎng)站上的彈出對(duì)話框

利用HTML5我們可以畫(huà)出圖4所示的對(duì)話框的外觀，包括標(biāo)題欄和主體兩部分，在標(biāo)題欄的右側(cè)還有一個(gè)關(guān)閉按鈕。與上面例子中的對(duì)話框類(lèi)似，我們也會(huì)使用兩個(gè)DIV分別作為標(biāo)題欄內(nèi)容和主體內(nèi)容的容器。得到的對(duì)話框Widget結(jié)構(gòu)上會(huì)由三部分組成，分別是：繪制對(duì)話框外觀的Canvas、包含標(biāo)題內(nèi)容的DIV和包含主體內(nèi)容的DIV。

圖4.HTML5Canvas上畫(huà)出的對(duì)話框外觀

設(shè)計(jì)好對(duì)話框Widget的外觀和結(jié)構(gòu)后，接下來(lái)需要考慮如何為它綁定事件。圖2和圖3中的對(duì)話框中的每一個(gè)組成部分都是一個(gè)或幾個(gè)HTML元素，換句話說(shuō)就是可以對(duì)應(yīng)到頁(yè)面上的一個(gè)或幾個(gè)DOM節(jié)點(diǎn)。比如GoogleMaps和騰訊WebQQ網(wǎng)站上的對(duì)話框中的關(guān)閉按鈕都是Anchor元素，其所對(duì)應(yīng)的DOM節(jié)點(diǎn)上可以直接綁定事件處理函數(shù)。但是，對(duì)于圖4中的那個(gè)關(guān)閉按鈕，則不能通過(guò)簡(jiǎn)單的DOM節(jié)點(diǎn)事件綁定來(lái)完成。為Canvas矢量圖上的某個(gè)區(qū)域進(jìn)行事件綁定，如為圖4中的關(guān)閉按鈕添加事件響應(yīng)，需要首先監(jiān)聽(tīng)Canvas節(jié)點(diǎn)的相應(yīng)事件，再在事件處理函數(shù)中進(jìn)行事件分發(fā)。同樣以圖4中的關(guān)閉按鈕為例，要監(jiān)聽(tīng)它的鼠標(biāo)點(diǎn)擊事件，需要監(jiān)聽(tīng)Canvas的鼠標(biāo)點(diǎn)擊事件，在其回調(diào)函數(shù)中計(jì)算鼠標(biāo)的坐標(biāo)是否落入了關(guān)閉按鈕的區(qū)域內(nèi)，若是則調(diào)用關(guān)閉按鈕的事件點(diǎn)擊處理函數(shù)。對(duì)于Widget外觀矢量圖上表示出的嵌套關(guān)系，如圖4中的外層對(duì)話框包含里面的關(guān)閉按鈕，更好的實(shí)踐是將矢量圖上的內(nèi)容分成不同的實(shí)體進(jìn)行封裝，如可將外層對(duì)話框和里面的關(guān)閉按鈕封裝成不同的組件，這樣整個(gè)對(duì)話框就變成了一個(gè)組合控件。這種組合關(guān)就可以用樹(shù)的結(jié)構(gòu)來(lái)進(jìn)行描述，并以此設(shè)計(jì)類(lèi)似瀏覽器DOM樹(shù)上的事件捕獲和冒泡機(jī)制，如圖5所示。因?yàn)镠TML5的Canvas的矢量繪圖不允許將事件響應(yīng)綁定到矢量圖中的某個(gè)具體圖形上，所以圖5中Widget3的鼠標(biāo)單擊事件處理需要從Canvas的鼠標(biāo)單件事件處理中逐級(jí)分發(fā)，在事件分發(fā)的過(guò)程中加入事件捕獲和事件冒泡的響應(yīng)。

圖5.組合模式的Widget的事件捕獲和冒泡

在Canvas上設(shè)計(jì)好Widget的外觀后，就可以將其包裝到DojoWidget中，然后按照清單3和清單4中給出的方式來(lái)使用它。基于HTML5的DojoWidget的實(shí)現(xiàn)做為一個(gè)提供良好面向?qū)ο蠓庋b的JavaScript類(lèi)庫(kù)，DojoToolkit提供了完善的Widget封裝機(jī)制用于創(chuàng)建各種控件，如Dijit中的Form表單控件、布局控件，Dojox中的表格控件、顏色選項(xiàng)板控件等。這些控件實(shí)現(xiàn)的功能千差萬(wàn)別，卻遵循同樣的結(jié)構(gòu)，可見(jiàn)Dojo所提供的Widget機(jī)制具有十分良好的適用性。一般來(lái)講，每一個(gè)DojoWidget都要繼承Dojo中兩個(gè)抽象類(lèi)dijit._Widget和dijit_Templated并實(shí)現(xiàn)其中的一些方法。dijit_Widget主要用于實(shí)現(xiàn)DojoWidget的生命周期管理，dijit._Templated用于實(shí)現(xiàn)Widget的視圖渲染和屬性映射，對(duì)于我們所要實(shí)現(xiàn)的Widget也會(huì)繼承這兩個(gè)接口。我們的Widget的視圖主要有三部分組成，一個(gè)Canvas節(jié)點(diǎn)用于繪制外觀，一個(gè)DIV節(jié)點(diǎn)用于容納標(biāo)題內(nèi)容，一個(gè)DIV節(jié)點(diǎn)用于容納主體內(nèi)容，Canvas節(jié)點(diǎn)中的矢量圖作為兩個(gè)DIV節(jié)點(diǎn)的背景。整個(gè)Widget的結(jié)構(gòu)如圖6所示。

圖6.所要實(shí)現(xiàn)的Widget的結(jié)構(gòu)

在實(shí)現(xiàn)Widget結(jié)構(gòu)的同時(shí)，利用Dojo提供的模板的機(jī)制，可以輕松的將屬性設(shè)置反映到視圖上。Widget的結(jié)構(gòu)定義和屬性定義如清單5所示。

清單5.所實(shí)現(xiàn)的Widget的結(jié)構(gòu)和屬性定義 dojo.declare("com.shy.widget.DemoWidget",[dijit._Widget,dijit._Templated],{templateString:"<divstyle='position:relative;'><canvasdojoAttachPoint='canvasNode'height='${height}'width='${width}'style='position:absolute'></canvas><divdojoAttachPoint='titleNode'style='position:absolute;top:10px;left:12px;'></div><divdojoAttachPoint='containerNode'style='position:absolute;top:40px;left:12px;overflow:auto'></div></div>",width:200,height:150,dialogTitle:"",});清單5中的canvas節(jié)點(diǎn)標(biāo)記是HTML5中的新特性，利用Canvas我們可以繪制如圖4所示的矢量圖作為Widget的背景?；贒ojo所提供的Widget生命周期的機(jī)制，重載dijit._Widget的postCreate方法在里面繪制矢量圖并調(diào)整一些結(jié)構(gòu)式樣，矢量圖繪制的具體實(shí)現(xiàn)會(huì)在后面完整的Widget程序清單中給出。

清單6.實(shí)現(xiàn)Widget的postCreate方法 dojo.declare("com.shy.widget.DemoWidget",[dijit._Widget,dijit._Templated],{templateString:<divstyle='position:relative;'><canvasdojoAttachPoint='canvasNode'height='${height}'width='${width}'style='position:absolute'></canvas><divdojoAttachPoint='titleNode'style='position:absolute;top:10px;left:12px;'></div><divdojoAttachPoint='containerNode'style='position:absolute;top:40px;left:12px;overflow:auto'></div></div>",width:200,height:150,dialogTitle:"",postCreate:function(){this._drawDialog(this.width,this.height,this.canvasNode);this.inherited(arguments);dojo.style(this.titleNode,"height",20+"px");dojo.style(this.titleNode,"width",(this.width-54)+"px");dojo.style(this.containerNode,"width",(this.width-30)+"px");dojo.style(this.containerNode,"height",(this.height-60)+"px");this.titleNode.innerHTML='<fontcolor=white>'+this.dialogTitle+'</font>';},});上面實(shí)現(xiàn)了Widget的視圖，接下來(lái)我們要為它綁定兩個(gè)事件響應(yīng)。首先是對(duì)話框Widget的鼠標(biāo)拖動(dòng)，即為對(duì)話框Widget標(biāo)題欄添加拖放功能。為了實(shí)現(xiàn)這個(gè)功能可在canvas的鼠標(biāo)事件響應(yīng)中進(jìn)行處理，判斷事件觸發(fā)點(diǎn)是否落在標(biāo)題欄的位置上并處理。另外，也可以直接在標(biāo)題欄DIV節(jié)點(diǎn)上綁定事件處理?？紤]到實(shí)現(xiàn)上的簡(jiǎn)單，我們采用第二種方式，將Dojo提供的拖放功能直接綁定到標(biāo)題欄DIV節(jié)點(diǎn)上。然后是對(duì)話框的關(guān)閉按鈕響應(yīng)，即通過(guò)對(duì)話框上的關(guān)閉按鈕來(lái)關(guān)閉對(duì)話框。實(shí)現(xiàn)這個(gè)功能只能通過(guò)在canvas的鼠標(biāo)事件響應(yīng)中判斷觸發(fā)點(diǎn)位置的方式。清單7中的完整的Widget代碼就是在清單6的基礎(chǔ)上添加了事件響應(yīng)的內(nèi)容并實(shí)現(xiàn)了矢量繪圖的函數(shù)功能。

清單7.Widget的完整實(shí)現(xiàn) dojo.declare("com.shy.widget.DemoWidget",[dijit._Widget,dijit._Templated],{templateString:<divstyle='position:relative;'><canvasdojoAttachPoint='canvasNode'height='${height}'width='${width}'style='position:absolute'></canvas><divdojoAttachPoint='titleNode'style='position:absolute;top:10px;left:12px;'></div><divdojoAttachPoint='containerNode'style='position:absolute;top:40px;left:12px;overflow:auto'></div></div>",width:200,height:150,dialogTitle:"",onClickListeners:[],postCreate:function(){this._drawDialog(this.width,this.height,this.canvasNode);newdojo.dnd.Moveable(this.domNode,{handle:this.titleNode});this.inherited(arguments);dojo.style(this.titleNode,"height",20+"px");dojo.style(this.titleNode,"width",(this.width-54)+"px");dojo.style(this.containerNode,"width",(this.width-30)+"px");dojo.style(this.containerNode,"height",(this.height-60)+"px");this.titleNode.innerHTML='<fontcolor=white>'+this.dialogTitle+'</font>';},_onCanvasClick:function(e){for(vari=0;i<this.onClickListeners.length;i++){if(this.onClickListeners[i].isInScope(e.layerX,e.layerY)){this[this.onClickListeners[i].handler]();}}},_onClose:function(){this.hide();},show:function(){dojo.style(this.domNode,"display","block");},hide:function(){dojo.style(this.domNode,"display","none");},_drawDialog:function(width,height,canvasNode){varcanvas=canvasNode;varctx=canvas.getContext('2d');ctx.beginPath();ctx.shadowOffsetX=4;ctx.shadowOffsetY=4;ctx.shadowBlur=8;ctx.lineWidth=7;ctx.strokeStyle='#fff';ctx.shadowColor='rgba(0,0,0,0.25)';ctx.fillStyle='rgba(0,0,0,0.5)';drawBody(ctx,7,7,width-20,height-20,15);drawCloseButton(ctx,width-20-10,20);this.onClickListeners.push({isInScope:function(x,y){return(x-width+20+10)*(x-width+20+10)+(y-20)*(y-20)<49},handler:"_onClose"});functiondrawBody(ctx,x,y,width,height,radius){drawRoundedRect(ctx,x,y,width,height,radius);ctx.fill();ctx.fillStyle='#fff';ctx.strokeStyle='#fff';ctx.shadowOffsetX=0;ctx.shadowOffsetY=4;ctx.shadowBlur=8;ctx.lineWidth=3;ctx.beginPath();ctx.moveTo(x,35);ctx.lineTo(x+width,35);ctx.closePath();ctx.stroke();}functiondrawRoundedRect(ctx,x,y,width,height,radius){ctx.beginPath();ctx.moveTo(x,y+radius);ctx.lineTo(x,y+height-radius);ctx.quadraticCurveTo(x,y+height,x+radius,y+height);ctx.lineTo(x+width-radius,y+height);ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);ctx.lineTo(x+width,y+radius);ctx.quadr

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論