Styling controls

The following paragraphs explain how to use CSS stylesheets in order to add custom styles or modify the look of controls and their states.

A quick glimpse behind the scenes helps to understand what betterFORM does to support layout and styling for all the authoring patterns mentioned in Page Layout.

XForms Transcoding

The graphic below shows how betterFORM transforms the input host document for rendering in a browser:

To turn the abstract XForms UI markup into something the browser can interpret betterFORM transcodes the page to HTML, CSS + JavaScript. During this process every XForms control or XForms container will be turned into some corresponding HTML (usually simple <div> or <span> elements) along with some attributes and CSS classes. XForms controls turn into Dojo widgets (‘Dijits’ in Dojo speak) which represent the original XForms control.

As XForms controls wear state properties (MIPs) like readonly, relevant, enabled or valid which are not present in standard HTML these semantics have to be injected somehow into the resulting page.

While transforming betterFORM assigns appropriate CSS classes for all relevant XForms state properties to the respective control or container. Page authors can use these to customize the rendering of certain states or layout structures. This process is referred to as ‘CSS annotation’.

Try the XForms Feature Explorer if you’d like to learn more about the CSS classes involved for certain elements.

Styling individual controls

The above approach is fine if you want to globally change the rendering for controls and XForms containers. It makes reuse of layout and styling information for multiple forms easy and should always be the preferred way.

Nevertheless situations may occur where you need direct access to a certain control or group element for styling purposes.

You have three options to get the same result:

  • Add a custom CSS class to your XForms markup.
    This allows to reuse the same class for a set of similar controls that are probably spread within your form or forms. E.g. if you have a small integer which uses a xforms:input for editing you probably don’t want it to be 200 pixels wide. Assigning a ‘mySmallInteger’ class will solve your problem for all occurrences.
  • Use the style Attribute to directly assign some styles to a single control.
  • Assign an id to the XForms control and use it with a CSS id matcher.

Here’s an example to illustrate all three options:

<xforms:input ref=“foo“
              id=“myId“
              style=“color:red;“
              class=“myCustomClass“>
     <xforms:label>bar</xforms:label>
     <xforms:alert>This value is not valid for this field</xforms:alert>
     (...)
 </xforms:input>
 

During transform into HTML betterFORM will apply the original id of your input to the resulting structure in the output. Further all XForms common childs will get an id dependent on this. The custom CSS class will be passed to the output and can be used in your CSS.

Here’s the resulting output for the CSS class defined above

<div id=“myId“ class=myCustomClass xfControl xfInput(..)“ style=“(..)“>
    <label id=“myId-label“ for=“myId-value“>bar</label>
    <input id=“myId-value“ ...>      
    <span id=“myId-alert“> This value is not valid for this field</span>
</div>

The wrapper div that represents the XForms control gets the original id of the XForms control. The respective child elements get the orginal id plus a suffix that matches the name of the respective element.

This provides several ways to write your own CSS matchers:

// *** using custom CSS class
.myCustomClass{(...}} 
// matching common children with custom CSS class
.myCustomClass .xfAlert{(...)}
// *** using with id matchers
#myId{ font-weight:bold; } 
#myId .xfLabel{ //put your label styles here } 
#myId .xfAlert{ //put your control styles here } // or
#myId-alert{background:red;} 
// matching the widget of a control 
#myId .xfValue{background:#dddddd;}

The mighty appearance Attribute

The XForms standard defines the appearance attribute to allow XForms authors to pass a hint to the XForms processor to select one of potential several different renderings of the given control. So for instance a xf:select1 might be rendered as a group of radio buttons or as a combo box depending on the choosen appearance.

There are three predefined appearance values (minimal | compact | full) mentioned in the Xforms Spec plus the option to add your own ones with qualified name e.g.

<xf:switch appearance=“dijit:tabContainer“ ...#

‘dijit:tabContainer’ is a custom extension which is only available in betterFORM and will be rendered as a Dojo TabContainer.

A XForms processor is free to choose the most appropriate rendering though the Spec gives some hints how to interpret the values of the appearance attribute for certain controls. The reference forms found in the betterFORM distribution show which values for appearance are available for a given control and how the final rendered results looks like.

In betterFORM the appearance is not only supported for controls but is also interpreted for group, repeat and switch. This is a very quick way to choose between some basic layout options. Again these layout alternatives can be studied best in our reference forms that are found in ‘forms/reference’ in the distribution.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


%d bloggers like this: