如何在 JSF 中制作可重用的组件？答案

【问题标题】：How to make reusable component in JSF?如何在 JSF 中制作可重用的组件？
【发布时间】：2011-04-28 10:35:22
【问题描述】：

我想要一个与模型绑定的可重用 ui 组件。

例如：

我有一个链接到另一个 selectonemenu 的 selectonemenu（如部门 -> 子部门）
希望将此作为复合组件
这个复合组件将被绑定到一个特定的 JSF Bean

如果我只使用一个复合组件，我认为这个想法是可行的。

但是如果我使用多个相同类型的compositeComponent，这将不起作用，因为compositeComponent 的JSF Bean 将是相同的（在本例中，我使用视图范围），并且将在一个或多个复合组件之间共享状态。

这是一个粗略的例子，说明了我的困惑。在本例中，Page1.xhtml（主要模型为 Page1Bean.java）使用了 2 个复合组件（由 MyCompositeComponent.java 的 JSF Bean 处理）

复合组件将类似于：

<!-- one composite component that has 2 chained selectOneMenus -->
<h:selectOneMenu
    ...
    value="#{myCompositeComponentBean.firstComboValue}"
    valueChangeListener="#{myCompositeComponentBean.yyy}">
    <f:ajax event="valueChange" execute="@this" ... />
    <f:selectItem itemLabel="Choose one .." noSelectionOption="true" />
    <f:selectItems value="#{myCompositeComponentBean.firstComboList}" .... />
</h:selectOneMenu>
<h:selectOneMenu
    ...
    value="#{myCompositeComponentBean.secondComboValue}"
    valueChangeListener="#{myCompositeComponentBean.bbb}">
    <f:selectItem itemLabel="Choose one .." noSelectionOption="true" />
    <f:selectItems value="#{myCompositeComponentBean.secondComboList}" .... />
</h:selectOneMenu>

复合组件的 JSF Bean 会是这样的：

// this model will serve the composite component
@Named
@Scope("view")
public class MyCompositeComponentBean {
    private String firstComboValue, secondComboValue;
    private List<String> firstComboList, secondComboList;
    ...
}

这是一个 Page1.xhtml 的例子：

....
main department : <my:comboChainComponent /> <!-- 2 select items will be rendered here -->
secondary department : <my:comboChainComponent /> <!-- another 2 select items will be rendered here -->
....

还有 Page1Bean（Page1.xhtml 的主 JSF Bean）

@Named
@Scope("view")
public class Page1Bean {
    // inject the first bean for the composite component 1
    @Inject private MyCompositeComponentBean bean1;
    @Inject private MyCompositeComponentBean bean2;
    ...
}

是否有可能实现这种可重用性？

谢谢。

【问题讨论】：

标签： java jsf jsf-2 primefaces

【解决方案1】：

为什么不使用这种方法。

<mytag:combo id="combo1" 
         value="#{bean.firstData}" 
         model="#{globalBean.getList()}"
         update="form1:combo2"   />

<mytag:combo id="combo2" 
         value="#{bean.secondData}" 
         model="#{globalBean.getSubList(bean.firstData)}"  />

你可以使用复合属性。

...
<composite:interface name="combo">
   ... define your attributes here
</composite:interface>

<composite:implementation>
<p:outputPanel id="content">
    <p:selectOneMenu id="select_menu_1" value="#{cc.attrs.value}">
         <f:selectItems value="#{cc.attrs.model}" />
        <p:ajax event="change" process="@this" update="#{cc.attrs.update}" />
    //add converter if you want 
    </p:selectOneMenu>
</p:outputPanel>
</composite:implementation>

【讨论】：

【解决方案2】：

根据您尝试实现的内容，您可以使用一些“支持组件”（=与您的 facelet 复合组件关联的 java 类）。看到这个帖子：http://weblogs.java.net/blog/cayhorstmann/archive/2010/01/30/composite-input-components-jsf

仍然可能，根据您的实际操作，您可以更好地定义复合组件，主要是使用更多参数和更好的模型来传递值（如果需要）。我对您的应用缺乏一些了解，无法提供更好的建议。

【讨论】：

我意识到我的原始帖子仍然缺少。我将构建一个简单清晰的示例来演示我的原始问题。谢谢你的建议。
让你的例子更简单可能很有用，但我的印象是支持组件应该解决你的问题;-)

【解决方案3】：

在 JSF 2.0 中，创建复合组件非常简单。这是一个很好的教程： http://weblogs.java.net/blog/driscoll/archive/2008/11/writing_a_simpl.html

【讨论】：

您好，感谢您的回复。我还没有开发复合组件的技术难题，但更多的是如何使这个复合组件与它耦合的 JSF Bean 一起可重用，可以在单个页面中多次使用。
嗨，Albert，您可以在单个页面中随意使用复合组件（即使我不太了解需要）。

【解决方案4】：

不确定我是否完全理解您，但您可能希望将参数传递给您构建的 componentComposition。

    main department : <my:comboChainComponent worksOn="#{page1Bean.bean1}" /> <!-- 2 select items will be rendered here -->
secondary department : <my:comboChainComponent worksOn="#{page1Bean.bean2}"/> <!-- another 2 select items will be rendered here -->

希望对你有帮助...

【讨论】：