• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Google Web Toolkit
 

Google Web Toolkit

on

  • 2,414 views

 

Statistics

Views

Total Views
2,414
Views on SlideShare
2,412
Embed Views
2

Actions

Likes
1
Downloads
0
Comments
0

2 Embeds 2

http://paper.li 1
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Google Web Toolkit Google Web Toolkit Presentation Transcript

    • Google Web Toolkit Greece -GTUG Athens, 2011/03/22 Christos Stathis
    • What is it?
        • A tool for developing AJAX-enabled, rich UI, browser based applications written in Java
        • So, is it a tool for creating Java applets? Nooooooooo!!!
    • How does it work
        • The big secret: Java code is cross-compiled to Javascript that runs in the browser
        • The whole development cycle is purely in Java 
        • Why ? Hide everything under Java
        • Why not Javascript? No IDE, No debugging, easy to create a mess
    • Features
        • Widget library
        • Component Widgets
        • Event-driven UI
        • Internationalization
        • Browser history
        • Client-server communication
        • Integrating with existing web apps
        • Google AppEngine support
    • Widgets http://gwt.google.com/samples/Showcase/Showcase.html#!CwTree
    • Widgets http://gwt.google.com/samples/Mail/Mail.html
    • Widgets
      •   public void onModuleLoad() {     // Create table for stock data.     stocksFlexTable.setText(0, 0, "Symbol");     stocksFlexTable.setText(0, 1, "Price");     stocksFlexTable.setText(0, 2, "Change");     stocksFlexTable.setText(0, 3, "Remove");     // Add styles to elements in the stock list table.     stocksFlexTable.setCellPadding(6);     stocksFlexTable.getRowFormatter().addStyleName(0, "watchListHeader");     stocksFlexTable.addStyleName("watchList");     stocksFlexTable.getCellFormatter().addStyleName(0, 1, "watchListNumericColumn");     stocksFlexTable.getCellFormatter().addStyleName(0, 2, "watchListNumericColumn");     stocksFlexTable.getCellFormatter().addStyleName(0, 3, "watchListRemoveColumn");     // Assemble Add Stock panel.     addPanel.add(newSymbolTextBox);     addPanel.add(addStockButton);     addPanel.addStyleName("addPanel");     // Assemble Main panel.     mainPanel.add(stocksFlexTable);     mainPanel.add(addPanel);     mainPanel.add(lastUpdatedLabel);     // Associate the Main panel with the HTML host page.     RootPanel.get("stockList").add(mainPanel);
    • Events
      •     // 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();         }       }     });
    • I18n
      • 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("StockWatcher") String stockWatcher(); @DefaultStringValue("Symbol") String symbol(); @DefaultStringValue("Price") String price(); ...
    • Internationalization
        • Static string internationalization
          • .properties file for each language
          • Access through the Constants interface
          • Faster but needs recompilation for every change
      •  
        • Dynamic string internationalization
          • String in the host html page
          • Access through the Dictionary class
          • Dynamic, slower but no need for recompilation
        • Localizable interface 
          • Advanced method, localizable classes, rarely
    • Client-server communication
        • Never forget that the calls are asynchronous
        • GWT-RPC
          • Full java, pass java objects between client and server 
        • JSON
          • When server is not java-based
    • Client-server support
      • @RemoteServiceRelativePath("stockPrices") public interface StockPriceService extends RemoteService { StockPrice[] getPrices(String[] symbols); }  
      The client-side
    • Client-server support
      • public class StockPriceServiceImpl extends RemoteServiceServlet implements StockPriceService { public StockPrice[] getPrices(String[] symbols) { // TODO Auto-generated method stub return null; } }
      The server-side
      • public interface StockPriceServiceAsync {     void getPrices(String[] symbols,             AsyncCallback<StockPrice[]> callback); }
      Client-server support The mysterious Async interface
    • Client-server support
      • stockPriceSvc.getPrices(stocks.toArray(new String[0]), new 
      •      AsyncCallback<StockPrice[]> () {        public void onFailure(Throwable caught) {        // TODO: Do something with errors.        }        public void onSuccess(StockPrice[] result) {         updateTable(result);        }     }); }   
      The RPC call
    • Tools
        • GWT SDK
        • GWT Designer
        • GWT plugin for Eclipse
        • Speed Tracer
    • Project structure
        • The module xml file
        • The CSS
        • The Host page
        • The java code
    • Advanced topics
      • UI binder
      • GWT designer
      • Speed Tracer
    • UI binder - declarative XML UI
      • <!-- 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); } }
    • GWT designer
    • Speed Tracer
    • What 's new
        • Cell widgets
        • Logging (Client and Remote)
        • Security (SafeHtml)
        • GWT Designer
        • RequestFactory - RpcService