Load feedback for ASync tree

[dno]

I've got a Tree and I'm using a TreeLoader to load nodes asynchronously. The backend data takes a few seconds to generate, so I need to show some feedback to show that the child nodes are loading. In GXT 2.x there was a spinner icon to indicate this, however this doesn't seem to be supported in GXT 3.

Looking in the source for TreeView.java I see:

  public void onLoading(TreeNode<M> node) {
    // onIconStyleChange(node, IconHelper.createStyle("x-tree3-loading"));
  }

Does this mean this hasn't been implemented, or am I supposed to do something with this myself? There doesn't seem to be anything in TreeAppearance render a loading node.

[diegop]

The method createStyle in IconHelper has been removed in GXT 3, I am still trying to find a way to set an icon from a css style and not from a resource bundle.
If you find a way, please post your solution.

[dno]

Is anyone from Sencha able to comment on whether an Async tree is supposed to provide load-feedback?

Thanks.

[diegop]

I solved this by implementing the AsyncCallback interface :

public abstract class IconAsyncCall<T> implements AsyncCallback<T> {
	private SplashImage loadgif;
	
	 public IconAsyncCall(String title, String message)
	    {
	       loadgif = new SplashImage(message);
	       RootPanel.get().add(loadgif);
	       
	    }
   
	 
	 
	    public final void onFailure(Throwable caught) 
	    {    
	    	RootPanel.get().remove(loadgif);    
	    	onRPCCallFailure(caught); 
	    } 


	    public final void onSuccess(T result) 
	    {       
	    	RootPanel.get().remove(loadgif);         
	        onRPCCallSuccess(result);     
	    }
	    
	    /** the failure method needed to be overwritte */   
	    protected abstract void onRPCCallFailure(Throwable caught); 
	    
	    
	    /** overwritte to do something with result */
	    protected abstract void onRPCCallSuccess(T result); 
    
    
    
}

while SplashImage object is just an little contentPanel in which you can put the image you want
(which you can define in the css or in the code)

to use this implementation :

rpcService.rpcMethod(param,	new IconAsyncCall<CCtLoginUser>() {
					
							@Override
							protected void onRPCCallFailure(Throwable caught) {
							 .....
                             ......							 
							}


							@Override
							protected void onRPCCallSuccess(CCtLoginUser result) {
								if(result == null)									
									return ;
					            
								//do something with the result
							
							}
						});
			}

In this way the contentPanel with the loading icon will appears when making the rpc call and will dissapear
when it returns

[Colin Alworth]

That's one way to solve this, but as with almost any problem there are several correct answers. They probably all follow the basic structure you used: monitor the beginning and the end of the RPC call, and use that notification to display a loading image over the screen. This is the main way to think through a problem like this, though perhaps I can suggest a slightly different way to do each of these two tasks.

To monitor the beginning and end of the loading process, consider listening to the events issues from the Loader (probably TreeLoader in your case): Listen for BeforeLoadEvent to add the notification, and LoadEvent/LoadExceptionEvent to hide it.

Another way to indicate that loading is occurring would be to use the mask(String) method, available on all components. You could call tree.mask("Loading...") to display the initial notification, and tree.unmask() to dismiss it. This can give you consistent loading notifications on each widget, though not for the entire page (that can be done with Mask.mask(Document.get().getBody().cast(), "Loading"), for example), which may or may not be what you are after. The visual appearance of the mask can be changed by implementing the MaskAppearance interface, and building a rebind rule to ask the app to always use that new mask instead.

There's nothing wrong with your approach, just wanted to spell our that your strategy makes sense, and how else the same strategy might be followed.

[vtortsev]

i would done so:

tree.setView(new TreeView<BaseObject>() {
            @Override
            public void onLoading(TreeNode<BaseObject> node) {
                onIconStyleChange(node, loadingIcon);
                super.onLoading(node);
            }
        });