GWT 2.0
Subscribe

From OpenNMS

Jump to: navigation, search

Adding support for GWT 2.0 components

Develop Replacement Strategy

Now that Google Web Toolkit (GWT) 2.0 has been released along with tons of cool features we want to take advantage of that in the OpenNMS webapp.

Developing GWT 2.0 Applications/Components

Before reading this please see the Eclipse and OpenNMS section of the wiki.

Installing the OpenNMS GWT Archetype

We've created an archetype that resides in the opennms-tools directory. Install the archetype by running the mvn install command in the opennms-gwt-archetype directory

Creating Your GWT Module

On the commandline navigate to the directory within the OpenNMS project and run:

mvn archetype:generate -DarchetypeCatalog=local

This will create an OpenNMS gwt base project with a really simple example app.

Next you will want to import this Maven module into OpenNMS to develop. Go to File>Import and select the Existing Maven Project item under the Maven folder. Click the Browse button and navigate to your project folder. Then click finish.

Add the Google Web Toolkit and AppEngine project natures to the project but right clicking and under the Google selection select the Web Toolkit Settings... and check the Use Google Web Toolkit, check your settings then click OK. Then do the same thing for App Engine by right clicking the project and under the Google option select the App Engine Settings..., check the Use Google App Engine, check your settings then click OK. You may have to go to Project->Clean at this point.

DevMode

To run in DevMode through Eclipse you can right click no your project and select Run As>Run Configurations..., the Run Configuration dialog box will open. Select the Web Application configuration type then right click and select New. Under the Arguments tab in the Program Arguments box you need to add the -startupUrl parameter.

The following argument sets the startupUrl to the default app that is created with the archetype.

-startupUrl org.opennms.web.gwt.Application/Application.html

After you have set the startupUrl property you can now run the configuration. Once the App Engine server starts up you it should show you the URL that you can paste in your browser to run Dev Mode. Now any changes you make in your app you can see them when you refresh your browser.




Implement Strategy Basics

The CoreWeb.gwt.xml module is the root module that is imported in the header.jsp file. This module will serve as the entry point to all other sub modules.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.0.0//EN" "http://google-web-toolkit.googlecode.com/svn/tags/2.0.0/distro-source/core/src/gwt-module.dtd">
<module>
  <inherits name="com.google.gwt.user.User" />
  ...
  <source path="client"/>
</module> 


Deploy Strategy Framework

The CoreWeb module serves as the base module for the webapp. This module will inherit from other modules and serve the central hub for including new GWT features in the webapp. For example if you created a new module MyWidget.gwt.xml in the package org.opennms.web.widget you could add the following tag to the CoreWeb module file.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.0.0//EN" "http://google-web-toolkit.googlecode.com/svn/tags/2.0.0/distro-source/core/src/gwt-module.dtd">
<module>
  <inherits name="com.google.gwt.user.User" />
  <inherits name="org.opennms.web.widget.MyWidget"/>
  <source path="client"/>
</module> 

Now the CoreWeb module is inheriting the MyWidget. Inheriting a module in the CoreWeb module is just the beginning, in the MyWidget module you can define an entry point class, this class serves as the starting point. For getting starting with building GWT applications, widgets and components you can visit Google's excellent documentation here


Develop Replacement "Widget"

Since the CoreWeb module is going to be on every page we need a way to make sure that every widget defined in sub-modules are put on the correct place, and because of this when developing your own feature you can come up with your own tag that is placed in the html for the page. For example if I wanted to create a new component for the main page called "Node Outage View", I could create a tag like so, <opennms:nodeOutageView id="nodeOutageView"/> then in your Entry Point class you can search the DOM for that specific tag and do something like the following.

public void onModuleLoad() {
  NodeList<Element> elements = Document.get().getElementsByTagName("opennms:panel");
  if(element.getLength() > 0) {
      Element element = element.getItem(0);
      RootPanel.get(element.getId()).add(new NodeOutageView(element));
  }
}

The above is an example snippet of finding DOM elements and adding your widget to them by way of the RootPanelobject. On the page itself you could have the following.

<html>
  <head/>
  <body>
     <opennms:nodeOutageView id="nodeOutageView"/>
  </body> 
</html>

Your entry class would find that element and add your view to it.

Now I could have CoreWeb inherit the module for this Entry Point it would search the page for a the correct tag place the NodeOutageView component. This will be a pretty handy feature as we develop more and more components.


Unit Test Web UI Components

Setting Up for Unit Testing GWT

GWT tests are JUnit 3 tests and will have a specific naming scheme, they are a little different than regular JUnit test and we don't want Surefire to run them. The naming convention for GWT tests is to append TestGwt to the name of the JUnit test. For example if I was testing the CoreWeb components I would name unit test "CoreWebTestGwt", the gwt-maven-plugin is configured to look the following pattern "*TestGwt.java".

It is recommended that you create a TestSuite to run all of your GWT Unit Tests, for every test GWT has to do a lot of setup, if you run the tests in the suite GWT only has to initialize once across multiple tests. This of course speeds up the testing time.

Creating and Running Tests

You can run your tests in Maven and Eclipse, both the test suites and tests themselves. To read more about how to create unit tests you can go to GWT Unit Testing Docs and follow the Creating a Test Case by Hand section. Do remember to follow the naming convention about. All tests should be <TestName>TestGwt.java and all test suites should be Gwt<Suite Name>Suite.java.

Once you have created a test and or test suite to run the test in Eclipse you simply right click on the test/suite and select run as->GWT JUnit Test.