Pages

Wednesday, April 15, 2009

GWT Concepts – No Multiple Pages

Here is the first thing that is not obvious for newcomers to GWT: There are no multiple pages involved in development. I was wondering, just like many others I guess, how to add another page to my GWT application. The answer from com.googlegroups.google-web-toolkit is below. It will take some time to get used to it. And I still hope this changes in the near future.

I am new to GWT, though I have dabbled in C#/Java before so the language itself doesn't boggle me that much, but it seems some of the simpler concepts aren't sticking. Im pretty sure the answer to my question is so obvious, as I have not seen it answered in any of the tutorials on GWT on the web. What I wanted to know is, how do you do page navigation in GWT? For example I have my new class, with its onModuleLoad function, which is fine, but say I want to click a link and load a new page with a different onModuleLoad function?

As others have pointed out, the Right(TM) way to do this is using the History mechanism. There are many strategies for working this into your application's internal syntax and structure. However, there are a few other basic concepts I think you might want some clarification on.

First, you should think of your GWT app as a single HTML page, in which user and application events cause PORTIONS of the page (ie DOM elements) to change, be replaced, or loaded with content from the server or internal application logic. In general you will not be sending the user/browser to another "real" URL. Your initial HTML page is basically a canvas on which your GWT application spews up content in response to user or server events (the typical AJAX model).

In the example of your login function, when your app has successfully received authentication credentials from the user, its next job will be to kick the login widgets off the page, and replace them with "whatever is next".

Second, you will probably find that the majority (if not all) of your user navigation paths are not coded in raw HTML. The GWT ui classes provide all the event handling and navigational connectivity that you would find in a typical desktop application. Although it is possible use raw HTML links to navigate your application, the GWT widgets are much easier to work with, test, and maintain than raw HTML files. So instead of following an <a href="blah blah">blah</a> and "going somewhere else", you will create event listeners that respond to mouse or key clicks which cause your app to change what is already there.

Finally, you typically will only have one EntryPoint implementation with an onModuleLoad method in your application. That class will be responsible for initializing your application - probably by creating classes for the UI, classes for handling UI events, and classes for managing your applications internal state. In a lot of the samples, the class which implements EntryPoint also implements all of the UI, the event handlers, and the application logic, but that's only to reduce the amount of code you have to read. In any serious application you will want to factor those things out into different classes (as in MVC).

It might be helpful to think of your EntryPoint.onModuleLoad() as if it were simply the main() method of a more traditional application.

11 comments:

Anonymous said...

Thanks.

Anonymous said...

Thanks a lot...google should have mentioned this on their website..
i need to restructure my whole app

-=|MisterY|=- said...

Yes, it is not that obvious at a first glance. Have a look at jQuery and plugins, though.

Mohammed Hossain Doula said...

Ok... Now, your explanation is vague regarding the topic you discussed... It would be clear if you have elaborated the topic with an easy example... Not containing any kind of childish example like popping out alerts or hello world example... It would be great if you post an example like an user just get authenticated after logging in the application and he's dealing with another form widgets... that's all... thank you...

saurabh said...

thanks your comment made my day.

saurabh.

Yegon said...

Thanks alot Alen, I'm coming from a rails background and was wondering how you handle urls and such on GWT.

-=|MisterY|=- said...

Thanks for the comments, everyone. I haven't used GWT for quite a while. My favorite framework for working with JavaScript is jQuery with plugins. So far it was easy to implement whatever I wanted and, hence, I haven't touched GWT pretty much after I figured out its concepts and limitations.
Saying that, it may have improved over the years but, unless I hit some hurdles I can't solve with jQuery and whole bunch of plugins and/or manual additions and workarounds, I probably won't be looking for an alternative.
Saying that, have a look at pirateslovedaisies.com for some awesome demo of HTML5 and JavaScript functionality! :)
Cheers

shpyo said...

This info should be shown as first when somebody starts playing with GWT! Thanks for that claryfication!

Anonymous said...

Thank you for this clarifying post. It has been hard to find a clear response to "the question" associated to GWT framework. I think google should include a "Guide for common mistakes and confusions from classic web developers" in the GWT documentation.

In the same line, i also found this article, that goes beyond in how to do the "switch" between pages:
http://stackoverflow.com/questions/1061705/multiple-pages-tutorial-in-google-web-toolkit-gwt

At the end, everything reduces to "show" and "hide" widgets...

Thanks again!

Unknown said...

You are my savior man...I just started a project in GWT and was confused how to handle all these pages, widgest...
Thanks a ton man...

Anonymous said...

thank you so much