XUI: Extensible User Interface Framework

Controlling Format Using CSS Positioning

Since XUI supports native CSS (any of the current standards such as CSS1 or CSS2), it can take full advantage of what it can offer including controlling format and positioning of user interface elements using the CSS Positioning featuring.

In CSS2, a box may be laid out according to three positioning schemes:

Normal flow - In CSS2, normal flow includes block formatting of block boxes, inline formatting of inline boxes, relative positioning of block or inline boxes, and positioning of compact and run-in boxes.
Floats - In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.
Absolute positioning - In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.

Choosing a positioning scheme¹

The 'position' and 'float' properties determine which of the CSS2 positioning algorithms is used to calculate the position of a box.

position
Value: static | relative | absolute | fixed | inherit
Initial: static
Applies to: all elements, but not to generated content
Inherited: no
Percentages: N/A
Media: visual

The values of this property have the following meanings:

static - The box is a normal box, laid out according to the normal flow. The 'left' and 'top' properties do not apply.

relative - The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset.

absolute - The box's position (and possibly size) is specified with the 'left', 'right', 'top', and 'bottom' properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.

fixed - The box's position is calculated according to the 'absolute' model, but in addition, the box is fixed with respect to some reference. In the case of continuous media, the box is fixed with respect to the viewport (and doesn't move when scrolled). In the case of paged media, the box is fixed with respect to the page, even if that page is seen through a viewport (in the case of a print-preview, for example). Authors may wish to specify 'fixed' in a media-dependent way. For instance, an author may want a box to remain at the top of the viewport on the screen, but not at the top of each printed page. The two specifications may be separated by using an @media rule, as in:

@media screen { 
  H1#first { position: fixed } 
}
@media print { 
  H1#first { position: static }
}

Example

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

2. Add another component after the <xtextpane>, in this case a button wrapped around a panel:

<%@ 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;
               width: 410px;
               padding:15px;
          }
      </xstyle>
   </properties>
   <xcontentpane>
      <xpanel class="mytextpane">
         <xtextpane>Applying Style in XUI</xtextpane>
      </xpanel>
      <xpanel id="mybutton">
           <xbutton text="BUTTON" style="width:150px; height: 30px;"/>
        </xpanel>
   </xcontentpane>
   </xframe>
</xui:view>

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

As you could see, the default positioning in HTML is by document order. In this case, the button is rendered relative to how the code is written.

Now let's try to place the button inside the blue box; centered and toward the right side.

1. Applying positioning to the button by adding a style as follows:

<%@ 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;
               width: 410px;
               padding:15px;
            }
              #mybutton {
                  position: absolute;
                  left: 300px;
                 top: 30px;
               }
      </xstyle>
   </properties>
   <xcontentpane>
      <xpanel class="mytextpane">
         <xtextpane>Applying Style in XUI</xtextpane>
      </xpanel>
      <xpanel id="mybutton">
           <xbutton text="BUTTON" style="width:150px; height: 30px;"/>
      </xpanel>
   </xcontentpane>
   </xframe>
</xui:view>

2. Browse your page; you should see the following screen:

As you could see here, you can control the formatting of you screen in grain-level by using CSS positioning. This natural feature of XUI is very powerful when combined with the built-in Layout Managers. With the combination of the two, the possibilities are endless in terms of creating complex and sophisticated user interfaces for your application.

NOTE: In some cases, applying positioning to an XUI component can produce an undesirable result because of how each individual components are rendered. To be safe, apply positioning to a wrapper such as a panel to achieve the desired effect.

¹Source: W3C (www.w3c.org)

Back to: Application Guide