Your SlideShare is downloading. ×
Ext GWT 3.0 Theming and Appearances
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Ext GWT 3.0 Theming and Appearances

8,089
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 …

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
8,089
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
135
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Wednesday, November 2, 2011
  • 2. THEMING & APPEARANCES Darrell Meyer, Sencha darrell@sencha.com @darrellmeyerWednesday, November 2, 2011
  • 3. Overview 2.0 Theming GWT ClientBundle Appearance Pattern 3.0 Themes ExamplesWednesday, November 2, 2011
  • 4. 2.0 ThemesWednesday, November 2, 2011
  • 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. Wednesday, November 2, 2011
  • 7. Wednesday, November 2, 2011
  • 8. Wednesday, November 2, 2011
  • 9. Wednesday, November 2, 2011
  • 10. Wednesday, November 2, 2011
  • 11. Wednesday, November 2, 2011
  • 12. Wednesday, November 2, 2011
  • 13. Wednesday, November 2, 2011
  • 14. A Better ApproachWednesday, November 2, 2011
  • 15. GWT ClientBundleWednesday, November 2, 2011
  • 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. 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. 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. CssResource Selected key features Constants Runtime substitution Conditional CSS ImageSprites See the link below for detailed information on all featuresWednesday, November 2, 2011
  • 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. 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. 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. CssResource Sprites Automatic image spriting with ImageResource @sprite in CSS @sprite .split { gwt-image: split; }Wednesday, November 2, 2011
  • 24. Appearance PatternWednesday, November 2, 2011
  • 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. Appearance Interaction Widget Cell Appearance Interface Sencha Base Custom Blue Gray CustomWednesday, November 2, 2011
  • 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. Ext GWT 3 ThemesWednesday, November 2, 2011
  • 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. 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. Appearance Selection Constructor MyAppearance custom = GWT.create(MyAppearance.class); Window window = new Window(custom);Wednesday, November 2, 2011
  • 32. ExampleWednesday, November 2, 2011
  • 33. ProgressBarCell public ProgressBarCell() { this(GWT.<ProgressBarAppearance> create(ProgressBarAppearance.class)); } public ProgressBarCell(ProgressBarAppearance appearance) { this.appearance = appearance; }Wednesday, November 2, 2011
  • 34. public static interface ProgressBarAppearance { void render(SafeHtmlBuilder sb, Double value, int width); void updateText(XElement parent, String text); }Wednesday, November 2, 2011
  • 35. @Override public void render(Context context, Double value, SafeHtmlBuilder sb) { appearance.render(sb, value, getWidth()); }Wednesday, November 2, 2011
  • 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. 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. @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>&#160;</div>"); sb.appendHtmlConstant("</div>"); sb.appendHtmlConstant("<div class=" + style.progressText() + " " + style.progressTextBack() + ">"); sb.appendHtmlConstant("<div style=width:" + width + "px>&#160;</div>"); sb.appendHtmlConstant("</div>"); sb.appendHtmlConstant("</div>"); sb.appendHtmlConstant("</div>"); }Wednesday, November 2, 2011
  • 39. @Override public void updateText(XElement parent, String text) { getTopElem(parent).getFirstChildElement().setInnerHTML(Util.isEmptyString (text) ? "&#160;" : text); getBackElem(parent).getFirstChildElement().setInnerHTML(Util.isEmptyString (text) ? "&#160;" : 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. <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. Wednesday, November 2, 2011
  • 42. Wednesday, November 2, 2011
  • 43. Wednesday, November 2, 2011
  • 44. Wednesday, November 2, 2011
  • 45. Wednesday, November 2, 2011
  • 46. Wednesday, November 2, 2011
  • 47. QuestionsWednesday, November 2, 2011