Best practices for designing GUI in GWT - gwt

I have recently started studying Google Web Toolkit. I have went through some walkthroughs, and I think I understand the basics and the idea. However, I have some questions on the overall architecture and design of the applications.
Let's start with the GUI. I want to build a "common" web application, where the user first sees a login page. After successful login, the user is redirected to some kind of index page and a menu is added. I created a new LoginComposite for the login page, and tried to design a nice looking HTML table using the GWT Designer. However, I find that really hard to do, as you cannot set any individual properties on the individual cells (TDs)? There's no way to specify colspan or rowspan, and I can't set any padding or margin on the cells themselves. In short, I know exactly how I would have written the HTML code, but I can't translate that to the designer. Is that just me?
Also, I am wondering about the best practice for code layout and design. I went through the StockWatcher tutorial, but that's really not a very realistic web application. For example, I would like to know how I should design different forms (should each be in a own class inheriting the Composite-class)? How should I switch between forms (for example, first a list view, then a form for editing a chosen item from the list, then a totally different page)? If I have one Composite for each page, and instantiate them when needed in my EntryPoint, would that mean that the client will download all the JavaScript for all those Composites at page load? Should I stick with only one HTML page, or should I have many?
These are questions not really covered by any GWT tutorial. If anyone know a good example of a "real" web application built using GWT, I would love to see it.
Thanks for your input!

There are a whole bunch of resources in Google IO talks. For example:
http://www.google.com/events/io/2011/sessions/high-performance-gwt-best-practices-for-writing-smaller-faster-apps.html
http://www.google.com/events/io/2011/sessions/highly-productive-gwt-rapid-development-with-app-engine-objectify-requestfactory-and-gwt-platform.html
http://www.google.com/events/io/2010/sessions/architecting-production-gwt.html
http://www.google.com/events/io/2010/sessions/architecting-performance-gwt.html
http://www.google.com/events/io/2010/sessions/gwt-ui-overhaul.html
http://www.google.com/events/io/2009/sessions/EffectiveGwt.html
Also, don't expect to be able to edit absolutely everything if you are using the GUI to build your GWT app. Good luck!

Related

Page Navigation in GWT Application

I want to navigate to another page in my application. I don't want the page to reload(i.e.. application should be a single URL application).
I know only one way to accomplish this by changing the proper div attached in the RootPanel by whatever data I want to display. But I fell that might get cumbersome if there are many navigations(I haven't tried it though :P).
Is there any other way to accomplish this or make the above said approach better?
Thanks in advance.
I guess you need GWT Development with Activities and Places
Well ,its time to have a look on MVP
With that you can do
History.newItem(tokenOfYourPresenterScreen);
A nice single EntryPoint demo app is here : (BrowserHistoryExample.java)
http://www.gwtproject.org/doc/latest/DevGuideCodingBasicsHistory.html
I added the below to the example to demonstrate links.
vertPanel.add(new Label("Access history via Hyperlinks"));
vertPanel.add(new Hyperlink("External Page 0","page0"));
vertPanel.add(new Hyperlink("External Page 1","page1"));
vertPanel.add(new Hyperlink("External Page 2","page2"));

GWT Multipage App

I am confused about how to make a multipage app in one GWT project. I have one page with my app and would like to provide an options page.
I don't think you can use 2 onModuleLoads() or something.
So how can you achieve a multipage app in 1 module?
Thanks
Take a look at the MVP architecture -
http://code.google.com/webtoolkit/articles/mvp-architecture.html
Even though you don't actually need an MVP paradigm to create a 'Multi-page' gwt application, you will be better off following it in creating your apps.
Basic idea is, you create different view-presenters that will act like different 'pages', and the app controller activates the correct one based on the logic you provide.
EDIT - you can even create multiple html-pages with their own onModuleLoad(), You should prefer that only if - there are logically 2 different applications or you are modifying an existing webpage and cant do without it. I believe you don't have those issues based on your question. Let me know if its otherwise.

Google web toolkits - multiple pages

On the google website there an example of a simple GWT appliatoin, following is a link:
http://code.google.com/webtoolkit/doc/1.6/tutorial/create.html
The above application has a host page:StockWatcher.html
and StockWatcher.java is the entry point.
If I wanted to add more html pages to this application, we keep one single host page and the entry point will add different panels depending on which link the user clicked on? In this case, how to know which link the user clicked on? If I create a navigation panel and each link has a request parameter, then after the user clicks on the link, How to get the request parameter?
Are there any tutorials available online on how to create a fully functional application? The one example google provides is too simple.
Thanks so much in advance
You have two options to have multiple page web application using gwt.
1) Use gwt history feature and listen for the history change. In this approach at the initial page load itself browser downloads all the javascripts(Including the widgets which are not useful in current link). Still this can be avoided by using gwt code splitting.
2) Create multiple modules. In this case you have to create multiple html pages and GWT entry points. For each major functionality create a gwt module and link that with [modulename].html file. In this approach browser downloads only particular feature's javascript. Not all the javascripts.
Based on your application requirement you can pick one of the option. IMHO I would suggesst second option.

