Styles

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: A sample style file

 <styles>
         <style name="banner">
             <color_back value="ffffff"/>
             <color_fore value="0000ff"/>
             <font_face value="arial"/>
             <font_size value="10"/>
             <font_weight value="0"/>
             <font_italic value="0"/>
         </style>
         <style name="base">
             <color_back value="ffffff"/>
             <color_fore value="0000ff"/>
             <font_face value="arial"/>
             <font_size value="10"/>
             <font_weight value="0"/>
             <font_italic value="0"/>
         </style>
         <style name="Caption">
             <color_back value="ffffff"/>
             <color_fore value="008800"/>
             <font_face value="arial"/>
             <font_size value="11"/>
             <font_weight value="0"/>
             <font_italic value="0"/>
             <style name="CaptionSmall">
               <font_size value="8"/>
               <font_italic value="1"/>
         </style>
         </style>
         <style name="footer">
             <color_back value="ffffff"/>
 		...
     </styles>

Styles are determined from this hierarchy so that in the above example the style ' CaptionSmall ' is of the same font and color except with a smaller point size and italicized. (as of v2.0.6) Within the style file XML a color can also be specified as a decimal RGB value, an alpha channel value can also be specified as an option decimal value or as a hexval: Using decimal RGBA values

 <styles>
         <style name="banner">
            <color_back value="255,255,255"/>
             <color_fore value="0,0,255"/>
             <font_face value="arial"/>
             <font_size value="10"/>
             <font_weight value="0"/>
             <font_italic value="0"/>
         </style>
         <style name="base">
             <color_back value="ffffff80"/>
             <color_fore value="0,0,255,192"/>
 ...
 </styles>

Using System colors

System colors can also be used by naming the system color in place of an RGB value, thus Using SystemColors

 <styles>
         <style name="banner">
            <color_back value="activeCaption"/>
             <color_fore value="activeCaptionText"/>
             <font_face value="arial"/>
             <font_size value="10"/>
             <font_weight value="0"/>
             <font_italic value="0"/>
         </style>

The system colors are dependant on the user preferences and may vary from user to user and machine to machine. The system color properties are:

Extended Styles

Styles can be extended to add attributes other than the basic color and font attributes. However the use of these extra attributes is dependant upon the context such as the component or class using the style. The extra attributes are automatically added for the style when the style is loaded. Once the stle has been loaded it is marked as closed and any attempt to access an unrecognised style name will cause an error (this can be changed with the XStyleEx.setClosed(...) method). An example usage of the extended styles is the validation style, which uses three colors to specify the feedback colors for the validation states. The validations styles could thus be specified as: Specifying extended styles

 <style name="banner" extended="true">
   <colorNormal value="ffffff"/>
   <colorWarn value="ffffd5"/>
   <colorFail value="ffe6d5"/>
 </style>

Note the extended attribute for the style. By adding extra style attributes you may be able to provide additional consistency within the application as attributes for various classes can be specified on an application wide basis instead of via a class by class or component by component basis. In many cases you can specify the attribute values for components, for example alignments and borders. In applying a style the framework will attempt to set component attributes using the style name and value via either the XAttributedComponent interface or via Reflection. The basic types such as String, int, double, float and boolean values can be accomodated. The built-in styles are handled directly as described above and set the component's colors and font. Setting right aligned label styles and properties

 <styles></P>
         <style name="labelBold">
            <color_back value="255,255,255"/>
             <color_fore value="0,0,0"/>
             <font_face value="arial"/>
             <font_size value="10"/>
             <font_weight value="1"/>
             <font_italic value="0"/>
             <alignment value="Right"/>
         </style></P>
 ...

Applying styles

To apply a style to a component you just need to reference the style in the page's XML declaration. Thus applying style to an address form becomes: Style usage

 <Page>
   <Components>
     <Label x="42" y="61" w="103" h="20" content="First Name:" alignment="Right" style="Caption"/>
     <Label x="42" y="85" w="102" h="20" content="Last Name:" alignment="Right" style="Caption"/>
     <Label x="42" y="116" w="102" h="20" content="Telephone:" alignment="Right" style="Caption"/>
     <Label x="42" y="137" w="102" h="20" content="Fax:" alignment="Right" style="Caption"/>
     <Label x="42" y="161" w="102" h="20" content="Mobile:" alignment="Right" style="Caption"/>
     <Label x="42" y="196" w="102" h="20" content="Address:" alignment="Right" style="Caption"/>
     <Edit name="firstNameEdit" x="154" y="62" w="100" h="20"/>
     <Edit name="lastNameEdit" x="154" y="85" w="100" h="20"/>
     <Edit name="phoneEdit" x="155" y="115" w="100" h="20"/>
     <Edit name="faxEdit" x="155" y="137" w="100" h="20" />
     <Edit name="mobileEdit" x="154" y="160" w="100" h="20" />
     <Edit name="address1Edit" x="155" y="198" w="248" h="20" />
     <Edit name="address2Edit" x="155" y="222" w="248" h="20" />
     <Edit name="address3Edit" x="155" y="246" w="249" h="20" />
   </Components>
 </Page>

