PDA

View Full Version : GXT and ImageBundle



tsouza
23 Apr 2009, 10:52 AM
Hi,

Are there any plans on full support of GWT ImageBundle in GXT? (Including creating a method like setIconImage on components like Button and ContentPanel)

Regards,
Thiago Souza

gslender
23 Apr 2009, 1:16 PM
It has been considered but no immediate plans to include that functionality.

tsouza
23 Apr 2009, 1:50 PM
Hi,

We've been investigating the possibility to migrate our software from extjs to gxt. The application is kinda big (~600 artifacts, including js, java and image files), with tons of buttons and panels icons and one big trade-off in migrating to gxt is that there is no way, as far as I know, of specifying a button or contentpanel icon directly, there is a need to create a css class for each icon, which would be an enormous development overhead. We could create utilities that automate this process in runtime, but this would imply in a runtime overhead for silly reasons. But, as I never really used gxt, I could be wrong, maybe there is a way of specifying and icon image directly, please correct me If I'm wrong.

But If I'm correct, is there any plans on creating, at least, something like setIconImage (and than naturally inheriting gwt image bundling goodies) in components like Button and ContentPanel?

Regards,
Thiago Souza

gslender
23 Apr 2009, 1:55 PM
specifying the direct image resource in code is a bad practice - you should really leave all image/style information to CSS and that can be changed without compiling the Java into JS again.

Unlike JS, in GXT/GWT, if you change 1 image filename, you have to recompile the entire application and redploy. If the image/style information is in CSS, you don't have to recompile.

tsouza
23 Apr 2009, 1:58 PM
Hi,

I understand what are you saying, but this is your opinion, that's not our reality. We never change images, what we need is specifying images resources directly. If buying a GXT license, is there any way of requesting this feature?

Regards,
Thiago Souza

brendand
23 Apr 2009, 4:52 PM
Does using the technique here solve the problem?

http://www.alistapart.com/articles/sprites/



<div style="background: transparent url(http://www.alistapart.com/d/sprites/test-3.jpg) no-repeat scroll -180px -120px; height: 40px; width: 80px;"/>

tsouza
24 Apr 2009, 4:32 AM
Does using the technique here solve the problem?

http://www.alistapart.com/articles/sprites/



<div style="background: transparent url(http://www.alistapart.com/d/sprites/test-3.jpg) no-repeat scroll -180px -120px; height: 40px; width: 80px;"/>


That's what gwt image bundling automates, but my primary problem is the need of creating a css class for every single icon used, if there were a way of directly setting an image, it would naturally support gwt image bundling. Now imagine a situation, which is ours, that you want to migrate to GXT a relatively big application, with ~600 artifacts, in which ~100 of them are icon files so you'll need ~100 css classes. Of course there are ways of automating this process, but it would imply in an overhead somewhere in time. If we would use gxt gpl license, this would be acceptable, but that's not the case.

sven
24 Apr 2009, 4:34 AM
There is only one method you need to create. Than you can do the following:


item.setIconStyle(genIconStyle("yourimageurlhere"));

Writing this method is an overhead of lets say 5 minutes ;)

tsouza
24 Apr 2009, 4:37 AM
There is only one method you need to create. Than you can do the following:


item.setIconStyle(genIconStyle("yourimageurlhere"));

Writing this method is an overhead of lets say 5 minutes ;)

Ok, what about the runtime overhead?

sven
24 Apr 2009, 4:39 AM
Not very much. If we would have a setImageUrl method we would also have to set the image. So it doesnt make a big difference.

Rvanlaak
24 Apr 2009, 4:42 AM
If the GWT ImageBundle is already available in GWT, how big is the chance it'll work in GXT? The GXT lib extends GWT, so couldn't it be possible it just works the way you want?

As you say you want to switch from ExtJS to ExtGWT, that makes more difficult I think. The CSS image slicing technique is new to me,, looks really great! :D

sven
24 Apr 2009, 4:43 AM
You can even introduce a cache there to only generaet one style for the same image. So if you use the same image multiply times, you always use the same style.

sven
24 Apr 2009, 4:44 AM
If the GWT ImageBundle is already available in GWT, how big is the chance it'll work in GXT? The GXT lib extends GWT, so couldn't it be possible it just works the way you want?

As you say you want to switch from ExtJS to ExtGWT, that makes more difficult I think. The CSS image slicing technique is new to me,, looks really great! :D

ImageBundles are cool. But they are not that good for application design like GXT has. Also theming will be a load more difficult with them.

Rvanlaak
24 Apr 2009, 4:49 AM
It isn't needed to bundle all the Icons i think. I wouldn't use the technique as a best practice trough a entire application, but in some cases it might be usefull..

tsouza
24 Apr 2009, 4:56 AM
Sorry, I didn't understand what you mean. A genIconStyle(url) algorithm would be:

1. Verify if url has already a generated css class.
2. If not, generate the style, mark as already generated and return it.
3. else, return the already generated css class.

Here are the runtime overheads:

Processor: String concatenation, to create the css class itself.
Memory: The css class entry in a style tag.
Memory: A map-like structure to verify if css classes are generated. You could to this by verifying the style tag content itself, but this would imply in more processor time.
Bandwith: You loose gwt image bundling.

Sorry if i'm being kinda paranoid with this. But the migration to GXT would be really costly. And to justify it, every single bit of improvement must be considered and every single detail must be taken into account.

sven
24 Apr 2009, 5:01 AM
There is no method to arhieve things without memory and processor using.

ImageBundling cant be used in the most places with the current domlayout.

You could also extend Button for example, introduce your own setImageUrl method that sets it directly on the same element the other style would be added, but you just add it with "style='background-image: url(yoururl);'". This would be the same overhead than using setIconStyle and is also not very much work.

I can look into adding this into 2.0.

tsouza
24 Apr 2009, 5:31 AM
There is no method to arhieve things without memory and processor using.

ImageBundling cant be used in the most places with the current domlayout.

You could also extend Button for example, introduce your own setImageUrl method that sets it directly on the same element the other style would be added, but you just add it with "style='background-image: url(yoururl);'". This would be the same overhead than using setIconStyle and is also not very much work.

I can look into adding this into 2.0.

Does setIconStyle accepts css styles directly instead of classes?

sven
24 Apr 2009, 5:50 AM
No, only css classes.

brendand
17 May 2009, 9:48 PM
Perhaps someone can try SmartSprites to see if this solves the image bundle problem. http://smartsprites.osinski.name/

You annotate your css, run the program, and out comes a new css and a "imagebundle" style image. Let me know how it goes (I'm currently too busy to try this out).