Relating Styles, Classes, and Selectors

When defining forms, you can use the STYLE attribute to assign a style to particular form objects. The following paragraphs examine how the STYLE attribute can ultimately result in a selector that can then be referenced by CSS.

Form Objects and Styles

When defining a form element, you can use the style attribute to specify a presentation style for the form element. For example, the following code sample from a .PER file assigns a style (named mystyle) to the style attribute for an Edit field:

EDIT f01 = FORMONLY.f01, STYLE="mystyle"

Now that the style is set for the form element, when displaying the form within the GWC, you want to have your CSS dictate how that style displays. In other words, you want the CSS to recognize the mystyle style attribute and format the display accordingly.

Accessing a Style using the Class template path

When an object has the STYLE attribute defined, the result is that the class attribute of the GWC object is set using the value assigned to the STYLE attribute. As a result, the style can be accessed using the template path class. Continuing our example, the snippet Edit.xhtml uses this class attribute

<input type="text"
  [...]
  gwc:attributes="
  [...]
  class [...]
  ' g'+type+' '+prefix('gc',class)+' '+prefix('g'+type+'_gc',class) +
  [...]/>

This code within the snippet file generates an attribute class="... gEdit_gcmystyle gEdit gcmystyle ..." or (roughly):

<input type="text" class="gEdit_gcmystyle gEdit gcmystyle" />

Using Class values as Selectors

With the class generated by the snippet file, the class values .gEdit_gcmystyle, .gcmystyle, or .gEdit.gcmystyle can be used as selectors.

Where to use Class values as Selectors

Depending on the HTML structure in the snippet, you can set the GWC class attribute elsewhere, so you can have other selectors.

Example

<div class="gEdit">
  <input type="text" class="gEdit_gcmystyle gcmystyle"/>
</div>

This example would provide the selector .gEdit for the container of the Edit (div), and .gEdit_gcmystyle or .gcmystyle or .gEdit gwcmystyle for the Edit itself (input).