Ext GWT 3.0 Theming and Appearances

Wednesday, November 2, 2011

Darrell Meyer, Sencha

THEMING & [email protected] @darrellmeyer


mailto:[email protected]

mailto:[email protected]

Overview2.0 Theming

GWT ClientBundleAppearance Pattern

3.0 ThemesExamples


2.0 Themes


2.0 ThemesSingle monolithic CSS file (gxt-all.css)Static images referenced by CSSManual image spritingCSS contains all browser specific styles


A Better Approach


GWT ClientBundle


ClientBundleEnsures resources are cachedRemoves unneeded roundtrips to serverData URLsJSON BundlesImage inlining

Relevant resource typesImageResourceCssResource


ImageResourceCompile time image processingEfficient access to image data at runtimeAutomatic image spriting with ClientBundle

Image optionsRTLRepeat stylePrevent inlining


ImageResource Codepublic interface TextFieldResources extends ClientBundle {

@ImageOptions(repeatStyle = RepeatStyle.Horizontal) ImageResource textBackground();

@Source("doubleright2.gif") @ImageOptions(repeatStyle = RepeatStyle.None, preventInlining = true) ImageResource allRight();}

// create via deferred bindingTextFieldResources r = GWT.create(TextFieldResources.class);


CssResourceSelected key featuresConstantsRuntime substitutionConditional CSSImageSprites

See the link below for detailed information on all features


CssResource Constants@def tabMargin 2px;@def tabMinWidth 30px;@def tabWidth 120px;

.tabItem { width: tabMinWidth; }

public interface TabPanelBaseStyle extends CssResource { int tabMargin(); int tabMinWidth(); int tabWidth(); }


CssResource Runtime SubstitutionEvaluate static methods when styles injected

@eval SPLIT package.ImageHelper.createModuleBasedUrl("images/split.gif");.split { background-image: SPLIT;}


CssResource ConditionalsGood for browser quirksUnused styles pruned

@if user.agent ie6 ie8 { .proxy { filter: literal("alpha(opacity=50)"); }} @else { .proxy { opacity: 0.5; }}


CssResource SpritesAutomatic image spriting with ImageResource@sprite in CSS

@sprite .split { gwt-image: 'split'; }


Appearance Pattern


Appearance PatternRenders the “view” via a SafeHtml stringResponsible for HTML structure and stylesResponds to state changesAppearance pattern applied to both widgets and cellsTwo ways of using custom appearancesPass to constructor of widget or cellUse module rule

AppearanceWidget

ClientBundle

CssResource

XTemplate


AppearanceInterface

Widget Cell

Sencha Base Custom

Blue Gray Custom

Appearance Interaction


Appearance Details

public interface ProgressBarAppearance {

void render(SafeHtmlBuilder sb, double value, int width);

void updateText(XElement parent, String text);

}

Appearances are stateless and reusedRender method receives passed SafeHtmlBuilderMust pass parent element to methods for context


Ext GWT 3 Themes


3.0 ThemesThemes are module basedTheme module defines what appearances are usedMay override individual rules as neededThemes can’t be switched at runtime

 <inherits name="com.sencha.gxt.theme.blue.Blue" />

Appearance SelectionModule Rules

<replace-with class="com.sencha.gxt.theme.blue.client.BlueWindowAppearance"> <when-type-is class="com.sencha.gxt.widget.core.client.WindowAppearance" /> </replace-with>


Appearance SelectionConstructor

MyAppearance custom = GWT.create(MyAppearance.class); Window window = new Window(custom);


Example


ProgressBarCell

public ProgressBarCell() { this(GWT.<ProgressBarAppearance> create(ProgressBarAppearance.class)); }

public ProgressBarCell(ProgressBarAppearance appearance) { this.appearance = appearance; }


public static interface ProgressBarAppearance {

void render(SafeHtmlBuilder sb, Double value, int width);

void updateText(XElement parent, String text);

}


@Override public void render(Context context, Double value, SafeHtmlBuilder sb) { appearance.render(sb, value, getWidth()); }


public class ProgressBarDefaultAppearance implements ProgressBarAppearance {

public interface ProgressBarResources {

ImageResource bar();

ProgressBarStyle style(); }

public interface ProgressBarStyle extends CssResource {

String progressBar();

String progressInner();

.....

}


@sprite .progressBar { background-color:#9cbfee; gwt-image: 'bar'; background-repeat: repeat-x; background-position: left center; height: 18px; border-top-color:#d1e4fd; border-bottom-color:#7fa9e4; border-right-color:#7fa9e4;}

public interface BlueProgressBarResources extends ProgressBarResources, ClientBundle {

@Source("progress-bg.gif") @Override @ImageOptions(repeatStyle = RepeatStyle.Horizontal) ImageResource bar(); }


@Override public void render(SafeHtmlBuilder sb, Double value, int width) { value = value == null ? 0D : value; value = value * width;

sb.appendHtmlConstant("<div class=" + style.progressWrap() + ">"); sb.appendHtmlConstant("<div class=" + style.progressInner() + ">");

sb.appendHtmlConstant("<div class='" + style.progressBar() + "' style='width: " + value + "px'>"); sb.appendHtmlConstant("<div class=" + style.progressText() + " style='width: " + (value - 8) + "px'>"); sb.appendHtmlConstant("<div style='width:" + width + "px'> </div>"); sb.appendHtmlConstant("</div>");

sb.appendHtmlConstant("<div class='" + style.progressText() + " " + style.progressTextBack() + "'>"); sb.appendHtmlConstant("<div style='width:" + width + "px'> </div>"); sb.appendHtmlConstant("</div>");

sb.appendHtmlConstant("</div>"); sb.appendHtmlConstant("</div>"); }


@Override public void updateText(XElement parent, String text) { getTopElem(parent).getFirstChildElement().setInnerHTML(Util.isEmptyString(text) ? " " : text); getBackElem(parent).getFirstChildElement().setInnerHTML(Util.isEmptyString(text) ? " " : text); }

protected XElement getBackElem(XElement parent) { return parent.selectNode("." + style.progressTextBack()); }

protected XElement getTopElem(XElement parent) { return parent.selectNode("." + style.progressText()); }


<replace-with class="com.sencha.gxt.theme.blue.client.progress.BlueProgressBarAppearance"> <when-type-is class="com.sencha.gxt.cell.core.client.ProgressBarCell.ProgressBarAppearance" /> </replace-with>


Questions


Ext GWT 3.0 Theming and Appearances

Technology

Transcript of Ext GWT 3.0 Theming and Appearances