|
Styling Java User Interfaces
Improving data display can help users perform tasks better.
by Philippe Kaplan
Posted May 29, 2003
A well-designed user interface (UI) can make an end user perform more effectively by processing more data without sacrificing usability and readability. Computer power is improving over time, enabling larger and more complex UIs without a corresponding loss of speed. This is not only a matter of hardware; making a UI more usable and more readable means improving the data display for a better quality of data rendering. However, while the design of the UI has a strong influence, it is complex and expensive to upgrade. That's why we consider styling as a solution, because it enhances the pertinence of the display while keeping the same UI design. Let's see how we can use what we know to style Java objects, and then apply one typical styling system, Cascading Style Sheets (CSS), to the Java world to enhance the informative level of a user interface.
CSS is a simple mechanism for adding style such as fonts, colors, and spacing to Web documents. This technology remains today confined to HTML and XML documents, although its principles are suitable for other domains.
The typical architecture of a Web page is shown in Figure 1. The HTML and CSS are located on a Web server. They transit through the network to the client browser that displays the page. The CSS customizes the look of the pages according to the HTML content and the rules defined in the CSS file.
Style sheet documents are made up of rules. Here is an example of a CSS rule:
H1 {
ext-align : center;
color : green;
}
The part before the opening curly brackets (H1) is called the selector. This selector matches the elements tagged H1 in the HTML document. The property settings defined between the curly brackets, called declarations, are interpreted by the browser to customize the rendering of all elements tagged H1. In the example, all H1 elements display as centered green text.
The selector can also match element attribute values, IDs, hierarchical structures, and so on. For example, the CSS rule:
A[REL='home'] {
color: green;
}
matches all HTML elements tagged A and whose attribute is named REL with the value 'home', like this:
<A REL='home' name='test'>test</A>
and sets their color to green. The important point here is that the selector provides a power close to regular expressions. (A regular expression system is a common tool in programming languages, especially shells or interpreters, to recognize patterns in a document.)
Several rules can match the same element. CSS defines a priority order for the rules based on the specificity of the selectors. The specificity of a selector is a value computed from the number and kind of patterns that constitute the selector. Roughly, the specificity value grows with the precision level of the selector. In case the specificity is the same, the rule that has been defined last gets the highest priority.
Back to top
|