bundling resources in a smartGWT component

It required quite a bit of digging to get this to work. Unfortunately, the smartGWT documentation is not overly clear on where to put your resources when you want to make them available as a library in a jar file.

In a normal application, when you want to define a icon on a button

button.setIcon( "myIcon.png" );
can be used and the icon in placed in the “images” directory in your war.

When this line would be included in a library, the image needs to appear in the proper place automatically.

The solution is to create a “resources.gwt.xml” file. So if your module description is “MyModule.gwt.xml”, you would place a “MyModuleResources.gwt.xml” file next to that (so in the sale package). The contents for that file would be

This file instructs GWT that some resources which need to be copied into your war are available in the “public” folder.

So below the package where your “gwt.xml” files are found, you should create a “public” package and place all the images in there.

Unfortunately though, this does not quite fix all. The files will be placed in a directory with the name of your application, which differs based on the use of your library. Fortunately, smartGWT already has the “isomorphic” directory which fixes this. To be able to use this directory, you should add another directory under “public” named “sc” (which is where smartGWT will put things). I would recommend to add another directory to avoid clashes with other libraries (“myLibrary” in the example below).

The structure becomes

|_ package
   |_ name
      |_ public
         |_ sc
            |_ myLibrary
               |_ myIcon.png

You can now use a magic trick to set your resource by using the “[ISOMORPHIC]” prefix. The code to set your icon will become

button.setIcon( "[ISOMORPHIC]/myLibrary/myIcon.png" );

This fixes things when using smartGWT components, but what if you want to include the reference another way (for example for a SVG or VML link).

To assure smartGWT can find the resources, the “isomorphicDir” variable should be set in your html files.

<script type="text/javascript" language="javascript">var isomorphicDir = "myApplication/sc/";</script>
<script type="text/javascript" language="javascript" src="myApplication/myApplication.nocache.js"></script>

You can now read this value in your code using something like

private native String getIsomorphicDir()/*-{
    return $wnd.isomorphicDir;

Note that you have to use “$wnd” instead of “window” to be able to reference the variable.

This can now be used in calculation to build the url to the resource

getIsomorphicDir() + "myIcon.png"

Leave a Reply

Your email address will not be published. Required fields are marked *

question razz sad evil exclaim smile redface biggrin surprised eek confused cool lol mad twisted rolleyes wink idea arrow neutral cry mrgreen