java - 如何在 JSF 中制作可重用的组件？

Question

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

例如:

1. 我有一个链接到另一个选择菜单的选择菜单(如部门 -> 子部门)
2. 想把它变成一个复合组件
3. 这个复合组件将绑定(bind)到一个特定的 JSF Bean

如果我只使用一个 compositeComponent，我认为这个想法可行。

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

这是一个粗略的例子，说明了我的困惑。在这种情况下，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;
    ...
}

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

谢谢。

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