-
UiEditor概述
1.1 什么UiEditor？UiEditor是GWT（Google Web Toolkit）所提供的一種框架。
1.1.1 UiEditor有什么用處？
UiEditor是用來在Client和Server中的JavaBean進(jìn)行數(shù)據(jù)綁定。比如：在系統(tǒng)的Client端有一個(gè)form表單，具有兩個(gè)TextBox輸入框(name和title)，在Server端有一個(gè)JavaBean，具有兩個(gè)Fields（name和title）。通過UiEditor框架，可以將這兩個(gè)屬性自動(dòng)映射到對(duì)應(yīng)的JavaBean中，進(jìn)行數(shù)據(jù)的直接存儲(chǔ)與查詢。
1.1.2 使用UiEditor需要什么？
The Editor framework is meant to perform this work for you by automatically mapping bean fields to, usually, UI elements. It does this by using a driver, known as SimpleBeanEditorDriver, to take defined values from your UI, known as the editor,and synchronize them with a local (on the client) JavaBean。上面解釋到，當(dāng)你要進(jìn)行屬性的自動(dòng)映射，需要使用SimpleBeanEditorDriver(映射本地JavaBean的情況下)這個(gè)接口驅(qū)動(dòng)。
使用UiEditor主要需要四個(gè)方面：Domain object(Javabean)、Editor、Editor的子接口、Driver
- UiEditor的使用
a) 對(duì)象之間的合作
i. The editor需要將Client的數(shù)據(jù)存儲(chǔ)到JavaBean
ii. The editor需要將JavaBean的數(shù)據(jù)查詢并顯示在Client端
上述兩個(gè)操作，是由UiEditor框架的兩個(gè)接口（SimpleBeanEditorDriver、RequestFactoryEditorDriver）提供的兩個(gè)方法—flush、edit。
如下圖2-1：
圖中，Editor的數(shù)據(jù)，通過Driver的子接口(SimpleBeanEditorDriver或RequestFactoryEditorDriver)的Flush方法將數(shù)據(jù)存儲(chǔ)在DomainObejct(JavaBean)中，反之亦然。
b) Example
為了整體的了解UiEditor的使用，我們通過一個(gè)例子來解釋，見下圖:
第一步：編寫用來存儲(chǔ)數(shù)據(jù)的JavaBean—Employee, 他具有三個(gè)Fields(屬性)—id、name、title。
注：每個(gè)屬性，必須要有對(duì)應(yīng)的get和set方法，不然無法進(jìn)行
第二步：使用UiBinder創(chuàng)建Client并進(jìn)行Editor映射(UiBinder的具體內(nèi)容請(qǐng)參考UiBinder詳解，這里只對(duì)涉及到的進(jìn)行講述)
EmployeeEditor.java
因?yàn)槲覀冎皇莿?chuàng)建一個(gè)簡單的控件，所以需要繼承Composite,此類有一個(gè)初始化控件(Widget)的方法initWidget()，同時(shí)，必須實(shí)現(xiàn)Editor接口，此接口是一個(gè)泛型，需要將Javebean綁定為Employee，所以泛型傳入Employee。其中聲明了一個(gè)內(nèi)部接口EmployeeEditorUiBinder，此接口為實(shí)現(xiàn)UiBinder必須有的，具體原因參見UiBinder詳解
每一個(gè)EmployeeEditorUiBinder接口都對(duì)應(yīng)一個(gè)EmployeeEditor.ui.xml配置文件，詳細(xì)內(nèi)容參見UiBinder詳解。第5行代碼中實(shí)例化EmployeeEditorUiBinder接口為uiBinder，并通過GWT.create進(jìn)行延遲綁定。
在EmployEditor類中，我們聲明了三個(gè)參數(shù)，參數(shù)類型分別為TextBox、Label。此類型對(duì)應(yīng)的是EmployeeEditor.ui.xml中的類型。@UiField是UiBinder中的注解，用來將.ui.xml的屬性與本類中的屬性進(jìn)行綁定。如果我們沒有顯式的聲明@Path,則此類的屬性會(huì)與Employee.java中的屬性名一一對(duì)應(yīng)，前提是此類中的屬性名要與JavaBean中的屬性名相同，如果不同，則需要加上@Path(value=” ”)，其中value為對(duì)應(yīng)的javaBean中的屬性。@Ignore注解是忽略映射，就是此id映射到JavaBean中的id。
在構(gòu)造方法中，通過uiBinder.createAndBindUi()將.ui.xml綁定成Widget。
EmployeeEditor.ui.xml
上述xml文件中，我們聲明了一個(gè)html頁面中的Body標(biāo)簽對(duì)應(yīng)的HTMLPanel類，HTMLPanel類具有諸如FlowPanel等子類。 需要注意的是，第9行代碼中ui:field=“name”的意思是引用EmployeeEditor中的屬性，他的屬性名叫name，類型是TextBox，同時(shí)在EmployeeEditor中的name屬性需要加上@UiFiled注解，這樣xml中的屬性就與類中的屬性進(jìn)行了綁定。
第三步：創(chuàng)建圖2-1中的Driver-EmployeeView.java。
在該類中，我們創(chuàng)建了三個(gè)按鈕，用來觸發(fā)flush、edit和EmployEditor.java中對(duì)應(yīng)的resetValues()方法。
EmployeeView.java
現(xiàn)在讓我們來解釋這樣的一個(gè)類。
因?yàn)槲覀冃枰谇芭_(tái)顯示三個(gè)觸發(fā)不同事件的button，所以需要繼承composite，理由跟EmployEditor一樣。
重點(diǎn)在于25行，我們需要聲明一個(gè)內(nèi)部接口Driver派生于SimpleBeanEditorDriver，該接口是個(gè)泛型，第一個(gè)泛型參數(shù)為你的JavaBean，第二個(gè)泛型參數(shù)為你的Editor，通過這樣的一個(gè)結(jié)合，我們整個(gè)UiEditor的流程就已經(jīng)打通。
31行中，我們通過GWT.create()方法實(shí)例化Driver接口，之后我們就能調(diào)用Driver中的flush和edit方法了。
通過@UiField注解來綁定EmployeeView.ui.xml中的對(duì)應(yīng)的ui:field。在該類的構(gòu)造方法中，通過調(diào)用driver.initialize()和driver.edit()來初始化editor driver和Push the data in an object graph into the Editor given to initialize(E)。
@UiHandler為UiBinder中的注解,@UiHandler(“saveEmployeeButton”)的意思就是給EmployeeView.ui.xml中的ui:field的屬性名叫saveEmployeeButton的屬性綁定一個(gè)事件。事件的屬性是該方法傳入的參數(shù)，本例中傳入的參數(shù)是ClickEvent，則為點(diǎn)擊事件。該方法中的driver.flush()，就是將數(shù)據(jù)存儲(chǔ)到JavaBean中。
EmployeeView.ui.xml
第四步：走完前三步，我們要做的基本完成，最后一步就是要運(yùn)行了，要運(yùn)行GWT項(xiàng)目，首先得有一個(gè)入口，這個(gè)入口是需要實(shí)現(xiàn)EntryPoint接口，并且實(shí)現(xiàn)此接口中的onMoudleLoad()方法。
最終效果
。
當(dāng)點(diǎn)擊Save時(shí)，會(huì)將數(shù)據(jù)保存到JavaBean，點(diǎn)擊Get按鈕，就能從JavaBean獲取到上一步你Save的信息了。
因?yàn)楫?dāng)時(shí)是寫在word文檔里面，好像直接復(fù)制的時(shí)候會(huì)把word的樣式也復(fù)制過來，然后通過notePad++轉(zhuǎn)換。理解這個(gè)需要一些基本的GWT基礎(chǔ)知識(shí)。
