Java – how to make reusable components in JSF?

I want to have a reusable UI component related to the model

For example:

>I have a selection menu linked to another selection menu (like Department - > sub department). I want to bind this composite component > this composite component will be bound to a specific JSF bean

I think this idea is effective if I use only one composite component

However, if I use multiple compositecomponents of the same type, this will not work because the JSF beans of compositecomponents will be the same (in this example, view scope is used) and will share the state between one or more compositecomponents

This is a rough example of my confusion In this case, page1 XHTML (the main model with page1bean. Java) uses two compositecomponents (handled by the JSF bean of mycompositecomponent. Java)

Composite components will be similar to:

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

The JSF bean of the composite component will be as follows:

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

This is page1 An example of 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 (the main JSF bean for page1.xhtml)

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

Can this reusability be achieved?

thank you.

Solution

Why not use this method

<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)}"  />

You can use composite attributes

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

Best wishes.