Use UiRenderer (Uibinder for cells) in MobileWebApp sample. Review at http://gwt-code-reviews.appspot.com/1733805 Review by: rdayal@google.com git-svn-id: https://google-web-toolkit.googlecode.com/svn/trunk@11035 8db76d5a-ed1c-0410-87a9-c151d255dfc7

diff --git a/samples/mobilewebapp/src/main/java/com/google/gwt/sample/mobilewebapp/client/desktop/DesktopTaskEditView.css b/samples/mobilewebapp/src/main/java/com/google/gwt/sample/mobilewebapp/client/desktop/DesktopTaskEditView.css
deleted file mode 100644
index a449793..0000000
--- a/samples/mobilewebapp/src/main/java/com/google/gwt/sample/mobilewebapp/client/desktop/DesktopTaskEditView.css
+++ /dev/null

@@ -1,10 +0,0 @@
-.taskTemplateCell {
-  margin: 8px;
-  border: 1px solid #666;
-  -moz-border-radius: 8px;
-  border-radius: 8px;
-  padding: 18px 10px;
-  font-size: 12pt;
-  background-color: #eee;
-  -webkit-user-drag: element;
-}

diff --git a/samples/mobilewebapp/src/main/java/com/google/gwt/sample/mobilewebapp/client/desktop/DesktopTaskEditView.java b/samples/mobilewebapp/src/main/java/com/google/gwt/sample/mobilewebapp/client/desktop/DesktopTaskEditView.java
index 81d6677..aec30cd 100644
--- a/samples/mobilewebapp/src/main/java/com/google/gwt/sample/mobilewebapp/client/desktop/DesktopTaskEditView.java
+++ b/samples/mobilewebapp/src/main/java/com/google/gwt/sample/mobilewebapp/client/desktop/DesktopTaskEditView.java

@@ -29,12 +29,9 @@
 import com.google.gwt.event.dom.client.DragLeaveHandler;
 import com.google.gwt.event.dom.client.DragOverEvent;
 import com.google.gwt.event.dom.client.DragOverHandler;
+import com.google.gwt.event.dom.client.DragStartEvent;
 import com.google.gwt.event.dom.client.DropEvent;
 import com.google.gwt.event.dom.client.DropHandler;
-import com.google.gwt.resources.client.ClientBundle;
-import com.google.gwt.resources.client.CssResource;
-import com.google.gwt.safehtml.client.SafeHtmlTemplates;
-import com.google.gwt.safehtml.shared.SafeHtml;
 import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
 import com.google.gwt.sample.mobilewebapp.client.ui.DateButton;
 import com.google.gwt.sample.mobilewebapp.client.ui.EditorDecorator;
@@ -43,6 +40,9 @@
 import com.google.gwt.sample.mobilewebapp.shared.TaskProxyImpl;
 import com.google.gwt.uibinder.client.UiBinder;
 import com.google.gwt.uibinder.client.UiField;
+import com.google.gwt.uibinder.client.UiHandler;
+import com.google.gwt.uibinder.client.UiRenderer;
+import com.google.gwt.uibinder.client.UiTemplate;
 import com.google.gwt.user.cellview.client.CellList;
 import com.google.gwt.user.cellview.client.HasKeyboardSelectionPolicy.KeyboardSelectionPolicy;
 import com.google.gwt.user.client.ui.Button;
