Your SlideShare is downloading. ×
0
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
GWT.create 2013: Themeing GWT Applications with the Appearance Pattern
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,228

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
2,228
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
21
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. Theming GWT Applications with the Appearance Pattern Colin Alworth / Sencha Inc. colin.alworth@sencha.com
  • 2. Three years ago Cell API and Appearance Pattern
  • 3. Two years ago SenchaCon 2011, GXT 3 Preview released
  • 4. Just over a year ago GXT 3.0.0 uses Cell API in Fields, Appearance everywhere
  • 5. Theming GWT Appearance pattern Three main responsibilities ! • • • render initial content update content based on changes, interaction answer questions about rendered content
  • 6. Examples
  • 7. Theming GWT Button Appearance • • • • render text, icon, decoration update for changes update for hover, focus, mousedown find focus element, find menu element
  • 8. Theming GWT Text Field • • • • render with value, options update for value, options update for empty, focus, value find focus element
  • 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. Theming GWT Appearance contract • • • appearance controls rendered html widget deals with all logic appearance implementation can choose to use or ignore state changes
  • 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. 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. 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. Theming GWT Module rules <replace-with class="com.sencha.gxt...NeptuneInfoAppearance"> <when-type-is class="com.sencha.gxt...Info.InfoAppearance" /> </replace-with> ! !
  • 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. 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. 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. 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. Theming GWT Implementing appearances • find, update methods based on that structure ! @Override public Element getContentElement(Element parent) { return parent.getFirstChildElement(); } ! !
  • 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. 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. Automating theme generation
  • 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. 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. Info Example
  • 26. Theming GWT Info.display("Hello world","Testing info popup");
  • 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. Theming GWT Slicing Corners
  • 29. Theming GWT Slicing Edges
  • 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. TabPanel Example !
  • 32. Theming GWT TabPanelExample
  • 33. Theming GWT TabPanelExample
  • 34. Theming GWT TabPanelExample
  • 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. Theming GWT
  • 37. Theming GWT Automating image generation • ! takes about 5 seconds, most of which is starting browser and launching sample page
  • 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. Theming GWT Theme config theme {! name = "themeName"! basePackage = "com.company.theme"! ! details {! panel {! }! tabs {! }! //...! }! }! !
  • 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. 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. 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. 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. Theming GWT Included samples • • • • quick-start.theme skeleton-config.theme maven-jar/ maven-source/

×