Related issues

Colors and fonts are not the only style related things that should be consistent within an application. Layouts, naming, data representations, translations and so on should also be consistent. Consistency will make it easier for a user to grasp the concepts behind the application and it will make it easier to understand the mechanism used within the application for various tasks. Logically grouping elements can also assist readability. So, for example placing related components together within a framed panel gives a visual clue as to the association of those components. Subtle shading of panels can also assist in giving the necessary visual clues about the role of an individual panel particularly if the coloring is reinforced by the behavior you code into the applications.

Layout

In terms or readability it is often said that the average person can optimally perceive about seven pieces of information. In an application it is often difficult to limit the number of items or components displayed at once. Therefore style can play an important role in reducing apparent clutter and confusion. The style manager can go along way to helping produce a harmonious color scheme and if judiciously employed such a scheme may allow you make better use of the on-screen space. To maximize such benefit it is important that your layout is consistent. Careful consideration should be given to alignments, spacing and grouping of components. All of these features can greatly assist in the smooth flow of action within an application. A later chapter (See Layout.) details how layouts can be controlled within an application. With dynamic content it is always important to consider how the content will appear. Aria makes it easy to dynamically modify the content of a component but this generally doesn't mean that the layout of that component will be modified. Particularly for elements that display text it is important to note the interaction of fonts and layouts. Some fonts are narrower than others or have different distributions of character widths and therefore it is important to test your application with a representative set of data.

Flow

Just as layout is important, the flow of text and components can have a major impact on the user experience. Generally it is best to keep it simple: left, right, top to bottom. Keep it simple, reinforce the visual signals, update consistently.

Naming

Styles should be named consistently for two reasons. Firstly from a programming point of view a consistent naming convention will make reading of code easier and hence development and maintenance will be easier. We recommend that you use a convention similar to the naming convention you would use in programming Java. Secondly a consistent style naming convention is important where styles are being modified and particularly where the Color Chooser is being used. The chooser can modify existing styles depending on the style name and therefore a consistent naming convention will help avoid confusion when styles are modified in this way.

Data/formatting

Some values such as numeric, date or monetary values may be formatted specially and styles can be used to reinforce or highlight important values such as negative monetary values.

Setting the system look and feel

The system look and feel can be set up using a look and feel (LAF) installer. The LAF installer is controlled by a startup parameter " LAF ". The value of this parameter refers to a helper class that installs the LAF and takes care of the initialization. This setting is only appropriate for Swing applications as changing the LAF is not supported in the AWT.

Setting the Look and Feel

In Swing you can alter the look and feel of an application by setting the 'Look and Feel' manager for the application. The look and feel (LAF) affects the visual appearance of components and some of the soft behavioral attributes, like highlighting, rounding of button edges and so on. The LAF may also have a broader impact by changing indentations, component sizes and layout. Setting the LAF is fairly straightforward within Aria. The project settings pages include the option to choose the LAF. (it is on the files page as somewhat tenuously you need to choose a configuration file for the synth LAF) Adding a new LAF is also possible and Aria makes this even easier than normal by allowing you to simply plug-in the look and feel via a startup parameter. Aria comes with support for a few popular LAFs, but it is also easy to add support for your favorite LAF. The component class for setting the LAF is part of the Open Source Aria and hence you can review the source code for the LAF installer to see how to build an installer for some other LAF. The LAF is set with the following startup parameter

This setting refers to a helper class that installs the LAF and takes care of any initialization that is necessary. Aria lists a few popular LAFs, including the default LAF, JGoodies Looks LAF, Windows and the Synth LAF. Of these, the Synth LAF is probably the most interesting as it is configured via XML.

Configuring Synth

The Synth LAF requires a number of extra parameters to be configured to operate correctly.

These parameters may vary significantly depending on the content of the Synth configuration file. The SynthResourceLoader is the name of a class that will be used to load the resources used by the Synth LAF. The class does not need to do anything special as it merely provides a (classloader) route to the resources. When the Synth LAF is chosen a number of new styles are added to the project if they do not already exist. These styles are used by the LAF and you can customize them to alter the look. Note that the Synth LAF provides rendering for many aspects of the components and the LAF may therefore override the styles you have chosen for individual components. Some of the built-in components have an option to suppress the LAF and use the styles you explicitly apply to the component.

