The difference between a layout and the look and feel of UI components
jQuery UI also provides a framework to create UI components known as widgets, which use CSS rules to define things such as a widget's width, height, margins, padding, and the positioning of the HTML elements that they are built from.
Here is a simple example to illustrate the difference between a layout and the look and feel of a component.
A developer created a jQuery UI widget called SimpleWidget, which uses a div tag as its container.
jQuery UI uses simple naming conventions so that the widget layout CSS rules and the look and feel (theme) CSS rules remain separate. This way, you can apply different themes to the same widget without having to change the layout CSS rules that are specific to the widget itself. jQuery UI also provides a default theme that supplies sensible defaults.
The widget produces the following in HTML:
<div id="firstSimpleWidget" class="ui-simplewidget ui-widget ui-helper-reset">This is SimpleWidget in action!</div>
In the div tag, the id attribute is used by jQuery to identify it to set up a plugin.
The class attribute has several entries; some of these entries are as follows:
ui-simplewidget: This is a CSS rule used by theSimpleWidgetplugin to set how a plugin should be laid out. Therefore, this is the CSS layout rule. Note that the name of the rule contains the name of the widget in simple form,simplewidget.ui-widget: This is a special rule; it is a default rule from jQuery UI, but it is also defined in the look and feel, or theme, CSS file. The theme CSS rule supersedes the default UI CSS rule when the theme CSS file is loaded after the jQuery UI CSS file.ui-helper-reset: This is a rule that is used to iron out browser differences for the default values expected for block containers such asdiv. This rule is also part of the jQuery UI layout CSS rules.
Each PrimeFaces theme contains one CSS file in which all the CSS rules are defined. This file is called theme.css. Here are the rules defined for the UI Darkness theme:
/* This rule sets simple dimensions for the widget container */
.ui-simplewidget {
width: 900px;
height: 200px;
}
/* This is the default CSS rule from jQuery UI. */
.ui-widget {
font-family: Verdana, Arial, sans-serif;
font-size: 1.1em;
}
/* This rule overrides the default rule and is one of the Theme CSS rules */
.ui-widget {
font-family: 'Segoe UI', Arial, sans-serif;
font-size: 1.1em;
}
.ui-helper-reset {
margin: 0;
padding: 0;
border: 0;
outline: 0;
line-height: 1.3;
text-decoration: none;
font-size: 100%;
list-style: none;
}
The theme CSS rule named ui-widget does not define anything that affects the layout of the widget.
By separating the layout from the theme CSS rules, jQuery UI has made it easy for widget developers to create new features for their websites, while web designers can concentrate on the look and feel of a website by using themes.
PrimeFaces uses jQuery, jQuery UI, and themes to build components in the pages of a web application, and we can use the theme rules to create themes without worrying about the individual components or widgets.
The kind of rules that make up a theme can be classified as follows:
- Component containers: These rules define how the widget containers, and their headers and content look. They also define the rules for input components.
- Interaction states: These rules define how widgets look when they are in the
default,hover, andactivestates. - Interaction cues: These rules define how widgets look when highlighted/selected, for error highlighting, primary or secondary components, and for disabled components.
- States and images: These indicate how icons should look, similar to the interaction state rules.
- Positioning: These define the rules regarding where to position icons within a component.
- Miscellaneous visuals: These define the rules that specify corner rules.
- Overlay and shadow: These define the rules that specify how widgets use overlays; for example, a dialog box, its look, and the shadow it casts on the background.