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:<\/p>\n
\r\n<HTML>\r\n <HEAD>\r\n <TITLE>HTML for WebApp<\/TITLE>\r\n <!-- You need this to reference your GWT module -->\r\n <META name='gwt:module' content='com.juixe.gwt.WebApp'>\r\n\r\n <SCRIPT language="javascript" src="gwt.js">\r\n <\/SCRIPT>\r\n\r\n <STYLE><\/STYLE>\r\n <\/HEAD>\r\n\r\n <BODY>\r\n <H1>My WebApp<\/H1>\r\n Any text or HTML goes here.\r\n <DIV id="changeOnRollOver"><\/DIV>\r\n <\/BODY>\r\n<\/HTML>\r\n<\/pre>\nThe 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.<\/p>\n
\r\n<meta name='gwt:module' content='com.juixe.gwt.WebApp'>\r\n<\/pre>\nWhat 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:<\/p>\n
\r\n\/**\r\n * Entry point classes define onModuleLoad().\r\n *\/\r\npublic class WebApp implements EntryPoint {\r\n\r\n \/**\r\n * This is the entry point method.\r\n *\/\r\n public void onModuleLoad() {\r\n\r\n \/\/ Create Label widget\r\n final Label roller = new Label(\\"Default value\\");\r\n\r\n \/\/ Associate HTML element to GWT widget\r\n RootPanel.get(\\"changeOnRollOver\\").add(roller);\r\n\r\n \/\/ Add mouse lister to label widget\r\n roller.addMouseListener(new MouseListener() {\r\n public void onMouseEnter(Widget sender) {\r\n roller.setText(\\"Entered element...\\");\r\n }\r\n\r\n public void onMouseLeave(Widget sender) {\r\n roller.setText(\\"Leaving element...\\");\r\n }\r\n\r\n \/\/ Do nothing\r\n public void onMouseDown(Widget sender, int x, int y) {}\r\n\r\n \/\/ Do nothing\r\n public void onMouseMove(Widget sender, int x, int y) {}\r\n\r\n \/\/ Do nothing\r\n public void onMouseUp(Widget sender, int x, int y) {}\r\n });\r\n }\r\n}\r\n<\/pre>\nLet 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. The first thing I do in the onModuleLoad is create a GWT Label widget called roller. There are a lot of widgets such as labels, buttons, check boxes, tab panels, menu bars, trees, and a whole slough of other widgets. After I instantiated a Label associates the roller Label I just created to my DIV identified as changeOnRollOver in my HTML file. You can associate any GWT widget to any HTML element using code similar to the following:<\/p>\n
\r\nRootPanel.get(elementNameStr).add(gwtWidgetObject);\r\n<\/pre>\nThe last thing to go over is how to wire functions to widget events. In the above code, I register a MouseListener to it via it’s addMouseListener method. For this example I am not interested in all the mouse listener methods but I still need to implement them. I am only interested in the onMouseEnter and onMouseLeave events. For this events I will just change the text of the roller Label to indicate if I am entering the element or leaving it.<\/p>\n
Here is a suggestion to the GWT team: Add a MouseAdapter to the API, please!!!<\/p>\n
I can run and debug this code from Eclipse or I could compile it using the WebApp-compile batch file to create the JavaScript and HTML files required to test this in my favorite browser. The WebApp-compile batch file will create a www folder under my webapp project (you might need to refresh you project in Eclipse).<\/p>\n
This a somewhat trivial example but if I wanted to do the same thing in notepad using just HTML and JavaScript this is how it would look:<\/p>\n
\r\n<HTML>\r\n <HEAD>\r\n <TITLE>HTML for WebApp<\/TITLE>\r\n <STYLE><\/STYLE>\r\n <\/HEAD>\r\n\r\n <BODY>\r\n <H1>My WebApp<\/H1>\r\n Any text or HTML goes here.\r\n <DIV\r\n onmouseover=\\"this.innerHTML='entered'\\"\r\n onmouseout=\\"this.innerHTML = 'left'\\">\r\n \r\n <\/DIV>\r\n <\/BODY>\r\n<\/HTML>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","footnotes":""},"categories":[13,14,15,16,3],"tags":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p902K-1P","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/posts\/113"}],"collection":[{"href":"https:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/comments?post=113"}],"version-history":[{"count":2,"href":"https:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/posts\/113\/revisions"}],"predecessor-version":[{"id":835,"href":"https:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/posts\/113\/revisions\/835"}],"wp:attachment":[{"href":"https:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/media?parent=113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/categories?post=113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/tags?post=113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}