Revision: 8139
Author: jaime...@google.com
Date: Thu May 13 20:18:52 2010
Log: Adds loading feedback and GWT logo to the scaffolding sample.
Review by: rj...@google.com
http://code.google.com/p/google-web-toolkit/source/detail?r=8139
Added:
/branches/2.1/bikeshed/src/com/google/gwt/app/client/NotificationMole.java
/branches/2.1/bikeshed/src/com/google/gwt/app/client/NotificationMole.ui.xml
/branches/2.1/bikeshed/src/com/google/gwt/sample/expenses/gwt/client/gwtLogo.png
Modified:
/branches/2.1/bikeshed/src/com/google/gwt/sample/expenses/gwt/client/Scaffold.java
/branches/2.1/bikeshed/src/com/google/gwt/sample/expenses/gwt/client/ScaffoldShell.java
/branches/2.1/bikeshed/src/com/google/gwt/sample/expenses/gwt/client/ScaffoldShell.ui.xml
=======================================
--- /dev/null
+++
/branches/2.1/bikeshed/src/com/google/gwt/app/client/NotificationMole.java
Thu May 13 20:18:52 2010
@@ -0,0 +1,187 @@
+/*
+ * Copyright 2010 Google Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may
not
+ * use this file except in compliance with the License. You may obtain a
copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
under
+ * the License.
+ */
+package com.google.gwt.app.client;
+
+import com.google.gwt.animation.client.Animation;
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.dom.client.DivElement;
+import com.google.gwt.dom.client.SpanElement;
+import com.google.gwt.dom.client.Style.Display;
+import com.google.gwt.dom.client.Style.Unit;
+import com.google.gwt.resources.client.CssResource;
+import com.google.gwt.uibinder.client.UiBinder;
+import com.google.gwt.uibinder.client.UiField;
+import com.google.gwt.user.client.Timer;
+import com.google.gwt.user.client.ui.Composite;
+import com.google.gwt.user.client.ui.HTMLPanel;
+
+/**
+ * Simple widget for providing notification feedback.
+ */
+public class NotificationMole extends Composite {
+ /**
+ * Default CSS styles for this widget.
+ */
+ public interface Style extends CssResource {
+ String container();
+
+ String notificationText();
+ }
+
+ interface Binder extends UiBinder<HTMLPanel, NotificationMole> {
+ }
+
+ private class MoleAnimation extends Animation {
+ private int startSize;
+ private int endSize;
+
+ @Override
+ protected void onComplete() {
+ if (endSize == 0) {
+ borderElement.getStyle().setDisplay(Display.NONE);
+ return;
+ }
+ borderElement.getStyle().setHeight(endSize, Unit.PX);
+ }
+
+ @Override
+ protected void onUpdate(double progress) {
+ double delta = (endSize - startSize) * progress;
+ double newSize = startSize + delta;
+ borderElement.getStyle().setHeight(newSize, Unit.PX);
+ }
+
+ void animateMole(int startSize, int endSize, int duration) {
+ this.startSize = startSize;
+ this.endSize = endSize;
+ if (duration == 0) {
+ onComplete();
+ return;
+ }
+ run(duration);
+ }
+ }
+
+ private static final Binder BINDER = GWT.create(Binder.class);
+
+ private final MoleAnimation animation = new MoleAnimation();
+
+ private int animationDuration;
+
+ @UiField()
+ DivElement borderElement;
+
+ @UiField()
+ SpanElement notificationText;
+
+ @UiField
+ DivElement heightMeasure;
+
+ int showAttempts = 0;
+
+ Timer showTimer = new Timer() {
+ @Override
+ public void run() {
+ if (showAttempts > 0) {
+ showImpl();
+ }
+ }
+ };
+
+ public NotificationMole() {
+ initWidget(BINDER.createAndBindUi(this));
+ }
+
+ /**
+ * Hides the notification.
+ */
+ public void hide() {
+ if (showAttempts > 0) {
+ --showAttempts;
+ }
+ if (showAttempts == 0) {
+ animation.animateMole(heightMeasure.getOffsetHeight(), 0,
+ animationDuration);
+ return;
+ }
+ }
+
+ /**
+ * Force mole to hide and discard outstanding show attempts.
+ */
+ public void hideNow() {
+ showAttempts = 0;
+ animation.animateMole(heightMeasure.getOffsetHeight(), 0,
animationDuration);
+ }
+
+ /**
+ * Sets the animation duration in milliseconds. The animation duration
+ * defaults to 0 if this method is never called.
+ *
+ * @param duration the animation duration in milliseconds.
+ */
+ public void setAnimationDuration(int duration) {
+ this.animationDuration = duration;
+ }
+
+ /**
+ * Sets the message text to be displayed.
+ *
+ * @param message the text to be displayed.
+ */
+ public void setMessage(String message) {
+ notificationText.setInnerText(message);
+ }
+
+ /**
+ * Display the notification with the existing message.
+ */
+ public void show() {
+ ++showAttempts;
+ showImpl();
+ }
+
+ /**
+ * Set the message text and then display the notification.
+ */
+ public void show(String message) {
+ setMessage(message);
+ show();
+ }
+
+ /**
+ * Display the notification, but after a delay.
+ *
+ * @param delay delay in milliseconds.
+ */
+ public void showDelayed(int delay) {
+ if (showAttempts == 0) {
+ if (delay == 0) {
+ show();
+ } else {
+ ++showAttempts;
+ showTimer.schedule(delay);
+ }
+ }
+ }
+
+ private void showImpl() {
+ borderElement.getStyle().setDisplay(Display.BLOCK);
+ borderElement.getStyle().setWidth(notificationText.getOffsetWidth(),
+ Unit.PX);
+ animation.animateMole(0, heightMeasure.getOffsetHeight(),
animationDuration);
+ }
+}
=======================================
--- /dev/null
+++
/branches/2.1/bikeshed/src/com/google/gwt/app/client/NotificationMole.ui.xml
Thu May 13 20:18:52 2010
@@ -0,0 +1,34 @@
+<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent";>
+<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
+ xmlns:g='urn:import:com.google.gwt.user.client.ui'>
+ <ui:style>
+ .container {
+ position: absolute;
+ height: 0;
+ text-align: center;
+ width: 100%;
+ }
+ .centered {
+ margin-left: auto;
+ margin-right: auto;
+ border-left: 1px solid #96A2B5;
+ border-right: 1px solid #96A2B5;
+ border-bottom: 1px solid #96A2B5;
+ background-color: #E5EDF9;
+ padding: 5px;
+ overflow: hidden;
+ display: inline-block;
+ }
+ .notificationText {
+ font-family: Helvetica;
+ font-size: 1em;
+ }
+ </ui:style>
+ <g:HTMLPanel styleName='{style.container}'>
+ <div class='{style.centered}' style='display:none'
ui:field='borderElement'>
+ <div ui:field='heightMeasure'>
+ <span class='{style.notificationText}'
ui:field='notificationText'></span>
+ </div>
+ </div>
+ </g:HTMLPanel>
+</ui:UiBinder>
=======================================
--- /dev/null
+++
/branches/2.1/bikeshed/src/com/google/gwt/sample/expenses/gwt/client/gwtLogo.png
Thu May 13 20:18:52 2010
Binary file, no diff available.
=======================================
---
/branches/2.1/bikeshed/src/com/google/gwt/sample/expenses/gwt/client/Scaffold.java
Thu May 13 12:50:46 2010
+++
/branches/2.1/bikeshed/src/com/google/gwt/sample/expenses/gwt/client/Scaffold.java
Thu May 13 20:18:52 2010
@@ -33,6 +33,7 @@
import com.google.gwt.sample.expenses.gwt.request.ExpensesRequestFactory;
import com.google.gwt.sample.expenses.gwt.ui.ListActivitiesMapper;
import com.google.gwt.sample.expenses.gwt.ui.ScaffoldListPlaceRenderer;
+import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.ui.RootLayoutPanel;
import com.google.gwt.valuestore.shared.Record;
@@ -55,19 +56,25 @@
final PlaceController<ScaffoldPlace> placeController = new
PlaceController<ScaffoldPlace>(
eventBus);
- eventBus.addHandler(RequestEvent.TYPE, new RequestEvent.Handler() {
+
+ /* Top level UI */
+
+ final ScaffoldShell shell = new ScaffoldShell();
+
+ /* Display loading notifications when we touch the network. */
+
+ eventBus.addHandler(RequestEvent.TYPE, new RequestEvent.Handler() {
+ // Only show loading status if a request isn't serviced in 250ms.
+ private static final int LOADING_TIMEOUT = 250;
+
public void onRequestEvent(RequestEvent requestEvent) {
if (requestEvent.getState() == State.SENT) {
- // TODO jaimeyap
+ shell.getMole().showDelayed(LOADING_TIMEOUT);
} else {
- // TODO jaimeyap
+ shell.getMole().hide();
}
}
});
-
- /* Top level UI */
-
- final ScaffoldShell shell = new ScaffoldShell();
/* Left side lets us pick from all the types of entities */
=======================================
---
/branches/2.1/bikeshed/src/com/google/gwt/sample/expenses/gwt/client/ScaffoldShell.java
Tue May 4 17:35:40 2010
+++
/branches/2.1/bikeshed/src/com/google/gwt/sample/expenses/gwt/client/ScaffoldShell.java
Thu May 13 20:18:52 2010
@@ -15,6 +15,7 @@
*/
package com.google.gwt.sample.expenses.gwt.client;
+import com.google.gwt.app.client.NotificationMole;
import com.google.gwt.app.place.PlacePickerView;
import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.DivElement;
@@ -37,6 +38,7 @@
@UiField SimplePanel details;
@UiField PlacePickerView<ListScaffoldPlace> placesBox;
@UiField DivElement error;
+ @UiField NotificationMole mole;
public ScaffoldShell() {
initWidget(BINDER.createAndBindUi(this));
@@ -55,6 +57,13 @@
public SimplePanel getMasterPanel() {
return master;
}
+
+ /**
+ * @return the notification mole for loading feedback
+ */
+ public NotificationMole getMole() {
+ return mole;
+ }
/**
* @return the navigator
=======================================
---
/branches/2.1/bikeshed/src/com/google/gwt/sample/expenses/gwt/client/ScaffoldShell.ui.xml
Wed May 12 14:48:39 2010
+++
/branches/2.1/bikeshed/src/com/google/gwt/sample/expenses/gwt/client/ScaffoldShell.ui.xml
Thu May 13 20:18:52 2010
@@ -3,6 +3,8 @@
xmlns:g='urn:import:com.google.gwt.user.client.ui'
xmlns:a='urn:import:com.google.gwt.app.client'>
+ <ui:image field='gwtLogo'></ui:image>
+
<ui:style>
@def contentWidth 850px;
@@ -88,6 +90,18 @@
.entityDetails {
margin-left: 11em;
}
+ @sprite .gwtLogo {
+ gwt-image: 'gwtLogo';
+ float:right;
+ }
+ .logos {
+ color: #aaa;
+ font-size: 0.8em;
+ width: 160px;
+ margin-left: auto;
+ margin-right: auto;
+ text-align: right;
+ }
</ui:style>
<g:DockLayoutPanel unit='EM'>
@@ -99,16 +113,24 @@
</div>
</g:HTML>
</g:north>
- <g:south size='2'><g:HTML></g:HTML></g:south>
+ <g:south size='2'>
+ <g:HTML>
+ <div class='{style.logos}'>
+ <span>Powered by: </span>
+ <a href='http://code.google.com/webtoolkit/'><div
class='{style.gwtLogo}'></div></a>
+ </div>
+ </g:HTML>
+ </g:south>
<g:center>
<g:FlowPanel styleName='{style.content} {style.centered}'>
<g:SimplePanel styleName='{style.entities}'>
<a:CellListPlacePickerView styleName="{style.entitiesList}"
width='100%' pageSize='100' ui:field='placesBox'/>
</g:SimplePanel>
- <g:SimplePanel styleName="{style.entityDetails}" ui:field='master'>
- </g:SimplePanel>
- <g:SimplePanel styleName="{style.entityDetails}"
ui:field='details'>
- </g:SimplePanel>
+ <g:FlowPanel>
+ <a:NotificationMole animationDuration='0' message='loading...'
ui:field='mole'></a:NotificationMole>
+ <g:SimplePanel styleName="{style.entityDetails}"
ui:field='master'></g:SimplePanel>
+ </g:FlowPanel>
+ <g:SimplePanel styleName="{style.entityDetails}"
ui:field='details'></g:SimplePanel>
</g:FlowPanel>
</g:center>
</g:DockLayoutPanel>
--
http://groups.google.com/group/Google-Web-Toolkit-Contributors
