Ext GWT 3.0 Theming and Appearances

9,343 views

Published on

Theming in Ext GWT 3.0 now uses the GWT Appearance pattern and utilizes GWT ClientBundle and CssResource. This session will provide a detailed overview of how theming works and how to extend and create new themes.

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
9,343
On SlideShare
0
From Embeds
0
Number of Embeds
701
Actions
Shares
0
Downloads
138
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ext GWT 3.0 Theming and Appearances

  1. 1. Wednesday, November 2, 2011
  2. 2. THEMING & APPEARANCES Darrell Meyer, Sencha darrell@sencha.com @darrellmeyerWednesday, November 2, 2011
  3. 3. Overview 2.0 Theming GWT ClientBundle Appearance Pattern 3.0 Themes ExamplesWednesday, November 2, 2011
  4. 4. 2.0 ThemesWednesday, November 2, 2011
  5. 5. 2.0 Themes Single monolithic CSS file (gxt-all.css) Static images referenced by CSS Manual image spriting CSS contains all browser specific stylesWednesday, November 2, 2011
  6. 6. Wednesday, November 2, 2011
  7. 7. Wednesday, November 2, 2011
  8. 8. Wednesday, November 2, 2011
  9. 9. Wednesday, November 2, 2011
  10. 10. Wednesday, November 2, 2011
  11. 11. Wednesday, November 2, 2011
  12. 12. Wednesday, November 2, 2011
  13. 13. Wednesday, November 2, 2011
  14. 14. A Better ApproachWednesday, November 2, 2011
  15. 15. GWT ClientBundleWednesday, November 2, 2011
  16. 16. ClientBundle Ensures resources are cached Removes unneeded roundtrips to server Data URLs JSON Bundles Image inlining Relevant resource types ImageResource CssResourceWednesday, November 2, 2011
  17. 17. ImageResource Compile time image processing Efficient access to image data at runtime Automatic image spriting with ClientBundle Image options RTL Repeat style Prevent inliningWednesday, November 2, 2011
  18. 18. 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);Wednesday, November 2, 2011
  19. 19. CssResource Selected key features Constants Runtime substitution Conditional CSS ImageSprites See the link below for detailed information on all featuresWednesday, November 2, 2011
  20. 20. 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
  21. 21. CssResource Runtime Substitution Evaluate static methods when styles injected @eval SPLIT package.ImageHelper.createModuleBasedUrl("images/split.gif"); .split { background-image: SPLIT; }Wednesday, November 2, 2011
  22. 22. 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; } }Wednesday, November 2, 2011
  23. 23. CssResource Sprites Automatic image spriting with ImageResource @sprite in CSS @sprite .split { gwt-image: split; }Wednesday, November 2, 2011
  24. 24. Appearance PatternWednesday, November 2, 2011
  25. 25. 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 XTemplateWednesday, November 2, 2011
  26. 26. Appearance Interaction Widget Cell Appearance Interface Sencha Base Custom Blue Gray CustomWednesday, November 2, 2011
  27. 27. 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); }Wednesday, November 2, 2011
  28. 28. Ext GWT 3 ThemesWednesday, November 2, 2011
  29. 29. 3.0 Themes Themes are module based Theme module defines what appearances are used May override individual rules as needed Themes can’t be switched at runtime <!-- Default theme is Blue --> <inherits name="com.sencha.gxt.theme.blue.Blue" />Wednesday, November 2, 2011
  30. 30. 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>Wednesday, November 2, 2011
  31. 31. Appearance Selection Constructor MyAppearance custom = GWT.create(MyAppearance.class); Window window = new Window(custom);Wednesday, November 2, 2011
  32. 32. ExampleWednesday, November 2, 2011
  33. 33. ProgressBarCell public ProgressBarCell() { this(GWT.<ProgressBarAppearance> create(ProgressBarAppearance.class)); } public ProgressBarCell(ProgressBarAppearance appearance) { this.appearance = appearance; }Wednesday, November 2, 2011
  34. 34. public static interface ProgressBarAppearance { void render(SafeHtmlBuilder sb, Double value, int width); void updateText(XElement parent, String text); }Wednesday, November 2, 2011
  35. 35. @Override public void render(Context context, Double value, SafeHtmlBuilder sb) { appearance.render(sb, value, getWidth()); }Wednesday, November 2, 2011
  36. 36. 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
  37. 37. 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; }Wednesday, November 2, 2011
  38. 38. @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
  39. 39. @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
  40. 40. <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
  41. 41. Wednesday, November 2, 2011
  42. 42. Wednesday, November 2, 2011
  43. 43. Wednesday, November 2, 2011
  44. 44. Wednesday, November 2, 2011
  45. 45. Wednesday, November 2, 2011
  46. 46. Wednesday, November 2, 2011
  47. 47. QuestionsWednesday, November 2, 2011

×