The document discusses theming in GWT applications using the appearance pattern. It covers responsibilities of appearances, examples of button, text field, and panel appearances, the appearance contract and exceptions, constructing and replacing appearances using module rules, tips for the API, implementing appearances, composing themes, and automating theme generation from CSS3 to images.

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/