Advertisement

You May Like






Online Service

Web Tools
Escape HTML

Subscribe to RSS through Email:

Enter your email address:



Home arrow Article & Tutorial arrow Article & Tutorial arrow Articles & Tutorials arrow AJAX 
ALL |0-9 |A |B |C |D |E |F |G |H |I |J |K |L |M |N |O |P |Q |R |S |T |U |V |W |X |Y |Z

Article & Tutorial arrow Articles & Tutorials arrow AJAX

Google Web Toolkit Tutorial: The Break Down Print E-mail

 

  Google Web Toolkit Tutorial: The Break Down - By juixe

There was a lot of buzz at JavaOne regarding the Google Web Toolkit (GWT). Basically, GWT allows a developer to write a AJAX powered web application in Java!! The Java code gets ‘compiled’ to a set of plain old text files containing your JavaScript code. For example, the GWT will translate your rollover actions written in Java to JavaScript functions. This confused me for a second so I’ll stress again that you compile your web application written in Java to plain old JavaScript and HTML that can run in any browser.

What this means is that if you are a Java developer you don’t have to learn JavaScript and all the idiosyncrasies of every browser to develop a stable and reliable AJAX web application.

 

To get started download the GWT from Google, configure it with Eclipse, and create a new web application.

I created and imported into Eclipse a project called WebApp. In my Package Explorer under webapp > src > com.juixe.gwt I have a public directory that contains my WebApp.html. This file was created by the applicationCreator batch file provided with the GWT. For the purpose of this walk through I modified my WebApp.html as follows:

<HTML>
<HEAD>
<TITLE>HTML for WebApp</TITLE>

<!-- You need this to reference your GWT module -->
<META name='gwt:module' content='com.juixe.gwt.WebApp'>

<SCRIPT language="javascript" src="gwt.js">
</SCRIPT>

<STYLE>
</STYLE>
</HEAD>

<BODY>
<H1>My WebApp</H1>

Any text or HTML goes here.

<DIV id="changeOnRollOver"></DIV>

</BODY>
</HTML>

The HTML is simple to describe itself. I have a body that can contain any HTML. I can use CSS style sheets. The only tag that seems out of place it he meta tag.

<meta name='gwt:module' content='com.juixe.gwt.WebApp'>

What I would like to do at this time is write some some GWT based Java code to modify the text inside this DIV identified as changeOnRollOver. To do this I had to modify WebApp.java file under webapp > src > com.juixe.gwt.client. Here is the code for WebApp.java:

/**
* Entry point classes define onModuleLoad().
*/
public class WebApp implements EntryPoint {

/**
* This is the entry point method.
*/
public void onModuleLoad() {

// Create Label widget
final Label roller = new Label(\"Default value\");

// Associate HTML element to GWT widget
RootPanel.get(\"changeOnRollOver\").add(roller);

// Add mouse lister to label widget
roller.addMouseListener(new MouseListener() {
public void onMouseEnter(Widget sender) {
roller.setText(\"Entered element...\");
}

public void onMouseLeave(Widget sender) {
roller.setText(\"Leaving element...\");
}

// Do nothing
public void onMouseDown(Widget sender, int x, int y) {}

// Do nothing
public void onMouseMove(Widget sender, int x, int y) {}

// Do nothing
public void onMouseUp(Widget sender, int x, int y) {}
});
}
}

Let me break this code down. This WebApp class needs to implement the onModuleLoad method of the EntryPoint interface. This is called when you page loads. I think of this method as the equivalent to the JavaScript onload event handler.

Read more...
  

 

 



or browse in 35 languages:

Subscribe To

 Subscribe in RSS

Follow me...

Join MyiBook Network

Top 10 Most Downloaded