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.
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
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
!
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();
}
!
!
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
!
!
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)
•
•
•
•
•
!
!
!
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
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?
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!
!
