Stylesheets

Nexaweb stylesheets are similar in concept to HTML CSS files. Nexaweb stylesheets allow you to customize the look and feel of your application and centralize those customizations in a set of files separate from the UI definitions themselves. Nexaweb stylesheets can include two sections: 

Nexaweb stylesheets are XML-based and use a .XSS extension. You can create and edit them using the Nexaweb Studio stylesheet editor or by editing the source directly in an XML editor.

Style Overview

A stylesheet consists of any number of individual styles. Each style contains the following:

• A set of target elements to which the style applies, specified by the applyTo attribute 
• A set of states for which the style defines attributes. That is, Nexaweb applies the specified attributes when a target is in the given state.
• The attributes specified for each state

The following shows an example style definition:

<style applyTo="link">
   <normal cursor="hand" fontColor="blue" fontUnderline="true"/>
   <mouseOver fontColor="red"/>
   <focused fontColor="red"/>
</style>

In this example, link represents the target element and normal and mouseOver represent states. Each state included in a style defines any number of attributes that apply to a target element when it is in that state. You can choose attributes from the range of attributes that apply to the target in standard NXML; however, Nexaweb recommends that you restrict your attribute selection to style-related attributes such as fonts, colors and borders. In this example, a <link> tag has a hand cursor with a blue font and an underline style in the default state. This style definition is functionally identical to defining every <link> in your NXML as:

<link cursor="hand" fontColor="blue" fontUnderline="true/>

Applying Styles

• You can apply a style to every instance of a particular UI element by specifying that the style apply to the tag name of the UI element.

  <style applyTo="button">
       <normal bgColor="#0080FF" />
  </style>

• You can apply a style to a class as set on the element.

  An applyTo attribute starting with a period indicates that the style applies to a class rather than a tag name.

  <style applyTo=".my-style"> 
      <normal bgColor="#FF0000" /> 
  </style>

  The my-style class in the following example represents a class you can set on individual NXML elements in the UI. (The period in the NXML itself is optional.)

  <button class="my-style"/> or <button class=".my-style"/> 

• You can specify a comma-separated list of the tag names and classes, rather than a single tag name or class for the applyTo attribute of a style.

  <style applyTo="button,label,.my-style" >
      <normal bgColor="#0000FF" />
  </style>

  
  

Customizable UI States

States control when the application applies the stylesheet attribute values to a UI component. Different attributes apply to each state.

A UI component can exist in multiple states at the same time. A component is always in the normal state, and a pressed button will also be in both the mouseOver and mouseDown states. If a UI element exists in multiple states, overlapping attributes will be resolved by choosing the value from the state with the highest precedence. The following list shows the possible states, from highest to lowest precedence:

1. disabled
2. focused
3. selected (applies to checkBox, radioButton, etc)
4. mouseDown
5. mouseOver
6. normal

In the example style definition shown above,  the style for <link> defines a different fontColor for normal and focused. The focused state has the highest precedence, so when a <link> is focused it will always appear red. The mouseOver state also takes precedence over the normal state, so the <link> is also red when the mouse hovers over it. In all possible states the text will be underlined, because that is defined in the normal state and not overriden by any states with higher precedence.

Style Precedence

It is possible for multiple styles to apply to the same element, and also possible that attributes specified for elements in the NXML itself to collide with attributes in styles. The following rules resolve these issues of priority:

1. Nexaweb always honors attribute values specified in the NXML itself. Nexaweb uses any attribute values specified in a NXML file over any styles. 
2. Nexaweb uses any styles matching the element's class.
3. Nexaweb uses any styles matching the element's tag name. 

Configuring Stylesheets

Nexaweb platform automatically applies a default stylesheet, giving a standard look and feel to the various UI elements. You can override the default style sheet or use additional stylesheets that supplement the default one rather than replacing it. You specify any addtional stylesheets within your application's nexaweb-client.xml configuration file as follows:

<style-sheets>
    <default-style-sheet>
      DefaultStylesheet.xss
    </default-style-sheet>  <!-- replaces the existing default -->
    <style-sheet>
      MyStylesheet.xss
    </style-sheet> <!-- a supplemental stylesheet -->
</style-sheets>

You can also load stylesheets declaratively within an NXML file. The following example uses an MCO execute instruction to load a stylesheet using the com.nexaweb.client.displayservice.DisplayService object's loadStyleSheet method.

<mco:execute>
    mco://DisplayService.loadStyleSheet(&quot;MyStylesheet.xss&quot;)
</mco:execute>

Here is the same example executed programmatically within an MCO event handler:

 public void myHandler () {
    ClientSession clientSession = 
                  McoContainer.getClientSessionFromMco(this);
    DisplayService displayService = 
                   clientSession.getDisplayService();
    displayService.loadStylesheet("MyStylesheet.xss");
}