public interface SCSpriteConfig extends SCImgURL
SCImgURLformat for specifying sprited image configuration.
See also the "spriting" discussion in the
In order to generate HTML to render a properly scaled image sprite from a composite image
file, this format allows developers to specify the image source, native size and
offset of the sprite within the image, and the desired drawn size for the image.
spriteConfigs have the following format:
"sprite:<image URL>;offset:<Left>,<Top>;size:<Width>,<Height>;cssClass:<className>"Where supported, the
sprite:prefix is used to identify a specified
SCImgURLas a sprited image.
SCImgURLdirectory prefixes such as "[SKIN]" can be included in this URL.
background-imageattribute, or just rely on other styling attributes such as
borderto get the desired appearance.
offset:properties should specify the pixel size and position of the sprite within the composite image. Again these are not required and can be specified directly in the css class using
cssClass:denotes the css class to apply to the sprite. This is also optional - a sprite can be specified with an image URL and explicit sizing and offset coordinates, in which case no css class is actually required.
Sprited image configuration and "stateful" images
Many image URLs in Smart GWT are "stateful", meaning that variants of the image should be displayed to the user depending on the current state of the widget. (For example a custom button icon may be
displayed on roll
or a selection checkbox icon in a treeGrid
may appear disabled for unselectable
Sprited image configuration definitions can be used for stateful images in two ways:
SCStatefulImgConfigobjects are supported, a developer may include spriteConfig strings as entries for specific states.
stateful images, if a URL was specified for the sprite, the stateful suffix will be applied with a preceding "_" character. So if the state "Over" was applied to a sprite configuration of
"sprite:compositeImg.png;offset:100,100;size:20,20", the generated HTML would attempt to load an image from the URL
state suffixesare applied to the
baseStyleof a StatefulCanvas. For example a sprite config of
"sprite:cssClass:buttonIcon"would display styling from
"buttonIconOver"when the "Over" state was applied.
StatefulImagesfor a more information on stateful images.