GWT.create 2013: Themeing GWT Applications with the Appearance Pattern

3,281 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
3,281
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
27
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

GWT.create 2013: Themeing GWT Applications with the Appearance Pattern

  1. 1. Theming GWT Applications with the Appearance Pattern Colin Alworth / Sencha Inc. colin.alworth@sencha.com
  2. 2. Three years ago Cell API and Appearance Pattern
  3. 3. Two years ago SenchaCon 2011, GXT 3 Preview released
  4. 4. Just over a year ago GXT 3.0.0 uses Cell API in Fields, Appearance everywhere
  5. 5. Theming GWT Appearance pattern Three main responsibilities ! • • • render initial content update content based on changes, interaction answer questions about rendered content
  6. 6. Examples
  7. 7. Theming GWT Button Appearance • • • • render text, icon, decoration update for changes update for hover, focus, mousedown find focus element, find menu element
  8. 8. Theming GWT Text Field • • • • render with value, options update for value, options update for empty, focus, value find focus element
  9. 9. Theming GWT Panel • • • render static content update to hide/show header, collapse/ expand panel ask for icons on buttons, elements to hold title, tools, body, buttons
  10. 10. Theming GWT Appearance contract • • • appearance controls rendered html widget deals with all logic appearance implementation can choose to use or ignore state changes
  11. 11. Theming GWT Appearance contract - exceptions • • ColorPalette/DatePicker - widget needs to know relative positions of items Grid/Tree - needs to guarantee fast creation/ lookups
  12. 12. Theming GWT Appearance contract Implementations should be stateless: ! • • Ensures that appearances will behave for cells Enables compiler to rewrite methods to static, inline into owning widget if possible !
  13. 13. Theming GWT Constructing appearances • • Widgets should invoke GWT.create on the appearance interface Module files can declare replace-with rules to specify an implementation ! !
  14. 14. Theming GWT Module rules <replace-with class="com.sencha.gxt...NeptuneInfoAppearance"> <when-type-is class="com.sencha.gxt...Info.InfoAppearance" /> </replace-with> ! !
  15. 15. Theming GWT Multiple themes in one app? <replace-with class="com.sencha.gxt...NeptuneInfoAppearance"> <when-type-is class="com.sencha.gxt...Info.InfoAppearance" /> <when-property-is name="gxt.theme" value="neptune" /> </replace-with> ! !
  16. 16. Theming GWT General API tips • Widgets should expose an appearance constructor Enables individual cases to use a custom appearance Widget’s appearance field should be private/final Avoids issues with changing appearance without changing dom structure Widgets should expose an appearance getter for subclasses • • • • ! !
  17. 17. Theming GWT General API tips • • Helpful have default appearance implementations that are easy to extend, changing minor details like styles Appearances shouldn’t use generics, since they are created by GWT.create, lose any typesafety ! !
  18. 18. Theming GWT Implementing appearances • render method - SafeHtmlBuilder or SafeHtml, either XTemplates, SafeHtmlTemplates, or hand-written Java ! <div class='{style.infoWrap}'> <div class='{style.info}'></div> </div> ! public void render(SafeHtmlBuilder sb) { sb.append(template.render(styles)); } ! !
  19. 19. Theming GWT Implementing appearances • find, update methods based on that structure ! @Override public Element getContentElement(Element parent) { return parent.getFirstChildElement(); } ! !
  20. 20. Theming GWT Implementing appearances • • Declare a default constructor (for GWT.create and replace-with) If it makes sense, ensure type can be extended ! !
  21. 21. Theming GWT Composing a theme • • • consistent set of appearances defined as a module made of of replacewith declarations in GXT 3.1 comes with a gxt.theme property for permutation switching of themes ! !
  22. 22. Automating theme generation
  23. 23. Theming GWT Automating theme generation • • Early GXT 3 tried few constants in one file, CssResource to reference these in all appearances Works when no images need to be created... ! !
  24. 24. Theming GWT Legacy browser image generation Base it on CSS3 gradients CSS3 rounded corners SVG vector images Starts us with a language we already know (rather than inventing new) Enables us to use CSS3 right away (in browsers that support it) • • • • • ! ! !
  25. 25. Info Example
  26. 26. Theming GWT Info.display("Hello world","Testing info popup");
  27. 27. Theming GWT CSS3 html and css <div class='{style.infoWrap}'>! <div class='{style.info}'></div>! </div>! .infoWrap {! border-style: none;! border-radius: 8px;! background-color: #000000;! opacity: .8;! margin: 2px 0 0 0;! }! .info {! padding: 10px;! }! !
  28. 28. Theming GWT Slicing Corners
  29. 29. Theming GWT Slicing Edges
  30. 30. Theming GWT Legacy 9-box html <div class="{style.contentArea}"> <div class="{style.content}"> <div class="{style.info}"> </div> </div> <div class="{style.topLeft}"></div> <div class="{style.top}"></div> <div class="{style.topRight}"></div> <div class="{style.bottomLeft}"></div> <div class="{style.bottom}"></div> <div class="{style.bottomRight}"></div> <div class="{style.left}"></div> <div class="{style.right}"></div> </div>
  31. 31. TabPanel Example !
  32. 32. Theming GWT TabPanelExample
  33. 33. Theming GWT TabPanelExample
  34. 34. Theming GWT TabPanelExample
  35. 35. Theming GWT Automating image generation • • • • • • • ! start with a CSS3 implementation, render in a browser specify images that need images collect from browser positions, borders, corner radius, gradient direction decide which images - background, corners, sides decide which images to stretch take a screenshot slice images from screenshot based on positions
  36. 36. Theming GWT
  37. 37. Theming GWT Automating image generation • ! takes about 5 seconds, most of which is starting browser and launching sample page
  38. 38. Theming GWT Back to theme generation • • • • CSS3 can be transformed to images images + legacy css used for older browsers HTML structure different as well nothing common except for a few values, sizes - where do we store those?
  39. 39. Theming GWT Theme config theme {! name = "themeName"! basePackage = "com.company.theme"! ! details {! panel {! }! tabs {! }! //...! }! }! !
  40. 40. Theming GWT Theme config theme {! details {! info {! backgroundColor = "#ffffff"! borderRadius = 8! opacity = 1.0! border = util.border('solid', '#cccccc', 2)! headerText = util.fontStyle("Tahoma, Arial, Verdana, sansserif", '15px', '#555555', 'bold');! messageText = util.fontStyle("Tahoma, Arial, Verdana, sansserif", '14px', '#555555');! margin = util.margins(2,0,0,0)! padding = util.padding(2,7)! }! }! }! ! !
  41. 41. Theming GWT Theme config • • • • • namespaced properties for easier organization values can be string, int, double some expressions supported values can be referenced by path basic set of util methods
  42. 42. Theming GWT Running the themed $ bin/themer.sh ! Command missing config files! usage: ThemeBuilder [options] [config ...]! -f,--force force output overwrite! -gen <path> directory to generate code to! -generateConfig <outputFile> Generate sample configuration! -h,--help print this message! -imageFile <path> captured image used for slicing images! -manifestFile <manifestFile> json manifest file of the captured image! -out <jar> path to jar file to generate. Default is! a jar named <theme.name>.jar in the! current directory! -warDir <warDir> directory to compile the css3-based theme! to before images are sliced from it! !
  43. 43. Theming GWT Example config $ themebuilder/bin/themer.sh themebuilder/examples/ quick-start/quick-start.theme! template generation started! template generation complete! image generation started! generating tool icons! ! ...! ! slice complete! packaging started! packaging complete! !
  44. 44. Theming GWT Included samples • • • • quick-start.theme skeleton-config.theme maven-jar/ maven-source/

×