created a placeholder widget with a busy indicator which is shown when a place is loaded and the content needs some time to load in the background.

2026-10-08 13:20:57 +00:00 · 2014-08-11 20:11:31 +02:00
1 parent 621d4fd6e3
commit 5ed7c8123e
@@ -1,8 +1,6 @@
 package com.sap.sailing.gwt.home.client.app;

 import com.google.gwt.core.client.GWT;
-import com.google.gwt.dom.client.Element;
-import com.google.gwt.dom.client.Style.Visibility;
 import com.google.gwt.uibinder.client.UiBinder;
 import com.google.gwt.uibinder.client.UiField;
 import com.google.gwt.user.client.ui.AcceptsOneWidget;
@@ -11,6 +9,7 @@ import com.google.gwt.user.client.ui.SimplePanel;
 import com.google.gwt.user.client.ui.Widget;
 import com.sap.sailing.gwt.home.client.shared.footer.Footer;
 import com.sap.sailing.gwt.home.client.shared.header.Header;
+import com.sap.sailing.gwt.home.client.shared.placeholder.Placeholder;

 /**
 * This is the top-level view of the application. Every time another presenter wants to reveal itself,
@@ -31,12 +30,12 @@ public class TabletAndDesktopApplicationView extends Composite implements Applic
    @UiField
    SimplePanel mainContentPanel;

-    @UiField
-    Element loadingMessage;
-
    public TabletAndDesktopApplicationView(PlaceNavigator navigator) {
        headerPanel = new Header(navigator);
        initWidget(uiBinder.createAndBindUi(this));
+        
+        Placeholder placeHolder = new Placeholder();
+        mainContentPanel.setWidget(placeHolder);
    }

    @Override
@@ -45,7 +44,6 @@ public class TabletAndDesktopApplicationView extends Composite implements Applic
    }
    
    @Override
-    public void showLoading(boolean visibile) {
-        loadingMessage.getStyle().setVisibility(visibile ? Visibility.VISIBLE : Visibility.HIDDEN);
+    public void showLoading(boolean visible) {
    }
 }
@@ -2,14 +2,9 @@
 <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui"
    xmlns:s="urn:import:com.sap.sailing.gwt.home.client.shared">
-    
 	<g:HTMLPanel>
-		<div ui:field="loadingMessage" style="display: none; position:absolute; top:0; left:0; background-color:yellow;">Loading...</div>
-
 		<s:header.Header ui:field="headerPanel" />
-        
 		<g:SimplePanel ui:field="mainContentPanel" />
-
      	<s:footer.Footer ui:field="footerPanel" />
   </g:HTMLPanel>
 </ui:UiBinder>
@@ -9,6 +9,7 @@ import com.google.gwt.event.shared.EventBus;
 import com.google.gwt.user.client.Window;
 import com.google.gwt.user.client.rpc.AsyncCallback;
 import com.google.gwt.user.client.ui.AcceptsOneWidget;
+import com.sap.sailing.gwt.home.client.shared.placeholder.Placeholder;
 import com.sap.sailing.gwt.ui.regattaoverview.RegattaRaceStatesSettings;
 import com.sap.sailing.gwt.ui.shared.EventDTO;
 import com.sap.sailing.gwt.ui.shared.LeaderboardGroupDTO;
@@ -50,6 +51,8 @@ public class EventActivity extends AbstractActivity {

    @Override
    public void start(final AcceptsOneWidget panel, final EventBus eventBus) {
+        panel.setWidget(new Placeholder());
+
        final long clientTimeWhenRequestWasSent = System.currentTimeMillis();
        UUID eventUUID = UUID.fromString(eventPlace.getEventUuidAsString());
        clientFactory.getSailingService().getEventById(eventUUID, true, new AsyncCallback<EventDTO>() {
@@ -7,6 +7,7 @@ import com.google.gwt.event.shared.EventBus;
 import com.google.gwt.user.client.Window;
 import com.google.gwt.user.client.rpc.AsyncCallback;
 import com.google.gwt.user.client.ui.AcceptsOneWidget;
+import com.sap.sailing.gwt.home.client.shared.placeholder.Placeholder;
 import com.sap.sailing.gwt.ui.shared.EventBaseDTO;

 public class EventsActivity extends AbstractActivity {
@@ -19,11 +20,14 @@ public class EventsActivity extends AbstractActivity {

    @Override
    public void start(final AcceptsOneWidget panel, EventBus eventBus) {
-        final EventsView eventsView = clientFactory.createEventsView(EventsActivity.this);
-        panel.setWidget(eventsView.asWidget());
+        panel.setWidget(new Placeholder());
+
        clientFactory.getSailingService().getPublicEventsOfAllSailingServers(new AsyncCallback<List<EventBaseDTO>>() {
            @Override
            public void onSuccess(List<EventBaseDTO> events) {
+                final EventsView eventsView = clientFactory.createEventsView(EventsActivity.this);
+                panel.setWidget(eventsView.asWidget());
+
                eventsView.setEvents(events);
            }

@@ -5,6 +5,7 @@ import com.google.gwt.event.shared.EventBus;
 import com.google.gwt.user.client.Window;
 import com.google.gwt.user.client.rpc.AsyncCallback;
 import com.google.gwt.user.client.ui.AcceptsOneWidget;
+import com.sap.sailing.gwt.home.client.shared.placeholder.Placeholder;
 import com.sap.sailing.gwt.ui.shared.LeaderboardSearchResultDTO;
 import com.sap.sse.common.search.KeywordQuery;

@@ -32,6 +33,8 @@ public class SearchResultActivity extends AbstractActivity {

    @Override
    public void start(final AcceptsOneWidget panel, final EventBus eventBus) {
+        panel.setWidget(new Placeholder());
+
        view = clientFactory.createSearchResultView();
        panel.setWidget(view.asWidget());
        doSearch(searchResultPlace.getSearchText());
@@ -10,6 +10,7 @@ import com.google.gwt.activity.shared.AbstractActivity;
 import com.google.gwt.event.shared.EventBus;
 import com.google.gwt.user.client.rpc.AsyncCallback;
 import com.google.gwt.user.client.ui.AcceptsOneWidget;
+import com.sap.sailing.gwt.home.client.shared.placeholder.Placeholder;
 import com.sap.sailing.gwt.home.client.shared.stage.StageEventType;
 import com.sap.sailing.gwt.ui.shared.EventBaseDTO;
 import com.sap.sse.common.Util.Pair;
@@ -22,13 +23,15 @@ public class StartActivity extends AbstractActivity {
    }

    @Override
-    public void start(AcceptsOneWidget panel, EventBus eventBus) {
-        final StartView view = clientFactory.createStartView();
-        panel.setWidget(view.asWidget());
+    public void start(final AcceptsOneWidget panel, EventBus eventBus) {
+        panel.setWidget(new Placeholder());
        
        clientFactory.getSailingService().getPublicEventsOfAllSailingServers(new AsyncCallback<List<EventBaseDTO>>() {
            @Override
            public void onSuccess(List<EventBaseDTO> result) {
+                final StartView view = clientFactory.createStartView();
+                panel.setWidget(view.asWidget());
+
                fillStartPageEvents(view, result);
            }
            
@@ -0,0 +1,5 @@
+.content {
+	margin-top: 3em;
+	font-weight: bold;
+	vertical-align: center;
+}
@@ -0,0 +1,23 @@
+package com.sap.sailing.gwt.home.client.shared.placeholder;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.uibinder.client.UiBinder;
+import com.google.gwt.user.client.Window;
+import com.google.gwt.user.client.ui.Composite;
+import com.google.gwt.user.client.ui.Widget;
+
+public class Placeholder extends Composite {
+
+    interface PlaceholderUiBinder extends UiBinder<Widget, Placeholder> {
+    }
+    
+    private static PlaceholderUiBinder uiBinder = GWT.create(PlaceholderUiBinder.class);
+
+    public Placeholder() {
+        PlaceholderResources.INSTANCE.css().ensureInjected();
+
+        initWidget(uiBinder.createAndBindUi(this));
+        
+        this.setHeight(Window.getClientHeight() + "px");
+    }
+}
@@ -0,0 +1,18 @@
+<!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"
+    xmlns:s="urn:import:com.sap.sailing.gwt.home.client.shared">
+    <ui:with field="i18n" type="com.sap.sailing.gwt.home.client.i18n.TextMessages"/>
+    <ui:with field="res" type="com.sap.sailing.gwt.home.client.HomeResources" />
+    <ui:with field="local_res" type="com.sap.sailing.gwt.home.client.shared.placeholder.PlaceholderResources" />
+	<g:HTMLPanel>
+		  <div class="{res.mainCss.grid}">
+		    <div class="{res.mediaCss.columns}">
+		        <div class="{local_res.css.content}">
+		            <span style="margin-right: 10px">Loading...</span>
+		            <img src="images/home/busy_indicator.gif" />
+		        </div>
+		    </div>
+		  </div>
+	</g:HTMLPanel>
+</ui:UiBinder>
@@ -0,0 +1,16 @@
+package com.sap.sailing.gwt.home.client.shared.placeholder;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.resources.client.ClientBundle;
+import com.google.gwt.resources.client.CssResource;
+
+public interface PlaceholderResources extends ClientBundle {
+    public static final PlaceholderResources INSTANCE = GWT.create(PlaceholderResources.class);
+
+    @Source("com/sap/sailing/gwt/home/client/shared/placeholder/Placeholder.css")
+    LocalCss css();
+
+    public interface LocalCss extends CssResource {
+        String content();
+    }
+}