XUI: Extensible User Interface Framework

Applying Style using the <xstyle> Element

As mentione earlier, style can be applied using an inline style or using the <xstyle> element (similar to the style element in HTML).

In this example, we will apply style to our page using the <xstyle> element.

1. Start by creating a JSP with the following code (from previous example):

<%@ 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>

2. Now, add an <xstyle> element inside the <properties> element:

<%@ 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"/>
        <xstyle type="text/css">
           ...
        </xstyle>
   </properties>
   <xcontentpane>
      <xpanel>
         <xtextpane>Applying Style in XUI</xtextpane>
      </xpanel>
   </xcontentpane>
   </xframe>
</xui:view>

3. Add a new style style class named .mytextpane inside the <xstyle> element. As mentioned earlier, 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.

<%@ 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"/>
      <xstyle type="text/css">
           .mytextpane {
               font-family: verdana,arial,helvetica,sans serif;
               font-color: #000000;
               background-color: #6699FF;
               padding:10px;
          }
      </xstyle>
   </properties>
   <xcontentpane>
      <xpanel>
         <xtextpane>Applying Style in XUI</xtextpane>
      </xpanel>
   </xcontentpane>
   </xframe>
</xui:view>

4. Finally, apply the class name to the <xpanel> as shown below:.

<%@ 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"/>
      <xstyle type="text/css">
           .mytextpane {
               font-family: verdana,arial,helvetica,sans serif;
               font-color: #000000;
               background-color: #6699FF;
               padding:10px;
          }
      </xstyle>
   </properties>
   <xcontentpane>
      <xpanel class="mytextpane">
         <xtextpane>Applying Style in XUI</xtextpane>
      </xpanel>
   </xcontentpane>
   </xframe>
</xui:view>

5. Browse you page; you should see the following screen.

Next: Using the Pluggable Look-and-Feels.
Back to: Application Guide