Theming in Ext GWT 3.0 now uses the GWT Appearance pattern and utilizes GWT ClientBundle and CssResource. This session will provide a detailed overview of how theming works and how to extend and create new themes.
16. ClientBundle
Ensures resources are cached
Removes unneeded roundtrips to server
Data URLs
JSON Bundles
Image inlining
Relevant resource types
ImageResource
CssResource
Wednesday, November 2, 2011
17. ImageResource
Compile time image processing
Efficient access to image data at runtime
Automatic image spriting with ClientBundle
Image options
RTL
Repeat style
Prevent inlining
Wednesday, November 2, 2011
18. ImageResource Code
public interface TextFieldResources extends ClientBundle {
@ImageOptions(repeatStyle = RepeatStyle.Horizontal)
ImageResource textBackground();
@Source("doubleright2.gif")
@ImageOptions(repeatStyle = RepeatStyle.None, preventInlining = true)
ImageResource allRight();
}
// create via deferred binding
TextFieldResources r = GWT.create(TextFieldResources.class);
Wednesday, November 2, 2011
19. CssResource
Selected key features
Constants
Runtime substitution
Conditional CSS
ImageSprites
See the link below for detailed information on all features
Wednesday, November 2, 2011
20. CssResource Constants
@def tabMargin 2px;
@def tabMinWidth 30px;
@def tabWidth 120px;
.tabItem {
width: tabMinWidth;
}
public interface TabPanelBaseStyle extends CssResource {
int tabMargin();
int tabMinWidth();
int tabWidth();
}
Wednesday, November 2, 2011
25. Appearance Pattern
Renders the “view” via a SafeHtml string
Responsible for HTML structure and styles
Responds to state changes
Appearance pattern applied to both widgets and cells
Two ways of using custom appearances
Pass to constructor of widget or cell
Use module rule
ClientBundle
Widget Appearance CssResource
XTemplate
Wednesday, November 2, 2011
26. Appearance Interaction
Widget Cell
Appearance
Interface
Sencha Base Custom
Blue Gray Custom
Wednesday, November 2, 2011
27. Appearance Details
Appearances are stateless and reused
Render method receives passed SafeHtmlBuilder
Must pass parent element to methods for context
public interface ProgressBarAppearance {
void render(SafeHtmlBuilder sb, double value, int width);
void updateText(XElement parent, String text);
}
Wednesday, November 2, 2011
29. 3.0 Themes
Themes are module based
Theme module defines what appearances are used
May override individual rules as needed
Themes can’t be switched at runtime
<!-- Default theme is Blue -->
<inherits name="com.sencha.gxt.theme.blue.Blue" />
Wednesday, November 2, 2011