It seems my guess that you could store images outside of the directory is wrong. Because ui:image's field name is the image filename, the images can only be stored in the same directory as the ui.xml file.
On Jun 17, 12:55 pm, CJ Bilkins <[email protected]> wrote: > 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.
