Ext GWT 3.0 Theming and Appearances

THEMING & APPEARANCES
Darrell Meyer, Sencha

darrell@sencha.com @darrellmeyer

Wednesday, November 2, 2011

Overview
2.0 Theming
GWT ClientBundle
Appearance Pattern
3.0 Themes
Examples


2.0 Themes


2.0 Themes
Single monolithic CSS ﬁle (gxt-all.css)
Static images referenced by CSS
Manual image spriting
CSS contains all browser speciﬁc styles


A Better Approach


GWT ClientBundle


ClientBundle
Ensures resources are cached
Removes unneeded roundtrips to server
Data URLs
JSON Bundles
Image inlining

Relevant resource types
ImageResource
CssResource


ImageResource
Compile time image processing
Efﬁcient access to image data at runtime
Automatic image spriting with ClientBundle

Image options
RTL
Repeat style
Prevent inlining


ImageResource Code
public interface TextFieldResources extends ClientBundle {

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

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

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


CssResource
Selected key features
Constants
Runtime substitution
Conditional CSS
ImageSprites

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 Substitution
Evaluate static methods when styles injected

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


CssResource Conditionals
Good for browser quirks
Unused styles pruned

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


CssResource Sprites
Automatic image spriting with ImageResource
@sprite in CSS

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


Appearance Pattern


Appearance Pattern
Renders the “view” via a SafeHtml string
Responsible for HTML structure and styles
Responds to state changes
Appearance pattern applied to both widgets and cells
Two ways of using custom appearances
Pass to constructor of widget or cell
Use module rule

ClientBundle

Widget Appearance CssResource

XTemplate


Appearance Interaction
Widget Cell

Appearance
Interface

Sencha Base Custom

Blue Gray Custom


Appearance Details
Appearances are stateless and reused
Render method receives passed SafeHtmlBuilder
Must pass parent element to methods for context

public interface ProgressBarAppearance {

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

void updateText(XElement parent, String text);

}


Ext GWT 3 Themes


3.0 Themes
Themes are module based
Theme module deﬁnes what appearances are used
May override individual rules as needed
Themes can’t be switched at runtime


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

Appearance Selection
Module 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 Selection
Constructor

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();

.....

}


public interface BlueProgressBarResources extends ProgressBarResources,
ClientBundle {

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

@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;
}


@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>");

}


@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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Ext GWT 3.0 Theming and Appearances

Similar to Ext GWT 3.0 Theming and Appearances (20)

More from Sencha

More from Sencha (20)

Recently uploaded

Recently uploaded (20)

Ext GWT 3.0 Theming and Appearances