PrimeFaces – Open Window By Dropdown Selection

Technology: Primefaces it’s java based web framework to develop web applications using java. It’s one of the compliance frameworks for JSF, there are many other frameworks like omnifaces, richfaces. Primefaces has rich UI components. In this tutorial primefaces, maven, java8, glasifish servers are used. Use case: If you want to open a new page by …

Read more

How to get JSF id via jQuery

See a simple JSF example : <h:form id="signup-form"> <h:inputText id="email" value="#{beanBean.email}" /> </h:form> It will generates following HTML code : <input id="signup-form:email" type="text" /> Uses jQuery selector to get the email id, but failed. <script> jQuery(document).ready(function($) { $(‘#signup-form:email’).checkEmailFormat(); }); </script> Solution This is a well-known problem to integrate JSF and jQuery – the colon “:” …

Read more

PrimeFaces focus error field automatically

In PrimeFaces, if focus component <p:focus> is enabled : When page is loaded, it will focus on first visible input field; If validation failed, it will focus on first error field automatically. It works very nice, and a must use component in form handling. Just wonder why don’t make it enable by default? In this …

Read more

PrimeFaces + JSF Email validator example

To validate email, uses JSF <f:validateRegex>, and puts following regular expression. This regex should be able to validates most of the email format, and I’m using it for few projects. Email Regular Expression ^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$ P.S For detail explanation, refer to this how to validate email address with regular expression. In this tutorial, we will show …

Read more

PrimeFaces – Watermark on text input

In PrimeFaces, your can use <p:watermark> to display watermark effect on input field. This watermark component is using HTML5 placeholder attribute in supported browsers like Safari, Chrome and Firefox, and fall back to JavaScript solution for non-support browser like IE. Display watermark text in input field <p:inputText id="username" required="true" label="username" size="40" value="#{userBean.username}" /> <p:watermark for="username" …

Read more

How to override PrimeFaces CSS?

Often times, you may need to override default PrimeFaces CSS with your pretty customize values. In this example, we will show you how to override PrimeFaces error message style. Debug with FireBug, the PF’s error messages style are from primefaces.css primefaces.css .ui-message-info, .ui-message-error, .ui-message-warn, .ui-message-fatal { border: 1px solid; margin: 0px 5px; padding: 2px 5px; …

Read more

Resource ordering in PrimeFaces

Since PrimeFaces 3.0, it provides a very customizable resource ordering. See following order : 1. “first” facet if defined. <f:facet name="first"> <!– load css, js or others –> </f:facet> 2. PrimeFaces – JSF registered CSS. 3. PrimeFaces – Theme CSS. 4. “middle” facet if defined. <f:facet name="middle"> <!– load css, js or others –> </f:facet> …

Read more

Download PrimeFaces ShowCase and Source Code

The PrimeFaces showcase is showing how to use the entire 100+ PrimeFaces components, which is impressive! Actually, you can download the entire PrimeFaces showcase web application (in war) and source code, and deploy on your local server for testing or further study. Here we show you how. 1. Visit Maven Repository The entire PrimeFaces showcase …

Read more

PrimeFaces compress and combine JavaScript and CSS

In this tutorial, we will show you how to use PrimeFaces extensions – Maven plugin, to compress and combine JavaScript and CSS files, a web resources optimization example, to make web site load faster. Tool tested : PrimeFaces 3.3 PrimeFaces-Extensions 0.5 Maven 3.0.3 Note This guide is example-driven, for detail explanation and all other plugin …

Read more

Remove all default CSS styling from PrimeFaces

By default, PrimeFaces will return total of four files, 2 css files and 2 Javascript files. <link type="text/css" rel="stylesheet" href="/primefaces/faces/javax.faces.resource/theme.css?ln=primefaces-aristo" /> <link type="text/css" rel="stylesheet" href="/primefaces/faces/javax.faces.resource/primefaces.css?ln=primefaces" /> <script type="text/javascript" src="/primefaces/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces"></script> <script type="text/javascript" src="/primefaces/faces/javax.faces.resource/primefaces.js?ln=primefaces"></script> Some people don’t like the default PrimeFaces CSS file and wonder how to remove it? Solution You are allow to remove only the …

Read more

Create a custom theme in PrimeFaces

PrimeFaces is using jQuery ThemeRoller framework, and it comes with 30+ pre-defined themes, visit all available themes, before create a custom theme. In this tutorial, we will show you how to create a custom theme and apply it in PrimeFaces. 1. ThemeRoller CSS Framework Visit jQuery ThemeRoller, play around the value to customize your theme, …

Read more

Changing theme in PrimeFaces

PrimeFaces is using jQuery ThemeRoller CSS theme framework, and come with 30+ pre-designed themes that you can download and apply in seconds. In this tutorial, we will show you how to change a theme n PriceFaces. There are two ways to change a theme : Using Maven to download and apply. Download manually and apply. …

Read more

PrimeFaces : java.io.IOException: Not in GZIP format

Recently, testing on PrimeFaces’ idleMonitor component. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui"> <h:head> </h:head> <h:body> <h1>PrimeFaces and idleMonitor</h1> <p:growl id="messages" showDetail="true" sticky="true" /> <p:idleMonitor timeout="10000" update="messages"> <p:ajax event="idle" listener="#{idleBean.idleListener}" update="messages" /> </p:idleMonitor> </h:body> </html> Problem After 10 seconds, console prompts java.io.IOException: Not in GZIP format? That’s weird, what GZIP to do iwith idleMonitor …

Read more

PrimeFaces code completion in Eclipse IDE

In Eclipse, as long as your JSF + PrimeFaces project with JSF facet enabled, the PrimeFaces code completion is available automatically. Figure : PrimeFaces code assist in Eclipse IDE Tools Tested : JSF 2.1.11 Eclipse 4.2 PrimeFaces 3.3 Figure : Steps to enable JSF facet in Eclipse IDE. For detail instruction to configure JSF facet, …

Read more

PrimeFaces idleMonitor example

The idleMonitor component, monitor user action and fire when user goes idle or active again. By default, the idle time is set to 5 minutes (300000 ms), and you can customize the duration via timeout attribute like below : <!– fire if user idle for 10 seconds –> <p:idleMonitor timeout="10000" onidle="idleDialog.show()" /> In this tutorial, …

Read more

PrimeFaces hello world example

In this tutorial, we will show you how to create a JSF 2 + PrimeFaces wed project, the final output is display a “hello world” string in PrimeFaces editor component. Tools used : JSF 2.1.11 Primefaces 3.3 Eclipse 4.2 Maven 3 Tested on Tomcat 7 Note PrimeFaces only requires a JAVA 5+ runtime and a …

Read more