12 Replies Latest reply on Feb 1, 2008 10:59 PM by chris.simons

    How do folks layout pages: panelgrids (embedded tables) or C

    grettke_spdr

      Hi folks,

      I am a JSP refugee and I have continued to layout my JSF pages using embedded tables. I didn't think that they could make it worse than they did in JSP, but you know, I was wrong. It is terrible to lay stuff out this way.

      Everyone is telling me to use CSS DIVS. Is this even possible with JSF?

      I feel like a dinosaur living in the stone ages with the way that I approach solving this problem.

      What is the right way to lay out pages nicely?

        • 1. Re: How do folks layout pages: panelgrids (embedded tables)
          grettke_spdr

           

          "grettke_spdr" wrote:
          Hi folks,

          I am a JSP refugee and I have continued to layout my JSF pages using embedded tables. I didn't think that they could make it worse than they did in JSP, but you know, I was wrong. It is terrible to lay stuff out this way.

          Everyone is telling me to use CSS DIVS. Is this even possible with JSF?

          I feel like a dinosaur living in the stone ages with the way that I approach solving this problem.

          What is the right way to lay out pages nicely?


          To clarify I am using panelgrids, I'm not writing jsp or html directly...

          • 2. Re: How do folks layout pages: panelgrids (embedded tables)
            shakenbrain

            It is possible to use CSS DIVS in JSF; that's what I do...

            • 3. Re: How do folks layout pages: panelgrids (embedded tables)
              delphi'sghost

              In theory, it should be easier if you are using facelets since you should already have your view code split into sections such as header, body, menu, footer etc, it's just a matter of putting the <ui:insert> facelet tags into the right place in the layout table, or wrapping the <ui:insert> in a div set to the style of the layout css.

              I think a more important question is intra-page layout such as form layout. Css is good for overall page layout and design, but not so much for in-page items such as form layout.

              I hate having to use a panel grid to layout forms, and then in one cell, have another panel grid or other wrapper, because I want a button next to the edit box, and the panel grid won't by default let me put two items in the same cell.

              Of course, one could argue that the ability to easily change layout when css is used is moot when you start using facelets since you are already grouping your content into sections. Whether it is wrapped in a table or css divs amounts to personal choice based on the arguments for using either one.

              • 4. Re: How do folks layout pages: panelgrids (embedded tables)
                pmuir

                Of course, you can use CSS/divs with JSF, but as so many of the standard components are implemented using tables for layout (panelGrid, selectOneCheckbox...) it's hard. Pressure needs to be put on the JSF impls (RI is Seam's choice) to produce CSS/div versions of the standard components.

                • 5. Re: How do folks layout pages: panelgrids (embedded tables)
                  grettke_spdr

                   

                  "Delphi's Ghost" wrote:
                  In theory, it should be easier if you are using facelets

                  I think a more important question is intra-page layout such as form layout. Css is good for overall page layout and design, but not so much for in-page items such as form layout.

                  I hate having to use a panel grid to layout forms, and then in one cell, have another panel grid or other wrapper, because I want a button next to the edit box, and the panel grid won't by default let me put two items in the same cell.


                  This is exactly my problem. I've got panel grids with panel grids inside them because the UI was designed with Visio. It wasn't designed in mind of the limitations of how JSF lays out its UIs.

                  • 6. Re: How do folks layout pages: panelgrids (embedded tables)
                    grettke_spdr

                     

                    "shakenbrain" wrote:
                    It is possible to use CSS DIVS in JSF; that's what I do...


                    May you please point in the direction of your favored resources on using divs to lay out pages?


                    • 7. Re: How do folks layout pages: panelgrids (embedded tables)
                      pmuir

                       

                      "Delphi's Ghost" wrote:
                      I hate having to use a panel grid to layout forms, and then in one cell, have another panel grid or other wrapper, because I want a button next to the edit box, and the panel grid won't by default let me put two items in the same cell


                      Take a look at the way we use s:decorate in the booking example to lay out forms - works pretty well.

                      • 8. 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.

                        • 9. Re: How do folks layout pages: panelgrids (embedded tables)
                          delphi'sghost

                          Hey Pete,

                          Yes, I saw that, I have looked at the decorate stuff, actually, I think I have copied edit.xhtml to my app to look at start trying to use it. I do need to add an access key element on to there, but that should be easy.

                          I did implement a facelet for date edits, and my main problem was that in order to specify a proper document, with access keys in labels and labels and controls with Ids, you end up having include a lot of parameters, and putting an access key param in a facelet is a lot longer than putting accessKey="a" in the label tag.
                          Also, remembering the params can be a pain, until you get to the point where you are having to copy and paste the invokation of the template, at which point, you might as well just copy and paste the raw html that is in the template. My select date template contained around 8 tags for params, whereas the underlying html was 3 tags and a few attributes.

                          I know, you get re-use and all that from s:decorate and templates, but still...I'm a tough customer to please :)

                          • 10. Re: How do folks layout pages: panelgrids (embedded tables)
                            shakenbrain

                            I forgot one of the styles:

                            .entry div.inputblock {
                             float: left;
                            }
                            


                            • 11. Re: How do folks layout pages: panelgrids (embedded tables)
                              delphi'sghost

                              Oh yeah a list apart is a great resource for css stuff, including articles on why we should be using css.

                              • 12. Re: How do folks layout pages: panelgrids (embedded tables)

                                Where I think form layout using any emphasis on table-less forms breaks down when you want a two-column form layout. That is, two sets of controls on a single row.

                                Sadly, our client's app has such lengthy forms, we've been asked to move from a nice, CSS one-column layout to a table-happy, two-column layout. Even with facelets, it's not easy to do in JSF without resorting to the time-old fashion of raw tags.

                                Anyone have any suggestions?