ClientBundle don't load the ImageResource

[Markus]

Hello!

I try to use the ClientBundle implementation to manage my Images to a
large File and minimize the HTTP-Requests.

I put <inherits name="com.google.gwt.resources.Resources" /> in my
gwt.xml

Generate the ClientBundle

public interface ResourceBundle extends ClientBundle {

public static final ResourceBundle INSTANCE =
GWT.create(ResourceBundle.class);

@Source("tiles/smiley.png")
ImageResource smiley();

}

The Image would be found, no errors.

Here is the code

@Override
public void onModuleLoad() {

CLogger.log("Start Engine");

int width = 800;
int height = 600;

Canvas canvas = Canvas.createIfSupported();
canvas.setWidth(width + "px");
canvas.setHeight(height + "px");
canvas.setCoordinateSpaceWidth(width);
canvas.setCoordinateSpaceHeight(height);
Context2d c = canvas.getContext2d();

Image img = new Image(ResourceBundle.INSTANCE.smiley());
img.addLoadHandler(new LoadHandler() {

@Override
public void onLoad(LoadEvent event) {
CLogger.log(event.getSource() + " loaded");
}
});
CLogger.log("Visible: " + img.isVisible());

c.drawImage((ImageElement) new
Image(ResourceBundle.INSTANCE.smiley()).getElement().cast(), 0, 0);

RootPanel.get().add(canvas);

}

I create a simple Canvas and set the size to 800x600. I create a new
Context2D Object to draw the Image at the Context and add the Canvas
to the RootPanel.

The logs shows:

[20:10:21.676] - Start Engine
[20:10:21.851] - Visible: true
[20:10:21.853] - http://127.0.0.1:8888/engine/7D39451825E9952050F44A6B8E2E15F3.cache.png

The Image exists under the logged URL so everything looks fine. But
the Image would not be draw or it would draw but not display.

Anybody an idea?

I thought the ClientBundle loads the Images as the start in the
backend. So if I get an Instance every Image/Css and others fill be
loaded?

Regars Markus

[Jeff Larsen]

I don't think you can use ImageResources in Canvas. 

[ashwin....@gmail.com]

include the statement INSTANCE..ensureInjected(); that should fix your problem.

For your reference read the following

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

Overview

1. Write a CSS file, with or without GWT-specific extensions
2. If GWT-specific extensions are used, define a custom subtype of CssResource
3. Declare a method that returns CssResource or a subtype in an ClientBundle
4. When the bundle type is generated with GWT.create() a Java expression that evaluates to the contents of the stylesheets will be created
   • Except in the simplest case where the Java expression is a string literal, it is generally not the case that a CSS file could be generated into the module output
5. At runtime, call CssResource.ensureInjected() to inject the contents of the stylesheet
• This method is safe to call multiple times, as subsequent invocations will be a no-op
• The recommended pattern is to call ensureInjected() in the static initializer of your various widget type

--
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.

[Markus]

Thanks for your reply. But I don't know how it should work with CSS
Resource?

Ok I created

public interface ResourceBundle extends ClientBundle {

public static final ResourceBundle INSTANCE =
GWT.create(ResourceBundle.class);

@Source("css/example.css")
public CssResource css();

}

But now?

Where can I define ImageResources? Could you please explain your
solution... maybe with an short example?

Thanks for your help

Regards, Markus

[ashwin....@gmail.com]

here is an example

public interface DesktopResouces extends ClientBundle {

}

[ashwin....@gmail.com]

sorry,

hit send too early... here is the example

public interface DesktopResources extends ClientBundle {

@NotStrict

@Source("desktop.css")

CommonResources commonResources();

@Source("./images/app_logo.png")

ImageResource appLogo();

}

public interface CommonResources extends CssResource {

/**

* Width of the Main Page

*/

int pagewidth();

/**

* application logo

*/

String appLogo();

}

desktop.css

/* css file definition */

@def pageWidth 1000px; 

@sprite .appLogo {

gwt-image: 'appLogo';

float: left;

}

/* end css file def */

you need to define a main Style class which you can use to refer all your resources

public class Style {

private static DesktopResources resources;

static {

resources = GWT.create(DesktopResources.class);

resources.commonResources().ensureInjected();

}

public static CommonResources common() {

return resources.commonResources();

}

public static DesktopResources resources() {

return resources;

}

}

now in each of your UiBinder define the following line. This would allow you to refer the styles defined in your css files. Its a good practice to centrally define all the styles in a CSS files as this would help in easily managing your changing styles for the page

<ui:with field='style' type='com.example.client.style.Style' />

<g:HTMLPanel>

<div class='{style.common.appLogo}'/>

</g:HTMLPanel>

Thanks

Ashwin

[Markus]

Thanks for reply, but ur solution is not working.

ensureInjected always return false. If I draw the Image with the
Canvas, the image will never be displayed. After I add these Image
into an Image before or after drawing the Image will be correct
display in the canvas.
I think GWT did not load the image correctly and put it into the DOM.
Any other soltion?

I will not iterate over all my image and load every image by myself...

[Jeff Larsen]

I remember other people having issues with ImageResource and Canvas, I think you have to load Images from a URL and not get them from the resource bundle. 

[Markus]

Ok, but there is no preloading and every image will be loaded with a
single request...

So there is currently no use of ClientBundle with Canvas.. I hope
Google will fix this issues.