How to create image sprits

[ramesh]

In my project have 200+ PNG image files.

We have one functionality like "Back up". In this functionality entire
our application going to back up in back up server.In this process
these 200+ images are also in part . So number of http requests are
increasing in back up process.

One way is using image sprites combine all images in to single image
in that case we will reduce number of http request.


Can you please tell me how to create image sprites in GWT ?

Do you have demo example ?

[Alexandre Dupriez]

You can use the ClientBundle interface. Create an interface which
extends ClientBundle and declare you image resources in it. Here is a
piece of code:

public interface AppResources extends ClientBundle {

@Source("image/frame.gif")
ImageResource frame();
}

Note that the path you provide in the @Source annotation is relative
to the AppResources interface.

Alexandre.

[ramesh]

Hi Alexandre,

Thanks for your response.

I have a one question.

Suppose If i implement Client Bundle interface in my project.
is GWT automatically create a single image sprite from 200+ static
images?

it would be a great if you provide a sample demo example on Image
sprite .

Thanks.

On Sep 15, 7:04 pm, Alexandre Dupriez <alexandre.dupr...@gmail.com>
wrote:
> You can use the ClientBundle interface.Createan interface which
> extends ClientBundle and declare youimageresources in it. Here is a

[Alexandre Dupriez]

Hello Ramesh,

If you want to bundle your 200+ images, you have to manually write a
declaration like

@Source("image/<image>.gif")
ImageResource <image>();

for each of them. Though tedious, this method is quite handy and avoid
the overhead of using 200+ separate files.

While I understand your need to create image sprites, I misunderstood
something: do you need to use your images in your GWT webapp? If not,
this would not be helpful since the client bundle would only be useful
if you need to access the sprite from inside a GWT application.

Let me know and we will discuss further.

[Ramesh Jegurupati]

Hi Alexandre,

My required is...Combine those 200+ images in to single sprite and use this single sprite image in my web application.
I heard that GWT automatically created Image sprites based on Client Bundle and CssResource.

Explicitly we need not create image sprites from Tools(like photoshop and some other tools).

Am i correct ?

Please clarify my doubt.

Thanks.

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

--
With Regards

Ramesh Jegurupati

[ramesh]

Hi Alexandre,

Can you please clarify my below doubt ?

On Sep 16, 8:25 pm, Ramesh Jegurupati <ramesh.jegurup...@gmail.com>
wrote:

[Ashwin Desikan]

you are correct, gwt would automatically create a sprite from the
images defined in the bundle

[Alexandre Dupriez]

Hello Ramesh,

Yes, you are correct, you do not need to create image sprites from
external tools. Using resource bundling facility offered by GWT will
help you in this task.

If you have questions regarding details of implementation, do not
hesitate.

Alexandre

[ramesh]

Hi Alexandre

Thanks for your response.

Do you have a demo example to create a image sprites?

That would be a great help for me .

Thanks


On Sep 20, 11:30 am, Alexandre Dupriez <alexandre.dupr...@gmail.com>
wrote:

[Alexandre Dupriez]

You need to process as the following:

1/ Create an interface which extends ClientBundle (e.g. AppResources)

2/ In this interface, for each of your images, declare a method in
your interface which will be bind to your image file. For instance, if
you want to bind the method foo() with "fooImg.png", write:

@Source("image/fooImg.png")
ImageResource foo();

where image/fooImg.png is the relative path from the package where is
defined your interface. For instance, if your interface AppResources
is under "com.ramesh.resources" then the code above will look up with
images in "com.ramesh.resources.image".

3/ Create a proxy with AppResources myResources =
GWT.create(AppResources.class) in your client code.

4/ Then when you need to add the image fooImg to a widget, you can use
myResources.foo() to get the ImageResource which contains your image.
For instance, if you want to create an Image object from this, just
write

Image myImage = new Image(myResources.foo())

Google's reference document is http://code.google.com/intl/fr/webtoolkit/doc/latest/DevGuideClientBundle.html.

Do not hesitate
Best luck

Alexandre

[ramesh]

Hi Alexandre,

Thanks for your detail explanation.

I have one doubt .

I created a sample project which contain 4 separate static images.

My requirement is i want to create single Image sprite out of 4 static
images.So that i will use this single image sprite in my application
as well as in my "Backup task". In My Backup task i only take the
backup of Image sprite but not 4 static images(because 4 static images
requires 4 http request)

After implementation finally i observed that , GWT is not physically
created image sprite from 4 static images.

Can i get the physically image sprite from GWT? is it possible ?

Can you please clarify my doubt?

In View Page source i found below code for image sprite,

