Mise en page correcte de h: outputLabel et riche: composants combobox sur la même ligne

Question

Avec richfaces, comment afficher les composants h:outputLabel et rich:combobox directement les uns à côté des autres sur la même ligne?

Voici les deux approches que j'ai essayées.

---

# 1 riche: la mise en page
J'ai d'abord essayé d'utiliser rich:layout & rich:layoutPanel, mais les composants apparaissent sur des lignes distinctes. Voici le code:

<rich:layout> 
    <rich:layoutPanel position="left" width="100%"> 
    <h:outputLabel for="timeSpanUnitsCombo2" value="Time Span " /> 
    <rich:comboBox id="timeSpanUnitsCombo2" value="#{bean.timeSpanUnitsLabel}" enableManualInput="false">  
     <f:selectItems value="#{bean.timeSpanUnitsList}" /> 
    </rich:comboBox> 
    </rich:layoutPanel> 
</rich:layout> 

Et voici la sortie rendu:

---

# 2 h: panelGrid
Ensuite, j'ai essayé d'utiliser un h:panelGrid, mais encore une fois sans succès - la Les composants sont espacés uniformément sur la zone disponible, au lieu d'être directement adjacents et alignés à gauche comme je l'ai prévu. Voici le code:

<h:panelGrid columns="2"> 
    <h:outputLabel for="timeSpanUnitsCombo3" value="Time Span " /> 
    <rich:comboBox id="timeSpanUnitsCombo3" value="#{bean.timeSpanUnitsLabel}" enableManualInput="false">  
    <f:selectItems value="#{bean.timeSpanUnitsList}" /> 
    </rich:comboBox> 
</h:panelGrid> 

Et voici la sortie rendu:

---

mise en page des composants avec richfaces se révèle être tout à fait frustrant. Je donnerai le deuxième prix à tous ceux qui ont de bonnes références sur la mise en page avec richfaces. :)

Answer 1

Cela peut être fait de plusieurs façons. L'un d'eux est d'utiliser le fragment

<s:fragment> 
     <h:outputText value="Time Span" /> 
     <rich:comboBox id="timeSpanUnitsCombo2" value="#{bean.timeSpanUnitsLabel}" enableManualInput="false">  
      <f:selectItems value="#{bean.timeSpanUnitsList}" /> 
     </rich:comboBox> 
</s:fragment> 

Ou vous pouvez utiliser un div au lieu du fragment. <div> your code...</div>

Answer 2

Si vous utilisez la couture, vous pouvez envelopper dans <s:decorate> et utiliser <s:label>

De Seam en action

....<s:label> and <s:message>. The benefit of using the Seam tags is that they are automatically correlated with the adjacent input component, a feature of <s:decorate>