Form layout

[Marco Noronha]

Guys, I´m using a panelGrid with 2 columns for my forms...
it looks ok... Something like:

-------------------
|Label  |  Field |
-------------------
|Label  |  Field |
-------------------
|Label  |  Field |
-------------------
|Label  |  Field |
-------------------

But There´s some fields that CAN stay on the same "row"... because they´re small fields..
Like:
"begin date" - "end date".

I m trying to put them on the same row inside the panelGrid, but isn´t looking pretty...
Something like...

This was my last try... and it isn´t the best! lol

	<p:row>
				<p:column>
				<p:outputLabel for="dataInicial" value="#{msg['entity.dataInicial']}"/>
				</p:column>
				<p:column>
				<p:calendar id="dataInicial" required="true" locale="pt" navigator="true" 
                                                   pattern="dd/MM/yyyy" value="#{acaoController.entity.dataInicial}">
					<f:convertDateTime pattern="dd/MM/yyyy"/>
				</p:calendar>
				</p:column>
				
				<p:column>
				<p:outputLabel for="dataFinal" value="#{msg['entity.dataFinal']}"/>
				</p:column>
				
				<p:column>
				<p:calendar id="dataFinal" locale="pt" navigator="true" 
                                                  pattern="dd/MM/yyyy" value="#{acaoController.entity.dataFinal}">
					<f:convertDateTime pattern="dd/MM/yyyy"/>
				</p:calendar>
				</p:column>
				</p:row>

				<p:row>
			    <p:outputLabel for="meta" value="#{msg['entity.meta']}"/>
				<p:inputText id="meta" required="true" value="#{acaoController.entity.meta}" >
					<f:converter converterId="javax.faces.Integer"/>
				</p:inputText>
				</p:row>

Here´s some tries:

[Tim Holloway]

I'm not sure if this is what you're looking for, but the h:panelGroup element can be used to bundle up multiple items and have them all appear within the same cell.

[Marco Noronha]

Yeah, but now its ugly..
and the form has much more code:

	<p:panelGrid columns="1">

				    <f:facet name="header">  
						#{msg['entity.acao']} 
				    </f:facet>  
				  	
				  	<h:panelGroup>
					<p:outputLabel for="id" value="#{msg['entity.id']}"/>
				    <p:inputText  id="id"  disabled="true" value="#{acaoController.entity.id}"  />				
					</h:panelGroup>
					
					<h:panelGroup>				
					<p:outputLabel for="descricao" value="#{msg['entity.descricao']}"/>
				    <p:inputText id="descricao" required="true" value="#{acaoController.entity.descricao}"  >
				    	<f:validateLength minimum="3" maximum="255"/>
				    </p:inputText>		
				    </h:panelGroup>
				    
				    <h:panelGroup>
				    <p:outputLabel for="responsavel" value="#{msg['entity.responsavel']}"/>
					<p:autoComplete required="true" id="responsavel" value="#{acaoController.entity.responsavel}" 
completeMethod="#{pessoaController.autoComplete}"
					var="p" itemLabel="#{p.nome}" itemValue="#{p}" converter="#{pessoaConverter}" forceSelection="true"/>  
					</h:panelGroup>
			
					<h:panelGroup>
					<p:outputLabel for="dataInicial" value="#{msg['entity.dataInicial']}"/>
					<p:calendar id="dataInicial" required="true" locale="pt" navigator="true"
 pattern="dd/MM/yyyy" value="#{acaoController.entity.dataInicial}">
						<f:convertDateTime pattern="dd/MM/yyyy"/>
					</p:calendar>
					
					<p:outputLabel for="dataFinal" value="#{msg['entity.dataFinal']}"/>
					<p:calendar id="dataFinal" locale="pt" navigator="true" pattern="dd/MM/yyyy" 
value="#{acaoController.entity.dataFinal}">
						<f:convertDateTime pattern="dd/MM/yyyy"/>
					</p:calendar>
					</h:panelGroup>
					
					<h:panelGroup>
				    <p:outputLabel for="meta" value="#{msg['entity.meta']}"/>
					<p:inputText id="meta" required="true" value="#{acaoController.entity.meta}" >
						<f:converter converterId="javax.faces.Integer"/>
					</p:inputText>					
					
				    <p:outputLabel for="custo" value="#{msg['entity.custo']}"/>
					<p:inputText id="custo" required="true" value="#{acaoController.entity.custo}" >
						<f:converter converterId="javax.faces.BigDecimal"/>
					</p:inputText>
					</h:panelGroup>
					
					<h:panelGroup>
					<p:outputLabel for="tipo" value="#{msg['entity.tipoAcao']}"/>
					<p:selectOneMenu id="tipo" required="true" converter="#{tipoAcaoConverter}"
 value="#{acaoController.entity.tipoAcao}" >
							<f:selectItem itemLabel="#{msg['label.selecione.item']}" itemValue="" />
							<f:selectItems value="#{tipoAcaoController.listAll()}" var="tipoAcao" 
itemLabel="#{tipoAcao.descricao}" itemValue="#{tipoAcao}" />
					</p:selectOneMenu>
					</h:panelGroup>
					
					<h:panelGroup>
					<p:outputLabel for="campos" value="#{msg['entity.campos']}"/>
					<p:autoComplete id="campos" value="#{acaoController.camposSelecionados}" 
completeMethod="#{campoController.autoComplete}" multiple="true"
					var="p" itemLabel="#{p.rotulo}" itemValue="#{p}" converter="#{campoConverter}"/>  
					</h:panelGroup>
					

and still looks ugly:

[Tim Holloway]

You can tidy up the layout some by using embedded panelGrids instead of panelGroup. Especially if you define columnClasses to control cell widths and thus keep things better aligned.

[Marco Noronha]

Tim Holloway wrote:You can tidy up the layout some by using embedded panelGrids instead of panelGroup. Especially if you define columnClasses to control cell widths and thus keep things better aligned.

Ok, I´ll try that! thanks!

[dennis deems]

This is something we would do in our application with colspan. Is that an outmoded approach?

[Tim Holloway]

Dennis Deems wrote:This is something we would do in our application with colspan. Is that an outmoded approach?

Outmoded? I don't know. But JSF doesn't do colspan. Never has. Some JSF extension tag libraries have colspan options, but the core JSF does not.

[Marco Noronha]

Tim Holloway wrote:

Dennis Deems wrote:This is something we would do in our application with colspan. Is that an outmoded approach?

Outmoded? I don't know. But JSF doesn't do colspan. Never has. Some JSF extension tag libraries have colspan options, but the core JSF does not.

I ended up doing this:

panelGrid with 4 columns.

label
field
blankLabel
blankLablek

label
field
label2
field2


got it ?
But too pretty, but... its the less ugly I got!