Thanks for all your help Nicolas.. here's a brief summary of anyone looking to for a few hints (NOTE failWhale.png is located in the same directory as the ui.xml).
<!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:data field="failWhaleData" src="failWhale.png"/> <ui:image field="failWhaleImage" src="failWhale.png"/> <ui:style> @sprite .imageSprite { gwt-image: 'failWhaleImage' } </ui:style> <g:VerticalPanel ui:field="panel"> <g:SimplePanel addStyleNames="{style.imageSprite}"/> <g:Image resource="{failWhaleImage}"/> <g:Label text="{failWhaleImage.getURL}"/> <g:Label text="{failWhaleImage.getName}"/> </g:VerticalPanel> </ui:UiBinder> On Mon, Aug 9, 2010 at 3:00 PM, Nicolas ANTONIAZZI < [email protected]> wrote: > Sorry, I forgot something in my previous mail. > > The correct syntax for the Image tag that reference an image resource is : > > <ui:image field="onImage" src="on.png"/> > <g:Image resource="*{*onImage*}*" /> > > p.s. you said "Width/Height will be automatically written in your css >> class, you do not need to do any reference on it." this is probably true for >> an <img> but what about applying a gwt-image on a Panel (background). I >> would not expect the Panel to have it's size set based on the back ground >> image's size (even if it is what I want) :) > > > Yes, that might be a problem in some case. You should be able to override > the value from css if you wish. > In some case, you might want to let the css default width. > > In this case, you should use DataRessource instead of ImageRessource. To > declare this from uiBinder, the correct syntax is : > > <*ui:data* field="*myResource*" src="on.png"> > > <style> > > *...@url myResourceUrl myResource;* > > > .myPanel { > background: *myResourceUrl*; > } > > </style> > > Here, the image will be referenced without forcing width/height. > > > 2010/8/9 Andrew Hughes <[email protected]> > > Thanks Nicolas - I think I am very close.... >> >> I'm trying this (very simple)... >> >> <ui:image field="onImage" src="on.png"/> >> >> <g:Image resource="onImage"/> >> >> But, "computer say's no" :) or more specifically... 00:31:09.750 [ERROR] >> Cannot parse value: "onImage" as type ImageResource >> >> I have both the ui.xml and the png in the same directory, perhaps this is >> wrong? >> ./MyWidget.ui.xml >> ./on.png >> >> >> CHEERS :) >> >> p.s. you said "*Width/Height will be automatically written in your css >> class, you do not need to do any reference on it*." this is probably true >> for an <img> but what about applying a gwt-image on a Panel (background). I >> would not expect the Panel to have it's size set based on the back ground >> image's size (even if it is what I want) :) >> >> On Fri, Aug 6, 2010 at 5:55 PM, Nicolas ANTONIAZZI < >> [email protected]> wrote: >> >>> Width/Height will be automatically written in your css class, you do not >>> need to do any reference on it. >>> >>> 2010/8/6 Nicolas ANTONIAZZI <[email protected]> >>> >>> Hi, >>>> >>>> The right syntax is : >>>> *<ui:image field="activeImage" src="active.png"/>* >>>> * **<ui:image field="deactiveImage" src="active.png"/>* >>>> >>>> Then, simply use : >>>> >>>> *...@sprite .active {* >>>> * gwt-image: 'activeImage';* >>>> * }* >>>> * >>>> >>>> @sprite .deactive { >>>> gwt-image: 'deactiveImage'; >>>> } >>>> >>>> >>>> Moreover, If you wish to directly use an image ( <img></img>) instead of >>>> a background css image, you can do : >>>> >>>> <g:Image resource="activeImage" /> >>>> <g:Image resource="deactiveImage" /> >>>> >>>> >>>> >>>> * >>>> 2010/8/6 Andrew Hughes <[email protected]> >>>> >>>> Hi Guys, >>>>> >>>>> I can't find any doco, so help would be great! I want to set some >>>>> background gwt-image's inside my ui.xml's <ui:style>.... >>>>> >>>>> Easiest way to ask my question is to show you what is not working :) >>>>> >>>>> <!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:image field="activeImage" resource="active.png"/>* >>>>> * **<ui:image field="deactiveImage" resource="active.png"/>* >>>>> <ui:style type="com.acme.Style"> >>>>> >>>>> *...@sprite .active {* >>>>> * width: value('activeImage.getWidth','px');* >>>>> * height: value('activeImage.getHeight','px');* >>>>> * gwt-image: 'activeImage';* >>>>> * }* >>>>> >>>>> * @sprite .deactive {* >>>>> * width: value('deactiveImage.getWidth','px');* >>>>> * height: value('deactiveImage.getHeight','px');* >>>>> * gwt-image: 'deactiveImage';* >>>>> * }* >>>>> >>>>> </ui:style> >>>>> <g:HorizontalPanel> >>>>> <g:HTMLPanel ui:field="active" >>>>> addStyleNames="{style.deactive}"/> >>>>> </g:HorizontalPanel> >>>>> </ui:UiBinder> >>>>> >>>>> Questions >>>>> >>>>> 1. I'm trying to avoid external css files here and do it all in the >>>>> ui.xml, perhaps this is not possible???? >>>>> 2. How are <ui:image> resource's defined/referenced? What are the >>>>> rules on the resource=???? >>>>> 3. How is the <ui:image> field associated with the @sprite? Do I >>>>> have this right???? >>>>> 4. How can I get the width/height of the image (as described here >>>>> >>>>> http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#Value_function >>>>> )??? >>>>> >>>>> >>>>> CHEERS :) >>>>> >>>>> -- >>>>> 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]<google-web-toolkit%[email protected]> >>>>> . >>>>> For more options, visit this group at >>>>> http://groups.google.com/group/google-web-toolkit?hl=en. >>>>> >>>> >>>> >>> -- >>> 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]<google-web-toolkit%[email protected]> >>> . >>> For more options, visit this group at >>> http://groups.google.com/group/google-web-toolkit?hl=en. >>> >> >> -- >> 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]<google-web-toolkit%[email protected]> >> . >> For more options, visit this group at >> http://groups.google.com/group/google-web-toolkit?hl=en. >> > > -- > 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]<google-web-toolkit%[email protected]> > . > For more options, visit this group at > http://groups.google.com/group/google-web-toolkit?hl=en. > -- 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.
