Getting Start with GWT(Part II)

Back to our story, after creating source files, we can have a look in java files. GWT creator is able to generate a default application like "Helloworld". As the argument i used in this example, i try to find java file

jbolt.gwt.MyWebApp

 

The first impression of this file is that it is simliar to java swing. Widgets of HTML have been encapsulated as java objects. I begun with the method "onModuleLoad" whose name represents an initialized point possibly.

 

In order to abridge content, i split the source code to a couple of steps.

 

public void onModuleLoad() {

        final Button sendButton = new Button("Send");
        final TextBox nameField = new TextBox();
        nameField.setText("GWT User");
        final Label errorLabel = new Label();

 

        // We can add style names to widgets
        sendButton.addStyleName("sendButton");

        // Add the nameField and sendButton to the RootPanel
        // Use RootPanel.get() to get the entire body element
        RootPanel.get("nameFieldContainer").add(nameField);
        RootPanel.get("sendButtonContainer").add(sendButton);
        RootPanel.get("errorLabelContainer").add(errorLabel);

        ....

}

 

The above code segment does only show widgets initialization but not show any layout information or position related logics. I didn't want waste time to find correlate explanation in e-book, just used my experience to figure out where layout configuration probably locates. Suddenly, I noticed

 

RootPanel.get("nameFieldContainer")

 

It must return an object works like widget container.

I didn't think "nameFieldContainer" is a specific build-in parameter of GWT. It must be defined in some files so that certain declaration is able to be associated with the reference container. Therefore, I tried to find those related files by "Find in Path" (Idea is a real powerful toolkits). Got it! ahha, Here we are. It was found in

 

war/MyWebApp.html

 

<table align="center">
      <tr>
        <td colspan="2" style="font-weight:bold;">Please enter your name:</td>       
      </tr>
      <tr>
        <td id="nameFieldContainer"></td>
        <td id="sendButtonContainer"></td>
      </tr>
      <tr>
        <td colspan="2" style="color:red;" id="errorLabelContainer"></td>
      </tr>
    </table>
  </body>

 

I tried to find a joint of them. Unfortunately, nothing was found. So, i think it should base on naming restriction.

 

RootPanel.get("nameFieldContainer") returns container <td id="nameFieldContainer"></td> and html code "<input text="GWT User"..../>" represented by instance of nameField is put into this container during runtime (process of interpretting java code to js for development mode and compiling for product mode).

It equivalents to

<td id="nameFieldContainer"><input text="GWT User"...></td>

 

In order to prove this idea, i tried to debug and to investigate what happened within this method.  I could understand the debug method described in GWT in action. Go ahead directly! I used the basic method to debug, JDPA, chanaged jvm arguments in Ant file ./build.xml. Just located ant task "devmode" and adapted jvm setting.

 

<target name="devmode" depends="javac" description="Run development mode">
        <java failonerror="true" fork="true" classname="jbolt.gwt.MyWebApp" jvmargs="-Xnoagent -Djava.compiler=NONE -Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=5005">

 

Created a remote debug setting in idea and set port of listener as 5005, then run "ant dev" again.

 

[java] Listening for transport dt_socket at address: 5005

 

Great! Debugging could work. I created a debug point at

 

RootPanel.get("sendButtonContainer").add(sendButton);

After, i pasted url in browser and waited suspend of line breakpoint. What's the result?

Before step over the above line, the debug context showed as follows

 

sendButton=<BUTTON class=gwt-Button tabIndex=0 type=button>Send</BUTTON>

nameField=<INPUT class=gwt-TextBox tabIndex=0 value="GWT User">

RootPane.get("sendButtonContainer")=/r/n<TD id=nameFieldContainer></TD>

 

After this step, take a look!!!
RootPane.get("sendButtonContainer")=/r/n<TD id=nameFieldContainer><INPUT class=gwt-TextBox tabIndex=0 value="GWT User"></TD>

 

 

The result absolutely proves my assumption. GWT java widgets encapsulate html widgets and are able to be convert to HTML code by "toString()".  It means when the interpretation is proccessed, this method can generate html code and render web page at backend (So far, i haven't see the souce code of GWT so that i can not exactly know the sequence of interpretation).

I think although it is a just beginning of learning GWT, i have already had a brief concept of GWT. As summary, i conclude it as the following points.

1. Use traditional html as widget container including layout, style, js lib importing, etc.

2. Use GWT java lib to create widget instance at backend so that it gives benfits of OO such as encapsulation of widgets and handle logic easily and clearly.

3. Logics handled at backend are still tackled by js (GWT provides) at the end. Fortunately, developer doesn't need to concern certain js in fact.