UiBinder with background-image and ImageResource

[Michael]

Hi there,

I'm having a go at using the declarative layout and was wondering if
there's a way of using an image declared in a ClientBundle as a
background-image in the ui:style section, thus:

<ui:UiBinder
xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:with field="res" type="com.mycompany.MyClientBundle"/>

<ui:style>
.banner {
background-image:url('res.menuBackground');
}
</ui:style>
</ui:UiBinder>

If not, how are you supposed to do that?

Cheers

Mike

[davidroe]

this is how I did it.

in whatever.css:

@sprite .myClass {
gwt-image: "myImage";
width: auto; height: auto;
background-repeat: repeat;
background-position: 0% 0%;
}

in Resources.java:

public interface Resources extends ClientBundle {

...

public interface WhateverCss extends CssResource {
String myClass();
}

@Source("com/whoever/client/resources/whatever.css")
public WhateverCss whateverCss();

}

in WhateverClass.ui.xml:

<ui:with field="res" type="com.whoever.client.resources.Resources" /
>

<div class="{res.whateverCss.myClass}">

HTH,
/dave

[Michael]

Thanks Dave,

That will probably do the trick.

Somehow I had hoped that

<ui:with field="res" type="com.mycompany.MyClientBundle"/>
<ui:style>

.myClass {
background-image=url('res.myImage');
}
</ui:style>

would have been enough - so much less typing! Anyone from the Dev Team
reading this?? ;)

Cheers

Mike

[MH]

I'm afraid this one does not work for me.

I did exactly as mentioned, and my widget seems to be not using style at all. Shall I also add anything to the class itself?

2010/3/10 davidroe <roe....@gmail.com>

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[davidroe]

I forgot this part - does that help?

@Source("com/whoever/client/resources/myImage.png")
public ImageResource myImage();

On Mar 10, 2:16 pm, MH <mhaligow...@googlemail.com> wrote:
> I'm afraid this one does not work for me.
>
> I did exactly as mentioned, and my widget seems to be not using style at
> all. Shall I also add anything to the class itself?
>

> 2010/3/10 davidroe <roe.da...@gmail.com>

> > google-web-tool...@googlegroups.com<google-web-toolkit%2Bunsubs cr...@googlegroups.com>

[MH]

Well, the problem does not seem to be the image.

 

The CssResource interface I wrote is compiled properly, the XML I made for thew widget works fine as well. It look like if the ui:with does not throw ensureInjected or something. The styles are applied, but they are empty.

 

Regards,

mh

2010/3/11 davidroe <roe....@gmail.com>

To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.

[Thomas Broyer]

Have you tried @url with a DataResource?
http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#References_to_Data_Resources

I know it works if your DataResoruce is created with a <ui:data>, I
don't know when it comes from a separate ClientBundle imported with
<ui:with>...

[Michael]

I've also tried this approach and while the CSS is compiled and the
obfuscated selector-name is used in the generated HTML, the the
selector definition is not included in the page. You could access the
definition by calling the .getText() method of the generated
ClientBundle implementation - but surely GWT should do the inclusion
for you?

On Mar 11, 8:30 am, MH <mhaligow...@googlemail.com> wrote:
> Well, the problem does not seem to be the image.
>
> The CssResource interface I wrote is compiled properly, the XML I made for
> thew widget works fine as well. It look like if the ui:with does not throw
> ensureInjected or something. The styles are applied, but they are empty.
>
> Regards,
> mh
>

> 2010/3/11 davidroe <roe.da...@gmail.com>

> > > > google-web-tool...@googlegroups.com<google-web-toolkit%2Bunsu...@googlegroups.com><google-web-toolkit%2Bunsubs

> > cr...@googlegroups.com>
> > > > .
> > > > 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 google-we...@googlegroups.com.
> > To unsubscribe from this group, send email to

> > google-web-tool...@googlegroups.com<google-web-toolkit%2Bunsu...@googlegroups.com>

[MH]

