Portlet Development with Primefaces in Liferay 7/DXP

blog-banner

Overview

Primefaces is a cross-platform, open source and Java based library for the UI Development. It provides rich UI components with built-in support for ajax. I am showing you a few examples of ready to use primefaces components in liferay.

Color Picker

Color Picker is used to select the custom color directly using the color picker element. It allows to select using #RGB value, #RGBHSB value, using color hex code, using color selection.

Example:

<p:colorPicker value="#{view.color}" mode="inline" />

Create Pipeline

Data Table

Data Table is used to display data in tabular format with advanced interaction controls like pagination, filter, selection, sorting, grouping and many more.

Example:

<p:dataTable var="car" value="#{paginatorView.cars}" rows="10"
     paginator="true" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                    rowsPerPageTemplate="5,10,15">
                   <p:column headerText="Model" sortBy="#{car.model}">
                       <h:outputText value="#{car.model}" />
                   </p:column>
           
                   <p:column headerText="Color" sortBy="#{car.color}">
                       <h:outputText value="#{car.color}" />
                   </p:column>
                   
                   <p:column headerText="Price" sortBy="#{car.price}">
                       <h:outputText value="#{car.price}" />
                   </p:column>
           
                   <p:column headerText="Manufacturing Year" sortBy="#{car.year}">
                       <h:outputText value="#{car.year}" />
                   </p:column>
</p:dataTable>

Create Pipeline

Tag Cloud

A Tag cloud is used to display collection of tags. Tags can be displayed in different sizes.

Example:

<p:tagCloud model="#{view.model}"></p:tagCloud>

Create Pipeline

Progress Bar

Progress Bar is mainly used to indicate the current status of the process. It can be either control using ajax call to server side or client side function call or simple static display.

Example:

<p:progressBar value="40" labelTemplate="40%" displayOnly="true"/>

Create Pipeline

Contact us

For Your Business Requirements

Text to Identify Refresh CAPTCHA
Background Image Close Button

2 - 4 October 2024

Hall: 10, Booth: #B8 Brussels, Belgium