14 Replies Latest reply on Mar 16, 2007 3:18 PM by pmuir

    s:layoutForm

    pmuir

      I've just added a s:layoutForm component to CVS which takes the pain out of laying out a form. In general, it put's each child component on a new line BUT if the child is a s:decorate it will do some clever stuff:


      • If a facet named label is present on the s:decorate, the contents is placed in a left hand column, aligned right
      • If a facet named belowLabel or/and belowField is present on s:decorate, it's content is placed below the label or the field
      • If the field contained in the s:decorate is required="true" then a star is prepended to the label.


        Feedback on whether this is a useful component and how it can be improved would be great - especially if other facets would be useful or in relating to some (default) styling.


        • 1. Re: s:layoutForm
          kukeltje

          I normally do the layout with a panelgrid with almost all this functionality, except the 'star' and the belowLabel/belowField. If this is functionality is put in th s:decorate, is the s:layoutForm still needed then? What I'm worried about is that visible design is still important, at least for ui designers. I to many custom and complex components are developed, all tools have to be upgraded to render those, whereas a panelgrid can already be rendered in the correct way.

          • 2. Re: s:layoutForm
            pmuir

            I couldn't see a way of incorporating this into s:decorate - I assume you are suggesting:

            <h:panelGrid columns="2">
             <s:decorate>
             <f:facet name="label">
             ...
             </f:facet>
             <h:inputText ... />
             </s:decorate>
            </h:panelGrid>


            as this actually involves adding/removing components to/from the tree (which is tricky).

            I can't see an issue with custom components and s:layoutForm - all it does is create a two column table, place the label facet in the left hand column, the s:decorate in the righthand column, and optionally create an extra row for the belows. You can style the table as you like (with style/styleClass) but the rows and cells can't be styled. What sort of issues were you thinking of?

            • 3. Re: s:layoutForm
              pmuir

              Also, I see it more as a tool for simple/prototype layouts - you could easily use a panelGrid for a complex scenario.

              • 4. Re: s:layoutForm
                cavani

                This is a right place control to have focus property?

                like

                <s:layoutForm focus="someid">
                </s:layoutForm>

                I think this must use some JavaScript because JSF don't support this...

                Any way, focus is really important (to me at least), Sandbox has (of Tomahawk). Working together a dataTable with (one line) inputs would be perfect.

                Thanks,

                • 5. Re: s:layoutForm

                  I don't typically use a star for required fields, but a distinct background behind the form field and label. Would it be possible to use "(before|after)RequiredField" and "aroundRequiredField", the way it's done for errors?


                  • 6. Re: s:layoutForm
                    kukeltje

                    @Pete,

                    No, I was not thinking of using the facet label thing. html/jsf already has a label tag. just using that with a very high level decorate (more a decorateall like validateal) was what I'm thinking of.

                    • 7. Re: s:layoutForm
                      pmuir

                      cavani, not really, as you could have multiple layoutForm's on the page, but you can only have *one* focus. If

                      <h:inputXXX>
                       <s:initialFocus />
                      </h:inputXXX>


                      is useful, put a feature request for s:initialFocus in JIRA.

                      cja987, I've added {before,after,around}RequiredField facet's to s:decorate (which can be used independently of s:layoutForm) and behave just like xxxInvalidField, but are always rendered (and inside of the other s:decorate facets) as well as {before,after,around}RequiredLabel, {before,after,around}InvalidLabel, {before,after,around}Label (which can only be used with s:layoutForm).

                      Ronald, ic :) - so, {before,after,around}RequiredField deals with the star. What html would you suggest for a belowField when not inside the layoutForm table (there it's easy, just add an extra tr)?

                      • 8. Re: s:layoutForm
                        kukeltje

                        Pete,

                        Let me dig deep down in the gray matter inside my head and try finding some creative solution. I'll get back over the weekend.

                        • 9. Re: s:layoutForm
                          lowecg2004

                          Hmm, sounds like an interesting component however I can't use it since tables are being used for layout purposes. Any chance of a div/CSS alternative render mode?

                          • 10. Re: s:layoutForm
                            pmuir

                            Chris, yes, that would be nice - fancy writing a patch? :) I can help with the JSF side, but I'm no expert on making divs into tables...

                            • 11. Re: s:layoutForm
                              lowecg2004

                              I'll see what I can do over the weekend.

                              • 12. Re: s:layoutForm
                                pmuir

                                Cool :)

                                • 13. Re: s:layoutForm
                                  christian.bauer

                                  I second that, div/CSS combo would make this a great component.