Re: How to create image sprits

[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

-- 
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-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to 
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/google-web-toolkit?hl=en.