6 Replies Latest reply: Jan 29, 2013 2:23 AM by jmsjr RSS

    Decorating around components to display either vertically / horizontally

    jmsjr
      Let's say that I have one XMHTL file that has two UI components . I then want to be able to decorate around and between these:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:composite="http://java.sun.com/jsf/composite"
            xmlns:f="http://java.sun.com/jsf/core"
            xmlns:ui="http://java.sun.com/jsf/facelets">
      
           <ui:composition>
               <ui:insert name="before"/>
               <h:inputText id="input1" value="#{bean.input1}"/>
               <ui:insert name="between"/>
               <h:inputText id="input2" value="#{bean.input2}/>
               <ui:insert name="after"/>
           </ui:composition>
      </html>
      {code}
      
      I want to have them either displayed vertically, or horizontally. Let's say I would like to use an HTML table do display them horizintally.
      ( I could have used HTML divs, but the problem would be the same. In any case, this is just for illustration purposes to get the question across ):
      
      {code}
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:f="http://java.sun.com/jsf/core"
            xmlns:ui="http://java.sun.com/jsf/facelets">
      
           <h:head/>
           <h:body>
              <ui:decorate template="tobedecorated.xhtml">
                  
                  <ui:define name="before">
                      <table>
                          <tr>
                              <td>
                  </ui:define>
                 
                     <ui:define name="between">
                                 </td>         
                                 <td>
                     </ui:define>
                 
                     <ui:define name="after">
                                 </td>  
                             </tr>
                         </table> 
                     </ui:define>
              </ui:decorate>
           </h:body>
      </html>
      {code}
      
      Of course this will not work, as the XHTML is not well-formed.
      
      Basically, given a number of UI components, I would like to have one XHTML file, and another XHTML file that will decide whether they should be displayed horizontally or vertically. Thus, I would only need to look at one file to find where the input control(s) is/are used.
      
      ... but I can't figure out a decent way to do this .. apart from making another complete copy of the same XHTML file just to change the layout, but that would mean maintaining them separately ( same input ids ... as long as I don't include both at the same time ).
      
      Any ideas ?
      
      Edited by: jmsjr on 17-Jan-2013 21:10