Ext GWT 3.0 Theming and Appearances

Wednesday, November 2, 2011

Darrell Meyer, Sencha

THEMING & APPEARANCESdarrell@sencha.com @darrellmeyer

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

GWT Panels

GWT GWT-extcfs14.tistory.com/upload_control/download.blog?fhandle... · Agenda • About GWT • About GWT-ext • Make simple UI with GWT-ext • History Manager Demo 2

GWT integration with Vaadin - 2017.javacro.hr...GWT integration with Vaadin Peter Lehto @peter_lehto expert & trainer. Vaadin & GWT GWT Transport mechanisms. QA aadin Connectors Web

An introduction to GWT and Ext GWT

Opensoft Gwt

GWT Reloaded

Architecting your GWT applications with GWT-Platform - Lesson 02

Sustainable Theming

Drupal theming

Theming views

Gwt Presentation

Gdd2009 gwt gwt-architecture-best-practices

Thoughtful theming

Joomla! theming

Drupal Theming Introduction

Theming Your Views

Maintainable theming

google gwt

Drupal 7 Theming

Prague GWT