Found the solution. The problem is that the style is _not_ injected. I solved this by adding the proper ensureInjected in the widget's class.

2010/3/14 Michael <michael...@gmail.com>

To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.

[Michael]

Any chance you can elaborate on how you did this? I'm not sure what
you mean by adding the ensureInjected method.

Cheers

Mike

On Mar 14, 10:46 pm, MH <mhaligow...@googlemail.com> wrote:
> Found the solution. The problem is that the style is _not_ injected. I
> solved this by adding the proper ensureInjected in the widget's class.
>

> 2010/3/14 Michael <michael.guy...@gmail.com>

> > <google-web-toolkit%2Bunsu...@googlegroups.com<google-web-toolkit%252Buns...@googlegroups.com>

> > ><google-web-toolkit%2Bunsubs
> > > > cr...@googlegroups.com>
> > > > > > .
> > > > > > 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
> > google-we...@googlegroups.com.
> > > > To unsubscribe from this group, send email to
> > > > google-web-tool...@googlegroups.com<google-web-toolkit%2Bunsu...@googlegroups.com>

> > <google-web-toolkit%2Bunsu...@googlegroups.com<google-web-toolkit%252Buns...@googlegroups.com>

[Michael]

Ah... simply calling the .ensureInjected method from the EntryPoint is
enough - got it. Thanks!

Mike

On Mar 14, 10:46 pm, MH <mhaligow...@googlemail.com> wrote:

> Found the solution. The problem is that the style is _not_ injected. I
> solved this by adding the proper ensureInjected in the widget's class.
>

> 2010/3/14 Michael <michael.guy...@gmail.com>

> > <google-web-toolkit%2Bunsu...@googlegroups.com<google-web-toolkit%252Buns...@googlegroups.com>

> > ><google-web-toolkit%2Bunsubs
> > > > cr...@googlegroups.com>
> > > > > > .
> > > > > > 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
> > google-we...@googlegroups.com.
> > > > To unsubscribe from this group, send email to
> > > > google-web-tool...@googlegroups.com<google-web-toolkit%2Bunsu...@googlegroups.com>

> > <google-web-toolkit%2Bunsu...@googlegroups.com<google-web-toolkit%252Buns...@googlegroups.com>

[davidroe]

yes, sorry, I missed that line.

StyleInjector.inject(Resources.INSTANCE.whateverCss().getText(),true);

> > > > > > > google-web-tool...@googlegroups.com<google-web-toolkit%2Bunsubs cr...@googlegroups.com>
> > > <google-web-toolkit%2Bunsu...@googlegroups.com<google-web-toolkit%252Bu nsubs...@googlegroups.com>

> > > ><google-web-toolkit%2Bunsubs
> > > > > cr...@googlegroups.com>
> > > > > > > .
> > > > > > > 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
> > > google-we...@googlegroups.com.
> > > > > To unsubscribe from this group, send email to

> > > > > google-web-tool...@googlegroups.com<google-web-toolkit%2Bunsubs cr...@googlegroups.com>
> > > <google-web-toolkit%2Bunsu...@googlegroups.com<google-web-toolkit%252Bu nsubs...@googlegroups.com>

>
> > > > > .
> > > > > 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 google-we...@googlegroups.com.
> > > To unsubscribe from this group, send email to

> > > google-web-tool...@googlegroups.com<google-web-toolkit%2Bunsubs cr...@googlegroups.com>

[Craigo]

Just like to reiterate what Thomas Broyer said:

Use DataResource with @url. It works a treat and, IMO, is a much
easier solution.

http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#References_to_Data_Resources

