天天看點

java前端開發ext_前端架構:ExtJS

一、了解

要學習及應用好Ext架構,需要了解Html DOM、Ext Element及Component三者的差別。

Ext是基于Web的富用戶端架構,其完全是基于标準W3C技術建構的,使用到的都是HTML、CSS、DIV等相關技術。Ext最傑出之處,是開發了一系列非常簡單易用的控件及元件,我們隻需要使用這些元件就能實作各種豐富多彩的UI的開發。

無論元件有多少配置屬性、還是事件、方法等等,其最終都會轉化為HTML在浏覽器上顯示出來,而每一個HTML頁面都有一個層次分明的DOM樹模型,浏覽器中的所有内容都有相應的DOM對象,動态改變頁面的内容,正是通過使用腳本語言來操作DOM對象實作。

僅僅有DOM是不夠的,比如要把頁面中的某一個節點移到其它位置,要給某一個節點添加陰影效果,要隐藏或顯示某一個節點等,我們都需要通過幾句 javascript才能完成。是以,Ext在DOM的基礎上,建立了Ext Element,可以使用Element來包裝任何DOM,Element對象中添加了一系列快捷、簡便的實用方法。

對于終端使用者來說,僅僅有Element是不夠的,比如使用者要顯示一個表格、要顯示一棵樹、要顯示一個彈出視窗等。是以,除了Element以外,Ext 還建立了一系列的用戶端界面元件Component,我們在程式設計時,隻要使用這些元件Component即可實作相關資料展示及互動等,而 Component是較高層次的抽象,每一個元件在渲染render的時候,都會依次通過Element、DOM來生成最終的頁面效果。

在使用Ext開發的應用程式中,元件Component是最高層次的抽象,是直接給使用者使用的,Ext Element是Ext的底層API,主要是由Ext或自定義元件調用的,而DOM是W3C标準定義的原始API,Ext的Element通過操作DOM 來實作頁面的效果顯示。

在Ext中,元件渲染以後可以通過通路元件的el屬性來得到元件對應的Element,通過通路Element的DOM屬性可以得到其下面的DOM對象。另外,我們可以通過Ext類的快捷方法getCmp、get、getDom等方法來得元件Component、Ext元素Element及DOM節點。比如:

var view=new Ext.Viewport();//建立了一個元件Component

view.el.setOpacity(.5);//調用Element的setOpacity方法

view.el.dom.innerHTML="Hello Ext";//通過Element的dom屬性操作DOM對象

再看下面的代碼:

var win=new Ext.Window({id:"win1",title:"我的視窗",width:200,height:200});

win.show();

var c=Ext.getCmp("win1");//得到元件win

var e=Ext.get("win1");//根據id得到元件win相應的Element

var dom=Ext.getDom("win1");//得到id為win1的DOM節點

二、熟悉元件體系

Ext2.0對整個架構進行了重構,最為傑出的是推出了一個以Component類為基礎的元件體系,在Component類基礎上,使用面向對象的方法,設計了一系列的元件及控件。是以,要能遊刃有餘地使用Ext,熟悉Ext元件體系是最基本的。在《ExtJS實用開發指南》中,有如下面一幅元件圖:

通過元件結構圖我們可以一目了然的看出整個Ext元件繼承及組成體系,當使用一個元件時,了解

他的繼承體系,這樣可以便于我們掌握元件的各種特性。

三、掌握核心控件

控件其實也是元件,比如用于顯示樹資訊的TreePanel、用于顯示表格的GridPanel及EditorGridPanel,還有代表應用程式視窗的Ext.Window等都屬于Ext控件。在使用Ext的時候,一定要掌握一些核心控件,特别是處于基類的控件。比如上面提到的幾個控件,他們都是繼承于面闆Panel,是以我們要重點掌握面闆這個核心控件的特性。比如面闆由以下幾個部分組成:一個頂部工具欄(tbar)、一個底部工具欄(bbar)、面闆頭部(header)、面闆尾部(bottom)、面闆主區域(body)幾個部分組成。面闆類中還内置了面闆展開、關閉等功能,并提供一系列可重用的工具按鈕使得我們可以輕松實作自定義的行為,面闆可以放入其它任何容器中,面闆本身是一個容器,他裡面又可以包含各種其它元件。隻要掌握了Panel的應用,那麼學習TreePanel、Window等就會變得簡單得多。