<style>.GKXU04GCJF{height:
76px;overflow:hidden;background:url("data:image/
png;base64,iVBORw0KGgoAAAANSUhEUgAAAF0AAABMCAYAAAAP
+7v9AAAAeUlEQVR42u3QMQEAAAzDoPg3vbnoxYEBujq2kiBdOtKlI1060qUjXbp0pEtHunSkS0e6dOlIl4506UiXjnTp0pEuHenSkS4d6dKlI1060qUjXTrSpUtHunSkS0e6dKRLl4506UiXjnTpSJcuHenSkS4d6dKRLl06Ww8rHAQCQrpYkAAAAABJRU5ErkJggg==")
-0px -0px repeat-x;background-position:bottom;}.GKXU04GCLF{height:
76px;overflow:hidden;background:url("data:image/
png;base64,iVBORw0KGgoAAAANSUhEUgAAAF0AAABMCAYAAAAP
+7v9AAAAeUlEQVR42u3QMQEAAAwCIKOvuWvhxUEBkl4ZkyBdOtKlI1060qUjXbp0pEtHunSkS0e6dOlIl4506UiXjnTp0pEuHenSkS4d6dKlI1060qUjXTrSpUtHunSkS0e6dKRLl4506UiXjnTpSJcuHenSkS4d6dKRLl06Ww8xOtLF2enacQAAAABJRU5ErkJggg==")
-0px -0px repeat-x;}.GKXU04GCKF{height:76px;width:
93px;overflow:hidden;background:url("data:image/
png;base64,iVBORw0KGgoAAAANSUhEUgAAAF0AAABMCAYAAAAP
+7v9AAAAnElEQVR42u3QsQ0AAAjDMP5/
utxR8JA98iST9gqvoUOHDh06dOjQoUOHDh06dOjQoUOHDh06dOjQoUOHDh06dOjQoUOHDh06dOjQoUOHDh06dOjQoUOHDh06dOjQoUOHDh06dOjQoUOHDh06dOjQoUOHDh06dOjQoUOHDh06dOjQoUOHDh06dOjQoUOHDh06dOjQ76IXwkOH/
gB9AcjVhfti9UfIAAAAAElFTkSuQmCC") -0px -0px no-repeat;background-
position:-5px -5px;width:60px;height:60px;}.GKXU04GCIF{height:
76px;width:93px;overflow:hidden;background:url("data:image/
png;base64,iVBORw0KGgoAAAANSUhEUgAAAF0AAABMCAYAAAAP
+7v9AAAAeUlEQVR42u3QMQEAAAjAoEW3ubbw4qAATS2/
kiBdOtKlI1060qUjXbp0pEtHunSkS0e6dOlIl4506UiXjnTp0pEuHenSkS4d6dKlI1060qUjXTrSpUtHunSkS0e6dKRLl4506UiXjnTpSJcuHenSkS4d6dKRLl06vw4vqlDMf/
zYswAAAABJRU5ErkJggg==") -0px -0px no-repeat;background-position:-5px
-5px;width:60px;height:60px;}</style>

<div class="GKXU04GCJF"></div><div class="GKXU04GCLF"></div><div
class="GKXU04GCKF"></div><div class="GKXU04GCIF"></div>


source code is below:

/***********************SampleResource.java *********************/
package com.gwt.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.ImageResource;

public interface SampleResource extends ClientBundle {

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

@Source("sample.css")
SampleCss samplecss();

@Source("red.png")
@ImageResource.ImageOptions(repeatStyle =
ImageResource.RepeatStyle.Horizontal)
ImageResource redImage();

@Source("green.png")
@ImageResource.ImageOptions(repeatStyle =
ImageResource.RepeatStyle.Horizontal)
ImageResource greenImage();

@Source("misc.png")
@ImageResource.ImageOptions(repeatStyle =
ImageResource.RepeatStyle.None)
ImageResource miscImage();

@Source("yellowblue.png")
@ImageResource.ImageOptions(repeatStyle =
ImageResource.RepeatStyle.None)
ImageResource yellowBlueImage();

@Source("misc2.png")
@ImageResource.ImageOptions(repeatStyle =
ImageResource.RepeatStyle.None)
ImageResource misc2Image();

}

/************************SampleCss.java ***************************/

package com.gwt.client;

import com.google.gwt.resources.client.CssResource;

public interface SampleCss extends CssResource {

String widgetOne();

String widgetTwo();

String widgetThree();


/
************************************SampleProject.java*************************************/

package com.gwt.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.SimplePanel;


public class SampleProject implements EntryPoint {
static {
SampleResource.INSTANCE.samplecss().ensureInjected();
}

public void onModuleLoad() {

addStylePanel(SampleResource.INSTANCE.samplecss().widgetOne());

addStylePanel(SampleResource.INSTANCE.samplecss().widgetTwo());

addStylePanel(SampleResource.INSTANCE.samplecss().widgetThree());

addStylePanel(SampleResource.INSTANCE.samplecss().widgetFour());
}

private void addStylePanel(String style) {
SimplePanel p = new SimplePanel();
p.addStyleName(style);
RootPanel.get().add(p);
}
}


/********************sample.css*****************/

@sprite .widgetOne {
gwt-image:'redImage';
background-position:bottom;
}

@sprite .widgetTwo {
gwt-image:'greenImage';
}

@sprite .widgetThree {
gwt-image:'yellowBlueImage';
background-position: -5px -5px;
width:60px;
height:60px;
}
@sprite .widgetFour {
gwt-image:'misc2Image';
background-position: -5px -5px;
width:60px;
height:60px;
}



Thanks

[Ramesh Jegurupati]

Hi ,

Can you please clarify my below doubt ?

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

[Ernesto Oltra]

Hi,

The GWT compiler takes a decision based on the files sizes: if an additional http roundtrip is needed or it's better to inline the images directly in the CSS. In your case, fetch the sprite from the server would possibly take more time than serve it directly from your css file. When your sprite is big enough, it will create a file with it.

Ernesto