As I step out onto the icy lake of GWT abandoning all I know about .Net I make my first foray into the UIBinder model. One of the attractions of the latest version of GWT 2.0 is the inclusion of the UIBinder model. At present there aren’t too many examples using this new methodology so documentation is scarce. In an effort to reduce the amount of factors that prevent me from learning this technology, i.e. reducing the amount of things that can go wrong in a project, without having the knowledge yet to quickly fix them. Did I mention that I am also learning Java too? I am attempting to convert the standard Hello World project to use the UI Binder model.
The standard project is pretty cool, when you create a GWT project a Hello World application comes pre created which places a text box on the screen and after pressing a button throws a dialog telling you what you just pressed. It send’s the input to the server and shows the returned message. It’s simple enough to allow most people to follow the code. Since there aren’t many UIBinder examples I thought why not convert this application to a UI Binder so it looks exactly the same. So here goes..
Step 1 : Create a nEW PROJECT
Create a new Google App Engine Project in Eclipse. I have assumed that you know how to install Eclipse and all the required Google SDKs for GWT and Google App Engine. So go ahead and create a project and debug it. You should see an application that looks something like the picture below:
Step 2 : Create UI BindER PACAKGE
Start as you mean to go on by creating an easy to understand project. Lets create a new package for our UIBinder controls. Since my company is called Live For Now Studios lets call it:
com.livefornowstudios.demos.helloworld.client.uibinder
STEP 3 : Create new UIBINDER CONTROL
From File –> New –> UIBinder select this item and see the image below for the elements added to it:
In the image the package is: com.livefornowstudios.demos.helloworld.client.uibinder
After clicking finish this should create two files in your new UIBinder package these files will be:
- LandingPage.java (The behind the scenes code)
- LandingPage.ui.xml (The visual component)
step 4 : Create the VISUAL CODE
In the file LangingPage.ui.xml we are going to complete the visual components of the Hello World application. Since I am new to this I am going to explain the elements I know, but it took a bit of fiddling to get this working. Visually it doesn’t look as identical to the Hello World application as I would like but if faithfully replicates what is happening. So it is a good starting point for me and hopefully for yourself. See the main visual code sections below:
<g:VerticalPanel >
<g:HTML>
<h1>Web Application Starter Project</h1>
<b>Please enter your name:</b>
</g:HTML>
<g:HorizontalPanel>
<g:TextBox ui:field="nameField"></g:TextBox>
<g:Button ui:field="sendButton" text="Send" />
</g:HorizontalPanel>
<g:DialogBox ui:field="dialogBox">
<g:HTMLPanel>
<b>Sending name to the server:</b>
<g:Label ui:field="textToServerLabel"></g:Label>
<br /><b>Server replies:</b>
<g:Label ui:field="serverResponseLabel"></g:Label>
<g:Button ui:field="closeButton" text="Close" />
</g:HTMLPanel>
</g:DialogBox>
</g:VerticalPanel>
Vertical Panel: This is the main wrapper for the control which ensures that the items placed in it appear in a consistent vertical arrangement.
Header: This is the first element wrapped in the <h:HTML> tags. This allows us to enter real HTML to add a header to the control.
HorizontalPanel: This panel ensures that anything added to it flows horizontally across the screen.
TextBox,Button: The <g:TextBox> controls are GWT implementation of a Text Box they are in ASP.Net terms the equivalent of <ASP:TextBox>. Here we have added a Text Box and a button to initiate the postback.
DialogBox: This is the dialog box that is displayed once the message is received from the server.
step 4 : Add the CODE BEHIND
Most of this code is replacing what the EntryPoint code was doing in the original HelloWorld. However now it is nicely encapsulated in a UIBinder Object and could be used throughout your application.
Step 1: Declare UI Objects
Somewhere near the top declare the objects in the UI xml declaration:
@UiField Button sendButton;
@UiField PopupPanel dialogBox;
@UiField TextBox nameField;
@UiField Label textToServerLabel;
@UiField Label serverResponseLabel;
@UiField Button closeButton;
Step 2: Create constructor
Set the default behaviour of the objects in the contructor:
public LandingPageHeader(String firstName) {
initWidget(uiBinder.createAndBindUi(this));
sendButton.setText(firstName);
dialogBox.setVisible(false);
}Step 3: Add event clicks
@UiHandler("sendButton")
void sendButton_onClick(ClickEvent e) {
sendNameToServer();
}
@UiHandler("closeButton")
void closeButton_onClick(ClickEvent e) {
dialogBox.hide();
sendButton.setEnabled(true);
sendButton.setFocus(true);
}Step 4 : Handle Server-Client Interaction
/**
* Send the name from the nameField to the server and wait for a response.
*/
private void sendNameToServer() {
sendButton.setEnabled(false);
String textToServer = nameField.getText();
textToServerLabel.setText(textToServer);
serverResponseLabel.setText("");
greetingService.greetServer(textToServer,
new AsyncCallback<String>() {
public void onFailure(Throwable caught) {
// Show the RPC error message to the user
dialogBox.setTitle("Remote Procedure Call - Failure");
serverResponseLabel.addStyleName("serverResponseLabelError");
serverResponseLabel.setText(SERVER_ERROR);
dialogBox.center();
closeButton.setFocus(true);
}
public void onSuccess(String result) {
dialogBox.setTitle("Remote Procedure Call");
serverResponseLabel.removeStyleName("serverResponseLabelError");
serverResponseLabel.setText(result);
dialogBox.center();
closeButton.setFocus(true);
}
});
}
Step 5 : Change EntryPoint Code
Step 1 : Declare new control
private LandingPageHeader landingPageHeader = new LandingPageHeader("Hello"); Step 2: Change OnModuleLoad Control
public void onModuleLoad() {
// Use RootPanel.get() to get the entire body element
// Add the new UIBinder version of this control to the web page.
RootPanel.get().add(landingPageHeader);
}Final Thoughts
These changes highlight what needs to be done to change the UIBinder. If you have any questions please drop me a line.
The full code can be downloaded here project title “HelloWorld” - http://code.google.com/p/gwt-20-demos/
