XUI: Extensible User Interface Framework

Applying Style in XUI

Since XUI supports native HTML as the final rendered page, it supports standard CSS (Cascading Stylesheets). There's two ways style can be added to your components, by inline style or using the <xstyle> element (similar to the style element in HTML).

For a detailed outline of where <xstyle> can be applied, please refer to the XUI Schema Reference.

In this example, we will take a look at applying style to the <xcontentpane> element and to sub-elements such as the <xpanel> and <xbutton>. Please note that the style attribute can be applied to most, if not all XUI components.

For example: The following will set the font-family and font-size of the screen to the given value:

<xcontentpane style="font-family:verdana,arial; font-size:10pt;">
   ...

</xcontentpane>

Since the <xstyle> element is similar to the <style> element in HTML, this can be set inside the <properties> element and inside particular components (see Schema).

For example: The following defines a style for class .CalcButton.

<properties>
   <title>XUI Calculator</title>
   <xstyle type="text/css">
      .CalcButton {
         width:75px; height:75px; background-image:url(../images/bg0003.jpg);
      }
   </xstyle>
</properties>

Anything inside the <xstyle> element is native CSS as defined by W3C. For a full reference in CSS, please visit www.w3C.org. Reference for CSS2 can be found in W3C Cascading Style Sheets, level 2 CSS2 Specification.

Let's create a simple XUI page and apply style as described above.

1. Start by creating a JSP with the following code:

<%@ taglib uri="http://www.jway.com/xui" prefix="xui" %>
<%@ page contentType="text/html; charset=UTF8" %>
<xui:view validation="true">
   <xframe>
   <properties>
      <title>Applying Style in XUI</title>
      <meta name="language" content="en"/>
   </properties>
   <xcontentpane>
      <xpanel>
         <xtextpane>Applying Style in XUI</xtextpane>
      </xpanel>
   </xcontentpane>
   </xframe>
</xui:view>

This code should produce the following screen:

As you could see, it's not a very interesting page or screen and can use some work in terms of applying some margins or paddings and increasing the font size.

2. Next, apply some style to the <xcontentpane> element by using the style attribute. In this can, we will change the font-family, font-size and add some margin to our component, in this case <xtextpane>:

<%@ taglib uri="http://www.jway.com/xui" prefix="xui" %>
<%@ page contentType="text/html; charset=UTF8" %>
<xui:view validation="true">
   <xframe>
   <properties>
      <title>Applying Style in XUI</title>
      <meta name="language" content="en"/>
   </properties>
   <xcontentpane style="font-family:verdana; font-size:12pt; padding:20px;">
      <xpanel>
         <xtextpane>Applying Style in XUI</xtextpane>
      </xpanel>
   </xcontentpane>
   </xframe>
</xui:view>

The code above will produce the following screen:

Next: Using the <xstyle> element.
Back to: Application Guide