Listing data with orderList

The orderList component is used to sort a collection with the support of drag-and-drop reordering, transition effects, and POJO support.

How to do it…

A basic definition for the orderList that sorts a collection of strings would be as shown here:

<p:orderList id="simple" value="#{orderListBean.countries}"
  var="country" itemLabel="#{country}" itemValue="#{country}" />

The visual output of the component will be as shown here:

How to do it…

There's more…

To define a header on top of orderList, a facet with the name caption should be provided as shown here:

<p:orderList id="withCaption" value="#{orderListBean.countries}"
  var="country" itemLabel="#{country}" itemValue="#{country}">
  <f:facet name="caption">
    Countries
  </f:facet>
</p:orderList>

With the controlsLocation attribute, we can control the position of the controls. The default value is left; the other possible values are right and none.

Transition effects

Effects can be applied with the effect attribute for content transition when a selection is moved upwards or downwards. The default value of the effect attribute is fade. The other possible values for the effect attribute are as follows:

  • blind
  • clip
  • drop
  • explode
  • fade
  • fold
  • puff
  • scale
  • slide

    Tip

    As orderList is not a UIData component, it doesn't do server-side processing for action and input handling. So, for example, using checkboxes inside orderList will not work.

PrimeFaces Cookbook Showcase application

This recipe is available in the demo web application on GitHub (https://github.com/ova2/primefaces-cookbook/tree/second-edition). Clone the project if you have not done it yet, explore the project structure, and build and deploy the WAR file on application servers compatible with Servlet 3.x, such as JBoss WildFly and Apache TomEE.

The showcase for the recipe is available at http://localhost:8080/pf-cookbook/views/chapter5/orderList.jsf.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.117.99.152