Best practice for component layout?

Question

Hi,can people tell me their views on best practice in this area, using JSF.
Eg, say I want this:
    LabelSml    InputField
    LabelLarge  InputField... ie 2 labels, 2 fields, vertically alligned, and with some space between the label and the field.
and this one:
    Field                             Field... ie 2 fields with a lot of space between them.
Finally, are there any examples on the web of UIs with many discrete fields on them (as opposed to logon/helloWorld and matrix data control), where I can look at how the design has been done.
Marc

Answer 1

I don't know if our solution is a best practice. We are not using the label property of input components because the alignment does not satisfy then. Instead we are using a <h:panelGrid> and nest <ui:label> and <ui:textField> (Studio Creator components) components in it. Multiple components in one cell are surrounded with a nested layout or grid panel. The number of columns is set by the attribute "columns" and width is controlled by the attribute "columnClasses". Example
<?xml version="1.0" encoding="UTF-8"?>
<jsp:root version="1.2" xmlns:bp="http://java.sun.com/blueprints/ui/14" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
    xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:ui="http://www.sun.com/web/ui">
    <jsp:directive.page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"/>
    <f:view locale="#{SessionBean1.locale}">
        <f:loadBundle basename="com.asci.nef.resourcen.Aktionen" var="akt"/>
        <f:loadBundle basename="com.asci.nef.resourcen.Label" var="lab"/>
        <f:loadBundle basename="com.asci.nef.resourcen.Datenlisten" var="datenlisten"/>
        <f:loadBundle basename="com.asci.nef.resourcen.Meldungen" var="msg"/>
        <ui:page binding="#{personal$Mitarbeiterauswahl.page1}" id="page1">
            <ui:html binding="#{personal$Mitarbeiterauswahl.html1}" id="html1">
                <ui:head binding="#{personal$Mitarbeiterauswahl.head1}" id="head1">
                    <ui:link binding="#{personal$Mitarbeiterauswahl.link1}" id="link1" url="/resources/stylesheet.css"/>
                    <ui:script binding="#{personal$Mitarbeiterauswahl.scriptFenster}" id="scriptFenster" url="/resources/fenster.js"/>
                </ui:head>
                <ui:body binding="#{personal$Mitarbeiterauswahl.body1}" id="body1" style=" -rave-layout: grid">
                    <jsp:directive.include file="../Menue.jspf"/>
                    <ui:form binding="#{personal$Mitarbeiterauswahl.form1}" id="form1">
                        <div>
                            <jsp:directive.include file="../Fensterkennung.jspf"/>
                        </div>
                        <ui:tabSet binding="#{personal$Mitarbeiterauswahl.tabSetPersonaldaten}" id="tabSetPersonaldaten" selected="tabSuchen" style="position: absolute; left: 0px; top: 36px; width: 100%;">
                            <ui:tab binding="#{personal$Mitarbeiterauswahl.tabSuchen}" id="tabSuchen" text="#{akt.funktion110}">
                                <ui:panelLayout binding="#{personal$Mitarbeiterauswahl.layoutPanelSuchen}" id="layoutPanelSuchen">
                                    <h:panelGrid binding="#{personal$Mitarbeiterauswahl.gridPanelSuchen}" columnClasses="gridlabel, griddata" columns="2"
                                        id="gridPanelSuchen" style="position:absolute; left:100px; top:30px;">
                                        <ui:label binding="#{personal$Mitarbeiterauswahl.labelPersonalnummerSuchen}" id="labelPersonalnummerSuchen" text="#{lab.mitarbeiterauswahl_personalnummer}"/>
                                        <ui:textField binding="#{personal$Mitarbeiterauswahl.textFieldPersonalnummerSuchen}" converter="javax.faces.Long"
                                            id="textFieldPersonalnummerSuchen" maxLength="10" styleClass="eingabe1"/>
                                        <ui:label binding="#{personal$Mitarbeiterauswahl.labelNameSuchen}" for="textFieldNameSuchen" id="labelNameSuchen" text="#{lab.mitarbeiterauswahl_name}"/>
                                        <ui:textField binding="#{personal$Mitarbeiterauswahl.textFieldNameSuchen}" converter="TextTrim" id="textFieldNameSuchen"
                                            maxLength="30" styleClass="eingabe4"/>
                                        <ui:label binding="#{personal$Mitarbeiterauswahl.labelGeburtsdatumSuchen}" id="labelGeburtsdatumSuchen" text="#{lab.mitarbeiterauswahl_geburtsdatum}"/>
                                        <ui:textField binding="#{personal$Mitarbeiterauswahl.textFieldGeburtsdatumSuchen}"
                                            converter="#{SessionBean1.sqlDateConverter}" id="textFieldGeburtsdatumSuchen" maxLength="10" styleClass="eingabe1"/>
                                        <ui:label binding="#{personal$Mitarbeiterauswahl.labelTaetigkeitSuchen}" id="labelTaetigkeitSuchen" text="#{lab.mitarbeiterauswahl_taetigkeit}"/>
                                        <ui:dropDown binding="#{personal$Mitarbeiterauswahl.dropDownTaetigkeitSuchen}" id="dropDownTaetigkeitSuchen"
                                            items="#{personal$Mitarbeiterauswahl.listOptionsTaetigkeitSuchen}" styleClass="eingabe4"/>
                                        <ui:label binding="#{personal$Mitarbeiterauswahl.labelVereinbarungSuchen}" id="labelVereinbarungSuchen" text="#{lab.mitarbeiterauswahl_zusatzvereinbarung}"/>
                                        <ui:textField binding="#{personal$Mitarbeiterauswahl.textFieldVereinbarungSuchen}" id="textFieldVereinbarungSuchen" styleClass="eingabe4"/>
                                        <ui:label binding="#{personal$Mitarbeiterauswahl.labelSortieren}" id="labelSortieren" text="#{lab.mitarbeiterauswahl_sortieren}"/>
                                        <ui:radioButtonGroup binding="#{personal$Mitarbeiterauswahl.radioButtonGroupSortieren}" columns="4"
                                            id="radioButtonGroupSortieren"
                                            items="#{personal$Mitarbeiterauswahl.radioButtonGroupSortierenDefaultOptions.options}" required="true" selected="#{personal$Mitarbeiterauswahl.radioButtonGroupSortierenDefaultOptions.selectedValue}"/>
                                        <ui:label binding="#{personal$Mitarbeiterauswahl.labelDummy1}" id="labelDummy1"/>
                                        <ui:button action="#{personal$Mitarbeiterauswahl.buttonSuchen_action}"
                                            binding="#{personal$Mitarbeiterauswahl.buttonSuchen}" id="buttonSuchen" text="#{akt.button_suchen}"/>
                                        <ui:label binding="#{personal$Mitarbeiterauswahl.labelDummy2}" id="labelDummy2"/>
                                        <ui:listbox binding="#{personal$Mitarbeiterauswahl.listboxSuche}" id="listboxSuche" monospace="true"
                                            onDblClick="#{personal$Mitarbeiterauswahl.onDblClickAction}" rows="20" styleClass="eingabe7"/>
                                        <ui:label binding="#{personal$Mitarbeiterauswahl.labelDummy3}" id="labelDummy3"/>
                                        <ui:panelLayout binding="#{personal$Mitarbeiterauswahl.layoutPanelButtons2}" id="layoutPanelButtons2" panelLayout="flow">
                                            <ui:button action="#{personal$Mitarbeiterauswahl.buttonNeu_action}"
                                                binding="#{personal$Mitarbeiterauswahl.buttonNeu}" id="buttonNeu" immediate="true" text="#{akt.button_neu}"/>
                                            <ui:button action="#{personal$Mitarbeiterauswahl.buttonBearbeiten_action}"
                                                binding="#{personal$Mitarbeiterauswahl.buttonBearbeiten}" id="buttonBearbeiten" text="#{akt.button_bearbeiten}"/>
                                            <ui:button action="#{personal$Mitarbeiterauswahl.buttonLoeschen_action}"
                                                binding="#{personal$Mitarbeiterauswahl.buttonLoeschen}" id="buttonLoeschen" text="#{akt.button_loeschen}"/>
                                        </ui:panelLayout>
                                    </h:panelGrid>
                                </ui:panelLayout>
                            </ui:tab>
                        </ui:tabSet>
                        <h:panelGrid binding="#{personal$Mitarbeiterauswahl.gridPanelFehler}" id="gridPanelFehler" onclick="this.style.display = 'none';" style="position: absolute; right: 20px; bottom: 50px; width: 250px; height: 78px;"/>
                        <ui:panelLayout binding="#{personal$Mitarbeiterauswahl.layoutPanelConfirm}" id="layoutPanelConfirm" panelLayout="flow" style="position:absolute; top:36px; left:0px;width:100%; height:700px;">
                            <h:panelGrid binding="#{personal$Mitarbeiterauswahl.gridPanelConfirm}" columns="1" id="gridPanelConfirm" style="margin-left:auto; margin-right:auto; margin-top:300px; background-color:#FF3333;">
                                <ui:staticText binding="#{personal$Mitarbeiterauswahl.staticTextConfirm}" id="staticTextConfirm" text="#{msg.global_loeschen}"/>
                                <ui:panelLayout binding="#{personal$Mitarbeiterauswahl.layoutPanelConfirmButtons}" id="layoutPanelConfirmButtons" panelLayout="flow">
                                    <ui:button action="#{personal$Mitarbeiterauswahl.buttonConfirmYes_action}"
                                        binding="#{personal$Mitarbeiterauswahl.buttonConfirmYes}" id="buttonConfirmYes" text="#{akt.button_ja}"/>
                                    <ui:button action="#{personal$Mitarbeiterauswahl.buttonConfirmNo_action}"
                                        binding="#{personal$Mitarbeiterauswahl.buttonConfirmNo}" id="buttonConfirmNo" text="#{akt.button_nein}"/>
                                </ui:panelLayout>
                            </h:panelGrid>
                        </ui:panelLayout>
                    </ui:form>
                </ui:body>
            </ui:html>
        </ui:page>
    </f:view>
</jsp:root>