同樣的道理,對于Ext的表單字段來說,不管是ComboBox,NumberField、還是DateField,他們其它都是 Ext.form.Field類的子類,在他上面定義了表單字段的各種基本操作及特性。在學習使用表單字段元件時,一定要重點研究Field這個類,掌握他的主要方法、事件等,就能有助于更好的學習使用其它的字段。

四、學習及研究示例

由于javascript語言非常靈活,不像靜态強類型語言(比如Java)那樣有固定的代碼設計模式,而往往是不同的人就有不同的程式設計風格。在實際應用開發中,隻有見多識廣,才能在自己的在腦中建立一個開發庫。

學習别人的示例對于我們開發幫助會非常大,示例包括基本元件的應用、綜合應用等多個方面。在此,簡單推薦幾個。

1、Ext官方示例,在ext項目下載下傳包的examples目錄中,包括各個控件的基本應用示範,同時還有一些比較複雜的組合示例,有簡有繁,非常适合初學者認真研究。

2、Vifir推出的示例,Vifir推出的一些示例主要包括兩類,一種是開源的示例應用,另外一種是針對VIP使用者的實用示例。開源的示例主要是指 wlr單使用者blog系統,這個一個集合了前背景技術的ext綜合示例,而針對VIP使用者的實用示例則是可以作為開發骨架或擴充元件的示例。

3、其它示例,在ext社群中還有很多比較優秀的ext應用示例,有些隻是一個應用示範,雖然沒有提供源碼下載下傳,但我們可以直接下載下傳引用的js檔案來得到這些示例的ext應用代碼,同樣能取起到非常好的學習效果。

五、多運用

Ext看起來是非常簡單的東西,稍有點程式設計知識的人,按照《ExtJS實用開發指南》中的入門指南,半小時就能學會使用Ext。然而,當準備使用Ext開發一個項目時,卻不知道從何處入手,或者是在使用Ext的時候,出了一點小問題自己不知道該如何解決。程式設計是一門實踐性的科學,僅僅靠看書、看别人寫的代碼是遠遠不夠的,是以,必須多做實踐才行,隻有通過不斷的練習,大量的使用,才能對Ext的元件特性、事件、事件處理機制以及與伺服器端互動接口等深入的掌握,隻有多做運用,深入了解ext的元件的工作原理及機制,才能編寫出進階的Ext的應用。

六、熟讀Ext項目的源代碼

如果要想深入應用Ext,那麼閱讀Ext項目的源代碼這是必不可少的環節,Ext的代碼品質非常高,通過閱讀他的代碼我們可以更加深刻的了解 javascript面向對象程式設計,Ext代碼中包含了很多進階的js技巧以及設計模式。在使用Ext的過程中,我們經常根據項目的需要對Ext元件進行擴充,設計自己的元件或控件,而如何實作一個自定義的Ext元件,我們可以從Ext的各個元件源代碼中找到答案。

Ext的源代碼在Ext項目的source目錄。讀Ext源碼,并不一定非要從某一個地方開始,而元件核心代碼Component.js、容器元件代碼 Container.js、面闆Panel.js等這些是必看的; core目錄中的Element.js、Ext.js等也是必看的。當需要從一個控件進行擴充的時候,最好能簡單看一看這個控件的源代碼。

七、了解,熟悉,掌握Json

Ext本身的華麗外表就很吸引眼球了,但這僅僅是其外在的美,還有最核心的内在美,即:Json(JavaScript Object Notation)。Json是一種資料互動格式,一個不能實作資料互動功能的項目是沒有任何意義的,大多的Ajax架構的資料互動都基于Json,如:jQuery、ExtJs等。是以了解Json掌握Json并熟練運用是很重要的。以目前主流的開發語言為例,.NET已經把Json封裝到類中,無需配置,直接與資料庫互動,輕松的封裝直接使用;Java就麻煩些,必須去下一個Json包,然後再做一些配置,才可以使用;PHP5.2.0及以後的版本已經封裝了Json,支援直接解析。PHP5.2.0以前的版本和Java差不多,也必須下載下傳一個Json插件(和類相似),但是不用配置,直接封裝使用。在實際的項目中,各自的取舍配置,都基于項目和需求,并不是每個項目(針對WEB)都一定要用到。但是,如果想在項目中用到此類的Ajax架構,Json的掌握又是必須的。