Theming GWT
Applications with the
Appearance Pattern
Colin Alworth / Sencha Inc.
colin.alworth@sencha.com

Three years ago
Cell API and Appearance Pattern

Two years ago
SenchaCon 2011, GXT 3 Preview released

Just over a year ago
GXT 3.0.0 uses Cell API in Fields, Appearance
everywhere

Theming GWT
Appearance pattern
Three main responsibilities
!
•
•
•
render initial content
update content based on changes, interaction
answer questions about rendered content

Examples

Theming GWT
Button Appearance
•
•
•
•
render text, icon, decoration
update for changes
update for hover, focus, mousedown
find focus element, find menu element

Theming GWT
Text Field
•
•
•
•
render with value, options
update for value, options
update for empty, focus, value
find focus element

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

Theming GWT
Appearance contract
•
•
•
appearance controls rendered html
widget deals with all logic
appearance implementation can choose to
use or ignore state changes

Theming GWT
Appearance contract - exceptions
•
•
ColorPalette/DatePicker - widget needs to
know relative positions of items
Grid/Tree - needs to guarantee fast creation/
lookups

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
!

Theming GWT
Constructing appearances
•
•
Widgets should invoke GWT.create on the
appearance interface
Module files can declare replace-with rules to
specify an implementation
!
!

Theming GWT
Module rules
<replace-with
class="com.sencha.gxt...NeptuneInfoAppearance">
<when-type-is
class="com.sencha.gxt...Info.InfoAppearance" />
</replace-with>
!
!

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>
!
!

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
•
•
•
•
!
!

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
!
!

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));
}
!
!

Theming GWT
Implementing appearances
•
find, update methods based on that structure
!
@Override
public Element getContentElement(Element parent) {
return parent.getFirstChildElement();
}
!
!

Theming GWT
Implementing appearances
•
•
Declare a default constructor (for
GWT.create and replace-with)
If it makes sense, ensure type can be
extended
!
!

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
!
!

Automating theme generation

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...
!
!

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)
•
•
•
•
•
!
!
!

Info Example

Theming GWT
Info.display("Hello world","Testing info popup");

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;!
}!
!

Theming GWT
Slicing Corners

Theming GWT
Slicing Edges

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>

TabPanel Example
!

Theming GWT
TabPanelExample

Theming GWT
TabPanelExample

Theming GWT
TabPanelExample

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

Theming GWT

Theming GWT
Automating image generation
•
!
takes about 5 seconds, most of which is
starting browser and launching sample page

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?

Theming GWT
Theme config
theme {!
name = "themeName"!
basePackage = "com.company.theme"!
!
details {!
panel {!
}!
tabs {!
}!
//...!
}!
}!
!

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)!
}!
}!
}!
!
!

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

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!
!

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!
!

Theming GWT
Included samples
•
•
•
•
quick-start.theme
skeleton-config.theme
maven-jar/
maven-source/