PrimeFaces

Presenter: Volkan Orhan

What is HTML

HTML is an XML based user interface language (although its older versions are not completely XML based). Since it is the most widely used user interface language in the world, it is common to make applications web-based nowadays.

If you don’t know HTML, it is strongly recommended to learn it firstly, in order to

be able to develop web based applications. In addition, even the development of desktop applications also depend on HTML technologies. Therefore, it is crucial to know HTML and HTML based technologies to be a standalone developer nowadays.

What is AJAX

AJAX is shorthand of Asynchronous JavaScript and XML. It makes a WEB based application seem and work like a real desktop application.Benefits of AJAX are that• You have more interactive web applications without using extra plug-ins such

as Adobe Flash or Oracle Java Applets anymore• Your components become statefull, and you don’t need to control states of

your components. Thanks to AJAX and powerful abstractions, you only need to wire up your components correctly.

• You have ability to realize somethings which are not possible to be done with standard web forms that don’t use AJAX. For example, when you use a web

based e-mail client like Gmail, you can see that you received an e-mail when you write an e-mail on the same page, also you can hear a new-mail sound correspondingly.

What is AJAX

What is JSF

JSF is an XML based user interface design language just like HTML.Benefits of use of JSF are:• JSF makes your projects’ architecture MVC based without spending any

extra effort• JSF is almost the same as HTML, so if you know HTML, you can use JSF

easily• JSF is platform-independent, so you can deploy and use your software on

almost every type of server and every type of client that you want. In addition, you can handle server type and client type to make your software seem or respond differently on different kinds of devices.JSF provides you with high-level abstraction, so you can configure the GUI components that you use with XML tag properties just like in HTML.

• You can also use all the HTML components with JSF components, and you can give ID’s to JSF components, and specify their CSS properties, etc. You can also debug your JSF code with all the JavaScript debuggers on your favorite web browser.

• JSF makes your web application seem and behave like a desktop application, so you are not responsible to deal with low-level things; you just need to wire your components to the server-side beans, that is all. All the remaining things are done by JSF.

What is PrimeFaces

Primefaces is a JSF component suite.Exceptional features of PrimeFaces that makes PrimeFaces different than other JSF component suites are:• PrimeFaces is fully AJAX based, so you feel the comfort of using a

desktop application on your browser. You don’t need to handle AJAX-specific things, you just wire your components to your server-side beans like you do on JSF, and use “update” property with the target component

IDs to update the components that you want on the specified events. Even if you want to handle some AJAX-specific things like handling an event, you just define the event handler on the bean, and wire the event to the handler using the related property of the component, that’s all.

• PrimeFaces has a lot of themes, and all of its components support themes, so when you use PrimeFaces components, you already support themes on your web application. You can easily make your projects’ users

change their themes arbitrarily and easily. You don’t need to spend so

much effort to support themes, and you can add theme switcher component of PrimeFaces using a few lines of JSF code.

What is PrimeFaces

Exceptional features of PrimeFaces (cont’d):

• PrimeFaces has a lot of components that are enough to develop even the most sophisticated web applications. All the components can be seen and tested on PrimeFaces Showcase, and use details can be learned from PrimeFaces Users’ Manual.

• PrimeFaces is extendable, and it has a plug-in called “PrimeFacesExtensions”. Thanks to this plug-in, you have a better WYSIWYG rich-text editor, code-coloring widget, image selection widget like on FaceBook, timeline widget, etc. PrimeFaces Extensions also has all the features of PrimeFaces like theming and AJAX events of PrimeFaces.

• PrimeFaces supports mobile devices, and it has some components that can be specifically used on mobile-devices. Since you can handle device type on JSF, you can support mobile devices using these UI components. Mobile components also can be seen on PrimeFaces Showcase. Mobile components are used together with standard components of PrimeFaces.

• PrimeFaces is also browser-independent, and supports all the browsers. Using PrimeFaces guarantees that your web application seems very similar on all the browsers, and you don’t need to force your users to use a specified browser like Internet Explorer.

How to Use PrimeFaces

It is very easy to use PrimeFaces. You firstly need to make it sure that• Your web container supports at least Servlet 2.5,• You added at least JSF 2.0 (if your Servlet version is 2.5) or newer version

of JSF library,• You added JSTL 1.2 library for JSF,• Most importantly, you added (maybe the latest version of) PrimeFaces

library.• If you want to support themes, you need to add the themes jar file that

contains all the themes,• If you want to use PrimeFaces Extensions, you need to add PrimeFaces

Extensions jar file.


1 2

3

ForWebsphere 7.x, select 2.5,

For latest versions, select 3.0

Don’t forget to select

JavaScript and JSF with

corresponding versions.


After then doing the things mentioned on the previous page, you need to add PrimeFaces tag definitions to your xhtml pages. Please note that PrimeFacessupports only xhtml files, but not jsp files. Again, note that this doesn’t mean

that you are not able to use jsp with PrimeFaces. With a little workaround, you can easily use also JSP specific things in your beans.The tag definitions of Primefaces are below:

After then adding the lines above to all the xhtml files, you are able to use primefaces components with <p:xxx/> tags, and PrimeFaces Extensions with <pe:xxx/> tags.

<?xml version='1.0' encoding='UTF-8' ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><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:p="http://primefaces.org/ui"xmlns:pe="http://primefaces.org/ui/extensions"xmlns:ui="http://java.sun.com/jsf/facelets">

Best Practices of PrimeFaces

In order to not face some problems, it is very important to be careful the things explained below.• Make it sure that you add PrimeFaces’ correct tag definitions, otherwise,

you can face some Internet Explorer specific problems on your web application.

• Don’t forget to add h: specifier to your head, body and form tags; otherwise, JSF will not be able to detect these tags, and your components will be unaware of these zones of your pages.

• Don’t forget to use h:form tag with form components like selectOneMenuand themeSwitcher; otherwise, these components will not work correctly, and you will search the problem on other sides of the code.

• If you want to use JQuery, don’t add and include js file of JQuery to your web application; PrimeFaces has its own JQuery, and it can be included to your pages using the statements below:

<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" /><h:outputScript target="head">

// Add the $() function$ = jQuery;

</h:outputScript>

Best Practices of PrimeFaces (cont’d)

• If you use filters on datatables, don’t forget to use “filteredValue” property;

otherwise data can’t be sorted when any filter is applied.

PrimeFaces

Documents

Transcript of PrimeFaces