@@ -71,55 +71,39 @@
   }
 
   /**
-   * A ClientBundle that provides images for this widget.
-   */
-  interface Resources extends ClientBundle {
-    @Source("DesktopTaskEditView.css")
-    Style style();
-  }
-
-  /**
-   * The styles used in this widget.
-   */
-  interface Style extends CssResource {
-    /**
-     * Applies to the cells in the task template list.
-     */
-    String taskTemplateCell();
-  }
-
-  /**
    * The cell used to render task templates.
    */
   static class TaskTemplateCell extends AbstractCell<TaskProxy> {
 
-    interface Template extends SafeHtmlTemplates {
-      @SafeHtmlTemplates.Template("<div class=\"{0}\" draggable=\"true\">"
-          + "{1}<div style=\"font-size:80%;\">{2}</div></div>")
-      SafeHtml task(String className, String name, String notes);
+    /**
+     * Use a UiBinder template to generate the {@code Cell} contents and process
+     * events.
+     */
+    @UiTemplate("TaskTemplateCell.ui.xml")
+    interface Renderer extends UiRenderer {
+      void render(SafeHtmlBuilder sb, String name, String notes);
+      void onBrowserEvent(TaskTemplateCell o, NativeEvent n, Element e, Context context);
     }
 
-    private Template template = GWT.create(Template.class);
-    private final String className;
+    private Renderer renderer = GWT.create(Renderer.class);
 
-    public TaskTemplateCell(String className) {
+    public TaskTemplateCell() {
+      // Register the kinds of event this cell will manage.
       super("dragstart");
-      this.className = className;
     }
 
+    /**
+     * Delegates event handling to the generated {@link UiRenderer}.
+     */
     @Override
     public void onBrowserEvent(Context context, Element parent, TaskProxy value, NativeEvent event,
         ValueUpdater<TaskProxy> valueUpdater) {
-      if ("dragstart".equals(event.getType())) {
-        // Save the ID of the TaskProxy.
-        DataTransfer dataTransfer = event.getDataTransfer();
-        dataTransfer.setData("text", String.valueOf(context.getIndex()));
-
-        // Set the image.
-        dataTransfer.setDragImage(parent, 25, 15);
-      }
+      renderer.onBrowserEvent(this, event, parent, context);
     }
 
+    /**
+     * Delegates the cell rendering to the generated {@link UiRenderer}.
+     */
     @Override
     public void render(Context context, TaskProxy value, SafeHtmlBuilder sb) {
       if (value == null) {
@@ -127,7 +111,20 @@
       }
 
       String notes = value.getNotes();
-      sb.append(template.task(className, value.getName(), (notes == null) ? "" : notes));
+      renderer.render(sb, value.getName(), (notes == null) ? "" : notes);
+    }
+
+    /**
+     * Handles "drag-start" events inside the element named "root".
+    */
+    @UiHandler({"root"})
+    void onDragStart(DragStartEvent event, Element parent, Context context) {
+      // Save the ID of the TaskProxy.
+      DataTransfer dataTransfer = event.getDataTransfer();
+      dataTransfer.setData("text", String.valueOf(context.getIndex()));
+
+      // Set the image.
+      dataTransfer.setDragImage(parent, 25, 15);
     }
   }
 
@@ -203,16 +200,10 @@
    */
   private Presenter presenter;
 
-  private final Resources resources;
-
   /**
    * Construct a new {@link DesktopTaskEditView}.
    */
   public DesktopTaskEditView() {
-    // Initialize the styles.
-    resources = GWT.create(Resources.class);
-    resources.style().ensureInjected();
-
     // Create the template list.
     templateList = createTaskTemplateList();
 
@@ -316,7 +307,7 @@
 
   private CellList<TaskProxy> createTaskTemplateList() {
     CellList<TaskProxy> list =
-        new CellList<TaskProxy>(new TaskTemplateCell(resources.style().taskTemplateCell()));
+        new CellList<TaskProxy>(new TaskTemplateCell());
     list.setKeyboardSelectionPolicy(KeyboardSelectionPolicy.DISABLED);
 
     // Create the templates.

diff --git a/samples/mobilewebapp/src/main/java/com/google/gwt/sample/mobilewebapp/client/desktop/TaskTemplateCell.ui.xml b/samples/mobilewebapp/src/main/java/com/google/gwt/sample/mobilewebapp/client/desktop/TaskTemplateCell.ui.xml
new file mode 100644
index 0000000..4a421a7
--- /dev/null
+++ b/samples/mobilewebapp/src/main/java/com/google/gwt/sample/mobilewebapp/client/desktop/TaskTemplateCell.ui.xml

@@ -0,0 +1,23 @@
+<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
+<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder">
+  <ui:style>
+    .taskTemplateCell {
+      margin: 8px;
+      border: 1px solid #666;
+      -moz-border-radius: 8px;
+      border-radius: 8px;
+      padding: 18px 10px;
+      font-size: 12pt;
+      background-color: #eee;
+      -webkit-user-drag: element;
+    }
+  </ui:style>
+
+  <ui:with field="name" type="java.lang.String"/>
+  <ui:with field="notes" type="java.lang.String"/>
+
+  <div ui:field="root" class="{style.taskTemplateCell}" draggable="true">
+    <ui:text from="{name}"/>
+    <div style="font-size:80%;"><ui:text from="{notes}"/></div>
+  </div>
+</ui:UiBinder>

diff --git a/samples/mobilewebapp/src/main/java/com/google/gwt/sample/mobilewebapp/client/mobile/TaskProxyCell.java b/samples/mobilewebapp/src/main/java/com/google/gwt/sample/mobilewebapp/client/mobile/TaskProxyCell.java
index d46aad5..d3e524f 100644
--- a/samples/mobilewebapp/src/main/java/com/google/gwt/sample/mobilewebapp/client/mobile/TaskProxyCell.java
+++ b/samples/mobilewebapp/src/main/java/com/google/gwt/sample/mobilewebapp/client/mobile/TaskProxyCell.java

@@ -19,43 +19,55 @@
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.i18n.client.DateTimeFormat;
 import com.google.gwt.i18n.client.DateTimeFormat.PredefinedFormat;
-import com.google.gwt.safehtml.client.SafeHtmlTemplates;
+import com.google.gwt.resources.client.CssResource;
 import com.google.gwt.safehtml.shared.SafeHtml;
 import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
 import com.google.gwt.safehtml.shared.SafeHtmlUtils;
 import com.google.gwt.sample.mobilewebapp.shared.TaskProxy;
+import com.google.gwt.uibinder.client.UiRenderer;
 
 import java.util.Date;
 
 /**
  * A {@link com.google.gwt.cell.client.Cell} used to render a {@link TaskProxy}.
+ * Uses a UiRenderer to generate the cell contents.
  */
 class TaskProxyCell extends AbstractCell<TaskProxy> {
 
   /**
-   * The template used by this cell.
-   * 
+   * Use a UiBinder template to render this cell.
    */
-  interface Template extends SafeHtmlTemplates {
-    @SafeHtmlTemplates.Template("{0}<div style=\"font-size:80%;\">&nbsp;</div>")
-    SafeHtml noDate(SafeHtml name);
+  interface Renderer extends UiRenderer {
+    /**
+     * Retrieves the CSS resource defined in the template.
+     */
+    CellStyle getCellStyle();
 
-    @SafeHtmlTemplates.Template("{0}<div style=\"font-size:80%;color:#999;\">Due: {1}</div>")
-    SafeHtml onTime(SafeHtml name, String date);
-
-    @SafeHtmlTemplates.Template("{0}<div style=\"font-size:80%;color:red;\">Due: {1}</div>")
-    SafeHtml pastDue(SafeHtml name, String date);
+    /**
+     * Renders the cell contents into {@code sb}, filling in {@name},
+     * {@code date}, and the CSS {@code dateStyle}.
+     */
+    void render(SafeHtmlBuilder sb, SafeHtml name, String date, String dateStyle);
   }
 
-  private static Template template;
+  interface CellStyle extends CssResource {
+    String noDate();
+    String onTime();
+    String pastDue();
+  }
+
   private final DateTimeFormat dateFormat = DateTimeFormat.getFormat(PredefinedFormat.DATE_LONG);
 
+  private final Renderer renderer;
+
   public TaskProxyCell() {
-    if (template == null) {
-      template = GWT.create(Template.class);
-    }
+    renderer = GWT.<Renderer>create(Renderer.class);
   }
 
+  /**
+   * Renders the cell contents. Delegates the actual rendering to the
+   * UiRenderer decined in the template.
+   */
   @Override
   @SuppressWarnings("deprecation")
   public void render(com.google.gwt.cell.client.Cell.Context context, TaskProxy value,
@@ -77,11 +89,11 @@
     today.setMinutes(0);
     today.setSeconds(0);
     if (date == null) {
-      sb.append(template.noDate(name));
+      renderer.render(sb, name, " ", renderer.getCellStyle().noDate());
     } else if (date.before(today)) {
-      sb.append(template.pastDue(name, dateFormat.format(date)));
+      renderer.render(sb, name, dateFormat.format(date), renderer.getCellStyle().pastDue());
     } else {
-      sb.append(template.onTime(name, dateFormat.format(date)));
+      renderer.render(sb, name, dateFormat.format(date), renderer.getCellStyle().onTime());
     }
   }
 }

diff --git a/samples/mobilewebapp/src/main/java/com/google/gwt/sample/mobilewebapp/client/mobile/TaskProxyCell.ui.xml b/samples/mobilewebapp/src/main/java/com/google/gwt/sample/mobilewebapp/client/mobile/TaskProxyCell.ui.xml
new file mode 100644
index 0000000..8e4dd52
--- /dev/null
+++ b/samples/mobilewebapp/src/main/java/com/google/gwt/sample/mobilewebapp/client/mobile/TaskProxyCell.ui.xml

@@ -0,0 +1,23 @@
+<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
+<ui:UiBinder
+  xmlns:ui="urn:ui:com.google.gwt.uibinder">
+
+  <ui:style field="cellStyle"
+      type="com.google.gwt.sample.mobilewebapp.client.mobile.TaskProxyCell.CellStyle">
+    .noDate {font-size:80%;}
+    .onTime {font-size:80%;color:#999;}
+    .pastDue {font-size:80%;color:red;}
+  </ui:style>
+
+  <ui:with field="date" type="java.lang.String"/>
+  <ui:with field="name" type="com.google.gwt.safehtml.shared.SafeHtml"/>
+  <ui:with field="dateStyle" type="java.lang.String"/>
+
+  <div>
+    <ui:text from="{name.asString}"/>
+    <div class="{dateStyle}">
+      <ui:text from="{date}"/>
+    </div>
+  </div>
+
+</ui:UiBinder>