Google Web Toolkit


Published on

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Google Web Toolkit

  1. 1. Google Web Toolkit Greece -GTUG Athens, 2011/03/22 Christos Stathis
  2. 2. What is it? <ul><ul><li>A tool for developing AJAX-enabled, rich UI, browser based applications written in Java </li></ul></ul><ul><ul><li>So, is it a tool for creating Java applets? Nooooooooo!!! </li></ul></ul>
  3. 3. How does it work <ul><ul><li>The big secret: Java code is cross-compiled to Javascript that runs in the browser </li></ul></ul><ul><ul><li>The whole development cycle is purely in Java  </li></ul></ul><ul><ul><li>Why ? Hide everything under Java </li></ul></ul><ul><ul><li>Why not Javascript? No IDE, No debugging, easy to create a mess </li></ul></ul>
  4. 4. Features <ul><ul><li>Widget library </li></ul></ul><ul><ul><li>Component Widgets </li></ul></ul><ul><ul><li>Event-driven UI </li></ul></ul><ul><ul><li>Internationalization </li></ul></ul><ul><ul><li>Browser history </li></ul></ul><ul><ul><li>Client-server communication </li></ul></ul><ul><ul><li>Integrating with existing web apps </li></ul></ul><ul><ul><li>Google AppEngine support </li></ul></ul>
  5. 5. Widgets!CwTree
  6. 6. Widgets
  7. 7. Widgets <ul><li>  public void onModuleLoad() {     // Create table for stock data.     stocksFlexTable.setText(0, 0, &quot;Symbol&quot;);     stocksFlexTable.setText(0, 1, &quot;Price&quot;);     stocksFlexTable.setText(0, 2, &quot;Change&quot;);     stocksFlexTable.setText(0, 3, &quot;Remove&quot;);     // Add styles to elements in the stock list table.     stocksFlexTable.setCellPadding(6);     stocksFlexTable.getRowFormatter().addStyleName(0, &quot;watchListHeader&quot;);     stocksFlexTable.addStyleName(&quot;watchList&quot;);     stocksFlexTable.getCellFormatter().addStyleName(0, 1, &quot;watchListNumericColumn&quot;);     stocksFlexTable.getCellFormatter().addStyleName(0, 2, &quot;watchListNumericColumn&quot;);     stocksFlexTable.getCellFormatter().addStyleName(0, 3, &quot;watchListRemoveColumn&quot;);     // Assemble Add Stock panel.     addPanel.add(newSymbolTextBox);     addPanel.add(addStockButton);     addPanel.addStyleName(&quot;addPanel&quot;);     // Assemble Main panel.     mainPanel.add(stocksFlexTable);     mainPanel.add(addPanel);     mainPanel.add(lastUpdatedLabel);     // Associate the Main panel with the HTML host page.     RootPanel.get(&quot;stockList&quot;).add(mainPanel); </li></ul>
  8. 8. Events <ul><li>    // Listen for mouse events on the Add button.     addStockButton.addClickHandler(new ClickHandler() {       public void onClick(ClickEvent event) {         addStock();       }     });     // Listen for keyboard events in the input box.     newSymbolTextBox.addKeyPressHandler(new KeyPressHandler() {       public void onKeyPress(KeyPressEvent event) {         if (event.getCharCode() == KeyCodes.KEY_ENTER) {           addStock();         }       }     }); </li></ul>
  9. 9. I18n <ul><li>stockWatcher = Aktienbeobachter symbol = Symbol price = Kurs change = Änderung remove = Entfernen add = Hinzufügen package; import; public interface StockWatcherConstants extends Constants { @DefaultStringValue(&quot;StockWatcher&quot;) String stockWatcher(); @DefaultStringValue(&quot;Symbol&quot;) String symbol(); @DefaultStringValue(&quot;Price&quot;) String price(); ... </li></ul>
  10. 10. Internationalization <ul><ul><li>Static string internationalization </li></ul></ul><ul><ul><ul><li>.properties file for each language </li></ul></ul></ul><ul><ul><ul><li>Access through the Constants interface </li></ul></ul></ul><ul><ul><ul><li>Faster but needs recompilation for every change </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><li>Dynamic string internationalization </li></ul></ul><ul><ul><ul><li>String in the host html page </li></ul></ul></ul><ul><ul><ul><li>Access through the Dictionary class </li></ul></ul></ul><ul><ul><ul><li>Dynamic, slower but no need for recompilation </li></ul></ul></ul><ul><ul><li>Localizable interface  </li></ul></ul><ul><ul><ul><li>Advanced method, localizable classes, rarely </li></ul></ul></ul>
  11. 11. Client-server communication <ul><ul><li>Never forget that the calls are asynchronous </li></ul></ul><ul><ul><li>GWT-RPC </li></ul></ul><ul><ul><ul><li>Full java, pass java objects between client and server  </li></ul></ul></ul><ul><ul><li>JSON </li></ul></ul><ul><ul><ul><li>When server is not java-based </li></ul></ul></ul>
  12. 12. Client-server support <ul><li>@RemoteServiceRelativePath(&quot;stockPrices&quot;) public interface StockPriceService extends RemoteService { StockPrice[] getPrices(String[] symbols); }   </li></ul>The client-side
  13. 13. Client-server support <ul><li>public class StockPriceServiceImpl extends RemoteServiceServlet implements StockPriceService { public StockPrice[] getPrices(String[] symbols) { // TODO Auto-generated method stub return null; } } </li></ul>The server-side
  14. 14. <ul><li>public interface StockPriceServiceAsync {     void getPrices(String[] symbols,             AsyncCallback<StockPrice[]> callback); } </li></ul>Client-server support The mysterious Async interface
  15. 15. Client-server support <ul><li>stockPriceSvc.getPrices(stocks.toArray(new String[0]), new  </li></ul><ul><li>     AsyncCallback<StockPrice[]> () {        public void onFailure(Throwable caught) {        // TODO: Do something with errors.        }        public void onSuccess(StockPrice[] result) {         updateTable(result);        }     }); }    </li></ul>The RPC call
  16. 16. Tools <ul><ul><li>GWT SDK </li></ul></ul><ul><ul><li>GWT Designer </li></ul></ul><ul><ul><li>GWT plugin for Eclipse </li></ul></ul><ul><ul><li>Speed Tracer </li></ul></ul>
  17. 17. Project structure <ul><ul><li>The module xml file </li></ul></ul><ul><ul><li>The CSS </li></ul></ul><ul><ul><li>The Host page </li></ul></ul><ul><ul><li>The java code </li></ul></ul>
  18. 18. Advanced topics <ul><li>UI binder </li></ul><ul><li>GWT designer </li></ul><ul><li>Speed Tracer </li></ul>
  19. 19. UI binder - declarative XML UI <ul><li><!-- HelloWorld.ui.xml --> <ui:UiBinder xmlns:ui=''>   <div>     Hello, <span ui:field='nameSpan'/>.   </div> </ui:UiBinder> public class HelloWorld extends UIObject { // Could extend Widget instead   interface MyUiBinder extends UiBinder<DivElement, HelloWorld> {}   private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);   @UiField SpanElement nameSpan;   public HelloWorld() {     // createAndBindUi initializes this.nameSpan     setElement(uiBinder.createAndBindUi(this));   }   public void setName(String name) { nameSpan.setInnerText(name); } } </li></ul>
  20. 20. GWT designer
  21. 21. Speed Tracer
  22. 22. What 's new <ul><ul><li>Cell widgets </li></ul></ul><ul><ul><li>Logging (Client and Remote) </li></ul></ul><ul><ul><li>Security (SafeHtml) </li></ul></ul><ul><ul><li>GWT Designer </li></ul></ul><ul><ul><li>RequestFactory - RpcService </li></ul></ul>