Beginner: Using Icons: Different methods

[toriacht]

Hi,

I'm currently playing round with the samples, trying to incorporate parts of them in my sample projects etc...and have a question about the different ways to add icons..
Method 1 below is fine... I am unsure as to Method 2 and 3, where they look for the icons etc...

Method 1:
This is the most 'java' way and i managed to get this working.No probs.

 ToolBar toolBar = new ToolBar();
 Button item = new Button();
 item.setIcon(Resources.ICONS.connect());
 toolBar.add(item);

Method 2:
Where does this method look for "icon-connect" or more to point where/what do i configure project so it knows where to look? What is benefit of this way?

 ToolBar toolBar = new ToolBar();
 Button item = new Button();
 item.setIcon(IconHelper.createStyle("icon-connect"))
 toolBar.add(item);

Method 3:
Similar to 2, but has me perplexed...
where does it look for "icon" , "user-girl" etc and what exactly is happening here(particularly in getIcon(ModelData model))... How does it figure out/ set the different icons for each type?

public AbstractImagePrototype getIcon(ModelData model) {
	        if (model.get("icon") != null) {
	          return IconHelper.createStyle((String) model.get("icon"));
	        } else {
	          return null;
	        }
	      }

....

 ModelData m = newItem("Family", null);
	    store.add(m, false);
	    tree.setExpanded(m, true);

	    store.add(m, newItem("Bill", "user"), false);
             store.add(m, newItem("Mary", "user-girl"), false);
	    store.add(m, newItem("Ronnie", "user-kid"), false);

 private ModelData newItem(String text, String iconStyle) {
	    ModelData m = new BaseModelData();
	    m.set("name", text);
	    m.set("icon", iconStyle);
	    return m;
	  }

Thanks
T

[Eich]

Method 2 is easy to understand. Just look at the JavaDoc:

Returns an 16 x 16 image. If the passed parameter is an image path, as defined by @link Util.isImagePath(String), it is treated as an image path. Otherwise, the parameter is treated as a CSS style name.

This JDoc is for the "create" method which combines the createPath- and the createStyle-method .
If you choose the sytle-name, you have to create a css-class in your css-file, like:

.icon {
 background-image:(...);
 ...
}

Method 3:
Here you can define multiple images for your defined ModelData. Lets go ahead with a TreeModel-Example:

                if (model instanceof YourOwnTreeModel) {
                    return IconHelper.createStyle("style01");
                } else if (model instanceof YourNextOwnTreeModel) {
                    return IconHelper.createStyle("style02");
                } else if (model instanceof ...) {
                    return IconHelper.createStyle("style...");
                }
                return null;

If you added a icon-variable to your ModelItems, you can get the icon from your Model:

                return IconHelper.createStyle((String)model.get("icon"));

For a better understanding, just read about the Models in GXT (and try it out).

At least - the IconHelper is not the only "Image-Creator" in GXT/GWT, you can also use the ClientBundle- or the ImageResource-Interface from GWT.