PrimeFaces - Chips Example

Chips is a PrimeFaces component which is used to enter multiple values on an input field. Let's see an example how to use it.

JSF page

src/main/webapp/index.xhtml

<h:body style="margin-left:30px">
    <h2>PrimeFaces Chips example</h2>
    <h:form>
        <p:outputLabel for="items" value="Items: " /><br/>
        <p:chips id="items" value="#{itemsBean.items}"/><br/>
        <p:commandButton value="Save" icon="ui-icon-check" update=":itemList"/>
        <br/>
    </h:form>
     <br/>

    <p:outputPanel id="itemList">
        <p:repeat  value="#{itemsBean.items}" var="item">
            <h:outputText value="#{item}"/>
            <br/>
        </p:repeat>
    </p:outputPanel>

</h:body>

The managed bean

@ManagedBean
@ViewScoped
public class ItemsBean {
  private List<String> items;

  public List<String> getItems() {
      return items;
  }

  public void setItems(List<String> items) {
      System.out.println(items);
      this.items = items;
  }
}

mvn tomcat7:run-war

Output

Example Project

Dependencies and Technologies Used:

• primefaces 6.1 primefaces
• jsf-api 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
• jsf-impl 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
• JDK 1.8
• Maven 3.3.9