SkinBuilder

A sample project ` SkinBuilder ' is included in Aria 3.0, this application is another demo of Aria, but it can be used to configure the Synth Look and Feel, including choosing artwork, setting properties and colorizing the LAF . See the accompanying documentation for more details.

Using styles with Synth

While the Synth look and feel can be used out of the box it is often desirable to connect the look and feel to the application's styles for added consistency. The Synth look and feel is configured via an XML file and this configuration file can itself be preprocessed to include colors and fonts from the applications look and feel. Some special expressions can be embedded in the XML and when processed these are converted into the color and font declarations expected by Synth. Scalable Vector Graphics ( SVG) images can also be used with Synth by way of the preprocessor. Aria can convert a referenced SVG into a PNG raster graphic for use in the final application. Using SVG in this way allows you to create sophisticated icons and buttons for your application and have these images scale to the required size.

Using SVG and Synth

Just as the Synth file can be processed so to can the preprocessed SVG files. SVG uses a slightly different definition of colors so different expressions are required but the concepts are the same. The substitution expressions also come in a number of variations to help support generation of gradients from a single style.

Each expression in the table above can have just a style name as an argument or it can have the style name plus percentage values for each color channel. Thus an expression such as getColorForegroundRgb(HeadlineStyle,50,60,80) obtains the color from the style, splits out the RGB color channels and returns a color that scales the channel values by the percentages given. So if the red value was 240 the example expression would return a color with a red value of 50% or 120. Similarly if the percentage given is between 100% and 200% the color value is scaled up to 255. In this way a red value of 120 and a percentage of 150 would result in a color with a red value of 187 (i.e. 120 + (255-120)*50/100). The expression set also includes a variation where instead of scaling the RGB values the HSB values are scaled. In some cases it may be easier to specify the gradient color stops as variations in saturation or brightness values. The scaling of the HSB values works in the same way as the RGB values. Aria automatically adds a set of styles for Synth when you select the Synth LAF. These styles are the styles that are used in the preconfigured Synth LAF that is part of Aria. However you can further customize the look and feel to use whatever graphics files and styles that you like, the configuration file is just another XML file that you can edit. To add another style to the Synth LAF just add the matching style within Aria or within the style file. Then embed the relevant expression from the list above in your Synth configuration file. The Synth LAF requires the Batik SVG engine to process SVG images. The libraries for Batik must be part of your project for this process to work correctly. More information on Batik can be found on the Batik website.

Panel backgrounds

Synth can be used to paint many components including the panel backgrounds but in some cases a different look or style is desirable for painting panels to help distinguish part of an application. A custom painter class can be used for such painting, the code for configuring such a background painter is shown below:

The example below shows a number of panels using this custom painter to display a gradient background with a watermark logo.

Painters

Aria 2.0 introduced the notion of painters much like the painters used within the Synth look and feel, and since then the use of painters has become more widespread. Aria 3.0 adopted the SwingLabs painter API in an effort to conform to standards and to make a wider range of painters available. The painters API is straightforward.

The painters API

public void paint( Graphics2D g2d, JComponent comp, int w, int h );

and can be used in a varient of Aria and Aria components. The painter is normally responsible for painting the entire client area of the component, but of course it is open to configuration. The painter class need not extend a component and therefore it acts purely as helper class. Some painters included in Aria are:

Painter	Appearance/Role
BandPainter	Fills the client area with a number of coloured bands, graduating from the foreground colour to the background colour.
FlarePainter	Fills the client area with a radial gradient using the foreground and background colours
TitlePainter	Extends the GradientBackground by adding a caption
GradientBackground	Fills the background with a gradient. The gradient uses the background and foreground colours. The painter can be configured to `nest' its gradient into the parent coordinate space so that multiple panels appear to share the same gradient.
SvgPainter	A painter based on an SVG images. See the section SVG Support for more details. The painter can interact with the mouse for various effects.
ImagePainter	Paints an image in the client area.

Style guidelines

A full discussion of styles is beyond the scope of this guide, however a number of style guidelines have been published and depending on your target platform and personal tastes it may be worth consulting these guidelines for clues as to best practice.

Look and feel resources

Java Look and Feel Design Guidelines: http://java.sun.com/products/jlf/

Introduction to the Apple Human Interface Guidelines: http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/

Official Guidelines for User Interface Developers and Designers: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/welcome.asp

Palm OS User Interface Guidelines: www.palmos.com/dev/support/docs/uiguidelines.pdf

SwingLabs Painter http://javadesktop.org/swinglabs/build/weekly/latest/swingx-HEAD/javadoc/org/jdesktop/swingx/painter/package-summary.html

 

‹ Section III: In Depth up Layout Managers ›