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 …
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 “:” …
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 …
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 …
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" …
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; …
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> …
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 …
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 …
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 …
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, …
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. …
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 …
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, …
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, …
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 …