What separates a content management system from just a bunch of web pages?

I have a website that has related pages. They have links that point back and forth to one another but I have no integrated system, nor do I know what that would mean.
What is the minimum code that a group of web pages must have to be considered a Content Management System (CMS). Is it that all the settings are in the database and the pages are generated somehow? Is there some small snippet that all my pages could share that makes them a CMS, database or not?
Thanks. I was also hoping not to have to study a giant CMS to see what makes it a CMS . After maybe a basic understanding I would know what I was looking for.
edit: here's why I ask about code. Whenever I have looked at a CMS, and maybe they aren't all the same, I saw that to develop a module you always had to inherit from certain classes and had some necessary code. I didn't know if there was some magic model that I just don't get that all cms makers understand.
edit: perhaps my question is more about being extendable or pluggable. What would a minimum look like? Is it possible to show that here?
edit: how about this? Is something a CMS if it is not extendable and/or pluggable?
I think this is really impossible to say. We all manage content. The "system" is just whatever mechanism you use to do so(dragging and dropping in Explorer or committing content changes via a SQL query). To say there is a minimum amount of code needed really isn't indicative. What is indicative is how often you find yourself making mistakes and how easy it is for a given user of a given skill level and knowledge to execute the functions in the designed system. That tells you the quality/degree of what you have in place being worthy of being called a "CMS."
Simply put a CMS is an application that allows the user to publish and edit existing web content.
In response to the edit:
A "good" CMS allows of extensibility. By using inheritence you can extend the functionality of a CMS outside of the core components provided. That's the magic.
About Extensibility:
Depending on the language/framework you want to build your CMS with, you can load pages or controls(ASP.NET) using command built into the framework. Typically what is being done is a parent class/interface is being defined that forces an module that is to be developed to follow some given standards:
Public MustInherit Class CMSModule
'Here you will define properties and functions that need to be global to all modules being developed to extend your CMS.
public property ModuleName as string
End Class
public class PlugInFooCMSPage
inherits CMSModule
end class
Then it's just a matter of simply loading a module dynamically in whatever construct a given language/framework provides.
Ultimately, a CMS is a system that lets you manage content, so it needs an user interface that is dedicated to letting you easily create, edit and delete pages on your website.
However, it's fairly usual to expect from a CMS to provide a browser-based WYSIWYG page editor, file uploading, image resizing, url rewriting, page categories and tags, user accounts (editor, moderator, administrator), and some kind of templae system.
Without dragging you into a theoretical explanation of what a CMS is and what it's not, perhaps some tutorials on the building methodology of a CMS will help you better understand.
http://css-tricks.com/php-for-beginners-building-your-first-simple-cms/
http://www.intranetjournal.com/php-cms/
A Content Management System is a System that Manages Content. :)
So if you got many pages that share the same layout, you can create a system that stores the content into a database and when a page is requested, it gets that content, merges it with a template that contains the page header, menu, etc.. and outputs the result.
The basis idea is that you don't want to copy HTML pages, and have to edit hundreds of them when you want to change your layout.
Such a system can be very complex, featuring wysiwyg editors, toolbars, version control, multiple user publishing and much more, but it could be as simple as a single page behind a standard loging, that contains only an input field for the title and a textarea in which you type the html content.

Developing a GUI Builder Application

I am looking for a nice framework for developing a GUI builder Application. We have an application where 100Os of custom data entry forms and their print formats are required and each client will need some modifications on these. We have a developed a product using java based open source templatnig frameworks so that the layout and field definition are stored in database and rendered dynamically to the user. We also have an appication to design these forms but cannot do visual design.
Now I am trying to make a Visual Form Designer application for generating these forms. Can any one suggest some open source frameworks than can be used? Can I use Eclipse Visual Editor? Or is it better to develop some kind of parser for HTML using AntLR and then parse the HTML output from already existing GUI builders like Dreamweaver to get the desired output?
Thanks and Regards,
-- Kannan
Oooh, great question!
I wouldn't know any readily availble framework that you can use. Depending on your needs however, I think rolling your own shouldn't be too hard.
First of all, you probably wouldn't want to give the users too much freedom. Freedom only gives them the opportunity to mess things up and make the resultant forms hard to use. I think from your description that the fields are pre-defined, so that the user only needs to customize which fields appear on a given form, and in what order. Order can be a simple thing like top-to-bottom. Some semi-intelligent automatic layouting could be used to conserve screen space. Adding a feature to group fields together would probably also be useful, and grouping would lead to some kind of standard "group" widget.
Accepting simplified functionality like this, you don't really need the flexibility of a full gui editor. A couple of listviews, maybe a property sheet and a preview window will be enough to give your users the functionality they need.
Of course, this only holds for screen forms. Print forms may be trickier to layout, as people may want to cram as many fields as possible into very little space so the entire form can fit on a single page or something. I really don't have any suggestions for you there, but maybe a similar "simplified" approach with some intelligent auto-layouting could work.
Overall, my advice would be: Keep It Simple! (S... ;)