Please refer to the recipe Creating a Web Project using the Wizard for project creation and the necessary tools required to proceed with this recipe.

For the Google Web Toolkit visit:

http://code.google.com/webtoolkit

Download and unpack the SDK to the directory of your choice.

To download GWT4NB, open NetBeans:

Follow the installation steps on the NetBeans Plugin Installer Window until completion.

Notice that all of these tools are necessary for us to continue with our recipe.

With them installed, let's start our recipe.

We will start by creating the GWT Web App project:

Upon project creation, the IDE will automatically open Main.gwt.xml.

Click on its tab and select XML:

You can either add or uncomment the line which contains:

<inherits name='com.google.gwt.user.theme.standard.Standard'/>

To edit MainEntryPoint.java, we will need to perform multiple steps, starting by adding local variables.

Right after the class declaration, public class MainEntryPoint extends EntryPoint, add:

private final String NETBEANS_LOGO = "http://netbeans.org/images_www/v5/nb-logo2.gif";
private final String HAPPY_FACE = "http://upload.wikimedia.org/wikipedia/commons/2/23/Alejoy.gif";
private final String ANGRY_FACE = "http://upload.wikimedia.org/wikipedia/commons/8/87/ Face-angry_red.png";
private VerticalPanel eastPanel = new VerticalPanel();
private VerticalPanel mainPanel = new VerticalPanel();
private Image netbeansImage = new Image(NETBEANS_LOGO);
private DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.EM);
private Tree tree = new Tree();
private TreeItem treeItem = new TreeItem("Social Network");
private DatePicker calendar = new DatePicker();
private final Label eventsLabel = new Label();
private MenuBar outerMenuBar = new MenuBar();
private MenuBar innerItem;
private final TextBox textBox = new TextBox();
private Button shareButton = new Button("Share");

Let's resolve the import errors:

Press Ctrl+Shift+I.

The Fix All Imports window should be exactly like the following screenshot:

Click OK and save the File.

In the same class, let's add the createTreeItem method. Right after the onModuleLoad method, write the following:

private void createTreeItem() {
treeItem.addItem("Updates");
treeItem.addItem("Photos");
treeItem.addItem("Videos");
treeItem.addItem("Notes").addItem("My note");
treeItem.addItem(new TreeItem(new CheckBox("Privacy?")));
tree.setPixelSize(20, 20);
tree.addItem(treeItem);
}

Resolve the import errors by pressing Ctrl+Shift+I and save the File.

After the createTreeItem method, add:

private void createCalendar() {
calendar.addValueChangeHandler(new ValueChangeHandler() {
public void onValueChange(ValueChangeEvent event) {
Date date = (Date) event.getValue();
String dateString = DateTimeFormat.getMediumDateFormat().format(date);
eventsLabel.setText("Events of:" + dateString + "
 blahblah");
}
});
calendar.setValue(new Date(), true);
eastPanel.add(new Label("Events:"));
eastPanel.add(calendar);
eastPanel.add(eventsLabel);
}

Let's resolve the import errors:

Press Ctrl+Shift+I.

The Fix All Imports window should be exactly like the following screenshot:

Click OK and save the File.

After the createCalendar method, add:

private void createMenuBar() {
Command command = new Command() {
public void execute() {
Window.alert("Command executed.");
}
};
for (int i = 0; i < 5; i++) {
innerItem = new MenuBar(true);
for (int j = 0; j < 5; j++) {
innerItem.addItem("Inner Item" + j, command);
}
outerMenuBar.addItem("Menu" + i, innerItem);
}
textBox.setVisibleLength(150);
}

Let's resolve the import errors:

Press Ctrl+Shift+I.

The Fix All Imports Window should be exactly like the following screenshot:

Click OK and save the File.

After the createMenuBar method, add:

private void createButtonBehavior() {
shareButton.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
HorizontalPanel blahPanelTemp = new HorizontalPanel();
blahPanelTemp.add(new Image(HAPPY_FACE));
blahPanelTemp.add(new Label(textBox.getText()));
mainPanel.add(blahPanelTemp);
}
});
}

