I've succeeded in getting sprites to work via uibinder though it doesn't seem possible to get it to work how you'd like (or arguably at all).
I looked high and low for a complete working example and couldn't find one, so I'm going to try to be as verbose as possible in the hope that you and future searchers can save hours of their life... My .ui.xml file ========== <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent";> <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g='urn:import:com.google.gwt.user.client.ui'> <ui:with field="resources" type="com.MyResources"/> <ui:image field="lbl_align" resource="{resources.label_Align}"/> <ui:image field="lbl_width" resource="{resources.label_Width}"/> <ui:style field="style"> @sprite .hdrAlign { gwt-image: "lbl_align"; } @sprite .hdrWidth { gwt-image: "lbl_width"; } </ui:style> <g:HTMLPanel> <div class="{style.hdrAlign}"></div> <div class="{style.hdrWidth}"></div> </g:HTMLPanel> === End ui.xml === MyResources.class =============== package com.sub; import com.google.gwt.core.client.GWT; import com.google.gwt.resources.client.ClientBundle; import com.google.gwt.resources.client.ImageResource; public interface MyResources extends ClientBundle { public static final MyResources INSTANCE = GWT.create(MyResources.class); /* The @Source path has a huge gotcha... from what I can tell, the file paths must exist in the location specified relative to this file, but ALSO in the location relative to your .ui.xml This was my problem. I was storing my .ui.xml in a ./directory/ and then this clientbundle in ./directory/sub/ along with the image files. The only way I could get it to work was to have the images exist in both ./directory and ./directory/sub I'm guessing you could avoid these dupe images by putting MyResources in ./directory and then reference the images in ./directory/sub, but I didn't test it. */ @Source("lbl_align.png") ImageResource label_Align(); @Source("lbl_width.png") ImageResource label_Width(); } === End MyResources.class === Things to consider: After doing this the first time in Eclipse, I was getting errors about my uibinder code. Specifically, that dupe references to lbl_align existed. (Even though they were called lbl_align and lbl_width.) It took some playing with the code (just deleting parts and retyping them, adding returns here and there above and below, before the errors disappeared. Note: I didn't actually change any code.) As someone else noted (I believe in the linked post above), GWT seems to use the field name to retrieve the image (which makes it just about useless). Trying to change: <ui:image field="lbl_align" resource="{resources.label_Align}"/> To: <ui:image field="lbl_align2" resource="{resources.label_Align}"/> Results in an error that the resource could not be found...... .. .. ... which means that your field="" needs to be the name of the file (Use underscores and not hyphens in your filenames). It seems that resource="" is completely ignored and I'm not sure what the purpose of having a ClientBundle is. When running in hosted mode, your background images will show up as inline base64 encoded data and not as sprites. The sprite assembling seems to occur on build. So far, my experiences with GWT have been that it makes my code more complex, adds tons of extra time to development, and is buggy. =] I would not recommend it to my enemies. Maybe in a few years all this will get sorted out. On Jun 10, 1:27 pm, David Grant <[email protected]> wrote: > The other solution which seems to work is that I can put > > @sprite .header { > gwt-image: 'myimage'; > } > > in a css file and reference it as a CssResource in a ClientBundle...then it > will look for an image resource called 'myimage' in that ClientBundle. > > it works but it just puts stuff in to the css file associated with my global > theme that I would rather just keep local to my widget. > > Dave > > > > On Thu, Jun 10, 2010 at 9:41 AM, David Grant <[email protected]> wrote: > > Has anyone succeeded in using @sprite <selector> {gwt-image: ...} in a > > uibinder file to access an image in a ClientBundle? > > > I've tried the following which Chris Ramsdale at Google claimed would > > work<http://groups.google.com/group/google-web-toolkit/browse_thread/threa...>but > > it doesn't: > > > <ui:with field="theme" type="com.companyname.resources.ThemeManager" /> > > <ui:image field="myimage" resource="{theme.res.globalrelaylogounity}"/> > > <ui:style> > > �...@sprite .header { > > gwt-image: 'myimage'; > > } > > </ui:style> > > > I can't use <ui:image src=""> because I definitely can't put a hard-coded > > path there because it needs change if the user changes themes. I'm grabbing > > the ClientBundle from ThemeManager.res(). We need to be able to switch > > themes, which involves switching the ClientBundle being used. I've tried > > putting an expression in src= using curly braces to get the path dynamically > > but that doesn't work. > > > The only alternative I can think of is to layout the UI in java code which > > sucks. > > > Dave > > -- > David Granthttp://www.davidgrant.ca -- You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
