正确布局h：outputLabel和rich：同一行上的组合框组件

Question

使用richfaces，如何让我的h:outputLabel和rich:combobox组件在同一行上直接相邻显示？

以下是我尝试的两种方法。

<小时/> ＃1 rich：布局
我首先尝试使用rich:layout＆amp; rich:layoutPanel，但组件显示在单独的行中。这是代码：

<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>

这是渲染的输出：

<小时/> ＃2 h：panelGrid
接下来我尝试使用h:panelGrid，但再次没有成功 - 组件在可用区域上均匀分布，而不是像我预期的那样直接相邻和左对齐。这是代码：

<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>

这是渲染的输出：

<小时/> 具有丰富面孔的组件布局被证明是非常令人沮丧的。我会给那些对richfaces布局有一些很好参考的人给予二等奖。 ：）的

Answer 1

这可以通过多种方式完成。其中之一是使用片段

<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>

或者您可以使用div而不是片段。 <div> your code...</div>

Answer 2

如果您使用接缝，可以将其打包在<s:decorate>并使用<s:label>

来自Seam in 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>