Implement header, footer and menubar in Google Web Toolkit (GWT) - gwt

I just started learning Google Web Toolkit (GWT). How do I implement header, left navigation bar and footer in my GWT application?
How can i place the header and footer in one page and reuse the same in all other pages?
Please help me how can i achieve the above requirement?

I like using SplitLayoutPanel. Here you will basically only change the center panel and leave northe west etc alone.
You can find a very good overview here.

You can create a template in Ui:Binder with your basic layout, and use this template for all new pages.
Another option is to create a custom widget for you menu, header and footer. Then you again can use a template for new pages, but instead of including each button, label, etc., you just include your custom headerWidget, footerWidget and menuWidget.
As others already suggested, you use one of the LayoutPanels to organize your page. My favorite is LayoutPanel. You add your headerWidget, footerWidget, and menuWidget to this LayoutPanel and specify their position.
I recommend that you use a Ui:Binder for this: it's a more convenient way to do layouts, it's very visual (helps to cut on the number of mistakes), and much easier to maintain.

Related

Dynamically add tabs in Tablayoutpanle using UIBinder

To be clear i'm a newbie to GWT.I was looking around for samples to implement dynamic tabs, and found this link, http://www.java2s.com/Code/Java/GWT/AddingnewtabdynamicallyExtGWT.htm , in which they make use of GXT.But my question is,how can i implement dynamic views using UIBinder?.I want to implement something similar to browser tabs.Each newly created tab has a split panel view, whose content will be populated making a rpc request.My question is , how is the history mechanism handled when user switches between tabs?.Can anyone provide with samples?Thanks
You declare your TabLayoutPanel together with the initial/default tabs in UiBinder. Then you can add or remove tabs from this panel in your Java code.

GWT - open source UI lib

I am looking for an Open Source lib for GWT 2.3+ which has dynamic TabbedPane (with close tab button, scrolling, events support etc). I googled but couldn't find any. So I need your skilled advice. Is there such a lib and where to find it?
Thanks
SmartGWT? here is the link to the showcase of TabSet component. What do you mean by events? EventBus? I was using the GWTP framework for this purpose.
EDIT:
license
You can easily build it as a custom widget in GWT.
You need a top panel to show your "tabs" and a panel below it to show a tab content. When a user clicks on a tab, you populate the bottom panel with a selected tab content. You can easily add a button to your "tab" widget and attach a ClickHandler to it to remove the corresponding tab from the top panel. This is basic GWT - you don't need an outside library for it.
You could look at the gxt advanced tabs example and the gxt overview
It is gpl3, but that said it is more like Android where the actual development is behind closed doors unless you have a support contract, and then the src code is available when a version is released.
There are some exceptions available if you have a FLOSS project that is not compatible with GPL3 -- say for example your project is under an Apache license but you want to include gxt (of course, the gxt portion of the code must still comply with gpl3 requirements)
gxt license

In LWUIT, how can i add multiple container/Layout on single Form?

In J2ME I am Using LWUIT library.
My problem is I want to add various component on single Form using different layout or Container. I am looking for some code or example.
Example..
add Header image on top of the Form.
Adding two label, two textfield on
one Container/layout and Two button
on another Container/layout. Design
like Login Form.
add Footer image on bottom of the
Form.
Set the title image of the form for showing header image. Set the softbutton image of the form for showing footer image.
Normally you can use the border layout or box layout for both container and form. See the LWUITDemo application on LWUIT repository. It will helps you. Also see the same sample examples,
The Lightweight User Interface Toolkit (LWUIT): An Introduction
Using LWUIT layouts
use different container with different layout to add in form
i.e set form to Borderlayout add title container to north and footer container to south
next use another container with your required layout and add it to center in form, thus create container hierarchy
For samples on how to arrange components in various layouts you can look within the LWUIT 1.5 distribution and on demos such as the LWUITDemo which has a layouts demo within it. Keep in mind that layouts can be nested.
The LWUIT blog which I maintain contains lots of samples of layout usage.

multiple modules in GWT

I know there are many questions concerning this topic but after reading them all I'm even more confused.
I have an application that manages contacts. There are three pages:
Add contact
Show contacts
Modify contact
And now I have no idea what structure to give to my project: should I create three different modules? if so, what would be the best package structure? and how would I call other modules within a page? for example, from the 'add contact' page there should be a button to the 'show contacts' page, and from this one there should be button/links to 'modify contact' and 'add contact'.
would it be enough to add this line to the corresponding buttons event handlers?
Window.Location.assign("showcontacts.html");
(or just create a link to "showcontacts.html" if it's the case)?
GWT is not suited for applications with multiple pages. What you can do is
create a page with multiple div's. Create the links on the top of the page. When any of the link is clicked you can then show or hide divs as per your need. This is how I had done it for a different app.
Hope that helps
To allow multiple pages to be selectively displayed within a single module, I use one of two techniques:
use a SimplePanel or one of its
derivatives (e.g. LazyPanel,
ScrollPanel).Use setWidget to change
the page. Each "page" is a widget.
For example, I am doing a project
with a menubar. When "Home" menuitem
is clicked, the menu command
replaces the body of the simplepanel
by setting its widget to the Home
widget. Likewise for login, etc
menuitems.
A SimplePanel allows only one widget.
Therefore, you do not addWidget to it but setWidget to it.
use tab. Either TabLayoutPanel or
TabPanel. I prefer using the
TabLayoutPanel. You have to meticulously
set/design the CSS for TabLayoutPanel, otherwise
you would only see a blob of text hanging around.
I also try to encapsulate a "page" widget in a lazypanel (which is a derivative of a simple panel. That will prevent instantiation of any pages that may not be used in a module with a large number of "pages".
GWT is indeed suitable for ui presentation with multiple pages. In fact, one of the advantages of GWT over JSP is that you can change a page without a browser refresh/fetch flicker - one of the extremely strong reasons why you would want to use GWT for a web app with multiple pages.
Seems that GWT MVP framework suits your needs:
http://code.google.com/webtoolkit/articles/mvp-architecture.html

GWT Collapsible Panel found in common google services?

The GWT Incubator contains this widget, but it doesn't provide the clean look and feel I am looking for. The Same page does show precisely the widget I would like to use:
A thin resize bar with the small middle arrow icon which is clicked to hide/show a docked panel on the side of the page.
The widget appears on many google services pages, which makes me suspect that it may be a common widget:
Google Reader
Slightly modified (animated) version on Maps
Does anyone where to find or know how to build this widget in GWT.
How about using a VerticalSpliPanel and overriding the OnClick event? On click you can hide your navigation panel.
I don't think Maps and Google Reader are build using GWT. I know Wave is, and it doesn't use the collapsible panel you're looking for... My guess is that this specific widget is not available in GWT but you may be able to find a suitable replacement. Let me know if you do.