Once again, resolve the import errors by pressing Ctrl+Shift+I and saving the File.

After createButtonBehavior method, add the code to create the UI:

private void createUI() {
mainPanel.add(new Label("News:"));
mainPanel.add(textBox);
mainPanel.add(shareButton);
HorizontalPanel blahPanel = new HorizontalPanel();
blahPanel.add(new Image(ANGRY_FACE));
blahPanel.add(new Label("BLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAH!!!"));
HorizontalPanel blahPanel2 = new HorizontalPanel();
blahPanel2.add(new Image(HAPPY_FACE));
blahPanel2.add(new Label("blahblahblahblahblahblahblahblahblahblah :)"));
mainPanel.add(blahPanel);
mainPanel.add(blahPanel2);
dockLayoutPanel.addNorth(outerMenuBar, 2);
dockLayoutPanel.addSouth(netbeansImage, 4);
dockLayoutPanel.addWest(tree, 10);
dockLayoutPanel.addEast(eastPanel, 15);
dockLayoutPanel.add(mainPanel);
}

Save the file.

Finally, replace the available onModuleLoad method, in the beginning of the class, with:

public void onModuleLoad() {
createTreeItem();
createCalendar();
createMenuBar();
createButtonBehavior();
createUI();
RootLayoutPanel panel = RootLayoutPanel.get();
panel.add(dockLayoutPanel);
}

Resolve the last import error by pressing Ctrl+Shift+I and then save the File.

When the new GWT project is created, GWT4NB provides us with a complete project structure along with GWT-specific configuration files, GWT's entry point class, and a basic HTML page.

It is important to understand those files in order to proceed:

With our Module Descriptor, it is possible to give themes to our application. This is done by either adding or just uncommenting the following line of code:

<inherits name='com.google.gwt.user.theme.standard.Standard'/>

We start our application by adding the necessary UI items as global variables. This is not the best practice, but for brevity's sake, we will use it anyway.

We use a DockLayoutPanel to structure the UI components of our application:

DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.EM);

On the left-hand side, we add the TreeItem, with the createTreeItem methods, which is the menu where the users can find Updates, Photos, Videos, and so on. This is not dynamic since we do not have Updates, Photos, and Videos in our recipe.

Then the tree is added to the dockLayoutPanel:

dockLayoutPanel.addWest(tree, 10);

With the createCalendar, we add an Event Calendar to the right-hand side of the application. This is achieved by creating its own panel and passing the reference of the calendar itself. The calendar behavior can be triggered by clicking on each day or date.

The behavior is executed by using the following method:

public void onValueChange(ValueChangeEvent event)

Once clicked, the method changes the contents of a Label with the Events of that selected date.

At the top of the application window, we create and add a MenuBar. The MenuBar is dynamically created and each inner item of the menu has an event which pops up an alert window when clicked.

The share button is added inside the main panel. This button is responsible for retrieving the information from the Text Box, creating a new Horizontal Panel, adding an image and information to the Horizontal Panel, and finally adding this panel to the main panel.

This is all achieved by the clickHandler Inner Class and subsequent onClick method:

shareButton.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
//..code
}
});

Adding an instance of a class, in our case the ClickHandler, is a common practice in UI development in Java, since it reduces the amount of code necessary for subclassing a specified handler and then implementing the method. Note that while this is convenient, if many handlers are used throughout the code, it is best to actually have a separate class for event handling.

The createUI method is responsible for assembling all of the component parts of the application and giving form to it.

At the end of this method, the dock panel receives the locations of each widget or panel created for that purpose.

Gluing all that together is the onModuleLoad, which creates all the UI components and adds them to the RootLayoutPanel, which binds together the Java class, the HTML page, and the Dock Layout Panel.