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%;\"> </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>
