Recommended
More Related Content
What's hot
What's hot (20)
Similar to Gwt rpc
Similar to Gwt rpc (20)
More from Roy Chen
Gwt rpc
- 1. GWT - RPC Roy Chen
- 2. • GWT – RPC • GWT – Module and EntryPoint • implement (widget + event + RPC) • 分析優勢、劣勢、趨勢。
- 3. RPC • 傳統用form做post，一定會reload或跳到別 頁才會看到新資料 (ex. 留言板) • 但是像fb，送出post後，下面會即刻showt 出你新增到db的資料，因為用了AJAX。 • Ajax (Asynchronous JavaScript and XML) • 同步，非同步? • 也就是說js在背景默默運作。 • Js <->php, js<->java, GWT-RPC: java <-> java
- 4. RPC
- 6. Module and EntryPoint • Module: 一套完整的功能，包含前後端，最 終編譯成 .js讓host page使用。 • EntryPoint(class): 屬於module中前端的部分， 為module中的某一功能。 Module AjaxAlert (ManyAjax) EntryPoint Class DoAlert (DoPost, DoUpdate …) Html host page demo.html
- 10. 撰寫前端兩個interface
- 11. AlertService.java (interface) • 在com.gae.client 套件下新增一個 interface。 • 此interface繼承 GWT的 RemoteService 介 面。 • 此介面不需要實 作方法內容，定 義規格就好。
- 14. 撰寫後端Servlet
- 16. 實作介面方法(後端邏輯)
- 17. 設定 web.xml
- 19. Add Composite Class (元件)
- 21. 事件處理
- 24. EntryPoint Class
- 25. design
- 26. Choose Component
- 27. Auto-gen code
- 31. 分析 開發android? GWT 2006就有了 GWT and js ? GAE的優勢 (end)
Editor's Notes
- 這張圖把PRC分成前後端，可以把左邊的部分想像成是一般前端的javascrupt。 實作RPC架構的元素有兩個前端介面跟一個後端的類別。 前端的YourService這個介面，你必須去把介面方法的規格訂出來(回傳直、方法名…)，這裡還不用去實作方法的邏輯， ex. addData,getData, deleteData,…。 後端的servlet類別必須去實作YourService這個介面的方法內容，比如說如果你對應到的是YourService 中的 addData, 那就真的要去把連接資料庫、新增一筆rowdata的code寫在方法區塊裡面。 YourServuce跟YourServiceImpl對應的關希很像傳統前端js做post要有一個url的值，那後端也要有對應這個url的邏輯，在RPC中你要在web.xml紀錄段應得關西。 那最左邊的YourServiceAsync則是對應YourService的一個介面，它讓YourService裡面的方法有非同步的功能，PRC中的非同步的部分是由這個介面負責。
- AjaxAlert (module name)
- 新增的AlertService是個同步的介面，GWT RPC的規格裡面規定要設計同步跟非同步兩個介面。
- 可以先制定任一介面的方法，再用eclipse的除錯提示為另一個介面新增對應的方法。 先看AlertService， 它只有import RemoteService ，只負責跟後端servlet做溝通，沒有處理async的能力。 Path的地方，這是指這段code對應的url。 順便在這裡訂一個 方法。 右下則是只有import AsyncCallback，所以它沒有跟後端溝通的能力。 這兩個介面後面會講到怎麼結合再一起，讓前端有跟後端做非同步傳輸的功能。
- 有了處理前端的兩個介面之後，可以開始實作後端的RPC服務程式；依GWT RPC的規格，需要把後端的程式放在{package name}.server這個package下，需要興曾一個 接著要實作後端的一個class，此class需要繼承RemoteServiceServlet,還要實作AlertService這個介面(剛剛做好的)。
- 紅線框起來為，實作AlertService這個介面方法的區塊。 也可以說後端的邏輯就放在這裡。
- url-pattern : 對外定義的網址；
- 看一下元件對應的java code Flow panel就像android 幫你訂了很多版面。
- 在點擊後，去做非同步呼叫的動作，(就是ajax，差別在它是用java去做)， 拿jquery來比較 GWT.create意思是，把傳進來的AlertService這個介面實作一個類別的概念。回傳一個實作AlertService介面的類別 因為AlertServiceAsync這個介面沒有傳輸的功能，只有負責非同步的部分，而AlertService這個介面則沒有非同步的功能，但有跟後端servlete溝通的功能。 所以這一行讓 alertService這個object有非同步而且能夠跟後端溝通。 接下來要實作alertService這個介面。 然後用泛型去指定傳進callback方法中的型態，因為Window.alert()只能船字串，所以設定字串。 然後因為這是非同步呼叫，response不一定會馬上拿到，所以用callback方法來等待，當成功就會到onSuccess。
- 寫 android? 這是AlertClient這個元件的code，很像android，有gwt元件的宣告跟使用，還有事件處理的code。 到現在我們只做好了主要的功能，但是在gwt裡，需要有entry point類別才能該使執行。
- 現在做好的是一個有功能元件，我們必須將這個元件加入倒entrypoint中， 新增的這個entrypoint: DoAlert是屬於module:AjaxAlert中的一個entrypoint Xml會自己添加code
- entryPoint可以把它看成是一個頁面，所以它也是可以設計的。 我們現在就要把剛剛做好的那一套alert元件直接方到entry point頁面裡面。
- 現在我們要來把一開始做的元件放入entryPoint頁面中。 拉過去這個動作就是把我們剛剛做的類別new一個物件出來。
- 非常像在開發anroid；但這樣好像跟主流的趨勢有點矛盾，因為現很流行的是用html寫手機app，但gwt是讓你有寫app的方式寫html。 而且GAE的優勢並不是GWT，GWT也早就不是新技術了，是google把gwt買下來，讓開發者有一另外一個選項。 GWT的社群當然也是有很多open source的東西可以用，但比起很多javascript library像jquery什麼的，可能還是有差距。