gxt-theme-40x

Simple GXT Application with Theme module

This is a very basic GXT project with a theme module.

Generate Project

You can generate your own project based on this project using this Maven Archtype.

Requirements

• Java JDK - (GXT Versions Matrix Reference)
• Apache Maven
• Access to Sencha Maven Artifactory - This will give you access to GXT 4.0.3.

IDE

Importing the project into the IDE.

1. Run mvn install from the project root to build the theme.
   • The reason this is done to start with is to generate the theme source files which will be in the generated source directory.
2. Import this project into your IDE as Maven project.
3. Create a launcher in the IDE for the application.
   • Eclipse - Right click and debug as GWT Development Mode with Embedded Jetty Server.
   • IntellJ IDEA - Create a GWT launcher.

Building the theme

The theme was copied from Triton and renamed as Tritium for example.

Full Build

Running mvn install from the root of the project will do a full project build which includes the theme.

Theme Only Build

Running mvn install from the theme module, or theme folder, will allow you to only build the theme.

Theme Reference

• Generating Theme Guide
• Theme Utilities Guide
• About GSS Guide
• GSS Syntax Guide
• GSS to CSS Guide

Using Client Bundles

Client bundles are ideal for encapsulating reuseable code. Like we do with Appearances. I like to suggest using gss variables in a global gss file that cascades into all of your client bundles so you only have one place for global values. Check out the Theme Utilities for using the Themebuilder theme values.

• Client Bundling and Styles

Extending the theme

Extending the theme allows you full control of the GSS, styles, and widget look and styling.

Extending Button Appearance Example

• Project EntryPoint with buttons
• Red Button Appearance
• Purple Button Appearance

Extending GXT Appearances

This video covers extending the GXT appearance, and providing your own css styling.

• Button Extension From this Repo
• ButtonCellAppearance Extension Example
• Custom Split Button Cell Appearance

Theme File Locations

This images covers where the theme module stores the themes appearances and associated ClientBundle resources.

• NOTE: The Triton* class names in the image have been renamed to Tritium*.

Tips & Tricks

There is more than one to style widgets. Check out some of the tips and tricks for ideas. (Check out the example images at the bottom of the gists.)

Misc

• Another way to style a tip. See the gist.
• Another way to style a progress bar. See the gist.
• Custom slider example. See the gist.
• Custom toggle button. See the gist.
• Showing an icon when hovering over header. See the gist.
• Text area resizing. See the gist.
• Custom datepicker. See the gist.
• Combo with multiple checkboxes. See the gist

Animations

• Blinking border. See the gist.
• CSS3 marquee animation. See the gist.

Buttons

• Another way to change the button color for modern browsers only. See the gist.
• Custom tool button using icon. See the gist.
• Another way to style toggle buttons. See the gist.
• Another way to style the tab panel bar. See the gist.
• Custom Split Button. See the gist.

Grids

• Another way to style the grid using the ViewConfig. See the gist.
• Another way to style the grid selection (1). See the gist.
• Another way to style the grid selection (2). See the gist.
• Another way to style the grid selection (3). See the gist.
• Another way to show the dirty icon in the grid. See the gist.
• Another way to disable the button in a grid (1). See the gist.
• Another way to disable the button in a grid (2). See the gist.
• Split grid or locking grid example. See the gist.
• Custom row expander button. See the gist.
• Custom filter icon. See the gist.

Trees

• Another way to layout cells in a grid. See the gist.
• Another way to layout the tree. See the gist.

Containers

• Another way to color headers in a BorderLayoutContainer. See the gist.
• Another way to use HTML layout and css to layout. See the gist.
• Fluid Layout. See the gist.
• Center and scroll container. See the gist.

Error Handling

• Another way to style your error handler. See the gist.

Icons

• Font Awesome example with flexible layout. See the gist
• Material icons. See the Explorer Example.

Fonts

• Web Fonts. See the Explorer Example.

Extending Appearances

• Extending the appearance. See the gist.

ImageResource

• Hacking the ImageResource. See the gist.

Embedded Layout

• Embedding your app. See the gist.

DND Images

• Dropping images on the window (1). See the gist.
• Doprring images on the window (2). See the gist.

SVG

• Resize SVG. See the gist