On Mar 15, 3:33 pm, davidroe <roe.da...@gmail.com> wrote:
> yes, sorry, I missed that line.
>
> StyleInjector.inject(Resources.INSTANCE.whateverCss().getText(),true);
>
> On Mar 14, 4:04 pm, Michael <michael.guy...@gmail.com> wrote:
>
> > Ah... simply calling the .ensureInjected method from the EntryPoint is
> > enough - got it. Thanks!
>
> > Mike
>
> > On Mar 14, 10:46 pm, MH <mhaligow...@googlemail.com> wrote:
>
> > > Found the solution. The problem is that the style is _not_ injected. I
> > > solved this by adding the proper ensureInjected in the widget's class.
>
> > > 2010/3/14 Michael <michael.guy...@gmail.com>
>

> > > > I've also tried this approach and while theCSSis compiled and the

[Michael Guyver]

Hi Craigo - does the @url work within a <ui:style> section?

> To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.

[Craigo]

I imagine it would. I have my css in a separate file referenced by my
ClientBundle:
@Source("my.css") ResourcesCSS css();
@Source("button.gif") DataResource menuButtonResource();

And in the css file it works great. Eg:
@url menuButtonUrl menuButtonResource;
.my-anchor {
float: left;
width: 149px;
height: 39px;
background: menuButtonUrl 0 0 no-repeat;
text-align: left;
cursor: pointer;
border: none;
}

On Mar 16, 10:27 am, Michael Guyver <michael.guy...@gmail.com> wrote:
> Hi Craigo - does the @url work within a <ui:style> section?
>

> On 15 March 2010 23:16, Craigo <craig...@gmail.com> wrote:
>
> > Just like to reiterate what Thomas Broyer said:
>
> > Use DataResource with @url.  It works a treat and, IMO, is a much
> > easier solution.
>

> >http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.htm...

[Thomas Broyer]

On Mar 16, 12:27 am, Michael Guyver <michael.guy...@gmail.com> wrote:
> Hi Craigo - does the @url work within a <ui:style> section?

[Craigo]

I'm using <ui:with ...> like this:

<ui:with field="res" type="MyResources"></ui:with>
<g:Anchor ui:field="myField" styleName="{res.css.myAnchor}">Some Text</
g:Anchor>

And it all works.

[Antoine]

<!-- Style -->
<ui:style>
@url fileUrl fieldName;
.cssClass {
background: fileUrl;
}
</ui:style>

<!-- Data -->
<ui:data field='fieldName' src='beautifulImage.gif'/>

<!-- Component -->
<g:HorizontalPanel addStyleNames="{style.cssClass}"/>

[Eirik Brandtzæg]

Hello

Craigo:

I think the point is to not have an external CSS file, but using <ui:style> directly.

Antonie:

Will the feature of bundling sprites still work with this method?


--
Eirik Brandtzæg

[GWTNewbie]

Any thoughts as to how this could be done using <ui:style> without
using external CSS files ?

[Andrew Hughes]

Here's a simple example WITHOUT external css file. It works, providing the ClientBundle and the ui.xml are in the same package. I believe you can use them from different packages but I still haven't worked out how.

<ui:with type="blah.client.MyClientBundle" field="cb"/>

<ui:image field="loading" resource="{cb.loading}"/>

<ui:style>

  @sprite .loader1 {

     gwt-image: 'loading';

     padding-left: value('loading.getWidth','px');

     width: auto;

     height: auto;

}

</ui:style>

and the client bundle would be something like...

public interface MyClientBundle extends ClientBundle {

   @Source("loading.gif") ImageResource loading();

}

[Thomas Broyer]

On Sep 12, 7:45 am, Andrew Hughes <ahhug...@gmail.com> wrote:
> Here's a simple example WITHOUT external css file. It works, providing the
> ClientBundle and the ui.xml are in the same package. I believe you can use
> them from different packages but I still haven't worked out how.
>
> <ui:with type="blah.client.MyClientBundle" field="cb"/>
> <ui:image field="loading" resource="{cb.loading}"/>

as has been said in another thread, resource="" is ignored (I
verified), so this declaration is equivalent to:
<ui;image field="loading" />
which is equivalent to the following Client declaration:
ImageResource loading();
without @Source annotation, so it defaults to searching a loading.png,
loading.jpg or loading.gif in the same package/folder.