Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Google Web Toolkit Greece -GTUG  Athens, 2011/03/22 Christos Stathis
What is it? <ul><ul><li>A tool for developing AJAX-enabled, rich UI, browser based applications written in Java </li></ul>...
How does it work <ul><ul><li>The big secret: Java code is cross-compiled to Javascript that runs in the browser </li></ul>...
Features <ul><ul><li>Widget library </li></ul></ul><ul><ul><li>Component Widgets </li></ul></ul><ul><ul><li>Event-driven U...
Widgets http://gwt.google.com/samples/Showcase/Showcase.html#!CwTree
Widgets http://gwt.google.com/samples/Mail/Mail.html
Widgets <ul><li>   public void onModuleLoad() {     // Create table for stock data.     stocksFlexTable.setText(0, 0, &quo...
Events <ul><li>     // Listen for mouse events on the Add button.     addStockButton.addClickHandler(new ClickHandler() { ...
I18n <ul><li>stockWatcher = Aktienbeobachter symbol = Symbol price = Kurs change = Änderung remove = Entfernen add = Hinzu...
Internationalization <ul><ul><li>Static string internationalization </li></ul></ul><ul><ul><ul><li>.properties file for ea...
Client-server communication <ul><ul><li>Never forget that the calls are asynchronous  </li></ul></ul><ul><ul><li>GWT-RPC <...
Client-server support <ul><li>@RemoteServiceRelativePath(&quot;stockPrices&quot;) public interface StockPriceService exten...
Client-server support <ul><li>public class StockPriceServiceImpl extends RemoteServiceServlet implements StockPriceService...
<ul><li>public interface StockPriceServiceAsync {     void getPrices(String[] symbols,             AsyncCallback<StockPric...
Client-server support <ul><li>stockPriceSvc.getPrices(stocks.toArray(new String[0]), new  </li></ul><ul><li>     AsyncCall...
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><...
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 p...
Advanced topics <ul><li>UI binder </li></ul><ul><li>GWT designer </li></ul><ul><li>Speed Tracer </li></ul>
UI binder - declarative XML UI <ul><li><!-- HelloWorld.ui.xml --> <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'> ...
GWT designer
Speed Tracer
What 's new <ul><ul><li>Cell widgets </li></ul></ul><ul><ul><li>Logging (Client and Remote) </li></ul></ul><ul><ul><li>Sec...
Nächste SlideShare
Wird geladen in …5
×

Google Web Toolkit

2.640 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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 http://gwt.google.com/samples/Showcase/Showcase.html#!CwTree
  6. 6. Widgets http://gwt.google.com/samples/Mail/Mail.html
  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 com.google.gwt.sample.stockwatcher.client; import com.google.gwt.i18n.client.Constants; 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='urn:ui:com.google.gwt.uibinder'>   <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>

×