Ext GWT 3.0 Theming and Appearances
-
Upload
sencha -
Category
Technology
-
view
8.808 -
download
1
description
Transcript of Ext GWT 3.0 Theming and Appearances
Wednesday, November 2, 2011
Overview2.0 Theming
GWT ClientBundleAppearance Pattern
3.0 ThemesExamples
Wednesday, November 2, 2011
2.0 Themes
Wednesday, November 2, 2011
2.0 ThemesSingle monolithic CSS file (gxt-all.css)Static images referenced by CSSManual image spritingCSS contains all browser specific styles
Wednesday, November 2, 2011
Wednesday, November 2, 2011
Wednesday, November 2, 2011
Wednesday, November 2, 2011
Wednesday, November 2, 2011
Wednesday, November 2, 2011
Wednesday, November 2, 2011
Wednesday, November 2, 2011
Wednesday, November 2, 2011
A Better Approach
Wednesday, November 2, 2011
GWT ClientBundle
Wednesday, November 2, 2011
ClientBundleEnsures resources are cachedRemoves unneeded roundtrips to serverData URLsJSON BundlesImage inlining
Relevant resource typesImageResourceCssResource
Wednesday, November 2, 2011
ImageResourceCompile time image processingEfficient access to image data at runtimeAutomatic image spriting with ClientBundle
Image optionsRTLRepeat stylePrevent inlining
Wednesday, November 2, 2011
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);
Wednesday, November 2, 2011
CssResourceSelected key featuresConstantsRuntime substitutionConditional CSSImageSprites
See the link below for detailed information on all features
Wednesday, November 2, 2011
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(); }
Wednesday, November 2, 2011
CssResource Runtime SubstitutionEvaluate static methods when styles injected
@eval SPLIT package.ImageHelper.createModuleBasedUrl("images/split.gif");.split { background-image: SPLIT;}
Wednesday, November 2, 2011
CssResource ConditionalsGood for browser quirksUnused styles pruned
@if user.agent ie6 ie8 { .proxy { filter: literal("alpha(opacity=50)"); }} @else { .proxy { opacity: 0.5; }}
Wednesday, November 2, 2011
CssResource SpritesAutomatic image spriting with ImageResource@sprite in CSS
@sprite .split { gwt-image: 'split'; }
Wednesday, November 2, 2011
Appearance Pattern
Wednesday, November 2, 2011
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
Wednesday, November 2, 2011
AppearanceInterface
Widget Cell
Sencha Base Custom
Blue Gray Custom
Appearance Interaction
Wednesday, November 2, 2011
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
Wednesday, November 2, 2011
Ext GWT 3 Themes
Wednesday, November 2, 2011
3.0 ThemesThemes are module basedTheme module defines what appearances are usedMay override individual rules as neededThemes can’t be switched at runtime
<!-- Default theme is Blue --> <inherits name="com.sencha.gxt.theme.blue.Blue" />
Wednesday, November 2, 2011
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>
Wednesday, November 2, 2011
Appearance SelectionConstructor
MyAppearance custom = GWT.create(MyAppearance.class); Window window = new Window(custom);
Wednesday, November 2, 2011
Example
Wednesday, November 2, 2011
ProgressBarCell
public ProgressBarCell() { this(GWT.<ProgressBarAppearance> create(ProgressBarAppearance.class)); }
public ProgressBarCell(ProgressBarAppearance appearance) { this.appearance = appearance; }
Wednesday, November 2, 2011
public static interface ProgressBarAppearance {
void render(SafeHtmlBuilder sb, Double value, int width);
void updateText(XElement parent, String text);
}
Wednesday, November 2, 2011
@Override public void render(Context context, Double value, SafeHtmlBuilder sb) { appearance.render(sb, value, getWidth()); }
Wednesday, November 2, 2011
public class ProgressBarDefaultAppearance implements ProgressBarAppearance {
public interface ProgressBarResources {
ImageResource bar();
ProgressBarStyle style(); }
public interface ProgressBarStyle extends CssResource {
String progressBar();
String progressInner();
.....
}
Wednesday, November 2, 2011
@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(); }
Wednesday, November 2, 2011
@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>"); }
Wednesday, November 2, 2011
@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()); }
Wednesday, November 2, 2011
<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>
Wednesday, November 2, 2011
Wednesday, November 2, 2011
Wednesday, November 2, 2011
Wednesday, November 2, 2011
Wednesday, November 2, 2011
Wednesday, November 2, 2011
Wednesday, November 2, 2011
Questions
Wednesday, November 2, 2011