Friday 13 August 2010

Creating a multiple page GWT app

I've been playing with GWt for a little while in my spare time. Just expanding the stockwatcher tutorial I talked about before. and experimenting with a few ideas. I've been wondering for a while how to link up multiple pages and start building a more complex app.

Well, I I've just figured out the way that works for me. Thought I'd post it for any one else that's confused. I'll start by taking you through the journey that led me here.

First I had to accept that GWT is about building Advanced AJAX based applications. Just like desktop applications you only get one entry point. So how do you navigate around? Turns out GWT has an Anchor tag and you can easily assign click events to it.

A quick test later and I found that the simplest solution was to create a new load method for the page I wanted to create. Whether I create a new class or not is not the point. I just wanted to prove I could control the onscreen components and use the underlying divs much like a canvas to paint on. I found that I could clear the canvas using RootPanel.get("root div name").clear().

ok, so hopefully it's becoming clearer. To put this example together I've included code snippets that hopefully explain this in much more detail. I've only included the key details assuming you've filled in the other aspects like creating a proper loadPage method. I've just been using that from the stockwatcher tutorial for simplicity

//instantiate the link
private Anchor prototypeLink = new Anchor("Prototype");


// append link to a display panel and assign a click event.
loadPage(){ 
   prototypeLink.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) {         
       loadPrototype(); } 
   }); 
   .....

   mainPanel.add(prototypeLink);

}


 // Then create the destination method and see what we can change
protected void loadPrototype() { 
   // clear the app name
   RootPanel.get("appTitle").clear();
  // add a new app name
   RootPanel.get("appTitle").add(new Label("Prototype")); 


   // clear the canvas
   RootPanel.get("activityList").clear()

   // add a panel
   RootPanel.get("activityList").add(currentActivityFlexTable);
}


The point of all this is that I learnt that I can clear the canvas. So I can paint and clear it at will. I can also therefore keep multiple views loaded but only display them when necessary. That's my assumption any way.


Just hope this helps.

No comments: