一、Beginner’s Tutorial – Part1(GWTP)
此教程是為那些沒有GWTP基礎(chǔ)秃诵,但是想快速編寫出一個GWTP框架的開發(fā)者而講述的。第一部分展示一個基本的Presenter是怎么通過UiHander和UiBinder與View進(jìn)行交互的个榕。也許你需要一遍又一遍的重復(fù)查看你所創(chuàng)建的每一個Presenter忠烛。這個教程并不會過多的講解GWTP是如何運(yùn)作的一些細(xì)節(jié),但會講他們之間是如何交互的寂汇。
- Covered features:
Presenter, View, PresenterModule, UiHandler, NameToken and CodeSplit. - Application Structure
2.1 OverView of the main files
a. HomeModule:這是一個GIN module,用來將HomePresenter綁定到一起病往。
b. HomePresenter:繼承于ApplicationPresenter,它通過使用父類Presenter’Slot機(jī)制來顯示它自己。(This is a child
Presenter of ApplicationPresenter. It uses its parent Presenter’s Slot to reveal itself).
c. HomeView:與HomeView.ui,xml綁定
d. HomeView.ui.xml:為HomePresenter聲明存放HTML頁面和控件.
e. ApplicationModule:這是一個GIN module骄瓣,用來把ApplicationPresenter綁定一起停巷,同時可以installing其他的子module(如:HomeModule for instance).
f. ApplicationPesenter:是包含了所有ApplicationPresenter的邏輯.
g. ApplicationUiHandlers:慣用于表示一些事件回應(yīng)的ApplicationView到ApplicationPresenter的動作.
h. ClientModule:所有GIN module的主GIN module.
i NameTokens:包含一些String類型的常量來表示你的Places.
- Views and Presenters
在GWTP中,View和Presenter引用的是GWT的MVP模式榕栏,Presenter是所有客戶端業(yè)務(wù)邏輯代碼的集合(驗(yàn)證畔勤、數(shù)據(jù)存儲、查詢等). View僅僅只顯式由Presenter指定的View扒磁,而不包含任何的業(yè)務(wù)邏輯處理代碼庆揪。
3.1 View
下面截圖是項目中默認(rèn)的View:
上述截圖代碼看起來不多,但是有幾個關(guān)鍵點(diǎn)我們需要解釋:
a. HomeView 繼承ViewImpl妨托,它會提供一個initWidget()方法缸榛,此方法將會初始化你指定的Dom元素。
b. HomeView同時還要實(shí)現(xiàn)Presenter內(nèi)部接口MyView兰伤。通過此接口内颗,Presenter可以與View建立聯(lián)系。(這一點(diǎn)是非常非常重要的)
c. 在此教程中敦腔,我們使用UiBinder框架來構(gòu)建我們的Ui界面均澳,圖中的interface Binder extends UiBinder<Widget,HomeView>就是說明GWTP使用UiBinder來顯示View的。
d. GWTP是依賴GWT中的一個輕量級的Dependency injection框架符衔,當(dāng)在構(gòu)造方法中加上注解@Inject负懦,表明會自動實(shí)例化其構(gòu)造方法中的參數(shù)。不然在上圖的uiBinder參數(shù)之前柏腻,我們需要通過Gwt.create()將Binder接口進(jìn)行實(shí)例化聲明纸厉。
3.2 Presenter
在此項目中,我們使用名字叫nested Presenter(嵌入式Presenter)五嫂。這就意味著通過使用Slot Mechanism其他Presenter可以嵌入到父的Presenter颗品。在此項目中肯尺,ApplicationPresenter是root Presenter,HomePresenter是被嵌入到里面的躯枢。下面為HomePresenter的截圖
跟上面的View一樣则吟,只講解一些關(guān)鍵性的點(diǎn):
a. Extends Presenter<HomePresenter.MyView,HomePresenter.MyProxy>繼承了ApplicationPresenter的父類。這就意味著锄蹂,MyView和MyProxy這兩個接口需要在此類中進(jìn)行定義氓仲。Myview早期在View就已經(jīng)有實(shí)現(xiàn)了,而MyProxy是負(fù)責(zé)監(jiān)聽所有的事件得糜,因此需要Presenter和View都已創(chuàng)建敬扛。
b. ?@ProxyStandard注解是用來指定你的Presenter是否使用GWT的Code Splitting特性。在這個例子中沒有使用朝抖,如果使用的話啥箭,將其注解改成@ProxyCodeSplit。
c. @NameToken是將一個頁面引入到你的Application中治宣。每個你想導(dǎo)航的頁面都需要一個nameToken來關(guān)聯(lián)它急侥。圖上的Page叫HOME是因?yàn)樗怯脩艨吹降氖醉摗.?dāng)你點(diǎn)擊返回或其他按鈕時侮邀,他都會返回對應(yīng)的Page坏怪。我們通常將引用到Presenter中的NameToken稱為Place“砑耄可以參考GWT的History陕悬。
d. ?ApplicationPresenter.SLOT_MAIN表示,告知Presenter通過使用Slot Mechanism將他自己轉(zhuǎn)換為ApplicationPresenter’slot.
- UiBinder
看之前定義的View:
這個接口用來綁定View到他相關(guān)聯(lián)的UiBinder XML file按傅。
上述xml文件只會簡單的顯示一個“HelloWorld!”
另外一種好的方式去定義HTML元素是使用ui:field=”someField”屬性捉超。他會允許你從View中存取HTML元素或Widgets。
上圖中唯绍,創(chuàng)建了一個TextBox并且定義一個ui:field屬性為nameField拼岳。為可以從View中訪問TextBox的值和屬性,我們需要在View中定義一個與ui:field相同的屬性况芒,并且加上@UiField注解來與HTML元素進(jìn)行綁定惜纸。
然后,通過getter方法绝骚,可以拿到nameField屬性的值耐版。然后,通過getter方法压汪,可以拿到nameField屬性的值粪牲。
- UiHander(重點(diǎn)也是難點(diǎn))
UiHandlers是一個GWTP的特性,代表一些View到Presenter的行為止剖。比如一個Click事件腺阳,UiHandler將會監(jiān)聽指定的事件落君,并且告知GWTP當(dāng)事件觸發(fā)時哪個方法將被調(diào)用。
5.1 Creating the UiHandler
使用UiHandlers之前需要五步亭引。
a) 創(chuàng)建一個UiHandler接口
b) 在Presenter中實(shí)現(xiàn)UiHandler接口
c) HomePresenter.MyView繼承HasUiHandlers<HomePresenter>
d) 在View中绎速,將ViewWithUiHandlers<HomePresenter>代替繼承的ViewImpl
e) 為View來設(shè)置UiHandler:
一旦上述的完成,我們將創(chuàng)建一個Button焙蚓,當(dāng)被點(diǎn)擊的時候纹冤,將TextBox的內(nèi)容發(fā)送到Presenter。
因此我們需要聲明一個方法购公,當(dāng)事件被觸發(fā)后萌京,UiHandler需要調(diào)用的那個方法
5.2 Handling the event
現(xiàn)在我們的HomeUiHandlers已經(jīng)創(chuàng)建,并且設(shè)置了君丁,因此我們可以將其綁定到一個事件當(dāng)中〗埽可以通過在一個方法上使用@UiHandlers(“sendButton”)注解來監(jiān)聽一個指定事件绘闷。
現(xiàn)在,View的整個聲明如下:
最后较坛,Presenter需要實(shí)現(xiàn)在HomeUiHandlers接口中聲明的方法
6.Presenter Module
Modules使用GIN Bindings 來連接Presenter是到View,每個Presenter都需要被綁定印蔗,通過module我們可以綁定多個Presenter,我們通常一個Mudle對應(yīng)一個Java包丑勤。
在這里的Mudle只是一個舉例华嘹,在項目中,我們需要定義一個ClienMudle法竞,將其ApplicationMudle給install進(jìn)來耙厚,然后在ApplicationMudle中,又將HomeM