12 Styles
Most applications try to use consistent styling and Carousel provides support for consistent coloring and typography through its style manager.
Carousel's style management allows all the information and details of colors and fonts to be maintained separately from the rest of the UI description. Not only does this make it easy to reference particular style elements but it also makes it easy to switch styles say, for example, when rebranding an application for a different sets of end-users.
Using styles
In the introduction section we saw how styles could be applied when adding components either via XML or within Java code. Carousel provides interactive visual tools to help design and use styles.
Within Carousel a style can be applied by selecting a component or several components and clicking on the chosen style in the style palette.
The style name is then linked to the component so that any subsequent change to the style will change the look of linked components. If a component has an associated style then the styles palette's selection will be updated to show the selected style.
The style palette presents a preview of the style and if you move the mouse over an individual style you should see a tooltip presented using the appropriate style, including the style's font.
Changing a style
A style can be modified by selecting the style in the style palette and then right clicking to popup the style's context menu. For most styles the simplest thing to do is to choose the Edit... option and pick colors and fonts that suit the particular use.
The style edit dialog allows you to choose the font face and style plus the foreground and background colors.
The styles are then saved to the styles file whenever the project is saved.
Color schemes
Carousel extends the notion of styles by including a color scheme chooser to provide coherent sets of styles.
You can edit a set of styles as a color scheme by choosing the Color Scheme... option from the Style Palette's popup menu.
The Color Chooser provides a convenient way of specifying sympathetic systems of colors and styles. The chooser consists of a number of areas for choosing the colors and then applying these colors to a set of styles.
The color chooser has two parts, the first allows the choice of a set of sympathetic colors and the second allows selection of these colors for various usages.
On the left hand side is a color wheel where you can choose a base color. This base color can be manipulated using two sliders for brightness and saturation. The hue can also be modified by clicking at some point within the inner circle.
The Hue, Saturation and Brightness values can also be entered directly as numeric values.
Once the color has been chosen the colors and the variants are shown in a preview area. The number and type of variants displayed depend on the color scheme chosen. By default the scheme is monochromatic but other schemes can be chosen from the drop down list at the top of the chooser.
Below the preview area is a table of colors and you can click on any on these to use it as the base color.
On the second page of the chooser is an area where you can configure the styles. Simply click on the various sample texts to modify the foreground color, the background color or the font. A set of radio buttons allow you choose from these options.
Once the set of styles has been selected click OK to save the styles under the specified style name. If a new style is being created the styles will be added to the style palette. Alternatively if the style name is already in use then the styles will be updated once the chooser is closed.
Loading styles
The style details are stored in an XML file pointed to by the startup parameter ' StyleFile '. In the absence of an entry or a file name the files ' styles.xml ' is used. A typical style file includes color and font information as below:
Code Sample 12-1 - A sample style file
|
|
;)
;)
;)
;)