[jboss-user] [JBoss Seam] - Re: How do folks layout pages: panelgrids (embedded tables)

[shakenbrain]

This article illustrates how to create a flexible three column layout:

http://www.alistapart.com/articles/holygrail/

Of course, there are lots of other layouts and approaches.  Google for "css layout" and you'll find lots of good references and examples.

For laying out simple forms, I use the following template for <s:decorate>:

<ui:composition  xmlns="http://www.w3.org/1999/xhtml"
  |                  xmlns:ui="http://java.sun.com/jsf/facelets"
  |                  xmlns:h="http://java.sun.com/jsf/html"
  |                  xmlns:f="http://java.sun.com/jsf/core"
  |                  xmlns:s="http://jboss.com/products/seam/taglib">
  | 
  |     <div class="entry">
  |         <s:label styleClass="inputlabel errors">
  |             <ui:insert name="label"/>
  |             <s:span styleClass="required" rendered="#{required}"> *</s:span>
  |         </s:label>
  |         <div class="inputblock">
  |         <span class="input #{invalid?'errors':''}">
  |             <s:validateAll>
  |                 <ui:insert/>
  |             </s:validateAll>
  |         </span>
  |         <s:message styleClass="errorMessage"/>
  |         </div>
  |     </div>
  | 
  | </ui:composition>

and call it like this:

<s:decorate template="/decorateField.xhtml">
  |   <ui:define name="label">#{messages.TargetRole}</ui:define>
  |   <h:selectOneMenu id="selectTargetRole" value="#{selectedDatabase.role}">
  |     <s:selectItems value="#{databaseRoles}" var="r" label="#{r.description}" />
  |     <s:convertEntity />
  |   </h:selectOneMenu>
  | </s:decorate>

and here are the CSS styles:

.entry {
  |   padding-top: 6px;
  |   clear: left;
  | }
  | 
  | .inputlabel {
  |   color: #434343;
  |   font-weight: normal;
  |   line-height: 1.8;
  |   vertical-align: top;
  |   margin-bottom: 4px;
  | }
  | 
  | .errors {
  |   font-weight: normal;
  |   text-align: center;
  | }
  | 
  | .entry .label {
  |   color: #434343;
  |   float: left;
  |   padding-right: 12px;
  |   font-weight: bold;
  |   width: 80px;
  |   text-align: left;
  | }
  | 
  | .entry .errorMessage {
  |   display: block;
  |   margin-top: 4px;
  |   font-size: 85%;
  |   color: red;
  | }
  | 

I'm no CSS expert so keep in mind there may be better ways of doing this.

View the original post : http://www.jboss.com/index.html?module=bb&op=viewtopic&p=4055828#4055828

Reply to the post : http://www.jboss.com/index.html?module=bb&op=posting&mode=reply&p=4055828