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].
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
