How to create ImageResource?

[newtogxt3]

It's not clear to me how to create/use ImageResource. I'm trying to create a button and give it an icon like this:

TextButton button = new TextButton();
button.setIcon( anImageResource ) -- and this is what I've no idea how to do.

Please help. Thanks.

[jadrake75]

This is standard GWT functionality. Did you try googling for GWT Image Resource first - it is not related to GXT at all?

Here are some links to make this convienent for you:
http://www.dev-articles.com/article/...Resource-24001
https://developers.google.com/web-to...UiImageBundles

[icfantv]

Here's how we do it:

public interface Images extends ClientBundle {


public Images INSTANCE = GWT.create(Images.class);


@Source("foo.png")
ImageResource foo();

...
}

Note that the PNG would need to be in the same package directory as the class.

[newtogxt3]

Simple. Thanks very much for your help.

[icfantv]

You're welcome. Also, if this answers your question, please mark it as answered so it shows up accordingly in the forum list. Thanks.

[rathiandi]

Hi, I am also new to GXT and strugglling to understand the same thing. Please correct me if i am wrong but this solution is good if i may need to use custom image for TextButton but what about if I may wants to use images from GXT themas?
Shouldn't the code be more like -
TextButton button = new TextButton();
button.setIcon( BlueTheamImageResource.getOpenFolder() );

"BlueTheamImageResource.getOpenFolder()" i am just making it but but am sure there should be some class like that but could find in API yet? Could someone please point me in right direction?

[Colin Alworth]

rathiandi, I'm not sure where you are seeing the BlueThemeImageResource class, but yes, if such a class existed and had a static method, you could invoke it to get the ImageResource instance. Then you would pass it to the button using setIcon, exactly as you have done.

There is a folderOpened.png file in GXT, in com/sencha/gxt/theme/base/client/tree/folderOpened.png - you shouldn't use any of the existing ClientBundles, since they are tailor-made for the built-in themes, and have all kinds of other tree wiring in them (this is used in the TreeBaseAppearance class). You can make a ClientBundle that points to this - use the @Source annotation:

class MyClientBundle extends ClientBundle {
  @Source("com/sencha/gxt/theme/base/client/tree/folderOpened.png")
  ImageResource folderOpened();
}

This will of course make your code subject to changes in the GXT appearance internals, which really aren't a part of the API.

If this raises the question of why we don't just have a single monolithic class that contains all images that might be used, the basic answer is that doing so may cause the compiler to bake in images that some applications never use. By taking this approach, we make it clearer to the compiler what things we use together, and it can better do its job to only make users download what any app actually uses.

[rathiandi]

Hi Colin - thank you very much for quick response.

There is no class called "BlueThemeImageResource". I was just making it up assuming that there would be at least one class per theme to access all related images. But as you pointed out, it seems GXT provides widget specific image resources (based on theme) and don't have centralized image resources for obvious reasons.

Well now in that case, how do we create a text button with (let's assume) open folder icon? I mean i would prefer to use theme icons to keep my UI consistent.

Cheers,

[icfantv]

To add to what Colin said, I would simply create your own ClientBundle with your application's images. This is what we do - it's incredibly easy as the code snippet above indicates.

As he mentions above, the problem with relying on internal API code that's not meant for external use is that you subject yourself to application fragility in the event that the API changes from underneath you. E.g., changing from version 3.0.1. to 3.0.2 may cause your application to not build, or worse, introduce a very subtle bug that no one sees until it's in production.

An example of this is something we got bit by: the CSS class name for the checkbox cell in the CheckboxSelectionModel changed from one beta release to the next breaking our subclass. The build worked just fine but we suddenly couldn't select Grid rows and the highlight/selection mechanism stopped working.

[rathiandi]

Hi Icfantv - Thanks for prompt reply. I gota very +ve start from this community.

What I am trying to do is - Create a button with Icon. Now as you advised, I can create my Image Resource and use my own icon. That's easy. But what I want to do is use theme icons (in relative reference) so if I change theme then my icon changes automatically. So how do we do it in GXT?

I am coming from smartgwt word and started evaluating GXT recently. In smartgwt, below is sample code to do the same thing:
Button b = new Button();
b.setIcon("[Skins]/relative path to icon");

where [Skin] is a variable and replaced with actual path based on skin in use. This serves two purpose:

1. I don't have two copies of same image; one for theme widget (coming from widget API) and second for my button (coming from my image resource).
2. I can swap skins without updating my local image copy to be consistent with new theme.

Best Regards