You are on page 1of 411

PRIMEFACES

USER’S GUIDE
Authors
Çagatay Çivici Yigit Darçın

Covers 1.1 and 2.1 Last Update: 26.07.2010

www.prime.com.tr

1. Introduction!
What is PrimeFaces?!

9
9

2. Setup!
2.1 Download! 2.2 Dependencies! 2.3 Configuration!
2.3.1 JSF 1.2 with PrimeFaces 1.x! 2.3.2 JSF 2.0 with PrimeFaces 2.x!

10
10 11 11
11 12

2.4 Hello World!

13

3. Component Suite!
3.1 AccordionPanel! 3.2 AjaxStatus! 3.3 AutoComplete ! 3.4 BreadCrumb! 3.5 Calendar! 3.6 Captcha ! 3.7 Carousel! 3.8 Charts!
3.8.1 Pie Chart! 3.8.2 Line Chart! 3.8.3 Column Chart! 3.8.4 Stacked Column Chart! 3.8.5 Bar Chart! 3.8.6 StackedBar Chart! 3.8.7 Chart Series! 3.8.8 Skinning Charts!
2

14
14 17 20 26 29 37 40 46
46 49 52 54 56 58 60 61

www.prime.com.tr

3.8.9 Real-Time Charts! 3.8.10 Interactive Charts!

64 66

3.9 Collector! 3.10 Color Picker! 3.11 Column! 3.12 CommandButton! 3.13 CommandLink! 3.14 ConfirmDialog! 3.15 ContextMenu! 3.16 Dashboard! 3.17 DataExporter! 3.18 DataGrid! 3.19 DataList! 3.20 DataTable! 3.21 Dialog! 3.22 Drag&Drop! 3.23 Dock! 3.24 Editor! 3.25 Effect! 3.26 FileDownload! 3.27 FileUpload! 3.28 Focus ! 3.29 GMap! 3.30 GMapInfoWindow! 3.31 GraphicImage !
3

68 70 74 75 80 83 86 89 94 97 102 108 122 127 135 137 142 145 147 153 155 170 171

www.prime.com.tr

3.32 GraphicText! 3.33 Growl! 3.34 HotKey! 3.35 IdleMonitor! 3.36 ImageCompare! 3.37 ImageCropper! 3.38 ImageSwitch! 3.39 Inplace ! 3.40 InputMask! 3.41 Keyboard! 3.42 Layout! 3.43 LayoutUnit! 3.44 LightBox! 3.45 LinkButton! 3.46 Media! 3.47 Menu! 3.48 Menubar! 3.49 MenuButton! 3.50 MenuItem! 3.51 Message! 3.52 Messages! 3.53 NotificationBar! 3.54 OutputPanel! 3.55 Panel! 3.56 Password Strength!
4

176 178 181 184 187 189 193 196 198 201 209 217 219 224 226 229 235 239 241 243 245 247 250 252 257

www.prime.com.tr

3.57 PickList! 3.58 Poll! 3.59 Printer! 3.60 ProgressBar! 3.61 Push! 3.62 Rating! 3.63 RemoteCommand! 3.64 Resizable! 3.65 Resource! 3.66 Resources! 3.67 Schedule ! 3.68 ScheduleEventDialog! 3.69 Sheet! 3.70 Slider! 3.71 Spinner! 3.72 Submenu! 3.73 Spreadsheet! 3.74 Stack! 3.75 Tab! 3.76 TabView! 3.77 Terminal! 3.78 ThemeSwitcher! 3.79 Tooltip! 3.80 Tree! 3.81 TreeNode!
5

262 267 270 272 276 277 280 282 285 286 288 301 303 304 308 313 314 318 320 321 325 328 330 334 348

www.prime.com.tr

3.82 TreeTable ! 3.83 UIAjax! 3.84 Watermark! 3.85 Wizard!

349 353 356 358

4. TouchFaces!
4.1 Getting Started with TouchFaces! 4.2 Views! 4.3 Navigations! 4.4 Ajax Integration! 4.5 Sample Applications ! 4.6 TouchFaces Components !
4.6.1 Application! 4.6.2 NavBarControl! 4.6.3 RowGroup! 4.6.4 RowItem! 4.6.5 Switch! 4.6.6 TableView! 4.6.7 View!

364
364 366 369 371 372 373
373 374 375 376 377 379 380

5. Partial Rendering and Processing!
5.1 Partial Rendering!
5.1.1 Infrastructure! 5.1.2 Using IDs! 5.1.3 Notifying Users! 5.1.4 Bits&Pieces!

381
381
381 381 384 384

5.2 Partial Processing!
5.2.1 Partial Validation!
6

384
384

www.prime.com.tr

5.2.2 Keywords! 5.2.3 Using Ids! 5.2.4 Ajax vs Non-Ajax!

385 386 386

6. Ajax Push/Comet!
6.1 Atmosphere ! 6.2 PrimeFaces Push!
6.2.1 Setup! 6.2.2. CometContext! 6.2.3 Push Component!

387
387 388
388 389 389

7. Javascript API!
7.1 PrimeFaces Global Object! 7.2 Namespaces! 7.3 Ajax API!

391
391 391 392

8. Skinning!
9.1 Applying a Theme ! 9.2 Creating a New Theme ! 9.3 How Skinning Works !

395
396 396 397

9. Utilities!
9.1 RequestContext! 9.2 EL Functions!

399
399 401

10. Integration with Java EE! 11. IDE Support !
11.1 NetBeans! 11.2 Eclipse !

403 404
404 404

7

www.prime.com.tr

12. Portlets! 13. Project Resources! 14. FAQ!

407 409 410

8

Project is led by Çağatay Çivici (aka Optimus Prime).1. • Native Ajax Push/Comet support. AutoComplete. • Extensive documentation. • Skinning Framework with 25+ pre-designed themes. Additional TouchFaces module features a UI kit for developing mobile web applications. Main goal of PrimeFaces is to create the ultimate component suite for JSF. • Built-in Ajax with Lightweight Partial Page Rendering.(IPhone. Dialog. Enterprise Java and outsource software development. Introduction What is PrimeFaces? PrimeFaces is an open source component suite for Java Server Faces featuring 90+ Ajax powered rich set of JSF components. . Palm. Android Phones. a JSF Expert Group Member. • Mobile UI kit to create mobile web applications for handheld devices with webkit based browsers. Nokia S60 and more) • Compatible and Lightweight. a Turkish software development company specialized in Agile consulting. Charts and more). • 90+ rich set of components (HtmlEditor. Prime Technology PrimeFaces is maintained by Prime Technology.

primefaces</groupId> <artifactId>primefaces</artifactId> <version>1.tr 2.RC1</version> </dependency> In addition to the configuration above you also need to add Prime Technology maven repository to the repository list so that maven can download it.1 Download PrimeFaces has a single jar called primefaces-{version}.primefaces and artifact id is primefaces. <repository> <id>prime-repo</id> <name>Prime Technology Maven Repository</name> <url>http://repository.1.org/downloads.1. you can either download from PrimeFaces homepage or if you are a maven user you can define it as a dependency. <dependency> <groupId>org.com.prime.prime. Setup 2. Download manually http://www.www.tr</url> <layout>default</layout> </repository> 10 .com.jar.RC1 or 2.html Download with Maven Group id of the dependency is org. There are two ways to download this jar.primefaces.

4 0.x or 2.2 Dependencies PrimeFaces only requires a JAVA 5+ runtime and a JSF 1.2-FINAL Optional commons-fileupload commons-io atmosphere-runtime atmosphere-compat 1.1 Optional Optional Optional Optional * Listed versions are tested and known to be working with PrimeFaces.x Resource Servlet Resource Servlet must be configured in web.1 0.2+ implementation as mandatory dependencies.8 Type Required Optional Description Apache MyFaces or Sun Mojarra PDF export support for DataExporter component Excel export support for DataExporter component FileUpload FileUpload Ajax Push Ajax Push apache poi 3. Other than these required dependencies.2.x 1.4. thereʼre some optional libraries for certain features.2 with PrimeFaces 1.3 Configuration 2.www. Dependency JSF runtime itext Version * 1.1 JSF 1.xml.com.tr 2. 2.ResourceServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>Resource Servlet</servlet-name> <url-pattern>/primefaces_resource/*</url-pattern> </servlet-mapping> 11 .1 1.5.5.3.primefaces.resource.2. <servlet> <servlet-name>Resource Servlet</servlet-name> <servlet-class>org. other versions of these dependencies may also work but not tested.prime.

2 JSF 2.primefaces.sun.faces. this component outputs the link and script tags that are necessary for PrimeFaces components to work. enable allowTextChildren configuration.resource. <head> <p:resources /> </head> A tip regarding p:resources is to add this component to the facelets or jsp template once. this servlet is auto-registered so you donʼt need to configure it manually. If youʼre running PrimeFaces in a Servlet 3.tr Resources Component Resource component needs to be present on a page that has PrimeFaces components.x.allowTextChildren</param-name> <param-value>true</param-value> </context-param> 12 . due to limitations of JSF2 resource loading mechanism.0 environment like Glassfish V3. so that it gets added to each page automatically using the application.0 with PrimeFaces 2.x uses JSF2 resource APIs to place resources on page.3.prime.ResourceServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>Resource Servlet</servlet-name> <url-pattern>/primefaces_resource/*</url-pattern> </servlet-mapping> Allowing Text Children When using Mojarra 2. PrimeFaces Resource Servlet is required to stream the resources from the bundle. <context-param> <param-name>com.www.com. 2. The ideal place to put resources component would be the html head element.x Resource Servlet Although PrimeFaces 2. <servlet> <servlet-name>Resource Servlet</servlet-name> <servlet-class>org.

x.2 and PrimeFaces 1.sun.org/1999/xhtml” xmlns:f=”http://java.w3c.com.tr/ui”> <h:head> </h:head> <h:body> <p:editor /> </h:body> </html> 13 .com/jsf/core” xmlns:h=”http://java. xmlns:p=”http://primefaces. now define the taglib to import PrimeFaces in your pages and try a component to test if setup is working.com.com/jsf/html” xmlns:p=”http://primefaces.www.prime.0 and PrimeFaces 2.w3c.tr/ui” prefix=”p” %> Try a component For JSF 1.prime.org/1999/xhtml” xmlns:f=”http://java. <%@ taglib uri=”http://primefaces. <html xmlns=”http://www.tr/ui”> <head> <p:resources /> </head> <body> <p:editor /> </body> </html> And with JSF 2.prime.prime. (Note that you donʼt need p:resources but need h:head in this case).x an example page would be.com/jsf/core” xmlns:h=”http://java.com.prime.com.sun.tr/ui” If you're using jsp the taglib definition is.sun.tr 2.com/jsf/html” xmlns:p=”http://primefaces.com.sun. the xml namespace configuration would be. <html xmlns=”http://www.4 Hello World That is all for configuration. Taglib If you're a facelets user.

AccordionPanel org.component.accordionpanel.accordionpanel.primefaces.primefaces. Component Suite 3.www.component org.tr 3.primefaces.AccordionPanelRenderer org.com.component. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class accordionPanel org.prime.component.component.AccordionPanelRenderer Attributes Name id Default Assigned by JSF Type String Description Unique identifier of the component 14 .AccordionpanelTag org.component.1 AccordionPanel AccordionPanel is a container component that renders itʼs children in seperate tabs and displays an animation when a tab is being collapsed or expanded.accordionpanel.primefaces.Accordionpanel org.primefaces.primefaces.

com. tab with highest content is used to calculate the height. accordion panel fills the height of itʼs parent.. binding activeIndex style styleClass disabled effect autoHeight collapsible fillSpace event widgetVar null 0 null null FALSE slide TRUE FALSE FALSE click null Object Integer String String Boolean String Boolean Boolean Boolean String String Getting started with Accordion Panel Accordion panel consists of one or more tabs and each tab can group any other jsf components. When enables.. any number of tabs </p:accordionPanel> 15 . Disables or enables the accordion panel.. <p:accordionPanel> <p:tab title=”First Tab Title”> <h:outputText value= “Lorem”/> . Index of the active tab... When enabled.tr Name rendered Default TRUE Type boolean Description Boolean value to specify the rendering of the component. Inline style of the container element. Variable name of the client side widget. Client side event to toggle the tabs.. Effect to use when toggling the tabs. when set to false component will not be rendered.More content for first tab </p:tab> <p:tab title=”Second Tab Title”> <h:outputText value=”Ipsum” /> </p:tab> <p:tab title=”Third Tab Title”> any set of components.prime. Style class of the container element.www. Defines if accordion panel can be collapsed all together. </p:tab> . An el expression that maps to a server side UIComponent instance in a backing bean.

www. <p:accordionPanel effect=”hover”> //.ui-accordion .. you can also specify the client side to trigger toggling.ui-accordion-content-active Applies Main container element Tab header Tab content Content of active tab.tr Events By default toggling of content happens when a tab header is clicked. For example for hover. Following is the list of structural style classes. As skinning style classes are global. see the main Skinning section for more information.ui-accordion-header .com. Here is an example based on a different theme. Class .tabs </p:accordionPanel> Skinning AccordionPanel resides in a main div container which style and styleClass apply.ui-accordion-content .prime. 16 .

Javascript event handler to be executed after ajax requests is completed succesfully.ajaxstatus. Javascript event handler to be executed after ajax requests complete.AjaxStatusTag org.component.AjaxStatus org.AjaxStatusRenderer Attributes Name id rendered Default Assigned by JSF TRUE String boolean Type Description Unique identifier of the component.ajaxstatus.primefaces. Javascript event handler to be executed before ajax requests start. Boolean value to specify the rendering of the component.primefaces. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class ajaxStatus org.primefaces.2 AjaxStatus AjaxStatus is a global notifier of ajax requests made by PrimeFaces components.component org. An el expression that maps to a server side UIComponent instance in a backing bean Javascript event handler to be executed after ajax requests start.com. when set to false component will not be rendered.primefaces.tr 3.component.AjaxStatus org. Javascript event handler to be executed when an ajax request fails.component.component.component.primefaces.AjaxStatusRenderer org.primefaces. binding onstart oncomplete onprestart onsuccess onerror null null null null null null Object String String String String String 17 .ajaxstatus.prime.www.

” /> </f:facet> <f:facet name=”error”> <h:outputText value=”Error!” /> </f:facet> <f:facet name=”success”> <h:outputText value=”Done!” /> </f:facet> </p:ajaxStatus> 18 . Style class of the html element containing the facets..prime.” /> </f:facet> <f:facet name=”complete”> <h:outputText value=”Done!” /> </f:facet> </p:ajaxStatus> More callbacks Other than start and complete thereʼre three more callback facets you can use.www. Most common used facets are start and complete. Getting started with AjaxStatus AjaxStatus uses facets to represent the ajax request status..tr Name style styleClass widgetVar Default null null null String String String Type Description Style of the html element containing the facets. success and error.. Name of the client side widget. <p:ajaxStatus> <f:facet name=”start”> <h:outputText value=”Loading. prestart. Start facet will be visible once ajax request begins and stay visible until itʼs completed.. These are.com. Once the ajax response is received start facet becomes hidden and complete facet shows up. <p:ajaxStatus> <f:facet name=”prestart”> <h:outputText value=”Starting.

<p:ajaxStatus> <f:facet name=”start”> <h:graphicImage value=”ajaxloading.prime. <p:ajaxStatus onstart=”alert(‘Start’)” oncomplete=”alert(‘End’)”/> Animations Generally. These are the event handler versions of facets. itʼs fancier to display animated gifs with ajax requests rather than plain texts. Styling directly applies to an html div element which contains the facets. use on* event handlers.com.gif” /> </f:facet> <f:facet name=”complete”> <h:outputText value=”Done!” /> </f:facet> </p:ajaxStatus> Skinning AjaxStatus AjaxStatus is equipped with style and styleClass.www.tr Custom Events If you want to execute custom javascript instead of the default usage with facets. 19 .

autocomplete. Value of the component than can be either an EL expression of a literal text.tr 3.component org.component. An el expression that maps to a server side UIComponent instance in a backing bean.autocomplete. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class autoComplete org. Boolean value to specify the rendering of the component.component.AutoComplete org.autocomplete.component.prime.primefaces.primefaces.primefaces.AutoCompleteTag org.primefaces.component.AutoComplete org. when set to false component will not be rendered.AutoCompleteRenderer org.component.www.AutoCompleteRenderer Attributes Name id rendered Default Assigned by JSF TRUE String Boolean Type Description Unique identifier of the component. 20 binding null Object value null Object .com.primefaces.primefaces.3 AutoComplete AutoComplete provides suggestions while an input is being typed.

itʼs resolved to a converter instance. immediate FALSE Boolean required validator valueChangeListener FALSE null null Boolean MethodExpression MethodExpression requiredMessage converterMessage validatorMessage widgetVar var itemLabel itemValue completeMethod maxResults minQueryLength queryDelay null null null null null null null null 10 1 300 String String String String String String String MethodExpression Integer Integer Integer 21 . Delay to wait in milliseconds before sending each query to the server. valueChange Events are fired in “process validations” phase. In case itʼs a static text.prime. Value of the item. if immediate is set to false. Number of characters to be typed before starting to query.com. Message to be displayed when required field validation fails. Marks component as required. when true the events will be fired at “apply request values”. Name of the iterator used in pojo based suggestion. Message to be displayed when conversion fails. Label of the item. A method expression that refers to a method validationg the input. Boolean value that specifies the lifecycle phase the valueChangeEvents should be processed.www. Maximum number of results to be displayed. When itʼs an EL expression. Message to be displayed when validation fields. Method to be called to fetch the suggestions. it must refer to a converter id. A method expression that refers to a method for handling a valuchangeevent. Name of the client side widget.tr Name converter Default null Type Converter/String Description An el expression or a literal text that defines a converter for the component.

Server side listener to invoke when an item is selected. <p:autoComplete value=”#{bean. Since autoComplete is an input component.complete}”/> public class AutoCompleteBean { } private String text. it requires a value as well.com. oncomplete null String disabled FALSE Boolean Getting Started with AutoComplete Suggestions are loaded by calling a server side completeMethod that takes a single string parameter which is the text entered.add(query + i). } //getters and setters 22 .prime. for (int i = 0. Javascript event handler to be called before ajax request to load suggestions begins.tr Name forceSelection selectListener onSelectUpdate onstart Default FALSE null null null Type Boolean MethodExpression String String Description When enabled.www. Disables the autocomplete. Javascript event handler to be called after ajax request to load suggestions completes. i < 10.text}” completeMethod=”#{bean. public List<String> complete(String query) { List<String> results = new ArrayList<String>(). return results. Component(s) to update with ajax after a suggested item is selected. i++) results. autoComplete only accepts input from the selection list.

return players. itemLabel is the label displayed as a suggestion and itemValue is the submitted value.prime. <p:autoComplete value=”#{autoCompleteBean. public class AutoCompleteBean { } private Player selectedPlayer.selectedPlayer}” completeMethod=”#{autoCompleteBean. Note that when working with pojos. Following example loads a list of players.text}” completeMethod=”#{bean. } public List<Player> complete(String query) { List<Player> players = readFromDB(query).selectedPlayer = selectedPlayer. public Player getSelectedPlayer() { return selectedPlayer.completePlayer}” var=”player” itemLabel=”#{player. autoComplete supports this common use case with the use of a converter and data iterator.com.www. <p:autoComplete value=”#{bean. by default the limit is 10.tr Pojo Support Most of the time.domain. } Limiting the results Number of results shown can be limited.name}” itemValue=”#{player}” converter=”playerConverter”/> import org. } public void setSelectedPlayer(Player selectedPlayer) { this. you need to plug-in your own converter.complete}” maxResults=”5” /> 23 . instead of simple strings you would need work with your domain objects.examples.Player.primefaces.

getObject(). by default autoComplete waits for 300 milliseconds to query a suggestion request.prime. suggestions will start when user types the 3rd character at the input field. Example below demonstrates how to display a facesmessage about the selected item instantly. if youʼd like to tune the load balance. This behavior is tuned using the minQueryLength attribute. <p:messages id=”messages” /> <p:autoComplete value=”#{bean.primefaces. //add faces message } //Getters.complete}” queryDelay=”1000” /> Instant Ajax Selection Instead of waiting for user to submit the form manually to process the selected item.text}” completeMethod=”#{bean. <p:autoComplete value=”#{bean.SelectEvent instance containing information about selected item is passed as a parameter.text}” completeMethod=”#{bean.com. Following autoComplete waits for 1 second after user types an input.tr Minimum query length By default queries are sent to the server and completeMethod is called as soon as users starts typing at the input text.complete}” onSelectUpdate=”messages” selectListener=”#{bean.complete}” minQueryLength=”3” /> With this setting. <p:autoComplete value=”#{bean. Query Delay AutoComplete is optimized using queryDelay option. you can enable instant ajax selection by using a selectListener that takes an org.event.handleSelect}” /> public class AutoCompleteBean { } public void handleSelect(SelectEvent event) { Object selectedItem = event.text}” completeMethod=”#{bean.www. Setters and completeMethod 24 . give a longer value. Optionally other component(s) on page can be updated after selection using onSelectUpdate option.

results is the suggestion list in json format. <p:autoComplete value=”#{bean. For example request. Class .term is the query string and response.com.ui-menu .www.ui-autocomplete-input .tr Client Side Callbacks onstart and oncomplete allow executing custom javascript before and after an ajax request to load suggestions. see the main Skinning section for more information. Here is an example based on a different theme. Skinning Following is the list of structural style classes.prime. these parameters contain useful information.complete}” onstart=”handleStart(request)” oncomplete=”handleComplete(response)” /> onstart callback gets a request parameter and oncomplete gets a response parameter. 25 .ui-menu-item Input field Suggestion menu Each item in suggestion menu Applies As skinning style classes are global.text}” completeMethod=”#{bean.

component.component.primefaces. An el expression that maps to a server side UIComponent instance in a backing bean Number of expanded menutitems at the end. Number of expanded menuitems at begining.primefaces. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class breadCrumb org.4 BreadCrumb Breadcrumb is a navigation component that provides contextual information about page hierarchy in the workflow.com.primefaces.component org.component. Expanded effect duration in milliseconds.breadcrumb.BreadCrumb org.component.breadcrumb.BreadCrumbRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String boolean Description Unique identifier of the component.BreadCrumbRenderer org. when set to false component will not be rendered. Boolean value to specify the rendering of the component.breadcrumb.primefaces.tr 3.component.BreadCrumb org.primefaces. Collapse effect duration in milliseconds.www. binding null Object expandedEndItems expandedBeginningItems expandEffectDuration collapseEffectDuration 1 1 800 500 Integer Integer Integer Integer 26 .BreadCrumbTag org.primefaces.prime.

com.C. <p:breadCrumb> <p:menuitem <p:menuitem <p:menuitem <p:menuitem <p:menuitem <p:menuitem <p:menuitem <p:menuitem </p:breadCrumb> label=”Categories” url=”#” /> label=”Sports” url=”#” /> label=”Football” url=”#” /> label=”Countries” url=”#” /> label=”Spain” url=”#” /> label=”F.www. breadcrumb can collapse/expand menuitems on mouseover.tr Name initialCollapseEffectDuration previewWidth preview style styleClass model Default 600 5 FALSE null null null Type Integer Integer boolean String String MenuModel Description Initial collapse effect duration in milliseconds. <p:breadCrumb preview=”true”> <p:menuitem label=”Categories” url=”#” /> <p:menuitem label=”Sports” url=”#” /> <p:menuitem label=”Football” url=”#” /> <p:menuitem label=”Countries” url=”#” /> <p:menuitem label=”Spain” url=”#” /> <p:menuitem label=”F. previewWidth attribute defines the reveal amount in pixels. Style class of main container MenuModel instance to create menus programmatically Getting Started with BreadCrumb Steps are defined as child menuitem components in breadcrumb. when set to false menuitems will not collapse. if you have limited space and many menuitems.C. Preview width of a collapsed menuitem.prime. Barcelona” url=”#” /> <p:menuitem label=”Squad” url=”#” /> <p:menuitem label=”Lionel Messi” url=”#” /> </p:breadCrumb> 27 . Style of main container element. Specifies preview mode. Barcelona” url=”#” /> label=”Squad” url=”#” /> label=”Lionel Messi” url=”#” /> Preview By default all menuitems are expanded.

Each menuitem container.first a . As skinning style classes are global. Skinning Following is the list of structural style classes.com. Hereʼs an example. Dynamic Menus Menus can be created programmatically as well. 28 . Container list of each menuitem.www. see the main Skinning section for more information.ui-breadcrumb ul li a .tr Animation Configuration Duration of effects can be customizated using several attributes. see the dynamic menus part in menu component section for more information and an example. Style Class .ui-breadcrumb ul li. Link element of each menuitem.ui-breadcrumb . Seperator of menuitems.ui-breadcrumb ul . First element of breadcrumb.ui-breadcrumb-chevron Applies Main breadcrumb container element.prime.ui-breadcrumb ul li a . Here is an example based on a different theme. <p:breadCrumb preview=”true” expandEffectDuration=”1000” collapseEffectDuration=”1000” initialCollapseEffectDuration=”1000”> //menuitems </p:breadCrumb> Durations are defined in milliseconds.

tr 3. ajax selection and more.calendar.Date 29 .primefaces.Calendar org.component. when set to false component will not be rendered.primefaces.Calendar org.primefaces.CalendarRenderer Attributes Name id rendered Default Assigned by JSF TRUE String Boolean Type Description Unique identifier of the component Boolean value to specify the rendering of the component.primefaces.prime.5 Calendar Calendar is an input component to provide a date in various ways.primefaces.component. localization.component.util. An el expression that maps to a server side UIComponent instance in a backing bean Value of the component binding null Object value null java.calendar.component.www.com.CalendarTag org.calendar.CalendarRenderer org.component org. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class calendar org. Other than basic features calendar supports paging.component.primefaces.

if immediate is set to false. valueChange Events are fired in “process validations” phase Marks component as required A method binding expression that refers to a method validationg the input A method binding expression that refers to a method for handling a valuchangeevent Message to be displayed when required field validation fails.www. Message to be displayed when conversion fails. Disables the calendar when set to true. “inline” only displays a calendar. “popup” displays an input text and a popup button DateFormat pattern for localization Locale to be used for labels and conversion. itʼs resolved to a converter instance. When itʼs an EL expression. it must refer to a converter id Boolean value that specifies the lifecycle phase the valueChangeEvents should be processed.Locale or String String 30 . Message to be displayed when validation fields. Sets calendar's minimum visible date Sets calendar's maximum visible date Enables multiple page rendering. when true the events will be fired at “apply request values”.util. Defines how the calendar will be displayed. Icon of the popup button immediate FALSE Boolean required validator valueChangeListener FALSE null null Boolean MethodExpression ValueChangeListe ner String String String Date or String Date or String 1 Boolean String requiredMessage converterMessage validatorMessage mindate maxdate pages disabled mode null null null null null int FALSE popup pattern locale popupIcon MM/dd/ yyyy null null String java.com. inline|popup. In case itʼs a static text.tr Name converter Default null Type Converter/String Description An el expression or a literal text that defines a converter for the component.prime.

popup icon is rendered without the button. Style class of the input element. Visibility of button panel containing today and done buttons. Enables month/year navigator String or a java. Duration of the effect. Enables selection of days belonging to other months.prime.tr Name popupIconOnly navigator timeZone Default FALSE FALSE null Type Boolean Boolean java.com. Component(s) to update with ajax when a date is selected. 31 . Server side listener to be invoked with ajax when a date is selected. Displays the week number next to each week.TimeZone Description When enabled. Client side event that displays the popup calendar. Effect to use when displaying and showing the popup calendar.util. Style of the main container element. defaults to TimeZone.www. Name of the client side widget readOnlyInputText onSelectUpdate selectListener style styleClass inputStyle inputStyleClass showButtonPanel effect effectDuration showOn showWeek showOtherMonths selectOtherMonths widgetVar FALSE null null null null null null FALSE null normal both FALSE FALSE FALSE null Boolean String MethodExpression String String String String Boolean String String String Boolean Boolean Boolean String Getting started with Calendar A java. Displays days belonging to other months.getDefault() Makes input text of a popup calendar readonly. Style of the input element.TimeZone instance to specify the timezone used for date conversion. Style class of the main container element.Date type property needs to be defined as the value of the calendar.util.util.

date}” mode=”inline” /> Popup <p:calendar value=”#{dateBean.www. “popup”(default) and “inline”.tr public class DateBean { } private Date date.prime.com. Inline <p:calendar value=”#{dateBean.date}” mode=”popup” /> 32 . //Getter and Setter <p:calendar value=”#{dateBean.date}”/> Display Modes Calendar has two main display modes.

date}” mode=”popup” showOn=”button” /> Popup Icon Only <p:calendar value=”#{dateBean.www. M.MM.date}” mode=”popup” showOn=”button” popupIconOnly=”true” /> L11N Calendar has a built-in converter so thereʼs no need to define a datetime converter. yyyy”/> 33 . dd MMM.date3}” pattern=”EEE.prime.tr Popup Button <p:calendar value=”#{dateBean. Default pattern is “MM/dd/yyyy” and pattern attribute allows changing the pattern used.date2}” pattern=”yy. d”/> <p:calendar value=”#{dateController. <p:calendar value=”#{dateController.com.yyyy”/> <p:calendar value=”#{dateController.date1}” pattern=”dd.

• • • • • • • • • • • • • • • • • • • • • • • • • • • Afrikaans Albanian Arabic Armenian Azerbaijani Basque Bosnian Bulgarian Catalan Chinese Hong Kong Chinese Simplified Chinese Traditional Croatian Czech Danish Dutch English UK English US Esperanto Estonian Faroese Farsi/Persian Finnish French French/Swiss German Greek 34 • • • • • • • • • • • • • • • • • • • • • • • • • • Hebrew Hungarian Icelandic Indonesian Italian Japanese Korean Latvian Lithuanian Malaysian Norwegian Polish Portuguese/Brazilian Romanian Russian Serbian Serbian (sprski jezik) Slovak Slovenian Spanish Swedish Tamil Thai Turkish Ukranian Vietnamese .prime.com.tr I18N By default locale information is retrieved from the viewʼs locale and can be overriden by the locale attribute.date}” locale=”tr”/> 52 languages are supported out of the box. Locale attribute can take a locale key as a String or a java.util.www. <p:calendar value=”#{dateController. Following is a Turkish Calendar.Locale instance.

tr Paging Calendar can also be rendered in multiple pages where each page corresponds to one month.date}” pages=”3”/> Ajax Selection Calendar supports instant ajax selection.Date. Optional onSelectUpdate option allows updating other component(s) on page.prime.www.date}” mode=”inline” mindate=”07/10/2010” maxdate=”07/20/2010”/> 35 . This feature is tuned with the pages attribute.com.primefaces.event.date}” onSelectUpdate=”messages” selectListener=”#{calendarBean.DateSelectEvent instance as a parameter.util.getDate(). //Add facesmessage } Date Ranges Using mindate and maxdate options. <p:calendar value=”#{dateBean. Values for these attributes can either be a string or a java. <p:calendar value=”#{calendarBean.handleDateSelect}” /> <p:messages id=”messages” /> public void handleDateSelect(DateSelectEvent event) { Date date = event. whenever a date is selected a server side selectListener can be invoked with an org. selectable dates can be restricted. <p:calendar value=”#{dateController.

ui-datepicker-current .ui-datepicker-other-month .ui-datepicker td .ui-datepicker-table .ui-datepicker-header . Following is the list of structural style classes. 36 .www. see the main Skinning section for more information.prime. Here is an example based on a different theme.ui-datepicker-prev .ui-datepicker-title . Style Class .ui-datepicker-next .ui-datepicker-close Main container Header container Previous month navigator Next month navigator Title Month display Date table Label of weekends Dates belonging to other months Each cell date Button panel Today button Close button Applies As skinning style classes are global.ui-datepicker-week-end .ui-datepicker-buttonpane .tr Skinning Calendar resides in a container element which style and styleClass options apply.ui-datepicker .ui-datepicker-month .com.

captcha.primefaces. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class captcha org. it must refer to a converter id.captcha.component.www.Captcha org.primefaces.CaptchaTag org.com. An el expression that maps to a server side UIComponent instance in a backing bean.CaptchaRenderer org.Captcha org. Boolean value to specify the rendering of the component.captcha. An el expression or a literal text that defines a converter for the component.component. Value of the component than can be either an EL expression of a literal text. binding value converter null null null Object Object Converter/ String 37 .tr 3.primefaces.component. When itʼs an EL expression. itʼs resolved to a converter instance.primefaces.6 Captcha Captcha is a form validation component based on Recaptcha API.primefaces.primefaces. In case itʼs a static text.CaptchaRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String Boolean Description Unique identifier of the component.prime.component. when set to false component will not be rendered.component.component org.

First thing to do is to sign up to reCaptcha and gain public&private keys. Key of the supported languages.PRIVATE_KEY</param-name> <param-value>YOUR_PRIVATE_KEY</param-value> </context-param> Once the private key is configured.tr Name immediate Default FALSE Type Boolean Description Boolean value that specifies the lifecycle phase the valueChangeEvents should be processed.captcha. Marks component as required. you can start using captca as. Message to be displayed when required field validation fails.prime. Message to be displayed when validation fields. <context-param> <param-name>org. Once you have the keys for your domain.component. Public recaptcha key for a specific domain Theme of the captcha.primefaces. when true the events will be fired at “apply request values”. add your private key to web deployment descriptor as follows. valueChange Events are fired in “process validations” phase. Message to be displayed when conversion fails.com.www. A method binding expression that refers to a method validationg the input. A method binding expression that refers to a method for handling a valuchangeevent. <p:captcha publicKey=”YOUR_PUBLIC_KEY”/> 38 . required validator valueChangeListener requiredMessage converterMessage validatorMessage publicKey theme language FALSE null null null null null null red en Boolean MethodExpr ession ValueChang eListener String String String String String String Getting Started with Captcha Catpcha uses reCaptcha api as the underlying captcha mechanism and captcha has a built-in captcha validator that always checks the value entered with reCaptcha. if immediate is set to false.

captcha. <p:captcha publicKey=”YOUR_PUBLIC_KEY” theme=”white”/> Languages Text instructions displayed on captcha is customized with the language attribute. Following are the valid built-in themes.captcha.CaptchaValidator. • • • • red (default) white blackglass clean Themes are applied via the theme attribute.primefaces. note that custom styling is not yet supported.component.prime. Summary Detail org.CaptchaValidator.INVALID_detail 39 .primefaces. Corresponding keys are.www.INVALID org.component. <p:captcha publicKey=”YOUR_PUBLIC_KEY” language=”tr”/> Overriding Validation Messages By default captcha displays itʼs own validation messages.tr Themes Captcha supports several themes. Below demonstrates a Turkish captcha. this can be easily overriden by the JSF message bundle mechanism.com.

primefaces.component.primefaces. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class carousel org.Carousel org.7 Carousel Carousel is a multi purpose component to display a set of data or general content.component.component org.component.carousel.primefaces.carousel.component.primefaces.prime. An el expression that maps to a server side UIComponent instance in a backing bean A value expression that referes to a collection instance to be listed Name of the request scope based iterator name Number of visible items per page binding value var rows null null null 3 Object Object String Integer 40 .carousel.component.primefaces.com.CarouselTag org.tr 3.www.Carousel org.CarouselRenderer org.primefaces. when set to false component will not be rendered.CarouselRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String Boolean Description Unique identifier of the component Boolean value to specify the rendering of the component.

String manufacturer. animation is turned on by default Sets the speed of the scrolling animation Name of the animation effect Prefix text of the pager dropdown.www. The code for CarBean that would be used to bind the carousel to the car list. Inline style of the main container.tr Name first scrollIncrement circular vertical autoPlayInterval Default 0 1 FALSE FALSE 0 Type Integer Integer Boolean Boolean Integer Description Index of the first element to be displayed Number of items to pass in each scroll Sets continuous scrolling Sets vertical scrolling Sets the time in milliseconds to have Carousel start scrolling automatically after being initialized The percentage of the previous and next item of the current item to be revealed When enabled scrolling is animated.prime. int year. Javascript variable name of the wrapped widget revealAmount animate speed effect pagerPrefix style styleClass itemStyle itemStyleClass widgetVar 0 TRUE 0. data and general content display. public class Car { } private private private private ..com. 41 .. String model. String color. Style class of each item container. Style class of the main container.5 null null null null null null null Integer Boolean double String String String String String String String Getting started with Carousel Calendar has two main use-cases. To begin with data iteration we will be using a list of cars to display with carousel. Inline style of each item container.

</p:carousel> 42 .jpg"/> <h:outputText value="Model: #{car.”ManufacturerX”... //add more cars } public List<Car> getCars() { return cars.cars}” var=”car”> <p:graphicImage value="/images/cars/#{car.www.year}" /> <h:outputText value="Color: #{car.manufacturer}.tr public class CarBean { } private List<Car> cars. <p:carousel value=”#{carBean.”blue”)). public CarListController() { cars = new ArrayList<Car>(). } <p:carousel value=”#{carBean. Limiting Visible Items Bu default carousel lists itʼs items in pages with size 3. cars.model}" /> <h:outputText value="Year: #{car. This is customizable with the rows attribute.com.add(new Car(”myModel”.cars}” var=”car” rows=”1”> .2005.prime.color}" /> </p:carousel> Carousel iterates through the cars collection and renders itʼs children for each car.

<p:carousel value=”#{carBean... • • • • • • • • • • • • • • • • backBoth backIn backOut bounceBoth bounceIn bounceOut easeBoth easeBothStrong easeIn easeInStrong easeNone easeOut easeOutStrong elasticBoth elasticIn elasticOut Note: Effect names are case sensitive and incorrect usage may result in javascript errors 43 . Example above reverals %20 of the next and previous items.prime.tr Reveal Amount Reveal amount is the percentage of the next and previous item to be shown.www. it can be tuned by the reveralAmount attribute. </p:carousel> Effects Paging happens with a slider effect by default and following options are supported.com.cars}” var=”car” revealAmount=”20”> .

jpg" /> <h:outputText value="Francis Ford Coppola's . for this purpose autoPlayInterval and circular attributes are used.jpg" /> <h:outputText value="After a break of .jpg" /> <h:outputText value="The story begins as Don Vito .. <p:carousel rows="1" itemStyle="height:200px." /> </h:panelGrid> </p:tab> </p:carousel> 44 .tr SlideShow Carousel can display the contents in a slideshow.prime.www.jpg"/> <p:graphicImage value="/images/nature4.."/> </h:panelGrid> </p:tab> <p:tab title="Godfather Part III"> <h:panelGrid columns="2" cellpadding="10"> <p:graphicImage value="/images/godfather/godfather3. <p:carousel itemStyleClass="carItem" autoPlayInterval="2000" rows="1" effect="easeInStrong" circular="true"> <p:graphicImage value="/images/nature1.com."> <p:tab title="Godfather Part I"> <h:panelGrid columns="2" cellpadding="10"> <p:graphicImage value="/images/godfather/godfather1..jpg"/> <p:graphicImage value="/images/nature3..." /> </h:panelGrid> </p:tab> <p:tab title="Godfather Part II"> <h:panelGrid columns="2" cellpadding="10"> <p:graphicImage value="/images/godfather/godfather2.width:600px..jpg"/> </p:carousel> Content Display Another use case of carousel is tab based content display.jpg"/> <p:graphicImage value="/images/nature2. Following carousel displays a collection of images as a slideshow.

com.ui-carousel-nav-first-page . Following is the list of structural style classes.ui-carousel-element li Main container Header container Content container First page of paginator Current page of paginator Navigation buttons First navigation button of paginator Next navigation button of paginator Item container list Each item Applies As skinning style classes are global. place carousel contents in a p:column to process selecting properly. provide dimensions of each item with itemStyle or itemStyleClass attributes.ui-carousel-nav .ui-carousel-nav-page-selected .ui-carousel-element .tr Tips • To avoid cross browser issues. Style Class . itemStyle and itemStyleClass attributes apply to each item displayed by carousel.ui-carousel-first-button .ui-carousel .ui-carousel-button .prime. 45 . Skinning Carousel resides in a container element which style and styleClass options apply. • When selecting an item with a command component like commandLink. Here is an example based on a different theme.ui-carousel-next-button .www. see the main Skinning section for more information.ui-carousel-content .

primefaces.component.8.tr 3.component. column. the data is refreshed based on the refreshInterval period. 3. Refresh period of a live chart data in milliseconds 46 binding value var categoryField dataField live refreshInterval null null null null null FALSE 3000 Object java.com. when set to false component will not be rendered.primefaces. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class pieChart org. line and more.pie.chart.List String Object Object boolean Integer .primefaces.chart.8 Charts Charts are flash based JSF components to display graphical data.PieChart org.component.pie.component org.chart.chart.primefaces.primefaces.util.chart.PieChartRenderer org.primefaces.component.component.1 Pie Chart Pie chart displays category-data pairs in a pie graphic.PieChartRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String boolean Description Unique identifier of the component Boolean value to specify the rendering of the component. Thereʼre various chart types like pie.PieChartTag org.pie. An el expression that maps to a server side UIComponent instance in a backing bean Datasource to be displayed on the chart Name of the data iterator Pie category field Pie data field When a chart is live.PieChart org.prime.www. Charts can also display real-time data and also can fire server side events as response to user interaction.

Height of the chart. private int amount.List to display the data. Method expression to listen chart series item select events Style to apply to chart container element Javascript variable name representing the styles Javascript variable name representing the series styles Width of the chart. We begin with creating the sale class to represent this model. int amount) { this.tr Name update oncomplete itemSelectListener styleClass style seriesStyle width height dataTipFunction wmode widgetVar Default null null null null null null 500px 350px null null null Type String String MethodExpr ession String String String String String String String String Description Client side id of the component(s) to be updated after async partial submit request Javascript event to be called when ajax request for item select event is completed.amount = amount.util. public class Sale { } private String brand. suppose there are 4 brands and each brand has made x amount of sales last year. Name of the javascript function to customize datatips.brand = brand.www.prime. public Sale() {} public Sale(String brand. As an example. } //getters and setters for brand and amount 47 .com. in addition to the datasource categoryField is used to identify the pie section and dataField is used to hold the value of the corresponding categoryField. this. wmode property of the flash object Name of the client side widget Getting started with PieChart Chart needs a collection like a java.

421)). 702)). Sales list can be visualized as follows. <p:pieChart value=”#{chartBean. 540)).www. sales. } Thatʼs all the information needed for the pieChart to start working.brand}” dataField=”#{sale. } public List<Sale> getSales() { return sales.add(new Sale(”Brand 2”.com.amount}” /> categoryField=”# Output would be. a java.prime.sales}” var=”sale” {sale.add(new Sale(”Brand 1”.tr In SaleDisplay bean.util. sales. public SaleDisplayBean() { sales = new ArrayList<Sale>().add(new Sale(”Brand 4”. 325)). 48 .List holds sale data of the 4 brands. public class SaleDisplayBean { } private List<Sale> sales.add(new Sale(”Brand 3”. sales. sales.

primefaces.chart.8.component.component org.line.primefaces.chart.line. Refresh period of a live chart data in milliseconds Client side id of the component(s) to be updated after async partial submit request Javascript event to be called when ajax request for item select event is completed.prime.LineChart org. the data is refreshed based on the refreshInterval period.primefaces.LineChartTag org.chart.tr 3.chart.primefaces.2 Line Chart Line chart visualizes one or more series of data in a line graph.component.LineChart org.com.chart.component.line. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class lineChart org.LineChartRenderer org. Method expression to listen chart series item select events 49 binding value var xField live refreshInterval update oncomplete itemSelectListener null null null null FALSE 3000 null null null Object java. when set to false component will not be rendered.component.primefaces.List String Object boolean Integer String String MethodExpr ession .component.LineChartRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String boolean Description Unique identifier of the component Boolean value to specify the rendering of the component.primefaces.www.util. An el expression that maps to a server side UIComponent instance in a backing bean Datasource to be displayed on the chart Name of the data iterator Data of the x-axis When a chart is live.

public Birth() {} public Birth(int year. To give an example.girls = girls. Name of the javascript function to customize datatips.com.prime. Width of the chart.tr Name styleClass style minY maxY width height dataTipFunction labelFunctionX labelFunctionY titleX titleY wmode widgetVar Default null null null null 500px 350px null null null null null null null Type String String double double String String String String String String String String String Description Style to apply to chart container element Javascript variable name representing the styles Minimum boundary value for y-axis. we need the Birth class. Name of the javascript function to format y-axis labels. } //getters and setters for fields 50 . girls. int boys. Height of the chart.www. int girls) { this.boys = boys. public class Birth { } private int year. weʼd display and compare the number of boys and girls year by year who was born last year at some place on earth.year = year. boys. this. the xField data for the x-axis and one or more series data each corresponding to a line on the graph. Title of the x-axis Title of the y-axis wmode property of the flash object Name of the client side widget Getting started with LineChart LineChart mainly needs a collection as the value. this. Name of the javascript function to format x-axis labels. Maximum boundary value for y-axis. To model this.

births. 60)).add(new Birth(2006.add(new Birth(2004.prime.tr Next thing to do is to prepare the data year by year in BirthDisplayBean. 44. 110)). 100. 150.com.births}” var=”birth” xfield=”# {birth. public class BirthDisplayBean { private List<Birth> births.boys}” /> <p:chartSeries label=”Girls” value=”#{birth. births. births. 120)). 135)).add(new Birth(2007. } public ChartBean() { births = new ArrayList<Birth>(). 51 . a linechart can visualize this data as follows. 120. births.add(new Birth(2008.year}”> <p:chartSeries label=”Boys” value=”#{birth.add(new Birth(2005. 52)). births. <p:lineChart value=”#{chartBean.girls}” /> </p:lineChart> Output of this lineChart would be. 125. } Given this birth p:chartSeriescollection. } public List<Birth> getBirths() { return births.www.

www.ColumnChartRenderer Attributes Name id rendered Default Assigne d by JSF TRUE Type String boolean Description Unique identifier of the component Boolean value to specify the rendering of the component.util.component org.chart.primefaces.component.tr 3.chart. Refresh period of a live chart data in milliseconds Client side id of the component(s) to be updated after async partial submit request Javascript event to be called when ajax request for item select event is completed.component.component.chart.3 Column Chart Column chart visualizes one or more series of data using a column graph.ColumnChart org.component.primefaces.8. the data is refreshed based on the refreshInterval period.column.chart.primefaces. when set to false component will not be rendered.column.chart.ColumnChartRenderer org.ColumnChart org.List String Object boolean Integer String String MethodExpr ession .primefaces. An el expression that maps to a server side UIComponent instance in a backing bean Datasource to be displayed on the chart Name of the data iterator Data of the x-axis When a chart is live.primefaces.com.column.prime. Method expression to listen chart series item select events 52 binding value var xField live refreshInterval update oncomplete itemSelectListener null null null null FALSE 3000 null null null Object java. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class columnChart org.primefaces.ColumnChartTag org.component.

Name of the javascript function to customize datatips. Height of the chart.boys}” /> <p:chartSeries label=”Girls” value=”#{birth. Title of the x-axis Title of the y-axis wmode property of the flash object Name of the client side widget Getting started with Column Chart Column chart usage is very similar to line chart.prime.tr Name styleClass style minY maxY width height dataTipFunction labelFunctionX labelFunctionY titleX titleY wmode widgetVar Default null null null null 500px 350px null null null null null null null Type String String double double String String String String String String String String String Description Style to apply to chart container element Javascript variable name representing the styles Minimum boundary value for y-axis. as an example following column chart displays the birth rate data in the lineChart example. <p:columnChart value=”#{birthDisplayBean.com. Name of the javascript function to format y-axis labels.year}”> <p:chartSeries label=”Boys” value=”#{birth.girls}” /> </p:lineChart> 53 .www. Width of the chart. Please see the lineChart section to get more information about the structure of the birth data. Maximum boundary value for y-axis.births}” var=”birth” xfield=”# {birth. Name of the javascript function to format x-axis labels.

component.chart.List String Object boolean Integer String String .util.StackedColumnChartRenderer org.stackedcolumn.4 Stacked Column Chart Stacked Column chart is similar to column chart but the columns are stacked per each xField data.8.primefaces. the data is refreshed based on the refreshInterval period.prime. 54 binding value var xField live refreshInterval update oncomplete null null null null FALSE 3000 null null Object java.primefaces. Refresh period of a live chart data in milliseconds Client side id of the component(s) to be updated after async partial submit request Javascript event to be called when ajax request for item select event is completed.component. when set to false component will not be rendered. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class stackedColumnChart org.primefaces.stackedcolumn.primefaces.component.component.chart.chart.component org.primefaces. StackedColumnChartRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String boolean Description Unique identifier of the component Boolean value to specify the rendering of the component.www.StackedColumnChart org.primefaces.chart.com. StackedColumnChartTag org.stackedcolumn.tr 3.chart.component. StackedColumnChart org. An el expression that maps to a server side UIComponent instance in a backing bean Datasource to be displayed on the chart Name of the data iterator Data of the x-axis When a chart is live.

Width of the chart.prime. Height of the chart.births}” var=”birth” xfield=”#{birth.girls}” /> </p:stackedColumnChart> 55 . Name of the javascript function to customize datatips. Maximum boundary value for y-axis.www.com.tr Name itemSelectListener styleClass style minY maxY width height dataTipFunction wmode widgetVar Default null null null null null 500px 350px null null null Type MethodExpre ssion String String double double String String String String String Description Method expression to listen chart series item select events Style to apply to chart container element Javascript variable name representing the styles Minimum boundary value for y-axis. wmode property of the flash object Name of the client side widget Getting started with Stacked Column Chart Stacked column chart usage is very similar to line chart.month}”> <p:chartSeries label=”Boys” value=”#{birth. Please see the lineChart section to get more information about the structure of the birth data. <p:stackedColumnChart value=”#{birthDisplayBean.boys}” /> <p:chartSeries label=”Girls” value=”#{birth. as an example following stacked column chart displays the birth rate data in the lineChart example.

tr 3.BarChart org.component.prime.primefaces.component.component.primefaces.util.8.www. when set to false component will not be rendered.primefaces.BarChartRenderer org.component org.chart.bar.primefaces.chart.com. Refresh period of a live chart data in milliseconds Client side id of the component(s) to be updated after async partial submit request Javascript event to be called when ajax request for item select event is completed.BarChart org.BarChartTag org.primefaces.bar.component. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class barChart org.primefaces.chart. An el expression that maps to a server side UIComponent instance in a backing bean Datasource to be displayed on the chart Name of the data iterator Data of the y-axis When a chart is live.List String Object boolean Integer String String MethodExpre ssion .chart.BarChartRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String boolean Description Unique identifier of the component Boolean value to specify the rendering of the component. the data is refreshed based on the refreshInterval period. Method expression to listen chart series item select events 56 binding value var yField live refreshInterval update oncomplete itemSelectListen er null null null null FALSE 3000 null null null Object java.bar.chart.component.5 Bar Chart Bar Chart is the horizontal version of the column chart where columns are aligned on x axis as bars.

Maximum boundary value for x-axis.prime. <p:barChart value=”#{birthDisplayBean.com.tr Name styleClass style minX maxX width height dataTipFunction labelFunctionX labelFunctionY titleX titleY wmode widgetVar Default null null null null 500px 350px null null null null null null null Type String String double double String String String String String String String String String Description Style to apply to chart container element Javascript variable name representing the styles Minimum boundary value for x-axis.www. Width of the chart. Title of the x-axis Title of the y-axis wmode property of the flash object Name of the client side widget Getting started with Bar Chart Bar chart usage is very similar to line chart.boys}” /> <p:chartSeries label=”Girls” value=”#{birth. Please see the lineChart section to get more information about the structure of the birth data.month}”> <p:chartSeries label=”Boys” value=”#{birth.births}” var=”birth” {birth. Name of the javascript function to customize datatips.girls}” /> </p:barChart> yfield=”# 57 . as an example following bar chart displays the birth rate data in the lineChart example. Name of the javascript function to format x-axis labels. Important difference is that barchart uses yfield attribute instead of the xfield attribute. Height of the chart. Name of the javascript function to format y-axis labels.

www.component org. An el expression that maps to a server side UIComponent instance in a backing bean Datasource to be displayed on the chart Name of the data iterator Data of the y-axis When a chart is live.com.primefaces.component.primefaces. when set to false component will not be rendered.6 StackedBar Chart Stacked Bar chart is similar to bar chart but the bar are stacked per each yField data.prime.chart.8. Refresh period of a live chart data in milliseconds Client side id of the component(s) to be updated after async partial submit request Javascript event to be called when ajax request for item select event is completed.StackedBarChart org.tr 3.List String Object boolean Integer String String 58 . binding value var yField live refreshInterval update oncomplete null null null null FALSE 3000 null null Object java.component.primefaces.primefaces.StackedBarChartRenderer org.util.chart.chart.stackedbar. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class stackedBarChart org. the data is refreshed based on the refreshInterval period.component.StackedBarChartTag org.primefaces.stackedbar.chart.StackedBarChart org.chart.stackedbar.component.StackedBarChartRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String boolean Description Unique identifier of the component Boolean value to specify the rendering of the component.primefaces.component.

Important difference is that stackedbarchart uses yfield attribute instead of the xfield attribute. Name of the javascript function to customize datatips.boys}” /> <p:chartSeries label=”Girls” value=”#{birth.prime.www.month}”> <p:chartSeries label=”Boys” value=”#{birth.births}” var=”birth” yfield=”#{birth. Height of the chart. Please see the lineChart section to get more information about the structure of the birth data. as an example following stacked bar chart displays the birth rate data in the lineChart example.girls}” /> </p:stackedBarChart> 59 . Maximum boundary value for x-axis. Width of the chart. wmode property of the flash object Name of the client side widget Getting started with StackedBar Chart StackedBar chart usage is very similar to line chart.tr Name itemSelectListene r styleClass style minX maxX width height dataTipFunction wmode widgetVar Default null null null null null 500px 350px null null null Type MethodExpr ession String String double double String String String String String Description Method expression to listen chart series item select events Style to apply to chart container element Javascript variable name representing the styles Minimum boundary value for x-axis. <p:stackedBarChart value=”#{birthDisplayBean.com.

prime.primefaces.com.chart.primefaces. Info Tag Tag Class Component Class Component Type Component Family chartSeries org.www.String String Getting started with ChartSeries ChartSeries is nested inside a chart component.series.component.ChartSeries org.series.8.ChartSeries org. you can have as many series as you want on a chart by nesting multiple series.7 Chart Series A chart can have one or more series and a chartSeries component represents each series in a chart.component Attributes Name id rendered Default Assigned by JSF TRUE Type String boolean Description Unique identifier of the component Boolean value to specify the rendering of the component.ChartSeriesTag org. Please see the other chart component documentations to see the usage of chartSeries.chart.primefaces. An el expression that maps to a server side UIComponent instance in a backing bean Value to be displayed on the series Output converter to be used if any.component. 60 .primefaces.tr 3. Label of the series Javascript variable name representing the styles binding value converter label style null null null null null Object Object Converter java.component.lang. when set to false component will not be rendered.

8 Skinning Charts Charts are highly customizable in terms of skinning however they are flash based. styleClass : Each chart resides in an html div element. as a simple example to start with. See the full list of style selectors link for the complete list of selectors. size: 8}.chartClass { width:700px. border: {color: 0x96acb4. Style class is mainly useful for setting the width and height of the chart. Skinning Series ChartSeries can be styled individually using the style attribute. border and legend. var boysStyle = { color: 0x3399FF. } </style> style : Style should be the javascript object variable name used in styling. Charts are styled through Javascript and the object is passed to the chartʼs style attribute.boys}” label=”Boys” style=”boysStyle” /> 61 . There are two attributes in chart components related to skinning.www. height:400px. legend: { display: “right” } }.8. var chartStyle = { padding : 20. Styling is same as charts and done via javascript.com. <p:chartSeries value=”#{birth. Style below effects chart padding. as a result regular CSS styling is not possible. size: 35 }.tr 3.prime. style class applies to this container element. <style type=”text/css”> .

size: 12}. }. color: 0x586b71} 4}. size: 2}.tr Extreme Makeover To give a complete styling example.prime. majorTicks: {color: 0x2e434d. <style type=”text/css”> .. xAxis: { color: 0x2e434d }. length: minorTicks: {color: 0x2e434d. font: {name: “Arial Black”.chartClass { width:700px. size: 14.com. background: { image : “. height:400px.www. } </style> <script type=”text/javascript”> var chartStyle = { border: {color: 0x96acb4. }. font: {name: “Arial Black”. size: 13. length: majorGridLines: {size: 0} 0x586b71}. In the end. yAxis: { color: 0x2e434d./design/bg. color: dataTip: { border: {color: 0x2e434d. after the extreme makeover chart will look like.jpg” }. 2}. } 62 . weʼll skin the chart described in colum chart section.

png”.boys}” style=”boysSeriesStyle”/> <p:chartSeries label=”Girls” value=”#{birth. var girlsSeriesStyle = { image: “... mode: “no-repeat”. color: 0xFF66CC. mode: “no-repeat”.com/yui/charts/#basicstyles 63 .girls}” style=”girlsSeriesStyle”/> </p:columnChart> Full List of Style Selectors http://developer.prime.year}” styleClass=”column” style=”chartStyle”> <p:chartSeries label=”Boys” value=”#{birth.png”.tr var boysSeriesStyle = { image: “.yahoo.www. color: 0x3399FF./design/column./design/column. <p:columnChart value=”#{chartBean.com. size: 35 }. size: 35 }.births}” var=”birth”xfield=”#{birth.

int count) { this. public class Vote { } private String candidate. To start with. create the Vote class representing the voting model. As an example suppose thereʼs an ongoing vote between two candidates. public Vote() { //NoOp } public Vote(String candidate.candidate = candidate. 64 . } public String getCandidate() { return candidate.count = this. private int count. } public void setCount(int count) { this. } public void setCandidate(String candidate) { this. } public void add(int count) { this. } Next step is to provide the data.www.count = count. this.candidate = candidate.tr 3.count = count. } public int getCount() { return count.com.count + count.prime.8.9 Real-Time Charts Charts have built-in support for ajax polling and live data display.

www. votes. For displaying the voting. int random2 = (int)(Math. except live attribute is set to true. return votes.get(0). getVotes() would be called continuosly in 5 seconds interval.random() * 1000). Polling interval is tuned using the refreshInterval attribute which is set to 3000 milliseconds. 65 . 100)).candidate}” dataField=”#{vote. In this example.add(random2).count}” /> This live piechart is almost same as a static pie chart.add(new Vote(”Candidate 2”.com. public ChartBean() { votes = new ArrayList<Vote>(). votes. } public List<Vote> getVotes() { int random1 = (int)(Math.tr public class ChartBean implements Serializable { } private List<Vote> votes.add(new Vote(”Candidate 1”.votes}” var=”vote” live=”true” refreshInterval=”5000” categoryField=”#{vote. <p:pieChart id=”votes” value=”#{chartBean. votes.prime. 100)). the collection bind to the value is read periodically in a specified interval. weʼll be using a pie chart as follows. When a chart is live.add(random1).random() * 1000).get(1). } votes.

tr 3.prime. <p:pieChart id=”votes” value=”#{chartBean.message}” /> public class ChartBean implements Serializable { //Data creation omitted } } public void itemSelect(ItemSelectEvent event) { message = “Item Index: “ + event. 66 . message outputText is refreshed with the message provided in itemSelectListener. ItemSelectEvent contains useful information about the selected item like series index and item index.10 Interactive Charts Charts are interactive components and they can respond to events like series item selection.com.getSeriesIndex().count}” /> <h:message value=”#{chartBean. Series Index:” + event. In the example below. Chart components also use PrimeFaces Partial Page Rendering mechanism so using the update attribute.itemSelect}” update=”msg” categoryField=”#{vote.www. itʼs possible to refresh other components on the page.candidate}” dataField=”#{vote.votes}” var=”vote” itemSelectListener=”#{chartBean.8.getItemIndex() + “. When a series item is clicked an ajax request is sent to the server and an itemSelectListener is notified passing an itemSelectEvent. Please note that interactive charts must be nested inside a form.

tr 3.11 Charting FAQ Flash Version Chart components require flash player version 9. The screen would look like this for these users.8. 67 . JFreeChart Integration If you like to use static image charts instead of flash based charts.com.0.prime. see the JFreeChart integration example at graphicImage section. chart components will automatically prompt to install or update usersʼ flash players. Express Install In case the users of your application use an older unsupported version of flash player.45 or higher.www.

util.www.Collection java. return null.com. } //getters and setters //reset form 68 . public class CreateBookBean { } private Book book = new Book().CollectorTag org.primefaces. Itʼs important to overrive equals and hashCode methods of the value object to make collector work.collector.prime.tr 3.Collector Attributes Name value addTo removeFrom Default null null null Object java. } public String createNew() { book = new Book().util.primefaces. public CreateBookBean() { books = new ArrayList<Book>().component. private List<Book> books.Collection Type Description Value to be used in collection operation Reference to the Collection instance Reference to the Collection instance Getting started with Collector Collector requires a collection and a value to work with.component.9 Collector Collector is a simple utility component to manage collections without writing java code on backing beans.collector. Info Tag Tag Class ActionListener Class collector org.

books}” /> </p:commandLink> 69 .books}” /> </p:commandButton> <p:commandLink value=”Remove”> <p value=”#{book}” removeFrom=”#{createBookBean.www.book}” addTo=”#{createBookBean.createNew}”> <p:collector value=”#{createBookBean.com. <p:commandButton value=”Add” action=”#{createBookBean.prime.tr Value attribute is required and sets the object to be added or removed to/from a collection.

ColorPickerRenderer Attributes Name id Default Assign ed by JSF TRUE String Type Description Unique identifier of the component rendered boolean Boolean value to specify the rendering of the component.ColorPicker org.component org.primefaces.primefaces.ColorPicker org.primefaces.component.primefaces.tr 3.component.www.com.primefaces.component.primefaces. An el expression that maps to a server side UIComponent instance in a backing bean 70 binding null Object .colorpicker.component.10 Color Picker ColorPicker component enables color selection with visualization.component. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class colorPicker org.colorpicker.ColorPickerTag org.ColorPickerRenderer org.prime. when set to false component will not be rendered.colorpicker.

Message to be displayed when required field validation fails. Header text for the color picker title. when true the events will be fired at “apply request values”.util. it must refer to a converter id Boolean value that specifies the lifecycle phase the valueChangeEvents should be processed. Sets visibility of hsv controls. A method expression that refers to a method for validation the input. Sets visibility of web safe controls. Sets visibility of rgb controls.prime. Sets visibility of whole set of controls. In case itʼs a static text. if immediate is set to false. Name of the client side widget. valueChange Events are fired in “process validations” phase Marks component as required. immediate FALSE boolean required validator valueChangeListener FALSE null null boolean MethodExpression ValueChangeListener requiredMessage converterMessage validatorMessage widgetVar header showControls showHexControls showHexSummary showHsvControls showRGBControls showWebSafe null null null null Choose a color TRUE TRUE TRUE FALSE TRUE TRUE String String String String String String String String String String String 71 . Message to be displayed when validation fields. Sets visibility of hex summary.Date Converter/String Description Value of the component. Message to be displayed when conversion fails. A method binding expression that refers to a method for handling a valuchangeevent. When itʼs an EL expression. Sets visibility of hex controls. An el expression or a literal text that defines a converter for the component.tr Name value converter Default null null Type java. itʼs resolved to a converter instance.www.com.

color}”/> Converter In case you donʼt prefer to use java.com. //just return the rgb value as string } public String getAsString(FacesContext facesContext.color}”> <f:converter converterId=”colorPickerConverer” /> </p:colorPicker> public class ColorPickerConverter implements Converter { } public Object getAsObject(FacesContext facesContext.awt. } <p:colorPicker value=”#{colorBean. public class ColorPickerController { } private Color selectedColor. } public void setSelectedColor(Color color){ selectedColor = color.prime.B” format. UIComponent component.tr Getting started with ColorPicker ColorPicker requires a java. public Color getSelectedColor(){ return selectedColor. <p:colorPicker value=”#{colorBean. return value == null ? null : value. } 72 . UIComponent component.www.G. String submittedValue) { return submittedValue. you can plug your custom converter.Color.Color reference as itʼs value by default.awt. import java. Object value) { //value is a comma seperated string in “R.Color.awt.toString().

Color but used as a simple rgb string such as ʻ250. see the main Skinning section for more information.prime.www.awt. } public void setSelectedColor(String color){ selectedColor = color. Skinning As skinning style classes are global.com. 214. 73 . 255ʼ. } This way selected color will not be converted to java. public String getSelectedColor(){ return selectedColor. Here is an example based on a different theme.tr public class ColorPickerController { } private String selectedColor.

component.com.primefaces.tr 3.component.ColumnTag org.Column org.primefaces.column.primefaces.11 Column Column is an extended version of the standard column providing features like sorting. Custom pluggable sortFunciton Boolean value to make the column width resizable Specifies the data filter.column. selection.primefaces.component. binding sortBy sortFunction resizable filterBy filterEvent filterStyle filterStyleClass parser width styleClass null null null FALSE FALSE keyup null null null null null Object Object String/ MethodExpression boolean boolean boolean String String String Integer String 74 .prime. An el expression that maps to a server side UIComponent instance in a backing bean Property to be used when sorting this column. resizing.Column org. Style class of the column.component Attributes Name id rendered Default Assigne d by JSF TRUE String boolean Type Description Unique identifier of the component Boolean value to specify the rendering of the component. Width in pixels. Info Tag Tag Class Component Class Component Type Component Family column org. Event to trigger a filter request Style of the filter component Style class of the filter component Client side column parser. when set to false component will not be rendered. filtering and more.www.

CommandButtonRenderer Attributes Name id rendered Default Assigned by JSF TRUE String boolean Type Description Unique identifier of the component Boolean value to specify the rendering of the component. when set to false component will not be rendered.commandbutton.component org.www.component.component.CommandButtonRenderer org.commandbutton. ActionListener boolean 75 .com. An actionlistener thatʼd be processed when button is clicked.CommandButton org. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class commandButton org. when false at invoke_application phase.primefaces. binding value action actionListener immediate null null null null FALSE Object String javax.MethodEx pression javax.12 CommandButton CommandButton extends standard JSF commandButton with ajax and skinning features. when true actions are processed at apply_request_values.component.primefaces.commandbutton.tr 3.el. An el expression that maps to a server side UIComponent instance in a backing bean Label for the button A method expression thatʼd be processed when button is clicked.component.primefaces.CommandButtonTag org. Boolean value that determines the phaseId.prime.event.faces.primefaces.CommandButton org.primefaces.primefaces.component.

Javascript handler to execute when ajax request is completed.com. Global ajax requests are listened by ajaxStatus component. ajax requests are not queued. submit would be made with Ajax. Possible values are “submit” and “reset”. Javascript handler to execute before ajax request is begins. When set to true.tr Name type async process ajax update onstart oncomplete onsuccess onerror global Default submit FALSE null TRUE null null null null null TRUE String Type Description Sets the behavior of the button. Javascript handler to execute when ajax request fails. Style to be applied on the button element StyleClass to be applied on the button element onblur dom event handler onchange dom event handler onclick dom event handler ondblclick dom event handler onfocus dom event handler onkeydown dom event handler onkeypress dom event handler onkeyup dom event handler onmousedown dom event handler onmousemove dom event handler Boolean String Boolean String String String String String Boolean style styleClass onblur onchange onclick ondblclick onfocus onkeydown onkeypress onkeyup onmousedown onmousemove null null null null null null null null null null null null String String String String String String String String String String String String 76 . setting global to false will not trigger ajaxStatus. Javascript handler to execute when ajax request succeeds. Component id(s) to process partially instead of whole view. Specifies the submit mode.prime. Client side id of the component(s) to be updated after async partial submit request. when set to true (default).www.

saveBook}” /> Reset Buttons Reset buttons do not submit the form. Html readonly attribute.www.com. just reset the form contents. public class BookBean { public String saveBook() { //button action is called return null. Html image attribute. Html lang attribute.prime. <p:commandButton type=”reset” value=”Reset” /> 77 . Html title attribute. Boolean String String String String String String Getting started with CommandButton CommandButton component submits itʼs enclosed form with ajax by default. Html alt attribute.tr Name onmouseout onmouseover onmouseup onselect accesskey alt dir disabled image label lang tabindex title readonly Default null null null null null null null FALSE null null null null null FALSE String String String String String String String Type Description onmouseout dom event handler onmouseover dom event handler onmouseup dom event handler onselect dom event handler Html accesskey attribute. } } <p:commandButton value=“Save” action=”#{bookBean. Html dir attribute. Disables the button. Html label attribute. Html tabindex attribute.

prime. When ajax attribute is set to false. In the following example. form is submitted with a regular full page refresh.png’) !important. form is submitted with ajax and “display” outputText is update with the ajax response. Button Icons An icon on a button is displayed using CSS and image attribute. } 78 . not just primefaces components should be updated with the Ajax response. <p:commandButton value=”With Icon” image=”disk”/> <p:commandButton image=”disk”/> . Basically any JSF component.tr Push Buttons Push buttons are used to execute custom javascript. The update attribute is used to partially update other component()s after the ajax response is received.www.disk is a simple css class with a background property.com. To create a push button set type as “button”. . <h:form> <h:inputText id="name" value="#{bean. <p:commandButton type=”button” value=”Alert” onclick=”alert(‘Prime’)” /> AJAX and Non-AJAX CommandButton has built-in ajax capabilities. ajax submit is enabled by default and configured using ajax attribute.firstname}" id="display" /> </h:form> Tip: You can use the ajaxStatus component to notify users about the ajax request.text}" /> <p:commandButton value="Submit" update="display"/> <h:outputText value="#{pprBean.disk { background-image: url(‘disk. Update attribute takes a comma or white-space seperated list of JSF component ids to be updated.

see the main Skinning section for more information. Style Class .www. Here is an example based on a different theme. Following is the list of structural style classes.ui-button .prime.tr Skinning CommandButton renders a button tag which style and styleClass applies.ui-button-text-only .ui-button-text Button element Button element when icon is not used Label of button Applies As skinning style classes are global. 79 .com.

commandlink. when false at invoke_application phase.13 CommandLink CommandLink extends standard JSF commandLink with Ajax capabilities.commandlink. Component id(s) to process partially instead of whole view. binding value action actionListener immediate null null null null FALSE Object String MethodExpression ActionListener Boolean async process FALSE null Boolean String 80 .www.CommandLinkRenderer Attributes Name id rendered Default Assigned by JSF TRUE String Boolean Type Description Unique identifier of the component Boolean value to specify the rendering of the component. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class commandLink org. A method expression thatʼd be processed when button is clicked.CommandLink org.component.com.tr 3.CommandLinkTag org. An actionlistener thatʼd be processed when button is clicked. When set to true. An el expression that maps to a server side UIComponent instance in a backing bean Href value of the rendered anchor.CommandLinkRenderer org.primefaces.CommandLink org.component.commandlink.component. ajax requests are not queued.component org.primefaces.primefaces.component. when set to false component will not be rendered.prime.primefaces.component. when true actions are processed at apply_request_values. Boolean value that determines the phaseId.primefaces.primefaces.

submit would be made with Ajax.www.tr Name ajax update onstart oncomplete onsuccess onerror global Default TRUE null null null null null TRUE Type Boolean String String String String String Boolean Description Specifies the submit mode. Client side id of the component(s) to be updated after async partial submit request.com. Style to be applied on the anchor element StyleClass to be applied on the anchor element onblur dom event handler onchange dom event handler onclick dom event handler ondblclick dom event handler onfocus dom event handler onkeydown dom event handler onkeypress dom event handler onkeyup dom event handler onmousedown dom event handler onmousemove dom event handler onmouseout dom event handler onmouseover dom event handler onmouseup dom event handler onselect dom event handler HTML accesskey attribute 81 style styleClass onblur onchange onclick ondblclick onfocus onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup onselect accesskey null null null null null null null null null null null null null null null null null String String String String String String String String String String String String String String String String String . Javascript handler to execute when ajax request succeeds. when set to true (default).prime. Javascript handler to execute when ajax request is completed. setting global to false will not trigger ajaxStatus. Javascript handler to execute when ajax request fails. Javascript handler to execute before ajax request is begins. Global ajax requests are listened by ajaxStatus component.

difference is form is submmitted with ajax. 82 .prime.www. <h:form> <p:commandLink actionListener=”#{bean.text}” /> </h:form> Skinning CommandLink renders an html anchor element that style and styleClass attributes apply.com.action}” update=”text”> <h:outputText value=”Ajax Submit” /> </p:commandLink> <h:outputText id=”text” value=”#{bean.tr Name charset coords dir disabled hreflang rel rev shape tabindex target title type Default null null null null null null null null null null null null String String String Type Description HTML charset attribute HTML coords attribute HTML dir attribute Disables the link HTML hreflang attribute HTML rel attribute HTML rev attribute HTML shape attribute HTML tabindex attribute HTML target attribute HTML title attribute HTML type attribute Boolean String String String String String String String String Getting started with commandLink CommandLink is used just like the standard h:commandLink.

when set to false component will not be rendered.com.ConfirmDialog org. customization and avoiding popup blockers are notabled advantages over classic javascript confirmation. Text for the header. Text to be displayed in body. An el expression that maps to a server side UIComponent instance in a backing bean Variable name of the client side widget.ConfirmDialogRenderer org.primefaces.primefaces.ConfirmDialogTag org.www.ConfirmDialogRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String Boolean Description Unique identifier of the component Boolean value to specify the rendering of the component.component.component.ConfirmDialog org.confirmdialog. Its main use is to have the user do a decision.prime.primefaces.confirmdialog.component. 83 binding widgetVar message header severity null null null null null Object String String String String .component.14 ConfirmDialog ConfirmDialog is a replacement to the legacy javascript confirmation box. Message severity for the dislayed icon.primefaces. Skinning.primefaces.primefaces.confirmdialog.component org. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class confirmDialog org.tr 3.component.

prime.show()” /> <p:confirmDialog message="Are you sure about destroying the world?" header="Initiating destroy process" severity="alert" widgetVar="cd"> <p:commandButton value="Yes Sure" actionListener="#{buttonBean.www.hide()"/> <p:commandButton value="Not Yet" onclick="confirmation.com. Style class of the dialog container Effect to use when showing the dialog Effect to use when hiding the dialog Defines where the dialog should be displayed Defines if dialog should be closed when escape key is pressed.tr Name draggable modal Default TRUE FALSE Type Boolean Boolean Description Controls draggability Boolean value that specifies whether the document should be shielded with a partially transparent mask to require the user to close the Panel before being able to activate any elements in the document. menuitem and more." type=”button” /> </p:confirmDialog> </h:form> 84 . commandLink. show() and hide() functions are used to display and close the dialog respectively. <h:form> <p:commandButton type=”button” onclick=”cd. Defines if close icon should be displayed or not width height zindex styleClass showEffect hideEffect position closeOnEscape closable 300 auto 1000 null null null null TRUE TRUE Integer Integer Integer String String String String Boolean Boolean Getting started with ConfirmDialog ConfirmDialog has a simple client side api.destroyWorld}" update="messages" oncomplete="confirmation. Width of the dialog in pixels Width of the dialog in pixels zindex property to control overlapping with other elements.hide(). You can call these functions to display a confirmation from any component like commandButton.

Style Class . Here is an example based on a different theme.www.ui-dialog-title-dialog . Skinning ConfirmDialog resides in a main container element which the styleClass option apply.ui-dialog-content .ui-dialog .ui-dialog-titlebar . Following is the list of structural style classes.ui-dialog-buttonpane Applies Container element of dialog Title bar Header text Close icon Dialog body Footer button panel As skinning style classes are global. 85 . see the main Skinning section for more information.tr Effects There are various effect options to be used when displaying and closing the dialog. • • • • • • • • blind bounce clip drop explode fade fold highlight • • • • • • • puff pulsate scale shake size slide transfer Severity Severity defines the icon to display next to the message.com.ui-dialog-titlebar-close .prime. default severity is alert and the other option is info.

contextmenu. when set to false component will not be rendered.component.component.primefaces.primefaces.prime.ContextMenuRenderer org.primefaces.contextmenu.component.ContextMenu org.primefaces.component.component org.ContextMenuRenderer Attributes Name id rendered Default Assigned by JSF TRUE String Boolean Type Description Unique identifier of the component Boolean value to specify the rendering of the component.primefaces.ContextMenuTag org.tr 3.primefaces.ContextMenu org.www.component. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class contextMenu org.15 ContextMenu ContextMenu provides a popup menu that is displayed on mouse right-click event.com. An el expression that maps to a server side UIComponent instance in a backing bean Variable name of the client side widget Id of the component to attach to Style of the main container element Style class of the main container element binding widgetVar for style styleClass null null null null null Object String String String String 86 .contextmenu.

primefaces. Optional for attribute defines which component the contextMenu is attached to. First menuitem triggers an ajax action.com.org” target=”_blank”/> </p:contextMenu ContextMenu example above is attached to the whole page and consists of three different menuitems with different use cases. <p:imageSwitch id=”images” widgetVar=”gallery” slideshowAuto=”false”> <p:graphicImage value=”/images/nature1.jpg” /> <p:graphicImage value=”/images/nature2. contextMenu is attached to the page meaning.next()” /> </p:contextMenu> Now right-clicking anywhere on an image will display the contextMenu like. Following example demonstrates an integration between contextMenu and imageSwitcher.prime.delete}” ajax=”false”/> <p:menuitem value=”Go Home” url=”www. 87 .previous()” /> <p:menuitem value=”Next” url=”#” onclick=”gallery. Attachment ContextMenu can be attached to any JSF component. right-click on anywhere on page will display the menu. contextMenu here is used to navigate between images.www.jpg” /> </p:imageSwitch> <p:contextMenu for=”images”> <p:menuitem value=”Previous” url=”#” onclick=”gallery. When for is not defined.save}” update=”msg”/> <p:menuitem value=”Delete” actionListener=”#{bean. second one triggers a non-ajax action and third one is used for navigation. <p:contextMenu> <p:menuitem value=”Save” actionListener=”#{bean. this means right clicking only on the attached component will display the contextMenu.jpg” /> <p:graphicImage value=”/images/nature3.jpg” /> <p:graphicImage value=”/images/nature4.tr Getting started with ContextMenu Just like any other PrimeFaces menu component. contextMenu is created with menuitems.

see the main Skinning section for more information.ui-menu-item .ui-menu . Here is an example based on a different theme. Style Class . Following is the list of structural style classes.prime.tr Skinning ContextMenu resides in a main container element which the style and styleClass option apply.www.com. 88 .ui-menu-item-label Applies Container element of menu Each menu item Each menu item label As skinning style classes are global.

component. Disables reordering Component(s) to update after ajax reorder event is processed.primefaces.tr 3.primefaces. binding widgetVar model disabled onReorderUpdate null null null FALSE null Object String String Boolean String 89 .16 Dashboard Dashboard provides a portal like layout with drag&drop based reorder capabilities. An el expression that maps to a server side UIComponent instance in a backing bean Name of the client side widget Dashboard model instance representing the layout of the UI.DashboardTag org.DashboardRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String Boolean Description Unique identifier of the component Boolean value to specify the rendering of the component.component.prime.dashboard.primefaces.Dashboard org.dashboard.www.DashboardRenderer org. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class dashboard org.Dashboard org.dashboard.component org.com. when set to false component will not be rendered.component.component.primefaces.primefaces.primefaces.component.

<p:dashboard model=”#{dashboardBean.addWidget(”politics”). } public DashboardBean() { model = new DefaultDashboardModel(). } column1.com. model. See the end of this section for the detailed Dashboard API. column2. public class DashboardBean { private DashboardModel model.. column1.addWidget(”sports”).addWidget(”lifestyle”).. column3.addColumn(column3). DashboardColumn column2 = new DefaultDashboardColumn().addWidget(”weather”).prime.model}”> <p:panel id=”sports”> //Sports Content </p:panel> <p:panel id=”finance”> //Finance Content </p:panel> //more panels like lifestyle.tr Name reorderListener style styleClass Default null null null Type MethodExpr ession String String Description A server side listener to invoke when widgets are reordered Inline style of the dashboard container Style class of the dashboard container Getting started with Dashboard Dashboard is backed by a DashboardModel and consists of panel components. model. weather. model. DashboardColumn column1 = new DefaultDashboardColumn().www. </p:dashboard> Dashboard model simply defines the number of columns and the widgets to be placed in each column. politics. DashboardColumn column3 = new DefaultDashboardColumn(). 90 .addWidget(”finance”). column2.addColumn(column2).addColumn(column1).

whenever a widget is reordered dashboard model will be updated. dashboard provides flexible callbacks for page authors to invoke custom logic.model}” reorderListener=”#{dashboardBean. Ajax reorderListener is one of them.handleReorder}” onReorderUpdate=”messages”> //panels </p:dashboard> <p:growl id=”messages” /> This dashboard displays a facesmessage added at reorderlistener using growl. public class DashboardBean { } . dashboard has already updated itʼs model. public void handleReorder(DashboardReorderEvent event) { String widgetId = event. Also when reorderListener is invoked.prime... Reorder Listener As most of other PrimeFaces components.com. int widgetIndex = event. optionally you can update a certain part of your page with onReorderUpdate option.getItemIndex().getSenderColumnIndex(). Note: At least one form needs to be present on page to use ajax reorderListener. <p:dashboard model=”#{dashboardBean. senderColumnIndex will be null. you can easily create a stateful dashboard so if your applications allows users to change the layout. This field is populated only when widget is moved to a column from another column. 91 . int senderColumnIndex = event.tr State Dashboard is a stateful component. } //Add facesmessage If a widget is reordered in the same column. reorderListener is useful for custom logic like persisting the model. int columnIndex = event. by persisting this information.getColumnIndex().getWidgetId().www. next time a user logs in you can present the dashboard layout based on the user preferences.

See panel component section for more information.com. This way you can add new panels from outside of the dashboard. Close and Options Menu Widgets presented in dashboard can be closable. toggleable and have options menu as well. see the main Skinning section for more information.ui-dashboard-column div.prime. Toggle.tr Disabling Dashboard If youʼd like to disable reordering. <p:dashboard model=”#{dashboardBean. Style Class . Following is the list of structual style classes. dashboard doesnʼt implement these by itself as these features are already provided by the panel component.ui-state-hover Applies Container element of dashboard Each column in dashboard Placeholder As skinning style classes are global.ui-dashboard .model}” id=”board”> //panels </p:dashboard> <p:panel id=”newwidget” /> <p:draggable for=”newwidget” helper=”clone” dashboard=”board” /> Skinning Dashboard resides in a container element which style and styleClass options apply. <p:dashboard model=”#{dashboardBean.www. set disabled option to true. Here is an example based on a different theme.model}”> <p:panel id=”sports” closable=”true” toggleable=”true”> //Sports Content </p:panel> </p:dashboard> New Widgets Draggable component is used to add new widgets to the dashboard. 92 .

primefaces.DashboardModel (org. org.tr Tips • Provide a column width using ui-dashboard-column style class otherwise empty columns might not receive new widgets.DefaultDashboardModel is the default implementation) Method vod addColumn(DashboardColumn column) List<DashboardColumn> getColumns() int getColumnCount() DashboardColumn getColumn(int index) void transferWidget(DashboardColumn from.prime.com. String widgetId) void reorderWidget(int index. int index) Description Adds a column to the dashboard Returns all columns in dashboard Returns the number of columns in dashboard Returns the dashboard column at given index Relocates the widget identifed with widget id to the given index of the new column from old column. String widgetId.primefaces. DashboardColumn to.model.map. Dashboard Model API org.DashboardColumn (org.primefaces.model.DefaultDashboardModel is the default implementation) Method void removeWidget(String widgetId) List<String> getWidgets() int getWidgetCount() String getWidget(int index) void addWidget(String widgetId) void addWidget(int index. String widgetId) Description Removes the widget with the given id Returns the ids of widgets in column Returns the count of widgets in column Returns the widget id with the given index Adds a new widget with the given id Adds a new widget at given index Updates the index of widget in column 93 .model.map.www.primefaces.model.

component. PostProcessor for the exported document. “xml” Server side id of the datatable whose date would be exported Filename of the generated export file. pdf.www. Info Tag Tag Class ActionListener Class dataExporter org.”csv”. Getting started with DataExporter DataExporter is nested in a UICommand component such as commandButton or commandLink. defaults to datatable server side id Comma seperated list(if more than one) of column indexes to be excluded from export Exports only current page instead of whole dataset Character encoding to use PreProcessor for the exported document.17 DataExporter DataExporter is handy for exporting data listed in a Primefaces Datatable to various formats such as excel.primefaces.com.export. csv and xml.export.DataExporter Attributes Name type target fileName excludeColumns pageOnly encoding preProcessor postProcessor Default null null null null FALSE UTF-8 null null Type String String String String String Boolean MethodExpres sion MethodExpres sion Description Export type: “xls”. Target must point to a PrimeFaces Datatable.prime.component.DataExporterTag org.tr 3. For pdf exporting itext and for xls exporting poi libraries are required in the classpath.”pdf”.primefaces. Excel export <h:commandButton value=”Export as Excel”> <p:dataExporter type=”xls” target=”tableId” fileName=”cars”/> </h:commandButton> 94 .

<h:commandButton value=”Export as PDF”> <p:dataExporter type=”pdf” target=”tableId” fileName=”cars” pageOnly=”true”/> </h:commandButton> Excluding Columns Usually datatable listings contain command components like buttons or links that need to be excluded from the exported data. Exporter below ignores first column.www. to exclude more than one column define the indexes as a comma seperated string (excludeColumns=”0. if youʼd like export only the data displayed on current page.prime.2. For this purpose optional excludeColumns property is used to defined the column indexes to be omitted during data export.com.tr PDF export <h:commandButton value=”Export as PDF”> <p:dataExporter type=”pdf” target=”tableId” fileName=”cars”/> </h:commandButton> CSV export <h:commandButton value=”Export as CSV”> <p:dataExporter type=”csv” target=”tableId” fileName=”cars”/> </h:commandButton> XML export <h:commandButton value=”Export as XML”> <p:dataExporter type=”xml” target=”tableId” fileName=”cars”/> </h:commandButton> PageOnly By default dataExporter works on whole dataset.6”) <h:commandButton value=”Export as Excel”> <opt:exportActionListener type=”xls” target=”tableId” fileName=”cars” excludeColumns=”0”/> </h:commandButton> 95 . set pageOnly to true.

use the processor method expressions.. HSSFCellStyle cellStyle = wb. } } Add Logo to PDF This example adds a logo to the PDF before exporting begins.getRealPath(””) + File.separator + “prime_logo.postProcessXLS}”/> </h:commandButton> public void postProcessXLS(Object document) { HSSFWorkbook wb = (HSSFWorkbook) document. Change Excel Table Header First example of processors changes the background color of the exported excelʼs headers. caption . cellStyle.getCurrentInstance().png”.setFillForegroundColor(HSSFColor.). pdf.preProcessPDF}”/> </h:commandButton> public void preProcessPDF(Object document) throws IOException.GREEN.tr Pre and Post Processors In case you need to customize the exported document (add logo.setCellStyle(cellStyle). cellStyle.separator + “images” + File. ServletContext servletContext = (ServletContext) FacesContext.SOLID_FOREGROUND).www. BadElementException.. <h:commandButton value=”Export as PDF”> <p:dataExporter type=”xls” target=”tableId” fileName=”cars” preProcessor=”#{bean.getContext().getCell(i).setFillPattern(HSSFCellStyle.getExternalContext().add(Image. <h:commandButton value=”Export as XLS”> <p:dataExporter type=”xls” target=”tableId” fileName=”cars” postProcessor=”#{bean.getRow(0).createCellStyle().getInstance(logo)). PreProcessors are executed before the data is exported and PostProcessors are processed after data is included in the document. for(int i=0. i < header. } 96 . Processors are simple java methods taking the document as a parameter. String logo = servletContext.com.prime.getPhysicalNumberOfCells().index).i++) { header. HSSFRow header = sheet.getSheetAt(0). HSSFSheet sheet = wb. DocumentException { Document pdf = (Document) document.

DataGridRenderer 97 .component.component.component.www.datagrid.component org.primefaces.prime. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class dataGrid org.primefaces.DataGrid org. pageLinks and more.DataGridRenderer org.primefaces.primefaces.DataGridTag org.tr 3. rowPerPageOptions.component. Ajax Pagination is a built-in feature and paginator UI is fully customizable via various options like paginatorTemplate.com.component.datagrid.datagrid.primefaces.primefaces.DataGrid org.18 DataGrid DataGrid displays a collection of data in grid layout.

Inline style of the main container.prime. Style class of the main container.www. Template of the currentPageReport UI. Index of the current page Displays a fade animation during pagination. Maximum number of page links to display. Defines if paginator should be hidden if total data count is less than number of rows per page. Name of the request-scoped variable used to refer each data. Index of the first row to be displayed Number of columns of grid. binding null Object value var rows first columns widgetVar paginator paginatorTemplate rowsPerPageTemplate currentPageReportTemplate pageLinks paginatorPosition paginatorAlwaysVisible null null null 0 3 null FALSE null null null 10 both TRUE Object String Integer Integer Integer String boolean String String String Integer String Boolean page effect effectSpeed style styleClass 1 TRUE normale null Null Integer Boolean String String String 98 . Position of the paginator.com. Speed of the pagination effect. Template of the paginator. Template of the rowsPerPage dropdown.tr Attributes Name id rendered Default Assigne d by JSF TRUE Type String boolean Description Unique identifier of the component Boolean value to specify the rendering of the component. Enables pagination. when set to false component will not be rendered. An el expression that maps to a server side UIComponent instance in a backing bean Data to display. Number of rows to display per page. Variable name of the javascript widget.

rows correspond to the number of data to display not the number of rows to render so the actual number of rows to render is rows/columns = 4.jpg"/> <h:outputText value="#{car.www.. The code for CarBean that would be used to bind the datagrid to the car list. } <p:dataGrid var="car" value="#{carBean.prime.tr Getting started with the DataGrid We will be using a list of cars to display throughout the datagrid examples.2005.year}" /> </h:panelGrid> </p:panel> </p:column> </p:dataGrid> This datagrid has 3 columns and 12 rows.cars}" columns="3" rows="12"> <p:column> <p:panel header="#{car. int year.”ManufacturerX”. 99 . public } CarListController() { cars = new ArrayList<Car>(). As datagrid extends from standard UIData. cars.”blue”)).manufacturer}. //add more cars public List<Car> getCars() { return cars.model}"> <h:panelGrid columns="1" style="width:100%"> <p:graphicImage value="/images/cars/#{car. String model.add(new Car(”myModel”. String manufacturer. String color.com.. As a result datagrid is displayed as. public class CarBean { } private List<Car> cars. public class Car { } private private private private .

options to display is provided via rowsPerPageTemplate attribute.prime..cars}" columns="3" rows="12" paginator=”true”> . </p:dataGrid> Paginator Template Paginator is customized using paginatorTemplateOption that accepts various keys of UI controls. 100 .com. which corresponds to the following template. • • • • • • • FirstPageLink LastPageLink PreviousPageLink NextPageLink PageLinks CurrentPageReport RowsPerPageDropDown Note that {RowsPerPageDropDown} has itʼs own template. “top”.tr Ajax Pagination DataGrid has a built-in paginator that is enabled by setting paginator option to true.www. “bottom” or “both” (default). Paginator Position Paginator can be positoned using paginatorPosition attribute in three different locations. “{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}” Here are more examples based on different templates. Default UI is. <p:dataGrid var="car" value="#{carBean..

you can access the current data using the var reference. Class . Pagination Effect A Fade animation is displayed during ajax paging. Online showcase example of datagrid has an example that demonstrates a simple case of selecting a data with an ajax commandLink and displaying the details with a dialog.prime.ui-datagrid-row .cars}" columns="3" rows="12" paginator=”true” effect=”true”effectSpeed=”fast”> . 101 . Following is the list of structural style classes.. see the main Skinning section for more information..ui-datagrid . Important point is to place datagrid contents in a p:column which is a child of datagrid.www. </p:dataGrid> Skinning DataGrid resides in a main div container which style and styleClass attributes apply. Here is an example based on a different theme.com.ui-datagrid-data .tr Selecting Data Selection of data displayed in datagrid is very similar to row selection in datatable.ui-datagrid-data Applies Main container element Table element containing data A row in grid A column in grid As skinning style classes are global. you can specify the speed of this animation using effectSpeed option or disable it at all by setting effect option to true. <p:dataGrid var="car" value="#{carBean.

Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class dataList org.component.com.component.component org. rowsPerPageOptions. pageLinks and more.prime.19 DataList DataList presents a collection of data in list layout with several display types.primefaces. An el expression that maps to a server side UIComponent instance in a backing bean Data to display.www.DataListTag org.component.DataListRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String boolean Description Unique identifier of the component Boolean value to specify the rendering of the component. Ajax Pagination is a built-in feature and paginator UI is fully customizable via various options like paginatorTemplate.DataList.primefaces.component.primefaces.component. binding null Object value null Object 102 .DataListTag org.primefaces.DataListRenderer org.primefaces. when set to false component will not be rendered.datalist.primefaces.tr 3.datalist.DataList org.datalist.

Template of the paginator. String model. int year. String manufacturer.prime. Template of the rowsPerPage dropdown. public class Car { } private private private private . Index of the current page Displays a fade animation during pagination. valid values are “unordered”.. Template of the currentPageReport UI. Speed of the pagination effect. Index of the first row to be displayed Type of the list. 103 . Inline style of the main container.tr Name var rows first type itemType widgetVar paginator paginatorTemplate rowsPerPageTemplate currentPageReportTemplate pageLinks paginatorPosition paginatorAlwaysVisible Default null null 0 unordered null null FALSE null null null 10 both TRUE Type String Integer Integer String String String boolean String String String Integer String Boolean Description Name of the request-scoped variable used to refer each data. Maximum number of page links to display. String color. “ordered” and “definition”. Enables pagination.www..com. Position of the paginator. page effect effectSpeed style styleClass 1 TRUE normale null Null Integer Boolean String String String Getting started with the DataList We will be using a list of cars to display throughout the datalist examples. Style class of the main container. Variable name of the javascript widget. Number of rows to display per page. Specifies the list item type. Defines if paginator should be hidden if total data count is less than number of rows per page.

} <p:dataList value="#{carBean.”ManufacturerX”.add(new Car(”myModel”.manufacturer}. some examples for an unordered list are disc. circle and square.cars}" var="car" type=”ordered”> #{car.prime. cars.year} </p:dataList> Since DataList is a data iteration component.year} </p:dataList> Output of this datalist would be as follows. public } CarListController() { cars = new ArrayList<Car>(). #{car. ItemType defines the bullet type of each item.2005.cars}" var="car" itemType="disc"> #{car. //add more cars public List<Car> getCars() { return cars. Disc Circle Square Ordered Lists DataList displays the data in unordered format by default. 104 .tr The code for CarBean that would be used to bind the datagrid to the car list.”blue”)).manufacturer}. #{car. public class CarBean { } private List<Car> cars. it renders itʼs children for each data represented with var option. if youʼd like to use ordered display set type option to “ordered”. <p:dataList value="#{carBean.com.www.

jpg"/> </f:facet> </p:dataList> 105 . A a i Definition Lists Third type of dataList is definition lists that display inline description for each item. Year: #{car.tr For ordered lists.model}. to use definition list set type option to “definition”. various item types are available as well.cars}" var="car" type="definition"> Model: #{car.prime.manufacturer}.www. <p:dataList value="#{carBean.year} <f:facet name="description"> <p:graphicImage value="/images/cars/#{car. Detail content is provided with the facet called “description”.com.

• • • • • • • FirstPageLink LastPageLink PreviousPageLink NextPageLink PageLinks CurrentPageReport RowsPerPageDropDown Note that {RowsPerPageDropDown} has itʼs own template. #{car. “{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}” Here are more examples based on different templates. you can access the current data using the var reference. which corresponds to the following template. <p:dataList value="#{carBean.tr Ajax Pagination DataList has a built-in paginator that is enabled by setting paginator option to true. 106 . options to display is provided via rowsPerPageTemplate attribute. Selecting Data Selection of data displayed in datalist is very similar to row selection in datatable.cars}" var="car" paginator=”true” rows=”10”> #{car. “top”. Online showcase example of datalist has an example that demonstrates a simple case of selecting a data with an ajax commandLink and displaying the details with a dialog.com. Default UI is. “bottom” or “both” (default).prime.manufacturer}. Paginator Position Paginator can be positoned using paginatorPosition attribute in three different locations. Important point is to place datalist contents in a p:column which is a child of dataList.www.year} </p:dataList> Paginator Template Paginator is customized using paginatorTemplateOption that accepts various keys of UI controls.

Here is an example based on a different theme.www.tr Pagination Effect A Fade animation is displayed during ajax paging.ui-datalist-data . 107 .manufacturer}. you can specify the speed of this animation using effectSpeed option or disable it at all by setting effect option to true.ui-datalist-item Applies Main container element Data container Each item in list. <p:dataList value="#{carBean. Following is the list of structural style classes. #{car. see the main Skinning section for more information.prime.ui-datalist .com. As skinning style classes are global.year} </p:dataList> Skinning DataList resides in a main div container which style and styleClass attributes apply.cars}" var="car" paginator=”true” rows=”10” effect=”true” effectSpeed=”fast”> #{car. Class .

filtering and more.component.DataTable org.component org. when set to false component will not be rendered.com.prime.tr 3.component. 108 .component. lazy loading.component.primefaces.primefaces. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class dataTable org.DataTableRenderer org.component.DataTableTag org. selection.primefaces.datatable.DataTable org.primefaces.20 DataTable DataTable is an enhanced version of the standard Datatable that provides built-in solutions to many commons use cases like paging.datatable.datatable.primefaces.primefaces. sorting.DataTableRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String Boolean Description Unique identifier of the component Boolean value to specify the rendering of the component.www.

Type of data selection. ʻsingleʼ. valid values are ʻmultipleʼ.www. Position of paginator. Variable name referring to the rowIndex being processed. ʻcellblockʼ.prime. Template of the currentPageReport UI.com. Label of the first link in paginator Label of the previous link in paginator Label of the next link in paginator Label of the last link in paginator An object to populate the selected row data. valid values are ʻbothʼ. Enables lazy loading feature. value var null null Object String rows first widgetVar paginator paginatorTemplate null 0 null FALSE null int int String Boolean String rowsPerPageTemplate currentPageReportTemplate firstPageLinkLabel previousPageLinkLabel nextPageLinkLabel lastPageLinkLabel selection selectionMode null null null null null null null null String String String String String String Object String dynamic FALSE boolean lazy rowIndexVar paginatorPosition FALSE null both boolean String String 109 . when set to true sorting and paging is handled with ajax. ʻcellrangeʼ and ʻsinglecellʼ. ʻtopʼ or ʻbottomʼ. default value is “{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}” Template for the rowsPerPage dropdown.tr Name binding Default null Type Object Description An el expression that maps to a server side UIComponent instance in a backing bean Value of the component than can be either an EL expression of a literal text Name of the request-scoped variable that'll be used as the holder of each rowdata before processing a row Number of rows to display per page Index of the first row to be displayed Name of the client side widget Sets paginator Template for the paginator layout. Specifies sorting/paging mode.

Client side id of the component(s) to be updated after ajax row selection.com. Tooltip to be shown to sort a column data in ascending order. String manufacturer. Tooltip to be shown to sort a column data in descending order. public class Car { } private private private private . Javascript event handler to be called after ajax request for instant ajax row selection request is completed.. Javascript event handler to be called before ajax request for instant ajax row selection request begins. String model.. Number of page links to display onselectComplete null String dblClickSelect page pageLinks FALSE 1 10 boolean Integer Integer Getting started with the DataTable We will be using a list of cars to display throughout the datatable examples. Style class of the main container element of table. String color. Message to be shown when loading data with ajax. 110 . Style of the main container element of table. first page is 1. int year.tr Name emptyMessage errorMessage loadingMessage sortAscMessage sortDescMessage update style styleClass onselectStart Default null null null null null null null null null Type String String String String String String String String String Description Message to be shown when thereʼre records to display. Message to be shown when an error occurs during data loading.prime. Enabled row selection on double click instead of single click(default) Index of the current page.www.

sorting and filtering are both implemented on client side and server side to handle both cases of dynamic seting.”ManufacturerX”. on the other hand dynamic datatables fetch their data from backing bean model with ajax. Features including paging.”blue”)).tr The code for CarBean that would be used to bind the datatable to the car list.add(new Car(”myModel”. cars.cars}”> <p:column> <f:facet name=”header”> <h:outputText value=”Model” /> </f:facet> <h:outputText value=”#{car. //add more cars public List<Car> getCars() { return cars. public class CarBean { } private List<Car> cars. public } CarListController() { cars = new ArrayList<Car>().model}” /> </p:column> <p:column> <f:facet name=”header”> <h:outputText value=”Year” /> </f:facet> <h:outputText value=”#{car.manufacturer}” /> </p:column> <p:column> <f:facet name=”header”> <h:outputText value=”Color” /> </f:facet> <h:outputText value=”#{car.color}” /> </p:column> </p:dataTable> Dynamic vs Non-Dynamic DataTable has two main modes.prime. 111 . } <p:dataTable var=”car” value=”#{carBean.com.2005. For small datasets nondynamic datatables is much faster and have the advantage of avoiding roundtrips to server with ajax.year}” /> </p:column> <p:column> <f:facet name=”header”> <h:outputText value=”Manufacturer” /> </f:facet> <h:outputText value=”#{car.www. when it is non-dynamic(default) it works as a pure client side component.

manufacturer}. sorting is handled on server side with ajax. defining sortBy attribute enables sorting on that particular column. • • • • • • • FirstPageLink LastPageLink PreviousPageLink NextPageLink PageLinks CurrentPageReport RowsPerPageDropDown Note that {RowsPerPageDropDown} has itʼs own template. which corresponds to the following template. “top”.tr Pagination DataList has a built-in paginator that is enabled by setting paginator option to true. Paginator Position Paginator can be positoned using paginatorPosition attribute in three different locations. If datatable is dynamic. Sorting Sorting is controlled at column level. “{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}” Here are more examples based on different templates. Default UI is.cars}" var="car" paginator=”true” rows=”10”> #{car.www. options to display is provided via rowsPerPageTemplate attribute.com.year} </p:dataList> Paginator Template Paginator is customized using paginatorTemplateOption that accepts various keys of UI controls. “bottom” or “both” (default). <p:dataList value="#{carBean.prime. #{car. 112 . if not sorting happens on client side.

sortByModel}”> <f:facet name=”header”> <h:outputText value=”Model” /> </f:facet> <h:outputText value=”#{car.cars}”> <p:column sortBy=”#{car.com.prime. Possible values for parser attribute of column are ʻstringʼ(default).more columns </p:dataTable> 113 .cars}”> <p:column sortBy=”#{car.more columns </p:dataTable> When sorting is handled on client side...tr <p:dataTable var=”car” value=”#{carBean.model}”> <f:facet name=”header”> <h:outputText value=”Model” /> </f:facet> <h:outputText value=”#{car.year}” parser=”number”> <f:facet name=”header”> <h:outputText value=”Year” /> </f:facet> <h:outputText value=”#{car. ʻnumberʼ and ʻdateʼ.www. you need to define built-in client side data parsers for proper sorting.more columns </p:dataTable> Custom Sorting Instead of using the default sorting algorithm.year}” /> </p:column> .. <p:dataTable var=”car” value=”#{carBean.model}” /> </p:column> ..cars}” dynamic=”true”> <p:column sortBy=”#{car.model}” sortFunction=”#{carBean. you can plug-in your own sort function. When ajax sorting enabled sorting must refer to a java method that takes two parameters and return an integer value.. <p:dataTable var=”car” value=”#{carBean..model}” /> </p:column> .

b.model}” /> </p:column> .getData(field). field) { var val1 = a. Parameter a b desc field Description Javascript object representing a row data Javascript object representing a row data Boolean value of order. Car car2) { //return -1.more columns </p:dataTable> <script type=”text/javascript”> sortByYear = function(a..prime. 1 if car1 is less than. returns true if order is descending Column key to be used to retrieve column value 114 . var val2 = b.getData(field). //return an integer } </script> Client side javascript function gets four parameters. equal to or greater than car2 } In case datatable is not dynamic then sortFunction must refer to a javascript function.model}” sortFunction=”sortByYear”> <f:facet name=”header”> <h:outputText value=”Model” /> </f:facet> <h:outputText value=”#{car.www. <p:dataTable var=”car” value=”#{carBean.. 0 .cars}”> <p:column sortBy=”#{car.com.tr public int sortByModel(Car car1. desc.

Note that when a row is clicked. public CarListController() { cars = new ArrayList<Car>()..”blue”)). row is highlighted. <p:dataTable var=”car” value=”#{carListController. } public void setSelectedCar(Car selectedCar) { this. Additionaly if youʼd like allow row selection with double clicking to a row instead of single click set dblClickSelect option to true. } 115 . Single Row Selection To select a single row when a row is clicked use the selectionMode attribute of the datatable..add(new Car(”myModel”.”ManufacturerX”.2005.columns </p:dataTable> selectedCar is a simple member of type Car that will be set with the selected data once the form is submitted. One way is to directly click on table rows and second way is to use a selection column. private Car selectedCar. //add more cars } public List<Car> getCars() { return cars.selectedCar = selectedCar. public class CarBean { } private List<Car> cars.prime. cars.selectedCar}” selectionMode=”single”> .tr Row Selection There are several built-in solutions that make row selection a piece of cake.www. } public Car getSelectedCar() { return selectedCar.cars}” selection=”#{carListController.com.

set the selectionMode to multiple and define a Car array.cars}” selection=”#{carListController.selectedCars}” selectionMode=”multiple”> .www..”ManufacturerX”. This way using modifier keys like ctrl or shift..tr Multiple Row Selection If you require selecting multiple rows. cars. } 116 . //add more cars } public List<Car> getCars() { return cars.columns </p:dataTable> public class CarBean { } private List<Car> cars.”blue”)). multiple rows can be selected. } public Car[] getSelectedCars() { return selectedCars. } public void setSelectedCar(Car[] selectedCar) { this.add(new Car(”myModel”.com.selectedCars = selectedCars.2005. <p:dataTable var=”car” value=”#{carListController. public CarListController() { cars = new ArrayList<Car>(). private Car[] selectedCars.prime.

www.prime.com.tr

Instant Ajax Row Selection Two methods describe above requires the form to be submitted before the row selection can happen. If you need instant row selection with ajax define an update attribute pointing to the component to be updated. This way when a row is clicked ajax request is triggered and selected row(s) are assigned to the selection model instantly without a need for an implicit form submit.
<p:dataTable var=”car” value=”#{carListController.cars}” selection=”#{carListController.selectedCars}” selectionMode=”single” update=”display” onselectComplete=”dialog.show()”> ...columns </p:dataTable> <p:dialog widgetVar=”dialog”> <p:outputPanel id=”display”> <ui:repeat value=”#{carListController.selectedCars}” var=”selectedCar”> <h:outputText value=”#{selectedCar.model}” /> </ui:repeat> </p:dialog> </p:outputPanel>

When a row is selected on the datatable above, ajax request updates the display panel and shows a dialog with the selected cars information. Callbacks like onselectStart and onselectComplete allows creating flexible UIs. This is quite useful if you need to display detailed information about selected data instantly. Cell Selection Cell selection is used to select particular cell(s) in datatable, three different modes are supported; ʻsinglecellʼ, ʻcellblockʼ and ʻcellrangeʼ. Selected cells are passed to the backing bean as org.primefaces.model.Cell instances.

117

www.prime.com.tr <p:dataTable var=”car” value=”#{carListController.cars}” selection=”#{carListController.selectedCell}” selectionMode=”singlecell”> ...columns

</p:dataTable>

public class CarBean { } private List<Car> cars; private Cell selectedCell; public CarListController() { cars = new ArrayList<Car>(); cars.add(new Car(”myModel”,2005,”ManufacturerX”,”blue”)); //add more cars } public List<Car> getCars() { return cars; } public Cell getSelectedCell() { return selectedCell; }

org.primefaces.model.Cell class has the following properties about the selected cell; Property rowData columnId value Object String Object Type Description Row data the cell belongs to. Client id of the cell column Value displayed in cell.

For multiple cell selection use “cellblock” and “cellrange” selection mode options, in this case selection should be a Cell[] reference instead of a single Cell.

118

www.prime.com.tr

Data Filtering Setting a column filter is enabled by using filterBy option..
<p:dataTable var=”car” value=”#{carListController.cars}”> <p:column filterBy=”#{car.model}”> <f:facet name=”header”> <h:outputText value=”Model” /> </f:facet> <h:outputText value=”#{car.model}” /> </p:column> ...more columns

</p:dataTable>

Similar to paging and sorting, dynamic datatables use ajax to filter data whereas nondynamic datatables handle filtering on client side. By default filtering is triggered with keyup event, this is configurable using filterEvent attribute, in addition filter inputs can be styled using filterStyle and filterStyleClass attributes. Lazy Loading Dealing with huge sets of data like thousand and even millions is not a trivial task, good news is datatable provides a built-in feature that can even handle billions of data in an efficient way. The idea behind lazy loading is to load only the rows of the datatable page being displayed. In order to enable lazy loading you just need to set lazy attribute to true and provide a LazyDataModel as the value of the datatable.
119

www.prime.com.tr <p:dataTable var=”car” value=”#{carListController.lazyModel}” dynamic=”true” lazy=”true”> //columns </p:dataTable>

public class CarListController { private LazyDataModel<Car> lazyModel; public CarListController() { /** * Test with one hundred million records. * In a real application use a count query to get the rowcount. */ lazyModel = new LazyDataModel<Car>(100000000) { /** * Dummy implementation of loading a certain segment of data. * In a real applicaiton, this method should access db and do a limit * based query */ @Override public List<Car> fetchLazyData(int first, int pageSize) { //Query a list of cars starting with offset first and max size //pagesize } }; }

}

public LazyDataModel getLazyModel() { return lazyModel; }

When lazy loading is enabled, datamodel will executed your LazyModelʼs fetchLazyData method with the first and pagesize variables. Itʼs your responsibility to load a chunk of data that starts from the first offset and with size pageSize. For example if youʼre using jpa you can use setFirstResult(first) and setMaxResults (pageSize) api to load a certain amount of data. With lazy loading you never load the whole dataset but only the necessary portion. LazyLoading feature is also enhanced with ajax paging for rich user experience.

120

www.prime.com.tr

Skinning DataTable resides in a main container element which style and styleClass options apply. Following is the list of structural style classes;
Class .ui-datatable .ui-datatable-data .ui-datatable .ui-datatable-data td .ui-datatable-liner Applies Main container element Data container Each cell in datatable Content displayed in datatable cells

As skinning style classes are global, see the main Skinning section for more information. Here is an example based on a different theme;

121

www.prime.com.tr

3.21 Dialog
Dialog is a panel component that overlays other elements. Dialog avoids popup blockers, provides customization, resizing and ajax interactions.

Info
Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class dialog org.primefaces.component.dialog.DialogTag org.primefaces.component.dialog.Dialog org.primefaces.component.Dialog org.primefaces.component org.primefaces.component.DialogRenderer org.primefaces.component.dialog.DialogRenderer

Attributes
Name id rendered Default Assigned by JSF TRUE Type String Boolean Description Unique identifier of the component Boolean value to specify the rendering of the component, when set to false component will not be rendered. An el expression that maps to a server side UIComponent instance in a backing bean Text of the header Specifies draggability Specifies resizability

binding header draggable resizable

null null TRUE TRUE

Object String Boolean Boolean

122

www.prime.com.tr

Name modal

Default FALSE

Type Boolean

Description Boolean value that specifies whether the document should be shielded with a partially transparent mask to require the user to close the Panel before being able to activate any elements in the document. Setʼs dialogs visibility Width of the dialog Width of the dialog Specifies zindex property. Minimum width of a resizable dialog. Minimum height of a resizable dialog. Style class of the dialog Server side listener to invoke when dialog is closed. Components to update after dialog is closed and closeListener is processed with ajax. Effect to use when showing the dialog Effect to use when hiding the dialog Defines where the dialog should be displayed Defines if dialog should be closed when escape key is pressed. Defines if close icon should be displayed or not Name of the client side widget

visible width height zindex minWidth minHeight styleClass closeListener onCloseUpdate showEffect hideEffect position closeOnEscape closable widgetVar

FALSE 150 auto 1000 150 0 null null null null null null TRUE TRUE null

Boolean Integer Integer Integer Integer Integer String MethodExpr ession String String String String Boolean Boolean String

Getting started with the Dialog Since dialog is a container component it needs children components to display. Note that by default dialog is not visible.
<p:dialog> <h:outputText value=”Resistance to PrimeFaces is Futile!” /> //Other content

</p:dialog>

123

www.prime.com.tr

Show and Hide Showing and hiding the dialog is easy using the client side api via widgetVar. • show() : Displays the dialog • hide() : Makes dialog invisible
<p:dialog header=”Header Text” widgetVar=”dialog”> //Content </p:dialog> <a href=”#” onclick=”dialog.show()”>Show</a> <a href=”#” onclick=”dialog.hide()”>Hide</a>

Positioning Dialog can be positioned anywhere on screen, default position is the center of the window. [x,y] based absolute positioning is defined using a comma seperated value.
<p:dialog header=”Header Text” widgetVar=”dialog” position=”10,50”> //Content </p:dialog>

Ajax Interaction A dialog can also be used for ajax interaction. Following example demonstrates an example powered by PrimeFaces PPR.
<h:outputText id=”name” value=”Name #{pprBean.firstname}”/> <h:outputLink value=”#” onclick=”dlg.show()”>Enter FirstName</h:outputLink> <p:dialog header=”Enter FirstName” widgetVar=”dlg”> <h:form> <h:panelGrid columns=”2” style=”margin-bottom:10px”> <h:outputLabel for=”firstname” value=”Firstname:” /> <h:inputText id=”firstname” value=”#{pprBean.firstname}” /> <p:button value=”Reset” type=”reset”/> <p:button value=”Ajax Submit” update=”name” oncomplete=”dlg.hide();”/> </h:panelGrid> </h:form> </p:dialog>

124

www.prime.com.tr

When the dialog is shown, it displays a form to enter the firstname, once Ajax Submit button is clicked, dialog is hidden and outputText with id=”name” is partially updated. Ajax CloseListener and onCloseUpdate A server side closeListener can be be invoked by passing an org.primefaces.event.CloseEvent as a parameter when the dialog is closed. Optionally components to update after dialog is closed can be defined with onCloseUpdate attribute. Example below adds a FacesMessage when dialog is closed and updates the messages component to display the added message.
<p:dialog closeListener=”#{dialogBean.handleClose}” onCloseUpdate=”msg”> //Content </p:dialog> <p:messages id=”msg” />

public class DialogBean { } public void handleClose(CloseEvent event) { //Add facesmessage }

Effects There are various effect options to be used when displaying(showEffect) and closing (hideEffect) the dialog. • • • • • • • • • • • • • • • blind bounce clip drop explode fade fold highlight puff pulsate scale shake size slide transfer

125

www.prime.com.tr

Skinning Dialog resides in a main container element which styleClass option apply. Following is the list of structural style classes;
Style Class .ui-dialog .ui-dialog-titlebar .ui-dialog-title-dialog .ui-dialog-titlebar-close .ui-dialog-content Applies Container element of dialog Title bar Header text Close icon Dialog body

As skinning style classes are global, see the main Skinning section for more information. Here is an example based on a different theme;

126

www.prime.com.tr

3.22 Drag&Drop
Drag&Drop utilities of PrimeFaces consists of two components; Draggable and Droppable. Draggable Info
Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class draggable org.primefaces.component.dnd.DraggableTag org.primefaces.component.dnd.Draggable org.primefaces.component.Draggable org.primefaces.component org.primefaces.component.DraggableRenderer org.primefaces.component.dnd.DraggableRenderer

Attributes
Name id rendered Default Assigned by JSF TRUE Type String boolean Description Unique identifier of the component Boolean value to specify the rendering of the component, when set to false component will not be rendered. An el expression that maps to a server side UIComponent instance in a backing bean Name of the client side widget Id of the component to add draggable behavior Disables or enables dragging Specifies drag axis, valid values are ʻxʼ and ʻyʼ. Constraints dragging within the boundaries of containment element Helper element to display when dragging Reverts draggable to itʼs original position when not dropped onto a valid droppable Draggable will snap to edge of near elements
127

binding widgetVar for disabled axis containment helper revert snap

null null null FALSE null null null FALSE FALSE

Object String String Boolean String String String Boolean Boolean

tr Name snapMode snapTolerance zindex handle opacity stack Default null 20 null null 1 null Type String Integer Integer String Double String Description Specifies the snap mode. Defines the opacity of the helper during dragging. 128 . Valid values are ʻbothʼ. Distance from the snap element in pixels to trigger snap.www. if you need a specific handle. ZIndex to apply during dragging.com. basically this is achieved by defining the id of component using the for attribute of draggable. In stack mode. dragged item always overlays other draggables. Dragging happens in every x and y pixels. parent component will be selected as the draggable target. draggable overlap is controlled automatically using the provided selector.jpg”> <p:draggable /> </h:graphicImage> Handle By default any point in dragged component can be used as handle. <h:graphicImage id=”campnou” value=”/images/campnou. <p:panel id=”pnl” header=”Draggable Panel”> <h:outputText value=”This is actually a regular p:panel” /> </p:panel> <p:draggable for=”pnl”/> If you omit the for attribute. Scope key to match draggables and droppables.prime. CSS cursor to display in dragging. Specifies a handle for dragging. you can define it with handle option. ʻinnerʼ and ʻouterʼ. Id of the dashboard to connect with. grid scope cursor dashboard null null crosshair null String String String String Getting started with Draggable Any component can be enhanced with draggable behavior.

com.tr Following panel is dragged using itʼs header only.pf-panel-hd”/> Drag Axis Dragging can be limited to either horizontally or vertically. <p:panel id=”pnl” header=”Draggable Panel”> <h:outputText value=”I am dragged on an axis only” /> </p:panel> <p:draggable for=”pnl” axis=”x or y”/> Clone By default. actual component is used as the drag indicator. if you need to keep the component at itʼs original location. use a clone helper. helper of following panelʼs opacity is reduced in dragging. opacity option can be used to give visual feedback.prime. <p:panel id=”pnl” header=”Draggable Panel”> <h:outputText value=”I can only be dragged using my header” /> </p:panel> <p:draggable for=”pnl” handle=”div. 129 .www. revert option enables the component to move back to itʼs original position with an animation. <p:panel id=”pnl” header=”Draggable Panel”> <h:outputText value=”I will be reverted back to my original position” /> </p:panel> <p:draggable for=”pnl” revert=”true”/> Opacity During dragging. <p:panel id=”pnl” header=”Draggable Panel”> <h:outputText value=”I am cloned” /> </p:panel> <p:draggable for=”pnl” helper=”clone”/> Revert When a draggable is not dropped onto a matching droppable.

height:200px. following draggable cannot go outside of itʼs parent.www. <p:panel id=”pnl” header=”Draggable Panel”> <h:outputText value=”I am dragged in grid mode” /> </p:panel> <p:draggable for=”pnl” grid=”20. <p:outputPanel layout="block" style="width:400px.y format.prime.5”/> Grid Defining a grid enables dragging in specific pixels."> <p:panel id="conpnl" header="Restricted"> <h:outputText value="I am restricted to my parent's boundaries" /> </p:panel> </p:outputPanel> <p:draggable for="conpnl" containment="parent" /> 130 .tr <p:panel id=”pnl” header=”Draggable Panel”> <h:outputText value=”My opacity is lower during dragging” /> </p:panel> <p:draggable for=”pnl” opacity=”0. This value takes a comma seperated dimensions in x.com.40”/> Containment A draggable can be restricted to a certain section on page.

An el expression that maps to a server side UIComponent instance in a backing bean Variable name of the client side widget A server side listener to process a DragDrop event. 131 binding widgetVar dropListener for disabled hoverStyleClass activeStyleClass onDropUpdate onDrop null null null null FALSE null null null null Object String javax.primefaces.component. Style class to apply when an acceptable draggable is dropped.component.www.component.component.el.dnd.Droppable org.dnd. Id of the component to add droppable behavior Disables of enables droppable behavior Style class to apply when an acceptable draggable is dragged over.MethodE xpression String Boolean String String String String .primefaces.primefaces.primefaces.primefaces. Component(s) to update with ajax after a draggable is dropped.Droppable org.component org.prime.DroppableRenderer Attributes Name id rendered Default Assigne d by JSF TRUE String boolean Type Description Unique identifier of the component Boolean value to specify the rendering of the component.component. when set to false component will not be rendered.tr Droppable Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class droppable org.dnd.DroppableTag org.DroppableRenderer org.primefaces.com. Javascript event handler to execute when a draggable is dropped.

height:96px. A DragDrop event is passed as a parameter holding information about the dragged and dropped components. width:64px. droppable behavior can be added to any component specified with the for attribute. <p:outputPanel id=”slot” styleClass=”slot”> </p:outputPanel> <p:droppable for=”slot” /> slot styleClass represents a small rectangle. display:block. <p:outputPanel id=”slot” styleClass=”slot”> <p:droppable /> </p:outputPanel> Drop Listener A dropListener is a simple java method thatʼs executed when a draggable item is dropped onto a droppable component. } </style> If for attribute is omitted. <style type=”text/css”> .tr Name accept scope tolerance Default null null null String String String Type Description Selector to define the accepted draggables. Specifies the intersection mode to accept a draggable. Getting started with Droppable Usage of droppable is very similar to draggable. Using the previous example just add a dropListener to the droppable.com.www.prime. 132 .slot { background:#FF9900. Scope key to match draggables and droppables. parent component becomes the droppable.

C. Barcelona.info(”Droppped Id: {}”.jpg” /> <p:draggable for=”messi”/> <p:outputPanel id=”zone” styleClass=”slot” /> <p:droppable for=”zone” dropListener=”#{ddController. onDropUpdate attribute is used to define which components to update after dropListener is processed. Also on the client side you can use onDrop callback to execute custom javascript.info(”Dragged Id: {}”. ddEvent.tr <p:graphicImage id=”messi” value=”barca/messi_thumb. Dragged Id: messi Dropped Id: zone PrimeFaces component showcase demo contains a functional example to setup tactical formation of F.onDrop}”/> public void onDrop(DragDropEvent ddEvent) { logger.com. logger.www. In addition to the ajax dropListener. ddEvent. see the source code for more information. Output of this method would be.getDropId()). 133 . } The method above just logs the item being dragged and dropped.getDragId()).prime.

com.www.prime. 134 . only first image can be accepted by droppable.jpg” /> <p:draggable for=”xavi” scope=”midfield”/> <p:outputPanel id=”forwardsonly” styleClass=”slot” scope=”forward” /> <p:droppable for=”forwardsonly” /> Skinning hoverStyleClass and activeStyleClass attributes are handy to change the style of the droppable when the state changes.jpg” /> <p:draggable for=”messi” scope=”forward”/> <p:graphicImage id=”xavi” value=”barca/xavi_thumb. Mode fit intersect pointer touch Description draggable should overlap the droppable entirely draggable should overlap the droppable at least 50% pointer of mouse should overlap the droppable droppable should overlap the droppable at any amount Acceptance You can limit which draggables can be dropped onto droppables using scope attribute which a draggable also has.tr Tolerance There are four different tolerance modes that define the way of accepting a draggable. <p:graphicImage id=”messi” value=”barca/messi_thumb. Following example has two images.

primefaces. bottom or top.DockTag org. Initial width of items. Distance to enlarge.Dock org.component.www. Maximum width of items.primefaces.dock.prime.primefaces. MenuModel instance to create menus programmatically binding position itemWidth maxWidth proximity halign model null bottom 40 50 90 center null Object String Integer Integer Integer String MenuModel 135 .23 Dock Dock component mimics the well known dock interface of Mac OS X.DockRenderer org.com. Horizontal alignment.primefaces.component.primefaces.component. An el expression that maps to a server side UIComponent instance in a backing bean Position of the dock.tr 3. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class dock org.dock.component.primefaces.component.dock.DockRenderer Attributes Name id rendered Default Assigned by JSF TRUE String Boolean Type Description Unique identifier of the component Boolean value to specify the rendering of the component.Dock org.component org. when set to false component will not be rendered.

png” url=”#”/> value=”RSS” icon=”/images/dock/rss. <p:dock> <p:menuitem <p:menuitem <p:menuitem <p:menuitem <p:menuitem <p:menuitem <p:menuitem </p:dock> value=”Home” icon=”/images/dock/home.png” url=”#”/> value=”History” icon=”/images/dock/history.prime. The configuration of this effect is done via the maxWidth and proximity attributes. Dynamic Menus Menus can be created programmatically as well. see the dynamic menus part in menu component section for more information and an example. Dock Effect When mouse is over the dock items. 136 . For a dock positioned at top set position to top.png” url=”#”/> value=”Email” icon=”/images/dock/email. top or bottom(default). icons enlarge.png” url=”#” /> value=”Music” icon=”/images/dock/music.com.png” url=”#”/> Position Dock can be located in two locations.png” url=”#”/> value=”Link” icon=”/images/dock/link.www.tr Getting started with the Dock A dock is composed of menuitems.png” url=”#” /> value=”Video” icon=”/images/dock/video.

colors.component org.Editor org.primefaces.EditorTag org.component.component. Editor supports advanced text editing features like fonts.component.EditorRenderer Attributes Name id rendered Default Assigned by JSF TRUE String Boolean Type Description Unique identifier of the component Boolean value to specify the rendering of the component.primefaces.primefaces.primefaces.component.editor. images.primefaces.EditorRenderer org.primefaces.tr 3. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class editor org.24 Editor Editor is an enhanced input component providing rich text editing features.editor. when set to false component will not be rendered. alignment and more.editor.prime. 137 .component.Editor org.www.com.

if immediate is set to false. Width of the editor Height of the editor Javascript variable name of the wrapped widget Makes editor resizable when set to true value null Object converter null Converter/String immediate FALSE Boolean required validator FALSE null Boolean MethodExpression valueChangeListener null ValueChangeListe ner String String String String String String Boolean requiredMessage converterMessage validatorMessage width height widgetVar resizable null null null 500px 300px null FALSE 138 . In case itʼs a static text.com.tr Name binding Default null Object Type Description An el expression that maps to a server side UIComponent instance in a backing bean Value of the component than can be either an EL expression of a literal text An el expression or a literal text that defines a converter for the component.prime. Message to be displayed when conversion fails. When itʼs an EL expression. when true the events will be fired at “apply request values”. it must refer to a converter id Boolean value that specifies the lifecycle phase the valueChangeEvents should be processed. Message to be displayed when validation fields.www. itʼs resolved to a converter instance. valueChange Events are fired in “process validations” phase Marks component as required A method binding expression that refers to a method validationg the input A method binding expression that refers to a method for handling a valuchangeevent Message to be displayed when required field validation fails.

default is en Title text of editor Disabled editing. Default language is English and following languages are supported out of the box.text = text } } <p:editor value=”#{myController.tr Name language title disabled Default null null FALSE String String Type Description Language of editor labels. } public void setText(String text) { this.com. public class MyController { private String text.www. Boolean Getting started with the Editor Rich Text entered using the Editor is passed to the server using value expression. Header text of the editor can also be changed via the title attribute. • “tr” : Turkish • “pt” : Portuguese Please contact PrimeFaces team using support forum if youʼre willing to provide a new translation. public String getText() { return text.text}” title=”PrimeFaces Html Editörü” language=”tr”/> 139 . Following is a Turkish editor.text}” /> Editor and I18N Labels like Font Style. Paragraph Style can be localized using the language attribute.prime. <p:editor value=”#{myController.

tr Ajax and Editor Ajax is a special case for editor.text}” /> <p:commandButton value=”Submit” ajax=”false” /> <h:commandButton value=”Submit” /> </h:form> 140 .text}” widgetVar=”editor” /> <p:commandButton value=”Submit” onclick=”editor. <h:form> <p:editor value=”#{myController.saveHTML()” /> </h:form> When you are not using ajax.prime. Solution is to do it manually.www. when you submit the form with ajax editor value will not be passed to the value that is bound because editor canʼt attach itʼs value to the form automatically in ajax case. <h:form> <p:editor value=”#{myController. So following non-ajax case would work.com. this wonʼt be necessary as editor attaches saveHTML() called to the formʼs submit handler automatically behind the scenes.

yui-toolbar-container { background-color: #FFFFCC .yui-toolbar-container ..prime. } Full list of CSS Selectors is available at.yui-skin-sam .gif).yahoo.yui-skin-sam .html 141 .www. } .tr Skinning Editor . http://developer.com/yui/examples/editor/skinning_editor. } . } .yui-skin-sam .yui-toolbar-group h3 { color: #33CC00 .com.yui-editor-container { border-color: #33CC00.yui-skin-sam .yui-toolbar-container ./design/nav.yui-toolbar-titlebar h2 { background: url(.

If for attribute is not provided.component.prime.component. 142 .effect.tr 3.EffectRenderer Attributes Name id rendered Default Assigned by JSF TRUE String boolean Type Description Unique identifier of the component Boolean value to specify the rendering of the component.primefaces.www. by default parent would be animated. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class effect org.EffectRenderer org.Effect org.primefaces.effect.primefaces.primefaces.com.component. when set to false component will not be rendered.EffectTag org.25 Effect Effect component is based on the jQuery effects library.component.primefaces. An el expression that maps to a server side UIComponent instance in a backing bean Dom event to attach the event that executes the animation Specifies the name of the animation Component that is animated Speed of the animation in ms binding event type for speed null null null null 1000 Object String String String int Getting started with Effect Effect component needs to be nested inside another component.effect.primefaces.component org.component.Effect org.

<h:outputText value=”#{bean.value}”> <p:effect type=”blind” event=”click”> <f:param name=”direction” value=”'horizontal'” /> </p:effect> </h:outputText> 143 . duration and more. • • • • • • • • • • • • • • blind clip drop explode fold puff slide scale bounce highlight pulsate shake size transfer Effect Configuration Each effect has different parameters for animation like colors.value}”> <p:effect type=”scale” event=”mouseover”> <f:param name=”percent” value=”90”/> </p:effect> </h:outputText> Itʼs important to provide string options with single quotes. provide these parameters with the f:param tag.www.com.value}”> <p:effect type=”pulsate” event=”click” /> </h:outputText> List of Effects Following is the list of effects supported by PrimeFaces.tr <h:outputText value=”#{bean.prime. <h:outputText value=”#{bean. In order to change the configuration of the animation.

<p:messages id=”messages”> <p:effect type=”pulsate” event=”load”> <f:param name=”mode” value=”'show'” /> </p:effect> </p:messages> <p:commandButton value=”Save” actionListener=”#{bean. effect is attached to itʼs parent on the specified event. http://docs. <h:outputLink id=”lnk” value=”#”> <h:outputText value=”Show the Barca Temple” /> <p:effect type=”appear” event=”click” for=”img” /> </h:outputLink> <h:graphicImage id=”img” value=”/ui/barca/campnou.www. When the link is clicked. Following example animates messages with pulsate effect after ajax request. There may be cases where you want to display an effect on another component on the same page while keeping the parent as the trigger.jpg” style=”display:none”/> With this setting.tr For the full list of configuration parameters for each effect.action}” update=”messages”/> 144 .prime. please see the jquery documentation. For attribute is added for this purpose.com/UI/Effects Animation Target By default. Note: Itʼs important for components that have the effect component as a child to have an assigned id because some components do not render their clientIdʼs if you donʼt give them an id explicitly. outputLink becomes the trigger for the effect on graphicImage.jquery. Effect on Load Effects can also be applied to any JSF component when page is loaded for the first time or after an ajax request is completed. initially hidden graphicImage comes up with a fade effect.com.

26 FileDownload The legacy way to present dynamic binary data to the client is to write a servlet or a filter and stream the binary data. public FileDownloadController() { InputStream stream = this. FileDownload does all the hardwork and presents an easy binary data like files stored in database.primefaces.filedownload. } //getters and setters } This streamed content should be bound to the value of the fileDownload. “downloaded_file.getResourceAsStream(”file.pdf”).com.tr 3.FileDownloadActionListener Attributes Name value contextDisposition Default null attachment Type StreamedContent String Description A streamed content instance Specifies display mode.model.StreamedContent instance. Info Tag Tag Class ActionListener Class fileDownload org.getClass(). FileDownload can be attached to any command component like a commandButton or commandLink.prime. “application/pdf”. The value of the FileDownload must be an org. First parameter of the constructor is the binary stream. Getting started with FileDownload A user command action is required to trigger the filedownload process.primefaces.primefaces. 145 .component.filedownload. public class FileDownloadController { private StreamedContent file.pdf”). We suggest using the ready DefaultStreamedContent implementation.component.www. file = new DefaultStreamedContent(stream. second is the mimeType and the third parameter is the name of the file.FileDownloadTag org.

another alternative is the inline mode.file}” /> </h:commandButton> Similarly a more graphical presentation would be to use a commandlink with an image. <h:commandLink value=”Download”> <p:fileDownload value=”#{fileDownloadController.com. Note that content disposition is not part of the http standard although it is widely implemented. in this case browser will try to open the file internally without a prompt. 146 .gif” /> </h:commandLink> ContentDisposition By default.www.prime.file}”/> <h:graphicImage value=”pdficon.tr <h:commandButton value=”Download”> <p:fileDownload value=”#{fileDownloadController. content is displayed as an attachment with a download dialog box.

fileupload. File filtering.primefaces.component.prime.FileUploadRenderer Attributes Name id Default Assigne d by JSF TRUE Type String Description Unique identifier of the component. turned off by default.primefaces.tr 3.component. An el expression that maps to a server side UIComponent instance in a backing bean.primefaces.component org. fileUpload will fallback to the legacy input type=”file” and still work.component.fileupload. partial page rendering and progress tracking are the significant features compared to legacy fileUploads. when set to false component will not be rendered.FileUploadRenderer org. Allows multi file uploads.component.27 FileUpload FileUpload goes beyond the browser input type=”file” functionality and features a flashjavascript solution for uploading files.fileupload.primefaces. Additionally in case the user agent does not support flash or javascript. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class fileUpload org.www.com. multiple uploads.FileUpload org.primefaces.primefaces.FileUploadTag org.component. Method expression to listen file upload events. rendered boolean Boolean value to specify the rendering of the component.FileUpload org. binding fileUploadListener multiple null null FALSE Object MethodExpr ession boolean 147 .

Name of the javascript widget. wmode property of the flash object.primefaces.www. <filter> <filter-name>PrimeFaces FileUpload Filter</filter-name> <filter-class> org.webapp. default is ʻBrowseʼ Background image of the browse button. Label of the browse button.FileUploadFilter </filter-class> </filter> <filter-mapping> <filter-name>PrimeFaces FileUpload Filter</filter-name> <servlet-name>Faces Servlet</servlet-name> </filter-mapping> 148 .com. Style class of the main container element. Number of maximum bytes to allow. When custom UI is turned on upload and cancel links wonʼt be rendered. Getting started with FileUpload First thing to do is to configure the fileupload filter which parses the multipart request. When set to true. selecting a file starts the upload process implicitly.filter.tr Name update auto label image cancelImage width height allowTypes description sizeLimit wmode customUI style styleClass widgetVar Default null FALSE null null null null null null null null null null null null null Type String boolean String String String String String String String Integer String boolean String String String Description Client side ids of the component(s) to be updated after file upload completes. Image of the cancel button Width of the browse button Height of the browse button Semi colon seperated list of file extensions to accept.prime. Itʼs important to make PrimeFaces file upload filter the very first filter to consume the request. Style of the main container element. Label to describe what types of files can be uploaded.

public class Controller { } public void handleFileUpload(FileUploadEvent event) { UploadedFile file = event.tr Single File Upload By default file upload allows selecting and uploading only one file at a time.getFile(). file type and more.www. //application code } UploadedFile belongs to the PrimeFaces API and contains methods to retrieve various information about the file such as filesize. <p:fileUpload fileUploadListener=”#{controller.handleFileUpload}” /> FileUploadListener is the way to access the uploaded files. Please see the JavaDocs for more information. <p:fileUpload fileUploadListener=”#{backingBean. This way multiple files can be selected and uploaded together. contents.prime.com. Multi FileUploads Multiple fileuploads can be enabled using the multiple attribute.handleFileUpload}” multiple=”true” /> 149 . when a file is uploaded defined fileUploadListener is processed with a FileUploadEvent as the parameter. simplest file upload would be.

you can change this way by setting auto to true. <p:fileUpload fileUploadListener=”#{controller.jpg will only allow selecting jpg files. Following example displays a “File Uploaded” message using the growl component after file upload. FileUpload is equipped with the update attribute for this purpose.com.www. Several different file filters can be configured for a single fileUpload component. Auto uploads are triggered as soon as files are selected from the dialog.prime.handleFileUpload}” multiple=”true” update=”messages”> </p:fileUpload> <p:growl id=”messages” /> public class Controller { } public void handleFileUpload(FileUploadEvent event) { //add facesmessage to display with growl //application code } File Filters Users can be restricted to only select the file types youʼve configured.tr Auto Upload Default behavior requires users to trigger the upload process. this is as simple as setting the sizeLimit configuration. <p:fileUpload fileUploadListener=”#{controller. <p:fileUpload fileUploadListener=”#{controller.handleFileUpload}” auto=”true” /> Partial Page Update After the fileUpload process completes you can use the PrimeFaces PPR to update any component on the page.handleFileUpload}” Size Limit Most of the time you might need to restrict the file upload size. 150 . for example a file filter defined on *. Following fileUpload limits the size to 10000 bytes for each file.

Parameter Name thresholdSize Description Maximum file size in bytes to keep uploaded files in memory.com.tr <p:fileUpload fileUploadListener=”#{controller. threshold size and temporary file upload location. style and styleClass attributes apply to the main container element(span) of fileupload controls.prime.handleFileUpload}” height=”48” width=”48” image=”/images/browse.png” customUI=”true”/> <h:outputLink value=”#” title=”Upload” onclick=”uploader. If a file exceeds this limit. default upload and cancel links are not rendered and itʼs up to you to handle these events if you want using the client side api.”> Upload Files </h:outputLink> The image of the browse button is customized using the image attribute and the image for cancel button is configured with cancelImage attribute. Since fileUpload is a composite component. In addition. Thereʼre two simple methods upload() and clear() that you can use to plug-in your own UI. Another important feature is the customUI. 151 . Filter Configuration FileUpload filterʼs default settings can be configured with init parameters. <p:fileUpload widgetVar=”uploader” fileUploadListener=”#{fileUploadController. After skinning the fileUpload will look like.upload(). Two configuration options exist. Best way to show this is start with an example.handleFileUpload}” sizeLimit=”10000” /> Skinning FileUpload FileUpload is a highly customizable component in terms of skinning.www. we made the UI flexible enough to customize it for your own requirements. When customUI is set to true. itʼll be temporarily written to disk. Note that when you use a custom image for the browse button set the height and width properties to be same as the image size.png” cancelImage=”/images/cancel.

tmpdir”) An example configuration below defined thresholdSize to be 50kb and uploads to userʼs temporary folder.tr Parameter Name uploadDirectory Description Disk repository path to keep temporary files that exceeds the threshold size.primefaces.prime. By default it is System.www.com. <filter> <filter-name>PrimeFaces FileUpload Filter</filter-name> <filter-class> org.filter.webapp.io.FileUploadFilter </filter-class> <init-param> <param-name>thresholdSize</param-name> <param-value>51200</param-value> </init-param> <init-param> <param-name>uploadDirectory</param-name> <param-value>/Users/primefaces/temp</param-value> </init-param> </filter> 152 .getProperty (”java.

component.FocusTag org.component org. 153 .primefaces.FocusTag org. focus is enabled by just placing the component on the page as. Minimum severity level to be used when finding the first invalid component binding for context minSeverity null null null error Object String String String Getting started with Focus In itʼs simplest form.www.tr 3.focus.component.Focus org. <p:focus /> Thatʼs it. now letʼs add some input components to give something to focus on. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class focus org.primefaces.FocusRenderer org.component.Focus.focus.primefaces.com.primefaces.component.primefaces.component. An el expression that maps to a server side UIComponent instance in a backing bean Specifies the exact component to set focus The root component to start first input search.primefaces. when set to false component will not be rendered.28 Focus Focus is a clever component that makes it easy for page authors to manage the element focus on a JSF page.FocusRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String boolean Description Unique identifier of the component Boolean value to specify the rendering of the component.prime.focus.

you need to update p:focus component as well. <p:focus for=”text”/> <h:inputText id=”text” value=”{bean. Note that for this feature to work on ajax requests.com. in this case focus will be set on surname field implicitly. first invalid component will receive a focus.surname}” required=”true” label=”Surname”/> <p:message for=”surname” /> </h:panelGrid> <p:commandButton value=”Submit” update=”panel” actionListener=”#{pprBean. textarea and select. Following is a simple example. <h:form> <p:panel id=”panel” header=”Register”> <p:focus /> <p:messages /> <h:panelGrid columns=”3”> <h:outputLabel for=”firstname” value=”Firstname: *” /> <h:inputText id=”firstname” value=”#{pprBean. a validation error will be raised for surname. So in previous example if firstname field is valid but surname field has no input.tr Input Focus You donʼt need to explicitly define the component to receive focus as by default focus will find the first enabled and visible input component on page.prime.savePerson}” /> </p:panel> </h:form> When this page initially opens. Explicit Focus Additionally. using for attribute focus can be set explicitly on an input component.firstname}” required=”true” label=”Firstname” /> <p:message for=”firstname” /> <h:outputLabel for=”surname” value=”Surname: *” /> <h:inputText id=”surname” value=”#{pprBean. Input component can be any element such as input.www. Validation Aware Another useful feature of focus is that when validations fail. input text with id “firstname” will receive focus as it is the first input component.value}” /> 154 .

com.component.component.GmapRenderer org.primefaces.primefaces.29 GMap GMap component is built on Google Maps API Version 3. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class gmap org.gmap.component.primefaces.component.GMapTag org.www.primefaces.tr 3. Gmap is highly integrated with JSF development model and enhanced with Ajax capabilities.GmapRenderer 155 .component org.gmap.GMap org.gmap.primefaces.prime.component.Gmap org.primefaces.

MapModel instance. An el expression that maps to a server side UIComponent instance in a backing bean. Component(s) to update with ajax when an overlay is selected.com. Server side listener to invoke when an overlay is selected with ajax. Javascript callback to execute after ajax request to select an overlay completes.primefaces. Server side listener to invoke when a point on map is selected.www. Style class of the map container.prime. Component(s) to update with ajax when a point on map is selected. Inline style of the map container.model. binding null Object widgetVar model style styleClass type center zoom onOverlaySelectUpdate onOverlaySelectStart null null null null null null 8 null null String MapModel String String String String Integer String String onOverlaySelectComplete null String overlaySelectListener stateChangeListener onStateChangeUpdate pointSelectListener onPointSelectUpdate null null null null null MethodExp ression MethodExp ression String MethodExp ression String 156 . Defines the initial zoom level. An org. Boolean value to specify the rendering of the component. Server side listener to invoke when stated of the map is changed. when set to false component will not be rendered.tr Attributes Name id rendered Default Assigned by JSF TRUE Type String Boolean Description Unique identifier of the component. Name of the client side widget. Type of the map. Component(s) to update with ajax when state of the map is changed. Javascript callback to execute before ajax request to select an overlay begins. Center point of the map.

google.com/maps/api/js?sensor=true|false” type=”text/javascript”></script> As Google Maps api states. Four options are required to place a gmap on a page. Getting started with GMap First thing to do is placing V3 of the Google Maps API that the GMap based on. zoom. <script src=”http://maps. these are center.height:400px" /> center: Center of the map in lat. Javascript callback to execute when a point on map is clicked. mandatory sensor parameter is used to specify if your application requires a sensor like GPS locator.tr Name markerDragListener onMarkerDragUpdate streetView disableDefaultUI navigationControl mapTypeControl draggable disabledDoubleClickZoom onPointClick Default null null FALSE FALSE TRUE TRUE TRUE FALSE null Type MethodExp ression String Boolean Boolean Boolean Boolean Boolean Boolean String Description Server side listener to invoke when a marker on map is dragged. Controls street view support. “hybrid”.prime.com. Disables zooming on mouse double click. Ideal location is the head section of your page. Also you donʼt need an api key anymore with the V3 api. 157 . Defines visibility of map type control. Component(s) to update with ajax when a marker on map is dragged. style: Dimensions of the map.122893" zoom="15" type="hybrid" style="width:600px. Disables default UI controls Defines visibility of navigation control. “satellite”. 2.www. “hybrid” and “terrain”. valid values are. type and style. <p:gmap center="41. Defines draggability of map. lng format zoom: Zoom level of the map type: Type of map.381542.

37.DefaultMapModel as the default implementation.com.885233.prime. Markers A marker is represented by org.model.MapModel instance. <p:gmap center="41.addOverlay(new Marker(new model. 2.381542. “M2”)).map. LatLng(36.map.LatLng.model.primefaces. “M1”)).primefaces. public MapBean() { model = new DefaultMapModel().model. “M4”)).primefaces.122893" zoom="15" type="hybrid" style="width:600px.883707.addOverlay(new Marker(new } LatLng(36.706707).www.689216). public class MapBean { private MapModel model.height:400px" value=”#{mapBean.Marker class and can be displayed on a map using a MapModel.map.primefaces. “M3”)).879466. LatLng(36. LatLng(36. org.702323). public Model getModel() { return model } } 158 . 30.model.addOverlay(new Marker(new model. 30.tr MapModel GMap is backed by an org.primefaces.map.MapModel.879703.map.map. 30.Marker. PrimeFaces provides org. model.DefaultMapModel. API Docs of all GMap related model classes are available at the end of GMap section and also at javadocs of PrimeFaces.map.model. org.addOverlay(new Marker(new model.model.primefaces.primefaces.model. org.model}”/> import import import import org.667648).

polyline. } public Model getModel() { return model } } 30. 37.381542.com.getPaths().map.primefaces.getPaths(). org.primefaces.primefaces. <p:gmap center="41.map. 30.primefaces.883707. public MapBean() { model = new DefaultMapModel().model}”/> import import import import org.model. org. 2. 159 .MapModel.model.add(new LatLng(36.667648)).879703.689216)).primefaces.addOverlay(polyline).add(new LatLng(36.model.122893" zoom="15" type="hybrid" style="width:600px.add(new LatLng(36.tr Polylines A polyline is represented by org. polyline.map.Polyline.map. polyline. Polyline polyline = new Polyline().702323)).706707)).LatLng.DefaultMapModel.www.model. model. 30.model.map. polyline.885233.getPaths(). org.getPaths(). public class MapBean { private MapModel model.prime.879466.height:400px" value=”#{mapBean.Polyline and can be displayed on a map using a MapModel.add(new LatLng(36.

primefaces.prime.com. 2.706707)).Polygon.MapModel.689216)).879466. public MapBean() { model = new DefaultMapModel(). org.www.883707.add(new LatLng(36.add(new LatLng(36.map.map.122893" zoom="15" type="hybrid" style="width:600px.381542.model.tr Polygons A polygon is represented by org.getPaths(). 30. Polygon polygon = new Polygon().map.map.map.primefaces.model.primefaces. 30. } public Model getModel() { return model } } 160 .model. org. polyline. <p:gmap center="41.667648)).primefaces. public class MapBean { private MapModel model.primefaces. org.model.addOverlay(polygon). model.model.879703.getPaths().add(new LatLng(36. 30.Polygon and can be displayed on a map using a MapModel. polyline.height:400px" value=”#{mapBean.DefaultMapModel.model}”/> import import import import org.getPaths().LatLng. polyline.

model. org.prime.model. 2. //add facesmessage } } 161 .primefaces. polylines and polygons can respond to selection by invoking a server side overlaySelectListener with ajax.map.LatLng.primefaces. org. Optionally other components can be updated with ajax using onOverlaySelectUpdate attribute.tr Overlay Selection Overlays such as markers.map.map.map. passing an overlaySelectEvent that contains a reference to the selected overlay.map. //add markers } public Model getModel() { return model } public void onMarkerSelect(OverlaySelectEvent event) { Marker marker = (Marker) event.122893" zoom="15" type="hybrid" style="width:600px.381542.Marker. onOverlaySelectStart and onOverlaySelectComplete are optional javascript callbacks. public MapBean() { model = new DefaultMapModel().getOverlay().OverlaySelectEvent. Following example displays a FacesMessage about the selected marker with growl component.MapModel.model.DefaultMapModel.model}” overlaySelectListener=”#{mapBean.primefaces.primefaces.onMarkerSelect}” onOverlaySelectUpdate=”growl”/> </h:form> import import import import import org.height:400px" value=”#{mapBean. org. <h:form> <p:growl id=”growl” /> <p:gmap center="41.www.com.primefaces.model. org.event. public class MapBean { private MapModel model.

model}” overlaySelectListener=”#{mapBean.marker.title}” /> </p:gmapInfoWindow> </p:gmap> </h:form> public class MapBean { private MapModel model. private Marker marker.data. Following example.marker = (Marker) event. } public Model getMarker() { return marker. gmapInfoWindow is used to implement this special use case.height:400px" value=”#{mapBean.tr InfoWindow A common use case is displaying an info window when a marker is selected.image}” /> <h:outputText value=”#{mapBean. public MapBean() { model = new DefaultMapModel().onMarkerSelect}”> <p:gmapInfoWindow> <p:graphicImage value=”/images/#{mapBean. //add markers } public Model getModel() { return model.122893" zoom="15" type="hybrid" style="width:600px.getOverlay().com.marker. <h:form> <p:gmap center="41. } public void onMarkerSelect(OverlaySelectEvent event) { this. 2.prime. } } 162 .data.www. displays an info window that contains an image of the selected marker data.381542.

381542.Marker. public MapBean() { model = new DefaultMapModel(). Optional onMarkerDragUpdate options enables updating other component(s) on page after marker is dropped to itʼs new location.getMarker(). 2. org.map.model.primefaces.MapModel. //create model with draggable markers } public Model getModel() { return model.event.primefaces.DefaultMapModel.model}” markerDragListener=”#{mapBean.tr Draggable Markers When a draggable marker is dragged and dropped. //add facesmessage } } 163 .MarkerDragEvent.primefaces. a server side markerDragListener can be invoked.model. org.map.www. <h:form> <p:growl id=”growl” /> <p:gmap center="41.model.model.height:400px" value=”#{mapBean.primefaces. org.prime.map. passing a MarkerDragEvent that contains a reference to the dragged marker whose position is updated already. } public void onMarkerDrag(MarkerDragEvent event) { Marker marker = (Marker) event.map.onMarkerDrag}” onMarkerDragUpdate=”growl”/> </h:form> import import import import import org.122893" zoom="15" type="hybrid" style="width:600px.com. org. public class MapBean { private MapModel model.LatLng.map.primefaces.

com. } public void onStateChange(StateChangeEvent event) { int zoom = event.MapModel.model.model}” stateChangeListener=”#{mapBean.www. Optional onStateChangeUpdate option enables updating other components on page after state change listener is invoked with ajax.DefaultMapModel.map.map. public class MapBean { private MapModel model.map.model.map.tr Map Events GMap can respond to events like drag and zoom change.getZoomLevel().getBounds().primefaces. When map state changes a server side stateChangeListener is invoked by passing a StateChangeEvent that contains information about new map state. org. LatLngBounds bounds = event. org.model.381542. //add facesmessage } } 164 .primefaces.event.122893" zoom="15" type="hybrid" style="width:600px. public MapBean() { model = new DefaultMapModel().primefaces.LatLng.LatLngBounds.primefaces. <h:form> <p:growl id=”growl” /> <p:gmap center="41. org.height:400px" value=”#{mapBean.prime.map.primefaces.model. //create model with draggable markers } public Model getModel() { return model. 2.StateChangeEvent. org.onStateChange}” onStateChangeUpdate=”growl”/> </h:form> import import import import import org.

Optional onPointUpdate attribute allows updating other components on page after pointSelectListener is invoked with ajax.event.height:400px" value=”#{mapBean.primefaces.primefaces.381542. //add facesmessage } } 165 . public class MapBean { private MapModel model.map. //create model } public Model getModel() { return model.tr Point Selection When a point with no overlay is selected. <h:form> <p:growl id=”growl” /> <p:gmap center="41. public MapBean() { model = new DefaultMapModel().map. org.onPointSelect}” onPointSelectUpdate=”growl”/> </h:form> import import import import org.www.model.MapModel.map.122893" zoom="15" type="hybrid" style="width:600px.map. a server side pointSelectListener can be invoked passing a PointSelectEvent that contains information about the selected point.primefaces.model. org. org.model.PointSelectEvent.model}” pointSelectListener=”#{mapBean.LatLng. 2.primefaces. } public void onPointSelect(PointSelectEvent event) { LatLng location = event.getLatLng().prime.DefaultMapModel.com.

381542. var gmap = yourWidgetVar.getMap().height:400px" mapTypeControl=”false” navigationControl=”false” /> Native Google Maps API In case you need to access native google maps api with javascript. Alternatively setting disableDefaultUI to true will remove all controls at once. <p:gmap center="41. http://code.tr Street View StreeView is enabled simply by setting streetView option to true.122893" zoom="15" type="hybrid" style="width:600px.Map instance Full map api is provided at. //gmap is a google. use provided getMap() method. 2.122893" zoom="15" type="terrain" style="width:600px.html 166 . 2. <p:gmap center="41.www.prime.maps.com.381542.height:400px" streetView=”true” /> Map Controls Controls on map can be customized via attributes like navigationControl and mapTypeControl.google.com/apis/maps/documentation/javascript/reference.

map.primefaces.model.model.primefaces.Overlay Property title latlng icon shadow cursor draggable clickable flat visible Default null null null null pointer FALSE TRUE FALSE TRUE Type String LatLng String String String Boolean Boolean Boolean Boolean Description Text to display on rollover Location of the marker Icon of the foreground Shadow image of the marker Cursor to display on rollover Defines if marker can be dragged Defines if marker can be dragged If enabled.map.tr GMap API org.prime.primefaces.com.map.www.Overlay Property id data Default null null Type String Object Description Id of the overlay.model.model.map.DefaultMapModel is the default implementation) Method addOverlay(Overlay overlay) List<Marker> getMarkers() List<Polyline> getPolylines() List<Polygon> getPolygons() Overlay findOverlay(String id) Adds an overlay to map Returns the list of markers Returns the list of polylines Returns the list of polygons Finds an overlay by itʼs unique id Description org.map.Marker extends org. generted and used internally Data represented in marker org. shadow image is not displayed Defines visibility of the marker 167 .MapModel (org.model.primefaces.primefaces.

primefaces.LatLng Property lat lng Default null null Type double double Description Latitude of the coordinate Longitude of the coordinate org.www.map.primefaces.model.primefaces.map.map.primefaces.Polygon extends org.model.primefaces.model.model.map.Overlay Property paths strokeColor strokeOpacity strokeWeight fillColor fillOpacity Default null null 1 1 null 1 Type List String Double Integer String Double List of coordinates Color of a line Opacity of a line Width of a line Background color of the polygon Opacity of the polygon Description org.primefaces.model.map.Overlay Property paths strokeColor strokeOpacity strokeWeight Default null null 1 1 Type List String Double Integer List of coordinates Color of a line Opacity of a line Width of a line Description org.map.model.Polyline extends org.com.prime.LatLngBounds Property center northEast southWest Default null null null Type LatLng LatLng LatLng Description Center coordinate of the boundary NorthEast coordinate of the boundary SouthWest coordinate of the boundary 168 .tr org.

primefaces.PointSelectEvent Property latLng Default null Type LatLng Description Coordionates of the selected point org.OverlaySelectEvent Property overlay Default null Type Overlay Description Selected overlay instance org.www.event.primefaces.com.FacesEvent.MarkerDragEvent Property marker Default null Type Marker Description Dragged marker instance org.faces.map.event.primefaces.event.map.event.map.map.tr GMap Event API All classes in event api extends from javax.StateChangeEvent Property bounds zoomLevel Default null 0 Type LatLngBounds Integer Description Boundaries of the map Zoom level of the map 169 .event.primefaces.prime. org.

An el expression that maps to a server side UIComponent instance in a backing bean Maximum width of the info window binding maxWidth null null Object Integer Getting started with GMapInfoWindow See GMap section for more information about how gmapInfoWindow is used.primefaces.prime. 170 .component.com.primefaces.www.GMapInfoWindowTag org.primefaces.component.primefaces.tr 3. Info Tag Tag Class Component Class Component Type Component Family gmapInfoWindow org.gmap.GMapInfoWindow org.component Attributes Name id rendered Default Assigned by JSF TRUE Type String boolean Description Unique identifier of the component Boolean value to specify the rendering of the component.gmap. when set to false component will not be rendered.30 GMapInfoWindow GMapInfoWindow is used with GMap component to open a window on map when an overlay is selected.GMapInfoWindow org.component.

GraphicImageRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String boolean Description Unique identifier of the component Boolean value to specify the rendering of the component.com. Legacy way to do this is to come up with a Servlet that does the streaming. GraphicImage does all the hard work without the need of a Servlet.GraphicImageRenderer org.primefaces.GraphicImageTag org.www.primefaces. An el expression that maps to a server side UIComponent instance in a backing bean Binary data to stream or context relative path.prime.GraphicImage org.component.component.GraphicImage org.graphicimage.component.component.primefaces.primefaces. Alternate text for the image Alias to value attribute Width of the image Height of the image Title of the image Direction of the text displayed Language code 171 binding value alt url width height title dir lang null null null null null null null null null Object Object String String String String String String String .component org. when set to false component will not be rendered.primefaces.31 GraphicImage PrimeFaces GraphicImage extends standard JSF graphic image component with the ability of displaying binary data like an inputstream.tr 3. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class graphicImage org.component.graphicimage.primefaces.graphicimage. Main use cases of GraphicImage is to make displaying images stored in database or on-the-fly images easier.

StreamedContent content as itʼs value.getResourceAsStream(”barcalogo. } } 172 .getClass(). StreamedContent is an interface and PrimeFaces provides a ready implementation called DefaultStreamedContent.www.prime.tr Name ismap usemap style styleClass onclick ondblclick onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup cache Default FALSE null null null null null null null null null null null null null TRUE Type Boolean String String String String String String String String String String String String String String Description Specifies to use a server-side image map Name of the client side map Style of the image Style class of the image onclick dom event handler ondblclick dom event handler onkeydown dom event handler onkeypress dom event handler onkeyup dom event handler onmousedown dom event handler onmousemove dom event handler onmouseout dom event handler onmouseover dom event handler onmouseup dom event handler Enables/Disables browser from caching the image Getting started with GraphicImage GraphicImage requires a org.com.jpg”). “image/jpeg”).model. Following examples loads an image from the classpath.primefaces. image = new DefaultStreamedContent(stream.image}” /> public class DynamicImageController { private StreamedContent image. <p:graphicImage value=”#{dynamicImageController. //getters&setters public DynamicImageController() { InputStream stream = this.

Hereʼs an example that generates a chart with JFreeChart and displays it with p:graphicImage. } return dataset. } } } private PieDataset createDataset() { DefaultPieDataset dataset = new DefaultPieDataset(). createDataset().setValue(”Antalya”.setValue(”Istanbul”.com. Displaying Charts with JFreeChart StreamedContent is a powerful API that can display images created on-the-fly as well.tr DefaultStreamedContent gets an inputstream as the first parameter and mime type as the second. //getters and setters <p:graphicImage value=”#{backingBean. dataset.8)). public BackingBean() { try { JFreeChart jfreechart = ChartFactory. new Double(25. new Double(15. jfreechart.createPieChart (”Turkish Cities”. } catch (Exception e) { e. false). In a real life application.chartImage}” /> 173 .0)). dataset.www. ChartUtilities. dataset. For example java. true. chartImage = new DefaultStreamedContent(new FileInputStream (chartFile).2)).ResultsSet API has the getBinaryStream() method to read blob files stored in database. “image/png”).0)). 300).sql. you can create the inputstream after reading the image from the database. true. 375. public class BackingBean { private StreamedContent chartImage.setValue(”Ankara”. File chartFile = new File(”dynamichart”). Please see the javadocs if you require more information.saveChartAsPNG(chartFile.prime.printStackTrace().setValue(”Izmir”. new Double(45. dataset. new Double(14.

com.barcode}” /> 174 . barcodeFile). barcode = new DefaultStreamedContent(new FileInputStream (barcodeFile). } catch (Exception e) { e. public BackingBean() { try { File barcodeFile = new File(”dynamicbarcode”).www. “image/jpeg”). This sample uses barbecue project for the barcode API.tr Basically p:graphicImage makes any JSF chart component using JFreechart obselete and lets you to avoid wrappers to take full advantage of JFreechart API.printStackTrace(). BarcodeImageHandler. Displaying a Barcode Similar to the chart example. } } //getters and setters } <p:graphicImage value=”#{backingBean. public class BackingBean { private StreamedContent barcode. a barcode can be generated as well.prime.createCode128 (”PRIMEFACES”).saveJPEG(BarcodeFactory.

www.jpg” /> 175 . it can also display regular non dynamic images. Suppose you want to generate different images depending on a request parameter. Displaying Regular Images As GraphicImage extends standard graphicImage component.prime.tr Passing Parameters Behind the scenes. dynamic images are generated by a different request whose format is defined initially by the graphicImage. youʼd lose the value of the parameter for the actual request that generates the image. <p:graphicImage value=”barcalogo.com. To solve this. you can pass request parameters to the graphicImage via f:param tags. Problem is the request parameter can only be available at initial load of page containing the graphicImage. as a result the actual request rendering the image can have access to these values.

component. Alternate text for the image Alias to value attribute Title of the image Style of the image Style class of the image onclick dom event handler 176 binding value fontName fontStyle fontSize alt url title style styleClass onclick null null Verdana plain 12 null null null null null null Object Object String String Integer String String String String String String .component org. valid values are “bold”.primefaces. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class graphicText org.www.component.GraphicTextRenderer org. “italic” or “plain”. Style of the font.GraphicTextRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String Boolean Description Unique identifier of the component Boolean value to specify the rendering of the component.component.graphictext.GraphicText org.com.component. when set to false component will not be rendered. Size of the font.graphictext.graphictext.primefaces.32 GraphicText GraphicText can convert any text to an image format in runtime. An el expression that maps to a server side UIComponent instance in a backing bean Text value to render as an image Name of the font.GraphicTextTag org.primefaces.prime.primefaces.primefaces.GraphicText org.primefaces.component.tr 3.

prime. <p:graphicText value=”PrimeFaces” fontName=”Arial” fontSize=”14” fontStyle=”bold”/> 177 . <p:graphicText value=”PrimeFaces” /> Font Settings Font of the text in generated image is configured via font* attributes.www.tr Name ondblclick onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup Default null null null null null null null null null Type String String String String String String String String String Description ondblclick dom event handler onkeydown dom event handler onkeypress dom event handler onkeyup dom event handler onmousedown dom event handler onmousemove dom event handler onmouseout dom event handler onmouseover dom event handler onmouseup dom event handler Getting started with GraphicText GraphicText only requires the text value to display.com.

An el expression that maps to a server side UIComponent instance in a backing bean Specifies if the message should stay instead of hidden automatically.primefaces.component.component.primefaces.growl.primefaces.component. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class growl org.component org.www.tr 3. Specifies if the detail of message should be displayed. Specifies if the summary of message should be displayed.primefaces.Growl org.33 Growl Growl is based on the Macʼs growl notification widget and used to display FacesMessages similar to h:messages.growl. when set to false component will not be rendered.component.GrowlTag org.primefaces.Growl org.GrowlRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String boolean Description Unique identifier of the component Boolean value to specify the rendering of the component.com.GrowlRenderer org.prime.growl. binding sticky showSummary showDetail null FALSE TRUE FALSE Object boolean boolean boolean 178 .primefaces.component.

Image of the fatal messages. <p:growl sticky=”true”/> If growl is not working in sticky mode. <p:growl /> Lifetime of messages By default each message will be displayed for 6000 ms and then hidden. <p:growl id=”messages”/> <p:commandButton value=”Submit” update=”messages” /> 179 . Image of the error messages. Following growl will display the messages for 5 seconds and then fade-out. <p:growl life=”5000”/> Growl with Ajax If you need to display messages with growl after an ajax request you just need to update it just like a regular component. A message ca be made sticky meaning itʼll never be hidden automatically. Duration in milliseconds to display non-sticky messages. itʼs also possible to tune the duration of displaying messages.com. since messages are displayed as an overlay. Image of the info messages. Image of the warning messages.tr Name globalOnly life warnIcon infoIcon errorIcon fatalIcon Default FALSE 6000 null null null null Type boolean integer String String String String Description When true.www. the location of growl in JSF page does not matter. only facesmessages without clientids are displayed. Getting Started with Growl Growl is a replacement of h:messages and usage is very similar indeed. Simply place growl anywhere on your page.prime.

ui-growl-title .ui-growl-message p Applies Main container element of growl Container of messages Container of a message Severity icon Text message container Summary of the message Detail of the message As skinning style classes are global.ui-growl-item . see the main Skinning section for more information. Here is an example based on a different theme.ui-growl .com.www.ui-growl-image . 180 . position can be controlled with a CSS selector called ui-growl. Skinning Following is the list of structural style classes. } With this setting growl will be located at top left corner.tr Positioning Growl is positioned at top right corner by default. Style Class . .prime.ui-growl-item-container .ui-growl { left:20px.ui-growl-message .

when false at invoke_application phase.primefaces. Boolean value that determines the phaseId.primefaces.faces.component org. An el expression that maps to a server side UIComponent instance in a backing bean The Key binding.34 HotKey HotKey is a generic key binding component that can bind any formation of keys to javascript event handlers or ajax calls. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class hotkey org.primefaces.HotKeyRenderer Attributes Name id rendered Default Assigned by JSF TRUE String boolean Type Description Unique identifier of the component.MethodEx pression javax.hotkey. ActionListener boolean async FALSE Boolean .hotkey.component.primefaces. An actionlistener thatʼd be processed in the partial request caused by uiajax.tr 3. Javascript event handler to be executed when the key binding is pressed.HotKeyRenderer org.component. ajax requests are not queued.HotKeyTag org.component.primefaces.prime.HotKey org.primefaces.hotkey. Boolean value to specify the rendering of the component.com. when set to false component will not be rendered. when true actions are processed at apply_request_values. A method expression thatʼd be processed in the partial request caused by uiajax.el.HotKey org.event.www. 181 binding bind handler action actionListener immediate null null null null null FALSE Object String String javax.component. When set to true.component.

either on client side with the event handler or with ajax support. <p:hotkey bind=”a” handler=”alert(‘Pressed a’). Javascript handler to execute when ajax request succeeds. Javascript handler to execute before ajax request is begins. Javascript handler to execute when ajax request fails. Key combinations Most of the time youʼd need key combinations rather than a single key. Javascript handler to execute when ajax request is completed. Simples example would be. <p:hotkey bind=”ctrl+s” handler=”alert(‘Pressed ctrl+s’).” /> <p:hotkey bind=”ctrl+shift+s” handler=”alert(‘Pressed ctrl+shift+s’)” /> Integration Hereʼs an example demonstrating how to integrate hotkeys with a client side api.com.prime. pressing the a key will alert the ʻPressed key aʼ text. Using left and right keys will switch the images displayed via the p:imageSwitch component. Global ajax requests are listened by ajaxStatus component. setting global to false will not trigger ajaxStatus.www. Boolean Getting Started with HotKey HotKey is used in two ways. Client side id of the component(s) to be updated after async partial submit request.tr Name process update onstart oncomplete onsuccess onerror global Default null null null null null null TRUE String String String String String String Type Description Component id(s) to process partially instead of whole view. 182 .” /> When this hotkey is on page.

” /> <p:imageSwitch widgetVar=”switcher”> //content </p:imageSwitch> Ajax Support Ajax is a built-in feature of hotKeys meaning you can do ajax calls with key combinations.firstname}”/> </h:form> Note that hotkey must be nested inside a form to use the ajax support. <h:form prependId=”false”> <p:hotkey bind=”ctrl+shift+s” update=”display” actionListener=”# {hotkeyController.previous(). Following form can be submitted with the ctrl+shift+s combination.action}”/> <h:panelGrid columns=”2” style=”margin-bottom:10px”> <h:outputLabel for=”firstname” value=”Firstname:” /> <h:inputText id=”firstname” value=”#{pprBean. 183 .firstname}” /> </h:panelGrid> <h:outputText id=”dsplay” value=”Hello: #{pprBean.com.next(). Weʼre also planning to add built-in hotkey support for p:commandButton and p:commandLink since hotkeys are a common use case for command components.www.prime.” /> <p:hotkey bind=”right” handler=”switcher.firstname}” rendered=”#{not empty pprBean.tr <p:hotkey bind=”left” handler=”switcher.

component.idlemonitor. Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class idleMonitor org.IdleMonitor org.idlemonitor.component.IdleMonitorTag org.component org.primefaces.idlemonitor.primefaces.component.IdleMonitor Attributes Name id rendered Default Assigned by JSF TRUE Type String boolean Description Unique identifier of the component Boolean value to specify the rendering of the component.www.tr 3.component. Default is 5 minutes.primefaces. An el expression that maps to a server side UIComponent instance in a backing bean Time to wait in milliseconds until deciding if the user is idle.IdleMonitor org. when set to false component will not be rendered.component.prime. Javascript event to execute when user goes idle 184 binding timeout onidle null 300000 null Object int String .primefaces.primefaces.com.primefaces.35 IdleMonitor IdleMonitor watches usersʼ actions on a page and notify several callbacks in case they go idle or active again.IdleMonitorRenderer org.

” onactive=”idleDialog. For this purpose use the idleListeners that are notified with ajax.handleIdle}”/> HandleIdle is a simple method thatʼs defined in idleMonitorController bean.show().com.www. IdleListener Most of the time you may need to be notified on server side as well about IdleEvents so that necessary actions like invalidating the session or logging can be done. A conventional idleEvent is passed as parameter to the idleListener.prime. idleMonitor waits for 5 minutes (300000 ms) until triggering the onidle event. <p:idleMonitor onidle=”idleDialog.”/> <p:dialog header=”What's happening?” widgetVar=”idleDialog” modal=”true” fixedCenter=”true” close=”false” width=”400px” visible=”true”> <h:outputText value=”Dude. are you there?” /> </p:dialog> Controlling Timeout By default. public void handleIdle(IdleEvent event) { //Invalidate user } 185 .Method Expression String Description Javascript event to execute when user goes active Server side event to be called in case user goes idle Client side id of the component(s) to be updated after async partial submit request Getting Started with IdleMonitor To begin with. You can customize this duration with the timeout attribute.hide(). you can listen to events that are called when a user goes idle or becomes active again.el. <p:idleMonitor idleListener=”#{idleMonitorController. Example below displays a warning dialog onidle and hides it back when user moves the mouse or uses the keyboard.tr Name onactive idleListener update Default null null null Type String javax.

handleIdle}” update=”message”/> <h:outputText id=”message” value=”#{idleMonitorController. } public String getMsg() { return msg.com. <h:form prependId=”false”> <p:idleMonitor idleListener=”#{idleMonitorController.msg}” /> </h:form> public class IdleMonitorController { private String msg. Example below adds a message and updates an outputText.tr AJAX Update IdleMonitor uses PrimeFaces PPR to update the dom with the server response after an idleListener is notified.prime. 186 . } public void setMsg(String msg) { this.www. } public void idleListener(IdleEvent event) { msg = “Message from server: Your session is closed”.msg = msg. //invalidate session } Note: An idleMonitor must be enclosed in a form if an idleListener is defined.

ImageCompare org.imagecompare.imagecompare.imagecompare.prime.ImageCompare org.ImageCompareRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String boolean Description Unique identifier of the component Boolean value to specify the rendering of the component.component.primefaces.36 ImageCompare ImageCompare provides a rich user interface to compare two images.ImageCompareRenderer org.component.component org.ImageCompareTag org.primefaces. 187 .primefaces.tr 3. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class imageCompare org.component.www.component.primefaces.primefaces.com.primefaces. when set to false component will not be rendered.component.

png” width=”438” height=”246”/> It is required to always set width and height of the images. 188 . Skinning Two images are placed inside a div container element.tr Name binding leftImage rightImage width height style styleClass Default null null null null null null null Type Object String String String String String String Description An el expression that maps to a server side UIComponent instance in a backing bean Source of the image placed on the left side Source of the image placed on the right side Width of the images Height of the images Style of the image container element Style class of the image container element Getting started with imageCompare ImageCompare is created with two images with same height and width.png” rightImage=”ps3.prime. style and styleClass attributes apply to this element.www. <p:imageCompare leftImage=”xbox.com.

primefaces.component org.imagecropper.primefaces.component.ImageCropperRenderer org.component. imagecropper.ImageCropperTag org.tr 3. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class imageCropper org.primefaces.ImageCropper org. A new image is created containing the cropped area and assigned to a CroppedImage instanced on the server side.primefaces.www.37 ImageCropper ImageCropper allows cropping a certain region of an image.component.ImageCropperRenderer Attributes Name id Default Assigned by JSF Type String Description Unique identifier of the component 189 .component.component.primefaces.com.imagecropper.primefaces.prime.ImageCropper org.

Message to be displayed when validation fields. if immediate is set to false. it must refer to a converter id Boolean value that specifies the lifecycle phase the valueChangeEvents should be processed. Javascript variable name of the wrapped widget binding value converter null null null Object Object Converter/ String immediate FALSE boolean required validator valueChangeListener requiredMessage converterMessage validatorMessage image widgetVar FALSE null null null null null null null boolean MethodBindi ng ValueChang eListener String String String String String Getting started with the ImageCropper Image to be cropped is provided via the image attribute. when true the events will be fired at “apply request values”. valueChange Events are fired in “process validations” phase Marks component as required A method binding expression that refers to a method validationg the input A method binding expression that refers to a method for handling a valuchangeevent Message to be displayed when required field validation fails. Context relative path to the image. ImageCropper is an input component and the cropped area of the original image is used to create a new image.com.prime. Message to be displayed when conversion fails. this new image can be accessed on the server side jsf backing bean by setting the value attribute of the image cropper. In case itʼs a static text. itʼs resolved to a converter instance. An el expression that maps to a server side UIComponent instance in a backing bean Value of the component than can be either an EL expression of a literal text An el expression or a literal text that defines a converter for the component.tr Name rendered Default TRUE Type boolean Description Boolean value to specify the rendering of the component. when set to false component will not be rendered. 190 .www. When itʼs an EL expression.

} CroppedImage is a PrimeFaces api and contains handy information about the crop process.crop}” /> 191 .croppedImage = croppedImage.tr Assuming the image is at %WEBAPP_ROOT%/campnou.jpg <p:imageCropper value=”#{myBean. Following table describes CroppedImage properties.com. public CroppedImage getCroppedImage() { return croppedImage.www. an example that saves the cropped part to a folder in web server is described below. <p:imageCropper value=”#{myBean. Property originalFileName bytes left right width height Type String byte[] int int int int Description Name of the original file thatʼs cropped Contents of the cropped area as a byte array Left coordinate Right coordinate Width of the cropped image Height of the cropped image Probably most important property is the bytes since it contains the byte[] representation of the cropped area.jpg”> </p:imageCropper> <h:commandButton value=”Crop” action=”#{myBean. } } public void setCroppedImage(CroppedImage croppedImage) { this.prime.croppedImage}” image=”/campnou.jpg” /> public class MyBean { private CroppedImage croppedImage.croppedImage}” image=”/campnou.

prime.jpg”.tr public class ImageCropperBean { private CroppedImage croppedImage. } return null.getBytes(). try { imageOutput = new FileImageOutputStream(new File (newFileName)).com.write(croppedImage. imageOutput.separator + “ui” + File.close().printStackTrace().separator+ croppedImage.getExternalContext(). 192 .croppedImage = croppedImage. imageOutput. croppedImage. } public String crop() { ServletContext servletContext = (ServletContext) FacesContext.getBytes().png. } catch (IOException e) { e.getContext().printStackTrace(). 0.getOriginalFileName() + “cropped.tr/en/images/schema.length). } catch (FileNotFoundException e) { e. FileImageOutputStream imageOutput. public CroppedImage getCroppedImage() { return croppedImage.getRealPath(””) + File. <p:imageCropper value=”#{myBean. } } External Images ImageCropper has the ability to crop external images as well. String newFileName = servletContext.www. } public void setCroppedImage(CroppedImage croppedImage) { this. So to accomplish this simply just add slash (”/path/to/image.prime.separator + “barca” + File.com. Action url relative local images are not supported.getCurrentInstance().croppedImage}” image=”http://primefaces.png”) and imagecropper will recognize it at %WEBAPP_ROOT%/path/to/image. ImageCropper always requires the image path to be context relative.png”> </p:imageCropper> Context Relative Path For local images.

primefaces.imageswitch.component org.component.primefaces. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class imageSwitch org. when set to false component will not be rendered.38 ImageSwitch Imageswitch component is used to enable switching between a set of images with some nice effects.ImageSwitchRenderer org.prime. Starts slideshow automatically on page load.com. 193 binding effect speed slideshowSpeed slideshowAuto null null 500 3000 TRUE Object String int int boolean .primefaces.www.tr 3.imageswitch. Speed of the effect in milliseconds.ImageSwitch org.ImageSwitch org.primefaces. ImageSwitch also provides a simple client side api for flexibility.ImageSwitchTag org.ImageSwitchRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String boolean Description Unique identifier of the component Boolean value to specify the rendering of the component.imageswitch.component. Slideshow speed in milliseconds.primefaces.component. An el expression that maps to a server side UIComponent instance in a backing bean Name of the effect for transition.component.component.primefaces.

<span onclick=”imageswitch. <p:imageSwitch effect=”FlyIn” widgetVar=”imageswitch”> <p:graphicImage value=”/images/nature1. Manually starts a slideshow.tr Name style styleClass Default null null Type String String Description Style of the main container.previous().com. Provide the image collection as a set of children components.www.jpg” /> <p:graphicImage value=”/images/nature4. <p:imageSwitch effect=”FlipOut” speed=”150” widgetVar=”imageswitch” > //set of images </p:imageSwitch> 194 .prime.jpg” /> <p:graphicImage value=”/images/nature2. void stopSlideshow(). Effect Speed The speed is considered in terms of milliseconds and specified via the speed attribute.”>Previous</span> <span onclick=”imageswitch.jpg” /> <p:graphicImage value=”/images/nature3.next(). Description Switches to previous image.jpg” /> </p:imageSwitch> You need to use the ImageSwitch client side api to trigger the transitions. Use the widgetVar to get the variable name of the client side widget. Switches to next image. Getting started with ImageSwitch ImageSwitch component needs a set of images to display. Manually stops a slidehow.”>Next</span> Client Side API Method void previous() void next() void startSlideshow(). Example below uses two span elements to navigate between the images. Style class of the main container.

tr List of Effects ImageSwitch supports a wide range of transition effects.com.prime.www. note that values are case sensitive. • • • • • • • • • FadeIn FlyIn FlyOut FlipIn FlipOut ScrollIn ScrollOut SingleDoor DoubleDoor 195 . Following is the full list.

component.com.component.Inplace org.component.component. display element is the inital clickable label and inline element is the hidden content thatʼll be displayed when display element is toggled. Javascript variable name of the client side object.inplace. Speed of the effect.inplace.primefaces.primefaces. Effect to be used when toggling.primefaces.prime.inplace. Inplace consists of two members.39 Inplace Inplace provides easy inplace editing and inline content display. when set to false component will not be rendered.primefaces.component org.component. An el expression that maps to a server side UIComponent instance in a backing bean Label to be shown in display mode.primefaces. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class inplace org.www.InplaceTag org.Inplace org.tr 3. Prevents hidden content to be shown. binding label effect effectSpeed disabled widgetVar null null fade normal FALSE null Object String String String boolean String 196 .primefaces.InplaceRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String boolean Description Unique identifier of the component Boolean value to specify the rendering of the component.InplaceRenderer org.

pf-inplace-display-disabled .www. <h:outputText value=”Select One” /> <p:inplace label=”Cities”> <h:selectOneMenu> <f:selectItem itemLabel=”Istanbul” itemValue=”Istanbul” /> <f:selectItem itemLabel=”Ankara” itemValue=”Ankara” /> </h:selectOneMenu> </p:inplace> Effects Default effect is fadeIn and fadeOut meaning display element will fadeOut and inline content will be shown with fadeOut effect. Inline content.tr Getting started with Inplace The inline component needs to be a child of inplace.com.prime. ʻnormalʼ and ʻfastʼ. also effect speed can be tuned with values ʻslowʼ.pf-inplace-content Applies Display element when hovered. Other possible effect is ʻslideʼ.jpg” /> </p:inplace> Skinning Inplace Style Class . you can customize it via the label attribute. 197 . Disabled display element.pf-inplace-display .pf-inplace-highlight . Display element. <p:inplace label=”Show Image” effect=”slide” effectSpeed=”fast”> <p:graphicImage value=”/images/nature1. <p:inplace> <h:inputText value=”Edit me” /> </p:inplace> Custom Labels By default inplace displays itʼs first childs value as the label.

Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class inputMask org.InputMask org.primefaces.primefaces.primefaces.component.component org. when set to false component will not be rendered.inputmask.40 InputMask InputMask forces an input to fit in a defined mask template. Value of the component than can be either an EL expression of a literal text binding mask placeHolder value null null null null Object Integer String Object 198 .primefaces.InputMaskRenderer org.InputMaskTag org.InputMask org.primefaces.com.inputmask.component.InputMask Attributes Name id Default Assigne d by JSF TRUE Type String Description Unique identifier of the component rendered boolean Boolean value to specify the rendering of the component.component.tr 3. An el expression that maps to a server side UIComponent instance in a backing bean Mask template PlaceHolder in mask template.component.component.www.primefaces.prime.inputmask.

tr Name converter Default null Type Converter/ String Description An el expression or a literal text that defines a converter for the component.com. When itʼs an EL expression. Html accesskey attribute Html alt attribute Html dir attribute Html disabled attribute Html lang attribute Html maxlength attribute Html onblur attribute Html onchange attribute Html onclick attribute Html ondblclick attribute Html onfocus attribute Html onkeydown attribute Html onkeypress attribute immediate FALSE boolean required validator valueChangeL istener requiredMess age converterMess age validatorMess age accesskey alt dir disabled lang maxlength onblur onchange onclick ondblclick onfocus onkeydown onkeypress FALSE null null null null null null null null FALSE null null null null null null null null null boolean MethodBinding ValueChangeLi stener String String String String String String Boolean String Integer String String String String String String String 199 . In case itʼs a static text. Message to be displayed when conversion fails. valueChange Events are fired in “process validations” phase Marks component as required A method binding expression that refers to a method validationg the input A method binding expression that refers to a method for handling a valuchangeevent Message to be displayed when required field validation fails. when true the events will be fired at “apply request values”. if immediate is set to false. itʼs resolved to a converter instance. it must refer to a converter id Boolean value that specifies the lifecycle phase the valueChangeEvents should be processed.www. Message to be displayed when validation fields.prime.

prime.ssn}” mask=”999-99-9999”/> <h:outputText value=”Product Key: “ /> <p:inputMask value=”#{maskController. <p:inputMask value=”#{bean.productKey}” mask=”a*-999-a999”/> 200 .phoneExt}” mask=”(999) 999-9999? x99999”/> <h:outputText value=”SSN: “ /> <p:inputMask value=”#{maskController.phone}” mask=”(999) 999-9999”/> <h:outputText value=”Phone with Ext: “ /> <p:inputMask value=”#{maskController.com.field}” mask=”99/99/9999” /> Mask Examples <h:outputText value=”Phone: “ /> <p:inputMask value=”#{maskController.tr Name onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup readonly size style styleClass tabindex title Default null null null null null null FALSE null null null null null Type String String String String String String Boolean Integer String String Integer String Description Html onkeyup attribute Html onmousedown attribute Html onmousemove attribute Html onmouseout attribute Html onmouseover attribute Html onmouseup attribute Html readonly attribute Html size attribute Html style attribute Html styleClass attribute Html tabindex attribute Html title attribute Getting Started with InputMask InputMask is actually an extended h:inputText and usage is very similar.www. InputMask below enforces input to be in 99/99/9999 date format.

component.primefaces.com. Important features are the customizable layouts and skinning capabilities.Keyboard org.keyboard.component. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class keyboard org.KeyboardRenderer org. An el expression that maps to a server side UIComponent instance in a backing bean Value of the component than can be either an EL expression of a literal text binding value null null Object Object 201 .prime.component.component org.keyboard.tr 3.primefaces.primefaces.41 Keyboard Keyboard is an input component that uses a virtual keyboard to provide the input.primefaces.www.component.component.primefaces.KeyboardRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String boolean Description Unique identifier of the component Boolean value to specify the rendering of the component.keyboard.primefaces. when set to false component will not be rendered.KeyboardTag org.Keyboard org.

When itʼs an EL expression.www. Message to be displayed when validation fields. when true the events will be fired at “apply request values”. it must refer to a converter id Boolean value that specifies the lifecycle phase the valueChangeEvents should be processed.com. if immediate is set to false. Message to be displayed when conversion fails. valueChange Events are fired in “process validations” phase Marks component as required A method binding expression that refers to a method validationg the input A method binding expression that refers to a method for handling a valuchangeevent Message to be displayed when required field validation fails.prime. In case itʼs a static text. itʼs resolved to a converter instance.tr Name converter Default null Type Converter /String Description An el expression or a literal text that defines a converter for the component. Html accesskey attribute Html alt attribute Html dir attribute Html disabled attribute Html lang attribute Html maxlength attribute Html onblur attribute Html onchange attribute Html onclick attribute Html ondblclick attribute Html onfocus attribute Html onkeydown attribute Html onkeypress attribute Html onkeyup attribute 202 immediate FALSE boolean required validator valueChangeListe ner requiredMessage converterMessage validatorMessage accesskey alt dir disabled lang maxlength onblur onchange onclick ondblclick onfocus onkeydown onkeypress onkeyup FALSE null null boolean MethodBi nding ValueCha ngeListen er String String String String String String Boolean String Integer String String String String String String String String null null null null null null FALSE null null null null null null null null null null .

Label of the close key.tr Name onmousedown onmousemove onmouseout onmouseover onmouseup readonly size style styleClass tabindex title password showMode buttonImage buttonImageOnly effect effectDuration layout layoutTemplate keypadOnly promptLabel closeLabel clearLabel backspaceLabel Default null null null null null FALSE null null null null null FALSE focus null FALSE fadeIn null qwerty null focus null null null null Type String String String String String Boolean Integer String String Integer String boolean String String boolean String String String String boolean String String String String Description Html onmousedown attribute Html onmousemove attribute Html onmouseout attribute Html onmouseover attribute Html onmouseup attribute Html readonly attribute Html size attribute Html style attribute Html styleClass attribute Html tabindex attribute Html title attribute Makes the input a password field. ʻbuttonʼ. Template of the custom layout. Label of the backspace key. Label of the prompt text. ʻfocusʼ. When set to true only image of the button would be displayed. 203 . Length of the display animation.www. by default when the input gets the focus a keyboard is displayed. Effect of the display animation. Specifies displaying a keypad instead of a keyboard. Specifies the showMode.prime. Built-in layout of the keyboard. Getting Started with Keyboard Keyboard is used just like a simple inputText. ʻbothʼ Image for the button.com. Label of the clear key.

faces-clear. <p:keyboard value=”#{bean.value}” layout=”custom” layoutTemplate=”create-space-your-close. ʻqwertyBasicʼ and ʻalphabeticʼ.rocks-close”/> Another example.value}” layout=”alphabetic”/> Custom Layouts Keyboard has a very flexible layout mechanism allowing you to come up with your own layout.tr <p:keyboard value=”#{bean.prime.www.owntemplate-shift.com.easily-spacespacebar”/> 204 . For example keyboard below has the alphabetic layout. <p:keyboard value=”#{bean. <p:keyboard value=”#{bean.value}” layout=”custom” layoutTemplate=”prime-back.value}” /> Built-in Layouts Thereʼre a couple of built-in keyboard layouts these are ʻqwertyʼ.

when the button is clicked the keyboard is shown. ʻbothʼ. Keyboard below displays a button next to the input field.tr A layout template consists of built-in keys and your own keys.prime. 205 . • • • • • • • back clear close shift spacebar space halfspace All other text in a layout is realized as seperate keys so “prime” would create 5 keys as “p” “r” “i” “m” “e”.com. by default keyboard is shown once input field receives the focus. This is customized using the showMode feature which accept values ʻfocusʼ.www. if you only need the numbers use the keypad mode. <p:keyboard value=”#{bean. Keypad By default keyboard displays whole keys. <p:keyboard value=”#{bean. ʻbuttonʼ. Use dash to seperate each member in layout and use commas to create a new row.value}” /> ShowMode Thereʼre a couple of different ways to display the keyboard. Following is the list of all built-in keys.value}” showMode=”button”/> Button can also be customized using the buttonImage and buttonImageOnly attributes.

border: 1px solid #CCCCFF.png” buttonImageOnly=”true”/> Skinning Keyboard Skinning keyboard is achieved with CSS.com. } .aqua . Following are three different skinning examples. border: 1px solid #CCCCFF. } . color: #FFFFFF. -webkit-border-radius: 4px. -moz-border-radius: 4px.aqua . Aqua <p:keyboard value=”#{bean.keypad-clear { letter-spacing: -3px.keypad-key { width: 20px.aqua . -webkit-border-radius: 4px.value}” styleClass=”aqua”/> #keypad-div.prime.aqua { background: #6699CC.keypad-space { width: 20px.value}” buttonImage=”key.keypad-key-down { background: #8c8. } . -moz-border-radius: 4px. .tr <p:keyboard value=”#{bean.www. background: #99CCFF.aqua } . } 206 .

value}” styleClass=”homebrew”/> #keypad-div. border: 1px solid #CCCCFF.tr Homebrew <p:keyboard value=”#{bean.homebrew { background: #333333. } .keypad-space { width: 20px.homebrew .keypad-key-down { background: #8c8.homebrew . background: #33CC00. } .homebrew . color: #000.prime.keypad-key { width: 20px.com.homebrew . -moz-border-radius: 4px. } .keypad-clear { letter-spacing: -3px.www. border: 1px solid #CCCCFF. -webkit-border-radius: 4px. } 207 . } . -webkit-border-radius: 4px. -moz-border-radius: 4px.

} . } 208 .brownie { background: #330000. } .brownie . border: 1px solid #CCCCFF. -webkit-border-radius: 4px.tr Brownie <p:keyboard value=”#{bean.keypad-key-down { background: #8c8.value}” styleClass=”brownie”/> #keypad-div. -moz-border-radius: 4px.www.com. } . border: 1px solid #CCCCFF.keypad-clear { letter-spacing: -3px.keypad-key { width: 20px.brownie . -moz-border-radius: 4px.brownie . -webkit-border-radius: 4px. color: #000. background: #FFFFFF.brownie .prime.keypad-space { width: 20px. } .

42 Layout Layout component features a highly customizable borderLayout model making it very easy to create complex layouts even if youʼre not familar with web design.LayoutTag org.layout.layout.component.Layout org.LayoutRenderer Attributes Name id Default Assigned by JSF Type String Description Unique identifier of the component 209 .prime.primefaces.com.component.layout.component org.primefaces.primefaces.Layout org.component.primefaces.primefaces.LayoutRenderer org.primefaces. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class layout org.www.tr 3.component.component.

Title label for the close button of closable units.com. Title label for the expand button of closable units. this is only applicable to element based layouts.prime. An el expression that maps to a server side UIComponent instance in a backing bean Name of the client side widget. A server side listener to process a ResizeEvent Components to partially update with ajax after resizeListener is processed and unit is resized. A server side listener to process a CloseEvent Components to partially update with ajax after closeListener is processed and unit is closed.www. Client side callback for completed toggle Client side callback for completed close Client side callback for completed toggle binding widgetVar fullPage style styleClass closeTitle collapseTitle expandTitle closeListener onCloseUpdate null null FALSE null null null null null null null Object String Boolean String String String String String MethodExpres sion String toggleListener onToggleUpdate null null MethodExpres sion String resizeListener onResizeUpdate null null MethodExpres sion String onToggleComplete onCloseComplete onResizeComplete null null null String String String 210 . Style to apply to container element. A server side listener to process a ToggleEvent Components to partially update with ajax after toggleListener is processed and unit is toggled.tr Name rendered Default TRUE Type Boolean Description Boolean value to specify the rendering of the component. Specifies whether layout should span all page or not. Title label for the collapse button of collapsible units. Style class to apply to container element. this is only applicable to element based layouts. when set to false component will not be rendered.

Note that you can place any content in each layout unit.tr Getting started with Layout Layout is based on a borderLayout model that consists of 5 different layout units which are top. This model is visualized in the schema below. you can either use it for a full page layout or for a specific region in your page.” /> </p:layoutUnit> <p:layoutUnit position=”bottom” header=”BOTTOM” height=”100”> <h:outputText value=”Bottom content.prime.” /> </p:layoutUnit> <p:layoutUnit position=”left” header=”LEFT” width=”300”> <h:outputText value=”Left content” /> </p:layoutUnit> <p:layoutUnit position=”right” header=”RIGHT” width=”200”> <h:outputText value=”Right Content” /> </p:layoutUnit> <p:layoutUnit position=”center” header=”CENTER”> <h:outputText value=”Center Content” /> </p:layoutUnit> </p:layout> 211 . The regions in a layout are defined by layoutUnits. following is a simple full page layout with all possible units. center. Full Page Layout Layout has two modes. <p:layout fullPage=”true”> <p:layoutUnit position=”top” header=”TOP” height=”50”> <h:outputText value=”Top content. This setting is controlled with the fullPage attribute which is false by default. left.com. right and bottom.www.

So following is invalid.tr Forms in Full Page Layout When working with forms and full page layout. <p:layout fullPage=”true”> <h:form> <p:layoutUnit position=”left” width=”100”> h:outputText value=”Left Pane” /> </p:layoutUnit> <p:layoutUnit position=”center”> <h:outputText value=”Right Pane” /> </p:layoutUnit> </h:form> </p:layout> A layout unit must have itʼs own form instead. For top and bottom units use height attribute whereas for left and right units width attribute applies. avoid using a form that contains layoutunits as generated dom will not be the same.www. other layout units must have dimensions defined. Dimensions Except center layoutUnit. 212 .prime.com.

prime. ToggleListener and onToggleUpdate Ajax toggle listener is invoked with a toggle event whenever a toggleable layout unit is collapsed or expanded.com. This is the default case actually so just ignore fullPage attribute or set it to false. This is very useful if youʼd like to keep the state of the layout by persisting usersʼ preferences. ToggleEvent.height:200px”> <p:layoutUnit position=”left” width=”100”> <h:outputText value=”Left Pane” /> </p:layoutUnit> <p:layoutUnit position=”center”> <h:outputText value=”Right Pane” /> </p:layoutUnit> </p:layout> Responding to Events Layout can respond to toggle. Note: At least one form needs to be present on page to use ajax listeners. close and resize events. <p:layout style=”width:400px. Optionally other components on page can be updated with ajax using onToggleUpdate attribute. Layout example below demonstrates creating a split panel implementation. 213 .tr Element based layout Another use case of layout is the element based layout.www. by binding ajax listeners to these events you can have your custom logic processed easily.

VISIBLE or HIDDEN. Optionally other components on page can be updated with ajax using onCloseUpdate attribute. } 214 .handleToggle}” onToggleUpdate=”messages”> //Content </p:layout> <p:growl id=”messages” /> public class LayoutBean { public void handleClose(ToggleEvent event) { LayoutUnit toggledUnit = event.www. org. <p:layout closeListener=”#{layoutBean..Visibility instance. Visibility status = event.getComponent()..com.getComponent().getVisibility().handleClose}” onCloseListener=”messages”> //Content </p:layout> <p:growl id=”messages” /> public void handleClose(CloseEvent event) { LayoutUnit closedUnit = event.prime. CloseListener and onCloseUpdate Ajax close listener is invoked with a close event whenever a closable layout unit is closed.primefaces. CloseEvent. } } //.ToggleEvent API Method getComponent() getVisibility() Description Toggled layout unit instance org.event.primefaces..model.tr <p:layout toggleListener=”#{layoutBean. //. this is an enum with two values.

www.primefaces. By binding this persisted information to the collapsed attribute of the layout unit layout will be rendered as the user left it last time.prime.com. Similarly visible.getComponent(). //. 215 .event. once you create your data to store the user preference. For example if a layout unit is collapsed...primefaces. ResizeListener and onResizeUpdate Ajax resize listener is invoked with a resize event whenever a resizable layout unit is resized.ResizeEvent Method getComponent() getWidth() getHeight() Description Resized layout unit instance New width in pixels New height in pixels Stateful Layout Making layout stateful would be easy. } org. width and height attributes can be preconfigures using same approach.event. <p:layout resizeListener=”#{layoutBean.tr org. Optionally other components on page can be updated with ajax using onResizeUpdate attribute. you can save and persist this information. you can update this data using ajax event listeners provided by layout.handleResize}” onResizeUpdate=”messages”> //Content </p:layout> <p:growl id=”messages” /> public void handleResize(CloseEvent event) { LayoutUnit resizedUnit = event.CloseEvent Method getComponent() Description Closed layout unit instance ResizeEvent.

com.ui-layout-unit .ui-layout-doc .ui-layout-unit-{position} .prime.ui-layout . Here is an example based on a different theme.ui-layout-bd Applies Main wrapper container element Layout container Each layout unit container Position based layout unit Wrapper of a layoutunit Layout unit header Layout unit body As skinning style classes are global.tr Skinning Following is the list of structural style classes.ui-layout-wrap . see the main Skinning section for more information.ui-layout-hd . Style Class . 216 .www.

applies to top and center units.www.layout.primefaces.prime. Minimum dimension of width in resizing Maximum dimension of width in resizing 217 binding position width height resizable closable collapsible scrollable header footer minWidth maxWidth null null null null FALSE FALSE FALSE FALSE null null null null Object String Integer Integer Boolean Boolean Boolean Boolean String String Integer Integer .LayoutUnitTag org. Text of footer.tr 3.primefaces.43 LayoutUnit LayoutUnit represents a region in the border layout model of the Layout component. Makes the unit closable. Text of header. when set to false component will not be rendered. Makes the unit resizable. Makes the unit scrollable. Width of the unit in pixels.layout. Makes the unit collapsible.primefaces.LayoutUnit org.component Attributes Name id Default Assigne d by JSF TRUE Type String Description Unique identifier of the component rendered boolean Boolean value to specify the rendering of the component. Info Tag Tag Class Component Class Component Type Component Family layoutUnit org.component.primefaces. Height of the unit in pixels. applies to left and right units.component. An el expression that maps to a server side UIComponent instance in a backing bean Position of the unit.LayoutUnit org.component.com.

zindex property to control overlapping with other components Specifies default visibility Specifies toggle status of unit Specifies resize preview mode Size of the unit when collapsed Getting started with LayoutUnit See layout component documentation for more information regarding the usage of layoutUnits.prime.tr Name minHeight maxHeight gutter zindex visible collapsed proxyResize collapseSize Default null null 4px null TRUE FALSE TRUE null Type Integer Integer String Integer Boolean Boolean Boolean Integer Description Minimum dimension of height in resizing Maximum dimension of height in resizing Gutter size of layout unit. 218 .www.com.

tr 3.LightBoxRenderer org.LightBox org.primefaces. 219 .www.prime. multimedia content.component. when set to false component will not be rendered.lightbox.primefaces.primefaces.component lightbox. other JSF components and external urls.LightBoxRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String boolean Description Unique identifier of the component Boolean value to specify the rendering of the component.com.component.primefaces. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class lightBox org.44 LightBox Lightbox features a powerful overlay that can display images.component.lightbox.primefaces.primefaces.component.LightBox org.LightBoxTag org.component org.

www. When true clicking outside of overlay will close lightbox. Javascript variable name of the client side widget Name of the transition effect.tr Name binding style styleClass widgetVar transition speed width heigth iframe opacity visible slideshow slideshowSpeed slideshowStartText slideshowStopText slideshowAuto currentTemplate overlayClose group Default null null null null elastic 350 null null FALSE 0. Specifies an iframe to display an external url in overlay.'fade' and 'none'. Label of slideshow start text.prime. Displays lightbox without requiring any user interaction by default. Following lightBox is displayed when any of the links are clicked. Style class of the container element not the overlay element. by default children belong to same group and switching is enabled. Displays lightbox without requiring any user interaction by default. Default is “{current} of {total}”. Width of the overlay. Height of the overlay. Label of slideshow stop text.85 FALSE FALSE 2500 null null TRUE null TRUE TRUE Type Object String String String String int String String boolean double boolean boolean int String String boolean String boolean boolean Description An el expression that maps to a server side UIComponent instance in a backing bean Style of the container element not the overlay element. Valid values are 'elastic'. Level of overlay opacity between 0 and 1. Images The images displayed in the lightBox need to be nested as child outputLink components. Speed for slideshow in milliseconds. Text template for current image display like “1 of 3”. Defines grouping.com. Starts slideshow automatically. 220 . Speed of the transition effect in milliseconds.

jpg” title=”Sopranos <h:graphicImage value=”sopranos/sopranos4_small.prime. IFrame Mode LightBox also has the ability to display iframes inside the page overlay.jpg” title=”Sopranos <h:graphicImage value=”sopranos/sopranos3_small.jpg” title=”Sopranos <h:graphicImage value=”sopranos/sopranos1_small. following lightbox displays the PrimeFaces homepage when the link inside is clicked.jpg /> </h:outputLink> <h:outputLink value=”sopranos/sopranos3.jpg” title=”Sopranos <h:graphicImage value=”sopranos/sopranos2_small.com.tr <p:lightBox> <h:outputLink value=”sopranos/sopranos1. 221 .www.jpg/> </h:outputLink> <h:outputLink value=”sopranos/sopranos2.jpg/> </h:outputLink> <h:outputLink value=”sopranos/sopranos4.jpg/> </h:outputLink> </p:lightBox> 1”> 2”> 3”> 4”> Output of this lightbox is.

Simply place your overlay content in the “inline” facet..org” title=”PrimeFaces HomePage”> <h:outputText value=”PrimeFaces HomePage”/> </h:outputLink> </p:lightBox> Clicking the outputLink will display PrimeFaces homepage within an iframe.prime.www.tr <p:lightBox iframe=”true” width=”80%” height=”80%”> <h:outputLink value=”http://www.jpg” /> <h:outputText style=”color:#FFFFFF” value=”Messi is an unusual player.com..primefaces. Inline Mode Inline mode acts like a modal panel. Clicking the link in the example below will display the panelGrid contents in overlay. <p:lightBox width=”50%” height=”50%”> <h:outputLink value=”#” title=”Leo Messi” > <h:outputText value=”The Messiah”/> </h:outputLink> <f:facet name=”inline”> <h:panelGrid columns=”2”> <h:graphicImage value=”barca/messi. you can display other JSF content on the page using the lightbox overlay..” /> </h:panelGrid> </f:facet> </p:lightBox> 222 ...

jpg” title=”Sopranos 2”> <h:graphicImage value=”sopranos/sopranos2_small. turn slideshow setting to true. 223 . <p:lightBox slideshow=”true” slideshowSpeed=”2000” slideshowStartText=”Start” slideshowStopText=”Stop”> <h:outputLink value=”sopranos/sopranos1.jpg” title=”Sopranos 1”> <h:graphicImage value=”sopranos/sopranos1_small. SlideShow If you want to use lightbox images as a slideshow.www.jpg /> </h:outputLink> </p:lightBox> DOCTYPE If lightbox is not working. These classes do not effect the overlay.jpg/> </h:outputLink> <h:outputLink value=”sopranos/sopranos2.com.prime. Thereʼll be more customization options for skinning the overlay and built-in themes in future releases. it may be due to lack of DOCTYPE declaration.tr Skinning LightBox style and styleClass attributes effect the parent dom element containing the outputLink components.

www.”_parent”. Html anchor target attribute.45 LinkButton LinkButton is a goButton implementation that is used to redirect to a URL.prime. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class linkButton org.LinkButtonRenderer org.component. valid values are “_blank”. An el expression that maps to a server side UIComponent instance in a backing bean Label for the link button An el expression or a literal text that defines a converter for the component.linkbutton.primefaces.LinkButton org.LinkButton org.primefaces.LinkButtonTag org.”_top”. it must refer to a converter id Id for the button object defined as a YUI button for to be accessed outside.primefaces.tr 3. When itʼs an EL expression.LinkButtonRenderer Attributes Name id rendered Default Assigned by JSF TRUE String Boolean Type Description Unique identifier of the component Boolean value to specify the rendering of the component. Href value for the link button used for navigating.linkbutton.linkbutton.component org.component. itʼs resolved to a converter instance.component.primefaces. In case itʼs a static text.component. when set to false component will not be rendered.”_self” 224 binding value converter null null null Object String Converter/String widgetVar href target null null null String String String .com.primefaces.primefaces.component.

fcbarcelona.com.prime. <p:linkButton value=”Barca” href=”http://www.tr Name style styleClass onblur onchange onclick ondblclick onfocus onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup onselect Default null null null null null null null null null null null null null null null null String String String String String String String String String String String String String String String String Type Description Style to be applied on the button element StyleClass to be applied on the button element onblur dom event handler onchange dom event handler onclick dom event handler ondblclick dom event handler onfocus dom event handler onkeydown dom event handler onkeypress dom event handler onkeyup dom event handler onmousedown dom event handler onmousemove dom event handler onmouseout dom event handler onmouseover dom event handler onmouseup dom event handler onselect dom event handler Getting started with LinkButton LinkButton component requires a link(href) to navigate. 225 .www. Here is an example based on a different theme.com” /> Skinning LinkButton Please check commandButton component for styling link button.

www. Media source to play. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class media org.”windows”. StyleClass of the player.Media org. Height of the player.component. when set to false component will not be rendered.component. Width of the player.primefaces.component.tr 3.component org.com.MediaRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String boolean Description Unique identifier of the component.primefaces. Type of the player.primefaces.MediaTag org.component.media.46 Media Media component is used for embedding multimedia content such as videos and music to JSF views.media.media.”real”. An el expression that maps to a server side UIComponent instance in a backing bean.primefaces.Media org. Media renders <object /> or <embed /> html tags depending on the user client. binding value player width height style styleClass null null null null null null null Object String String String String String String 226 . possible values are “quicktime”.primefaces.component.primefaces.MediaRenderer org.prime.”flash”. Boolean value to specify the rendering of the component. Style of the player.

<p:media value=”/media/ria_with_primefaces. qti.tr Getting started with Media In itʼs simplest form media component requires a source to play. mid. ram. tiff. swf ra. <p:media value=”http://www. <p:media value=”/media/ria_with_primefaces. tif.com/v/ABCDEFGH” player=”flash”/> Following is the supported players and file types. m4a. rpm.mov”> <f:param name=”param1” value=”value1” /> <f:param name=”param2” value=”value2” /> </p:media> Types asx. mp4. mp3. smil StreamedContent Support Media component can also play binary media content. wma. rv.prime. rm. aac. example for this use case is storing media files in datatabase using binary format. bmp. snd. aiff. asf. You can customize which player to use with the player attribute. In order to implement this. qtif. psd. gsm. midi. mpg. mpeg. 3g2. avi.youtube.mov” /> Player Types By default. 227 .www. wmv aif. these can be specified using f:param tags. qt. wav. this is defined using the value attribute. 3pg flv. players are identified using the value extension so for instance mov files will be played by quicktime player. create a StreamedContent and set it as the value of media. smi. au. Player windows quicktime flash real Parameters Different proprietary players might have different configuration parameters. qif.com. mov.

primefaces. public class MediaController { private StreamedContent media.tr <p:media value=”#{mediaBean.www.model.io. “video/quicktime”). import org.media}” width=”250” height=”225” player=”quicktime”/> import java. } } public StreamedContent getMedia() { return media.primefaces.DefaultStreamedContent.StreamedContent. } 228 .model.com.prime. public MediaController() { InputStream stream = //Create binary stream from database media = new DefaultStreamedContent(stream.InputStream. import org.

MenuRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String Boolean Description Unique identifier of the component.primefaces.primefaces.component org.com.Menu org. binding visible null FALSE Object Boolean 229 . An el expression that maps to a server side UIComponent instance in a backing bean.primefaces.component.component.primefaces. when set to false component will not be rendered.MenuRenderer org.primefaces.primefaces.Menu org. Only applicable to dynamic positioned menus.www.component. Sets menuʼs visibility. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class menu org.prime.menu.47 Menu Menu is a navigation component with various customized modes like multi tiers.menu.component.component.tr 3.MenuTag org. Boolean value to specify the rendering of the component.menu. overlay and nested menus.

default value is FADE. Default value is “static”. “NONE”. Sets the effect duration in seconds. Possible values are “FADE”. constraintToViewPort TRUE FALSE position static String clickToHide TRUE Boolean keepOpen tiered effect FALSE FALSE FADE Boolean Boolean String effectDuration autoSubmenuDisplay showDelay hideDelay submenuHideDelay context style 0. Sets the duration in milliseconds before a submenu is displayed. Only applicable to dynamic positioned menus. Only applicable to dynamic positioned menus.prime.tr Name x y fixedCenter Default null null FALSE Type Integer Integer Boolean Description Sets the menuʼs left absolute coordinate. Sets the duration in milliseconds before a menu is hidden. “SLIDE”. Sets the menuʼs top absolute coordinate. Use “NONE” to disable animation at all. When set to true. Style of the main container element. Boolean value that specifies whether the component should be automatically centered in the viewport on window scroll and resize. submenus are displayed on mouseover of a menuitem. when “static” menu is displayed in the normal flow. Only applicable to dynamic positioned menus. Sets the duration in milliseconds before a submenu is hidden. Sets the behavior when outside of the menu is clicked. when set to “dynamic” menu is not on the normal flow allowing overlaying. Boolean indicating if the Menu will try to remain inside the boundaries of the size of viewport. Sets the effect for the menu display. Only applicable to dynamic positioned menus. Sets the behavior when the menu is clicked. Sets the tiered mode.25 TRUE 250 0 250 null null Double Boolean Integer Integer Integer String String 230 . Sets the way menu is placed on the page. Position of the menu.com. Only applicable to dynamic positioned menus.www. Only applicable to dynamic positioned menus. when set to true menu will be rendered in different tiers.

this way menu would be positioned at the center of page.com” /> </p:submenu> <p:submenu label=”Videos”> <p:menuitem value=”Youtube” url=”http://www.com” /> </p:submenu> </p:menu> Dynamic Positioning Menu can be positioned on a page in two ways.com” /> <p:menuitem value=”MySpace” url=”http://www. MenuModel instance to create menus programmatically Getting started with the Menu A menu is composed of submenus and menuitems. By default itʼs static meaning the menu is in normal page flow. A dynamic menu is not visible by default and show()/hide() client side api is used to change the visibility of menu.com. In contrast dynamic menus is not on the normal flow of the page allowing overlaying of other elements.prime.www.com” /> <p:menuitem value=”Break” url=”http://www.yahoo. X and Y attributes defined the top and left coordinates of the menu.com” /> <p:menuitem value=”Yahoo Mail” url=”http://mail.y. 231 . Javascript variable name of the wrapped widget. fixedCenter or context attributes.com” /> </p:submenu> <p:submenu label=”Social Networks”> <p:menuitem value=”Facebook” url=”http://www. Another alternative is by setting fixedCenter to true. A dynamic menu can be positioned on the page using the x.metacafe.com” /> <p:menuitem value=”Metacafe” url=”http://www.hotmail. <p:menu> <p:submenu label=”Mail”> <p:menuitem value=”Gmail” url=”http://www.break. zindex property to control overlapping with other elements.google.myspace. “static” and “dynamic”.youtube.facebook.com” /> <p:menuitem value=”Hotmail” url=”http://www.tr Name styleClass zindex widgetVar model Default null null null null Type String Integer String MenuModel Description Style class of the main container element.

com.save}” update=”comp”/> <p:menuitem value=”Update” actionListener=”#{bean.. it is easy to invoke actions with or without ajax.submenus and menuitems </p:menu> Ajax and Non-Ajax Actions As menu uses menuitems..hide()”>Hide</a> MultiTiered Menus By default each submenu is displayed at a single tier. See menuitem documentation for more information about the capabilities. This animation is customizable using attributes like effect.submenus and menuitems </p:menu> <a href=”#” onclick=”myMenu.tr <p:menu position=”dynamic” widgetVar=”myMenu”> ... <p:menu tiered=”true”> . tiered attribute needs to set to true to enable this features. Full list is described at the attributes table. menu also supports nested submenus. <p:menu> <p:submenu label=”Options”> <p:menuitem value=”Save” actionListener=”#{bean.update}” ajax=”false”/> </p:submenu> </p:menu> Effects Menu has a built-in animation to use when displaying&hiding itself and itʼs submenus.show()”>Show</a> <a href=”#” onclick=”myMenu.prime. showDelay and more.www. effectDuration. 232 .

item.Submenu.primefaces. item = new MenuItem(). submenu.setUrl("#").model}” /> import org.model. //First submenu Submenu submenu = new Submenu(). item. <p:menu model=”#{menuBean. public } MenuBean() { model = new DefaultMenuModel(). submenu.1"). public class MenuBean { } private MenuModel model.component.com. item.add(item). model.model.addSubmenu(submenu).setUrl("#").primefaces.primefaces.DefaultMenuModel implementation. this is much more flexible compared to the declarative approach.getChildren(). model.setValue("Dynamic Menuitem 1.2"). item = new MenuItem().MenuItem.add(item).primefaces. submenu.addSubmenu(submenu). MenuItem item = new MenuItem().MenuModel.prime.primefaces.DefaultMenuModel. PrimeFaces provides the built-in org. Menu metadata is defined using an org. import org.setLabel("Dynamic Submenu 1").getChildren().model. submenu. public MenuModel getModel() { return model.getChildren(). For further customization you can also create and bind your own MenuModel implementation.menuitem. item.setValue("Dynamic Menuitem 2. import org. item.1").setValue("Dynamic Menuitem 2.tr Dynamic Menus Menus can be created programmatically as well.setUrl("#").setLabel("Dynamic Submenu 2").component. import org. submenu.MenuModel instance. } 233 .primefaces.submenu.model. item.www.add(item). //Second submenu submenu = new Submenu().

see the main Skinning section for more information.tr Skinning Menu resides in a main div container which style and styleClass attributes apply.ui-menu-item-label Applies Container element of menu Each menu item Each menu item label As skinning style classes are global.ui-menu . Style Class .ui-menu-item . Here is an example based on a different theme.prime.www.com. 234 . Following is the list of structural style classes.

component. when set to false component will not be rendered.tr 3. Name of the client side widget MenuModel instance to create menus programmatically binding effect effectDuration autoSubmenuDisplay zindex widgetVar model null FADE 0.MenubarRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String Boolean Description Unique identifier of the component. When set to true.primefaces. zindex property to control overlapping with other elements.component.48 Menubar Menubar is a horizontal navigation component. An el expression that maps to a server side UIComponent instance in a backing bean.component.component.menubar. submenus are displayed on mouseover of a menuitem. Sets the effect for the menu display.primefaces.MenubarTag org.25 FALSE null null null Object String Double Boolean Integer String MenuModel 235 . Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class menubar org.prime.primefaces.www.component.component org. Sets the effect duration in seconds.primefaces.Menubar org.menubar.com.primefaces. Boolean value to specify the rendering of the component.primefaces.menubar.Menubar org.MenubarRenderer org.

hotmail.com” /> </p:submenu> <p:submenu label=”Videos”> <p:menuitem value=”Youtube” url=”http://www.com” /> <p:menuitem value=”Hotmail” url=”http://www.com.youtube.com” /> <p:menuitem value=”Yahoo Mail” url=”http://mail.google.yahoo.prime. <p:menubar> <p:submenu label=”Mail”> <p:menuitem value=”Gmail” url=”http://www.break.com” /> <p:menuitem value=”Break” url=”http://www.www. <p:menubar> <p:submenu label=”File”> <p:submenu label=”New”> <p:menuitem value=”Project” url=”#”/> <p:menuitem value=”Other” url=”#”/> </p:submenu> <p:menuitem value=”Open” url=”#”></p:menuitem> <p:menuitem value=”Quit” url=”#”></p:menuitem> </p:submenu> <p:submenu label=”Edit”> <p:menuitem value=”Undo” url=”#”></p:menuitem> <p:menuitem value=”Redo” url=”#”></p:menuitem> </p:submenu> <p:submenu label=”Help”> <p:menuitem label=”Contents” url=”#” /> <p:submenu label=”Search”> <p:submenu label=”Text”> <p:menuitem value=”Workspace” url=”#” /> </p:submenu> <p:menuitem value=”File” url=”#” /> </p:submenu> </p:submenu> </p:menubar> 236 .tr Getting started with Menubar Submenus and menuitems as child components are required to compose the menubar. nest submenus in parent submenus.com” /> </p:submenu> </p:menubar> Nested Menus To create a menubar with a higher depth.

<p:menubar effect=”FADE|SLIDE|NONE” effectDuration=”1”> .logout}”/> </f:facet> </p:submenu> </p:menubar> Ajax and Non-Ajax Actions As menu uses menuitems.update}” ajax=”false”/> </p:submenu> </p:menubar> Dynamic Menus Menus can be created programmatically as well.. 237 . Following example allows a root menubar item to execute an action to logout the user. <p:menubar> <p:submenu label=”Options”> <p:menuitem value=”Save” actionListener=”#{bean.tr Effects Animation to use when showing and hiding menubar contents is customizable using effect and effectDuration attributes. </p:menubar> Submenu Label Facet For more powerful customization. submenu supports a facet named “label”. you can take full advantage of menuitem api. <p:menubar> <p:submenu> <f:facet name=”label”> <p:menuitem label=”Logout” action=”#{bean..www.com. By placing a menuitem as this facet. see the dynamic menus part in menu component section for more information and an example. it is easy to invoke actions with or without ajax.save}” update=”comp”/> <p:menuitem value=”Update” actionListener=”#{bean. See menuitem documentation for more information about the capabilities.prime.

ui-menubar-item-label . Style Class .www.ui-menu-item .ui-menu-item-label Applies Main container element of menubar Container element of each submenu Each menubar item Each menubar item label Each menu item of a submenu Each menu item label of a submenu As skinning style classes are global.ui-menu .tr Skinning Menubar resides in a main div container which style and styleClass attributes apply.ui-menubar . see the main Skinning section for more information.prime.com.ui-menubar-item . Following is the list of structural style classes. Here is an example based on a different theme. 238 .

com.MenuButton org. 239 binding value style styleClass widgetVar model disabled null null null null null null FALSE Object String String String String MenuModel Boolean .primefaces.prime.primefaces.MenuButtonRenderer org.MenuButtonRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String Boolean Description Unique identifier of the component.primefaces. when set to false component will not be rendered.component.MenuButton org.primefaces. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class menuButton org.component.primefaces.component.tr 3.menubutton.49 MenuButton MenuButton displays different commands in a popup menu. An el expression that maps to a server side UIComponent instance in a backing bean.menubutton. Boolean value to specify the rendering of the component.menubutton.component org.primefaces.component.component.MenuButtonTag org.www. Label of the button Style of the main container element Style class of the main container element Name of the client side widget MenuModel instance to create menus programmatically Disables or enables the button.

tr Getting started with the MenuButton MenuButton consists of one ore more menuitems. <p:menuButton value=”Options”> <p:menuitem value=”Save” actionListener=”#{bean. second one does the similar but without ajax and third one is used for redirect purposes. 240 .ui-button-text .jsf” /> </p:menuButton> Dynamic Menus Menus can be created programmatically as well. Following is the list of structural style classes.ui-menu-item .update}” ajax=”false” /> <p:menuitem value=”Go Home” url=”/home.save}” update=”comp” /> <p:menuitem value=”Update” actionListener=”#{bean. Here is an example based on a different theme.com.ui-menu-item-label Button element Label of button Container element of menu Each menu item Each menu item label Applies As skinning style classes are global. Style Class .ui-menu . first one is used triggers an action with ajax. see the main Skinning section for more information.ui-button . Following menubutton example has three menuitems. Skinning MenuButton resides in a main container which style and styleClass attributes apply.prime. see the dynamic menus part in menu component section for more information and an example.www.

when set to false component will not be rendered.MenuItem org. Info Tag Tag Class Component Class Component Type Component Family menuItem org.component.primefaces. Action to be invoked when menuitem is clicked.primefaces.Method Expression Boolean String String String String String String . use label instead) Url to be navigated when menuitem is clicked Target type of url navigation Text to display additional information Style of the menuitem label StyleClass of the menuitem label 241 binding value actionListener action immediate label url target helpText style styleClass null null null null FALSE null null null null null null Object String javax.com.el.menuitem.primefaces.menuitem.component. Label of the menuitem Action listener to be invoked when menuitem is clicked.component Attributes Name id rendered Default Assigned by JSF TRUE Type String boolean Description Unique identifier of the component.MenuItem org. Specifies the lifecycle phase to process the action event fired by menuitem.www. Label of the menuitem (Deprecated. An el expression that maps to a server side UIComponent instance in a backing bean.component.prime.tr 3.el.primefaces. Boolean value to specify the rendering of the component.Method Expression javax.50 MenuItem MenuItem is used by various menu components of PrimeFaces.MenuItemTag org.

Javascript handler to execute when ajax request fails. Specifies submit mode. Refer to the specific component documentation for more information. ajax icon TRUE null Boolean String Getting started with MenuItem MenuItem is a generic component used by the following PrimeFaces components. Path of the menuitem image. Client side id of the component(s) to be updated after async partial submit request.com.www. Global ajax requests are listened by ajaxStatus component. • • • • • • Menu MenuBar Breadcrumb Dock Stack MenuButton Note that some attributes of menuitem might not be supported by these menu components. Component id(s) to process partially instead of whole view.tr Name onclick async process update onstart oncomplete onsuccess onerror global Default null FALSE null null null null null null TRUE Type String Boolean String String String String String String Boolean Description Javascript event handler for click event When set to true. Javascript handler to execute before ajax request is begins.prime. setting global to false will not trigger ajaxStatus. 242 . ajax requests are not queued. Javascript handler to execute when ajax request is completed. Javascript handler to execute when ajax request succeeds.

component org. when set to false component will not be rendered.tr 3. An el expression that maps to a server side UIComponent instance in a backing bean.message. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class message org.component.MessageRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String boolean Description Unique identifier of the component.primefaces.www.Message org.com. Boolean value to specify the rendering of the component.message.primefaces.component.primefaces.Message org.component.primefaces.MessageTag org. Specifies if the summary of the FacesMessage should be displayed.component. Id of the component whose messages to display.primefaces.MessageRenderer org. Specifies if the detail of the FacesMessage should be displayed.component. Defines if already rendered messages should be displayed binding showSummary showDetail for redisplay null FALSE TRUE null TRUE Object boolean boolean String Boolean 243 .primefaces.51 Message Message is a pre-skinned extended version of the standard JSF message component.message.prime.

244 .text}” /> <p:message for=”txt” /> Skinning Message Full list of CSS selectors of message is as follows. <h:inputText id=”txt” value=”#{bean.prime.com. Style Class ui-message-{severity} ui-message-{severity}-summary ui-message-{severity}-info Applies Container element of the message Summary text Detail text {severity} can be ʻinfoʼ.tr Getting started with Message Message usage is exactly same as standard message.www. ʻwarnʼ and error. ʻerrorʼ.

tr 3. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class messages org.component.www.Messages org. when set to false component will not be rendered. An el expression that maps to a server side UIComponent instance in a backing bean.primefaces.component.MessagesRenderer org.primefaces.messages.component org.messages.component.component. Specifies if the detail of the FacesMessages should be displayed. Boolean value to specify the rendering of the component. 245 binding showSummary showDetail null FALSE TRUE Object boolean boolean .primefaces.52 Messages Messages is a pre-skinned extended version of the standard JSF messages component.prime.primefaces.messages.com.primefaces.primefaces.Messages org.component. Specifies if the summary of the FacesMessages should be displayed.MessagesRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String boolean Description Unique identifier of the component.MessagesTag org.

246 . Defines if already rendered messages should be displayed Getting started with Message Message usage is exactly same as standard messages.prime.tr Name globalOnly redisplay Default FALSE TRUE Type String Boolean Description When true. <p:messages /> Skinning Message Full list of CSS selectors of message is as follows. {severity} can be ʻinfoʼ.www. ʻerrorʼ. ʻwarnʼ and error.com. only facesmessages with no clientIds are displayed. Style Class ui-messages-{severity} ui-messages-{severity}-summary ui-messages-{severity}-detail ui-messages-{severity}-icon Applies Container element of the message Summary text Detail text Icon of the message.

component org.primefaces.www.primefaces. 247 .NotificationBarRenderer org.prime.notificationbar.component.component.primefaces.component.primefaces.component.NotificatonBar org.tr 3.NotificationBarRenderer Attributes Name id rendered Default Assigned by JSF TRUE String boolean Type Description Unique identifier of the component Boolean value to specify the rendering of the component.53 NotificationBar NotificationBar displayes a multipurpose fixed positioned panel for notification.notificationbar.com.primefaces.primefaces. when set to false component will not be rendered. Any group of JSF content can be placed inside notificationbar. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class notificationBar org.NotificationBar org.NotificationBarTag org.notificationbar.component.

“slow”. notificationBar provides an easy to use client side api that can be accessed through the widgetVar.show()”>Show</h:outputLink> Note that notificationBar has a default built-in close icon to hide the content. another possible effect is “slide”. “fade”. <p:notificationBar widgetVar=”topBar” effect=”slide”> //Content </p:notificationBar> 248 . Getting started with NotificationBar As notificationBar is a panel component.www.show()”>Show</h:outputLink> <h:outputLink value=”#” onclick=”topBar. Effects Default effect to be used when displaying and hiding the bar is “fade”. <p:notificationBar widgetVar=”topBar”> //Content </p:notificationBar> <h:outputLink value=”#” onclick=”topBar. <p:notificationBar widgetVar=”topBar”> //Content </p:notificationBar> Showing and Hiding To show and hide the content. “slide” or “none”.prime. Name of the effect.tr Name binding style styleClass position effect effectSpeed Default null null null top fade normal Object String String String String String Type Description An el expression that maps to a server side UIComponent instance in a backing bean Style of the container element StyleClass of the container element Position of the bar. “normal” or “fast”. any JSF and non-JSF content can be placed inside. Speed of the effect. show() displays the bar and hide() hides it.com. “top” or “bottom”.

com. set effect name to “none”. Selector .ui-notificationbar-close Main container element Close icon element Applies 249 .ui-notificationbar . Additionally there are two pre-defined css selectors used to customize the look and feel. <p:notificationBar widgetVar=”topBar” position=”bottom”> //Content </p:notificationBar> Skinning style and styleClass attributes apply to the main container element. Note that bar positioning is fixed so even page is scrolled.prime. In addition duration of the animation is controlled via effectSpeed attribute that can take “normal”. bar will not scroll.tr If youʼd like to turn off animation.www. Position Default position of bar is “top”. “slow” or “fast” as itʼs value. other possibility is placing the bar at the bottom of the page.

no markup is rendered so for components with conditional rendering regular PPR mechanism may not work since the markup to update on page does not exist.component.component.component org.OutputPanelRenderer org.OutputPanel org. valid values are inline (span) or block(div). binding style styleClass layout null null null inline Object String String String AjaxRendered Due to the nature of ajax.OutputPanel org.outputpanel. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class outputPanel org.primefaces. OutputPanel is useful in this case.www.primefaces.primefaces. When a JSF component is not rendered.OutputPanelTag org. An el expression that maps to a server side UIComponent instance in a backing bean Style of the html container element StyleClass of the html container element Layout of the panel.component.component.com. it is much simpler to update an existing element on page rather than inserting a new element to the dom.primefaces.outputpanel.54 OutputPanel OutputPanel is a display only element thatʼs useful in various cases such as adding placeholders to a page.component.output.OutputPanelRenderer Attributes Name id rendered Default Assigned by JSF TRUE String boolean Type Description Unique identifier of the component Boolean value to specify the rendering of the component. Suppose the rendered condition on bean is false when page if loaded initially and search method on bean sets the condition to be true meaning datatable will be rendered after a 250 .prime.primefaces.tr 3.primefaces. when set to false component will not be rendered.

slot { background:#FF9900.list}” /> Note that you wonʼt need an outputPanel if commandButton has no update attribute specified. Skinning OutputPanel style and styleClass attributes are used to skin the outputPanel which in turn renders a simple span element. height:96px.search}” /> Solution is to use the outputPanel as a placeHolder. . in this case parent form will be updated partially implicitly making an outputPanel use obselete.> //columns </p:dataTable> </p:outputPanel> <p:commandButton update=”out” actionListener=”#{bean.condition}” ..tr page submit. The problem is although partial output is generated. <p:outputPanel id=”out”> <p:dataTable id=”tbl” rendered=”#{bean... the markup on page cannot be updated since it doesnʼt exist.prime.condition}” .> //columns </p:dataTable> <p:commandButton update=”tbl” actionListener=”#{bean..www. Following outputPanel displays a block container which is also used in the drag&drop example to specify a droppable area. width:64px. } <p:outputPanel styleClass=”slot” layout=”block”><p:outputPanel> 251 .com. <p:dataTable id=”tbl” rendered=”#{bean.

primefaces. built-in popup menu and ajax event listeners.Panel org.prime. An el expression that maps to a server side UIComponent instance in a backing bean Header text Footer text Makes panel toggleable.component org.com.component.Panel org.panel.component.PanelTag org.55 Panel Panel is a grouping component for other components. closing.panel. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class panel org. notable features are toggling.component.PanelRenderer org. when set to false component will not be rendered. Speed of toggling in milliseconds binding header footer toggleable toggleSpeed null null null FALSE 1000 Object String String Boolean Integer 252 .www.panel.PanelRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String Boolean Description Unique identifier of the component Boolean value to specify the rendering of the component.primefaces.tr 3.component.primefaces.primefaces.primefaces.primefaces.component.

www.. Renders a toggleable panel as collapsed.. </p:panel> Header and Footer Header and Footer texts can be provided by header and footer attributes. panel encapsulates other components. <p:panel> //Child components here. Speed of closing effect in milliseconds Renders panel as hidden.prime. Javascript event handler to invoke before closing starts.tr Name onToggleUpdate toggleListener Default null null Type String javax.el MethodExpr ession String String String Integer Boolean String Description Component(s) to update after ajax toggleListener is invoked and panel is toggled Server side listener to invoke with ajax when a panel is toggled. Javascript event handler to invoke after closing completes.el MethodExpr ession Boolean String String Boolean javax.. Name of the client side widget collapsed style styleClass closable closeListener FALSE null null FALSE null onCloseUpdate onCloseStart onCloseComplete closeSpeed visible widgetVar null null null 1000 TRUE null Getting started with Panel In itʼs simplest form.. </p:panel> 253 .com. Server side listener to invoke with ajax when a panel is closed. Component(s) to update after ajax closeListener is invoked and panel is closed. Style of the panel Style class of the panel Make panel closable. <p:panel header=”Header Text” footer=”Footer Text”> //Child components here.

</p:panel> <p:messages id=”msg” /> public void handleToggle(ToggleEvent event) { Visibility visibility = event. <p:panel> <f:facet name=”header”> <h:outputText value=”Header Text” /> </f:facet> <f:facet name=”footer”> <h:outputText value=”Footer Text” /> </f:facet> //Child components here. <p:panel toggleListener=”#{panelBean.handleToggle}” onToggleUpdate=”msg”> //Child components here.com. <p:panel header=”Header Text” toggleable=”true”> //Child components here..prime. Toggling is turned off by default and toggleable needs to be set to true to enable it. you can do so by using ajax toggleListener. By default toggling takes 1000 milliseconds.getVisibility(). Toggling Panel contents can be toggled with a slide effect using the toggleable feature.. Optionally onToggleUpdate is used to update other components with ajax after toggling is completed... </p:panel> If youʼd like to get notified on server side when a panel is toggles.www.tr Instead of text. //Add facesmessage } 254 . you can place custom content with facets as well. facet is chosen.. </p:panel> When both header attribute and header facet is defined.. same applies to footer. this can be tuned by the toggleSpeed attribute. Following example adds a FacesMessage and displays it when panel is toggled.

provide the names of javascript functions using onCloseStart and onCloseComplete attributes.prime.event. an icon to display the menu is placed at top-right corner. This is enabled by setting closable to true.primefaces.tr org..event.. Closing Similar to toggling.. <p:panel closeListener=”#{panelBean. <p:panel closable=”true”> //Child components here.. This feature is enabled by defining a menu component and defining it as the options facet.primefaces..ToggleEvent provides visibility information using org. <f:facet name=”options”> <p:menu> //Menuitems </p:menu> </f:facet> </p:panel> 255 . </p:panel> <p:messages id=”msg” /> public void handleClose(CloseEvent event) { //Add facesmessage } CloseEvent is an org. a panel can also be closed as well.CloseEvent instance. <p:panel closable=”true”> //Child components here. On the other hand. for server side use ajax closeListener and optional onCloseUpdate options. Popup Menu Panel has built-in support to display a fully customizable popup menu.model.www.handleClose}” onCloseUpdate=”msg”> //Child components here.Visibility enum that has the values HIDDEN or VISIBLE.primefaces..com. </p:panel> If youʼd like to bind client side event handlers to the close event.

prime.tr Skinning Panel Panel resides in a main container which style and styleClass attributes apply. Here is an example based on a different theme.ui-panel-footer Applies Main container element of panel Header container Header text Option icon in header Panel content Panel footer As skinning style classes are global.ui-panel-content . see the main Skinning section for more information.com.ui-panel-titlebar . 256 .ui-panel .ui-panel-title . Style Class .www.ui-panel-titlebar-icon . Following is the list of structural style classes.

primefaces.primefaces. When itʼs an EL expression.com.56 Password Strength Password Strength provides a visual feedback regarding password complexity.component.PasswordRenderer org.primefaces.component org.primefaces. itʼs resolved to a converter instance.password.PasswordTag org.primefaces.component.www.primefaces. In case itʼs a static text.prime.component. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class password org.password.tr 3. An el expression that maps to a server side UIComponent instance in a backing bean Value of the component than can be either an EL expression of a literal text An el expression or a literal text that defines a converter for the component.component.password.component. when set to false component will not be rendered.Password org.Password org. it must refer to a converter id binding value converter null null null Object Object Converter/ String 257 .PasswordRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String boolean Description Unique identifier of the component Boolean value to specify the rendering of the component.

Message to be displayed when conversion fails.tr Name immediate Default FALSE Type boolean Description Boolean value that specifies the lifecycle phase the valueChangeEvents should be processed. when true the events will be fired at “apply request values”.www. if immediate is set to false.com. Html accesskey attribute Html alt attribute Html dir attribute Html disabled attribute Html lang attribute Html maxlength attribute Html onblur attribute Html onchange attribute Html onclick attribute Html ondblclick attribute Html onfocus attribute Html onkeydown attribute Html onkeypress attribute Html onkeyup attribute Html onmousedown attribute Html onmousemove attribute 258 required validator valueChangeListener requiredMessage converterMessage validatorMessage accesskey alt dir disabled lang maxlength onblur onchange onclick ondblclick onfocus onkeydown onkeypress onkeyup onmousedown onmousemove FALSE null null null null null null null null FALSE null null null null null null null null null null null null boolean MethodBindi ng ValueChang eListener String String String String String String Boolean String Integer String String String String String String String String String String . valueChange Events are fired in “process validations” phase Marks component as required A method binding expression that refers to a method validationg the input A method binding expression that refers to a method for handling a valuchangeevent Message to be displayed when required field validation fails. Message to be displayed when validation fields.prime.

Javascript event handler to be executed when password strength indicator is hidden. Javascript event handler to be executed when password strength indicator is shown.www.prime. <p:password value=”#{mybean. Controls native autocomplete support of browser.com. Label of good password.password}” /> 259 . Label of weak password.tr Name onmouseout onmouseover onmouseup readonly size style styleClass tabindex title minLength inline promptLabel Default null null null FALSE null null null null null 8 FALSE Please enter a password 1 Weak Good String null null FALSE null Type String String String Boolean Integer String String Integer String Integer boolean String Description Html onmouseout attribute Html onmouseover attribute Html onmouseup attribute Html readonly attribute Html size attribute Html style attribute Html styleClass attribute Html tabindex attribute Html title attribute Minimum length of a strong password Displays feedback inline rather than using a popup. Label of strong password. Label of prompt. Getting Started with Password Password is an input component and used just like a standard input text. level weakLabel goodLabel strongLabel onshow onhide autocomplete widgetVar Integer String String String String String String String Level of security. Javascript variable name of the client side Password strength object.

} public void setPassword(String password) { this.com. <p:password value=”#{mybean.tr public class MyBean { } private String password. <p:password value=”#{mybean. Following password gives feedback in Turkish.password}” inline=”true” onshow=”fadein” onhide=”fadeout”/> This examples uses jQuery api for fadeIn and fadeOut effects. if you prefer an inline indicator just enable inline mode. input is the actual input element of password and container is the strength indicator element. you can provide custom labels as well.www. Each callback takes two parameters. 260 . you can create your own animation as well.password = password.} I18N Although all labels are in English by default.prime.password}” promptLabel=”Lütfen şifre giriniz” weakLabel=”Zayıf” goodLabel=”Orta seviye” strongLabel=”Güçlü” /> Inline Strength Indicator By default strength indicator is shown in an overlay. <p:password value=”#{mybean. input and container. public String getPassword() { return password.password}” inline=”true”/> Custom Animations Using onshow and onhide callbacks.

prime. 261 . container) { container.jpassword-info Applies Container element of strength indicator. container) { container. Visual bar of strength indicator.tr <script type=”text/javascript”> function fadein(input.jpassword .www.com. Name . } function fadeout(input.fadeOut(”slow”). Feedback text of strength indicator.jpassword-meter . } </script> Skinning Password Skinning selectors for password is as follows.fadeIn(”slow”).

In case itʼs a static text. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class pickList org.component.component.component org. it must refer to a converter id binding value converter null null null Object Object Converter/ String 262 .component.Panel org.PickListRenderer org.primefaces.component. When itʼs an EL expression.primefaces.PickList org.component.primefaces.prime.PanelTag org.picklist.picklist.primefaces.com.PickListRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String boolean Description Unique identifier of the component Boolean value to specify the rendering of the component.primefaces.www.tr 3. when set to false component will not be rendered. itʼs resolved to a converter instance. An el expression that maps to a server side UIComponent instance in a backing bean Value of the component than can be either an EL expression of a literal text An el expression or a literal text that defines a converter for the component.primefaces.57 PickList PickList is used for transferring data between two different collections.picklist.

tr Name immediate Default FALSE Type boolean Description Boolean value that specifies the lifecycle phase the valueChangeEvents should be processed. required validator valueChangeListener requiredMessage converterMessage validatorMessage var itemLabel itemValue style styleClass widgetVar FALSE null null null null null null null null null null null boolean MethodBind ing ValueChan geListener String String String String String Object String String String Getting started with PickList You need to create custom model called org.model. valueChange Events are fired in “process validations” phase Marks component as required A method binding expression that refers to a method validationg the input A method binding expression that refers to a method for handling a valuchangeevent Message to be displayed when required field validation fails.www. Value of an item. if immediate is set to false. Message to be displayed when conversion fails.com. Message to be displayed when validation fields. when true the events will be fired at “apply request values”.DualListModel to use PickList.prime. As the first example weʼll create a DuaListModel that contains basic Strings.picklist. As the name suggests it consists of two lists. 263 . Style class of the main container. Javascript variable name of the client side PickList object. Label of an item. Name of the iterator. Style of the main container. one is the source list and the other is the target.primefaces.

citiesSource.www.add(”Istanbul”)..getTarget() api. List<String> target = new ArrayList<String>(). <p:pickList value=”#{pickListBean. citiesTarget).cities}” var=”city” itemLabel=”#{city}” itemValue=”#{city}”> When you submit the form containing the pickList. This use case is no different excepty the addition of a converter. cities = new DualListModel<String>(citiesSource.). citiesSource. 264 .tr public class PickListBean { private DualListModel<String> cities.add(”Izmir”). Following pickList displays a list of players(name.cities = cities. } public void setCities(DualListModel<String> cities) { this. } And bind the cities dual list to the picklist. the data model will be populated with the new values and you can access these values with DualListModel. Complex Pojos Most of the time you would deal with complex pojos rather than primitive types like String.. citiesSource. citiesSource. } public DualListModel<String> getCities() { return cities. citiesSource.add(”Bursa”). } public PickListBean() { List<String> source = new ArrayList<String>().com.prime.add(”Antalya”).getSource() and DualListModel. age .add(”Ankara”).

name}” itemValue=”#{player}” converter=”player”> Customizing Controls PickList is a composite component and as other PrimeFaces composite components.com. 14)). target). players = new DualListModel<Player>(source.png”/> </f:facet> 265 .players = players.www. <p:pickList value=”#{pickListBean. source. 9)). source. } <p:pickList value=”#{pickListBean.png”/> </f:facet> <f:facet name=”addAll”> <p:graphicImage value=”/images/picklist/addall. } public DualListModel<Player> getPlayers() { return players.add(new Player(”Iniesta”. List<Player> target = new ArrayList<Player>().add(new Player(”Ibrahimovic”.players}” var=”player” itemLabel=”#{player. source. source. public PickListBean() { //Players List<Player> source = new ArrayList<Player>().players}” var=”player” itemLabel=”#{player.add(new Player(”Xavi”. pickList provides a customizable UI.prime. source. 6)). 10)).name}” itemValue=”#{player}” converter=”player”> <f:facet name=”add”> <p:graphicImage value=”/images/picklist/add.add(new Player(”Messi”. } public void setPlayers(DualListModel<Player> players) { this.tr public class PickListBean { } private DualListModel<Player> players. 8)).add(new Player(”Henry”. Using the facet based approach you can customize which controls would be displayed and how.add(new Player(”Puyol”. 5)). source.

png”/> </f:facet> </p:pickList> Skinning PickList In addition to the customized controls.ui-picklist-source .www.png”/> </f:facet> <f:facet name=”removeAll”> <p:graphicImage value=”/images/picklist/removeall. remove eg.) Applies PickList is located inside an container element which can be styled using style and styleClass attributes.ui-picklist-control Source listbox Target listbox Container for a picklist control (add.tr <f:facet name=”remove”> <p:graphicImage value=”/images/picklist/remove. 266 .ui-picklist-target .com. thereʼre a couple of css selectors applying to picklist.prime. Class .

Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class poll org.primefaces. Interval in seconds to do periodic ajax requests.component. when set to false component will not be rendered. binding interval action actionListener immediate null 2 null null FALSE Object Integer javax.poll.component.component org.primefaces.component.Poll org.Poll org. rendered boolean Boolean value to specify the rendering of the component.www. ActionListener boolean widgetVar null String 267 . when true actions are processed at apply_request_values.poll. when false at invoke_application phase.tr 3.PollTag org.MethodEx pression javax.el.PollRenderer org.prime. An el expression that maps to a server side UIComponent instance in a backing bean.primefaces.58 Poll Poll is an ajax component that has the ability to send periodical ajax requests and execute actionlisteners on JSF backing beans.PollRenderer Attributes Name id Default Assigne d by JSF TRUE String Type Description Unique identifier of the component.poll.faces.primefaces.com. An actionlistener thatʼd be processed in the partial request caused by uiajax.component.primefaces. Javascript variable name of the poll object.event. Boolean value that determines the phaseId.component.primefaces. A method expression thatʼd be processed in the partial request caused by uiajax.

Javascript handler to execute when ajax request is completed.www.com. Note that poll must be nested inside a form. Global ajax requests are listened by ajaxStatus component.increment}” update=”txt_count” /> </h:form> public class CounterBean { } private int count. Javascript handler to execute when ajax request fails. polling starts automatically on page load. In autoStart mode.count}” /> <p:poll actionListener=”#{counterBean. Javascript handler to execute before ajax request is begins. Client side id of the component(s) to be updated after async partial submit request. public void increment(ActionEvent actionEvent) { count++. <h:form> <h:outputText id=”txt_count” value=”#{counterBean. ajax requests are not queued. Component id(s) to process partially instead of whole view. Javascript handler to execute when ajax request succeeds. setting global to false will not trigger ajaxStatus. } //getters and setters 268 . to start polling on demand set to false.tr Name async process update onstart oncomplete onsuccess onerror global Default FALSE null null null null null null TRUE Type Boolean String String String String String String Boolean Description When set to true.prime. autoStart TRUE Boolean Getting started with Poll Poll below invokes increment method on CounterBean every 2 seconds and txt_count is updated with the new value of the count variable.

stop().tr Tuning timing By default the periodic interval is 2 seconds.count}” /> <p:poll interval=”5” actionListener=”#{counterBean. <h:form> <h:outputText id=”txt_count” value=”#{counterBean.”>Start</a> <a href=”#” onclick=”myPoll. handy widgetVar attribute is once again comes for help.www. this can be changed with the interval attribute. <h:outputText id=”txt” value=”#{counterBean. Following poll works every 5 seconds.com.count}” /> <p:poll interval=”5” actionListener=”#{counterBean.increment}” update=”txt_count” widgetVar=”myPoll” autoStart=”false”/> <a href=”#” onclick=”myPoll.”>Stop</a> </h:form> 269 .start().prime.increment}” update=”txt” /> Start and Stop Poll can be started manually.

<h:commandButton id=”btn” value=”Print”> <p:printer target=”output” /> </h:commandButton> <h:outputText id=”output” value=”PrimeFaces Rocks!” /> 270 .primefaces. An el expression that maps to a server side UIComponent instance in a backing bean Server side id of a JSF component to print.component.printer.primefaces.primefaces. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class printer org.component.tr 3.www.component.Printer org.component.component.PrinterTag org.primefaces.Printer org.primefaces.primefaces.59 Printer Printer allows sending a specific JSF component to the printer. binding target null null Object String Getting started with the Printer Printer is attached to any action component like a button or a link.com.printer. not the whole page.PrinterRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String boolean Description Unique identifier of the component Boolean value to specify the rendering of the component. not the whole page.printer.PrinterRenderer org.prime.component org. when set to false component will not be rendered. Printer below allows printing only the outputText.

jpg” /> 271 .prime.www. <h:outputLink id=”lnk” value=”#”> <p:printer target=”image” /> <h:outputText value=”Print Image” /> </h:outputLink> <p:graphicImage id=”image” value=”/images/nature1.com.tr Following printer prints an image on the page.

component.primefaces. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class propressBar org.www. when set to false component will not be rendered.progressbar.component.Progressbar org.primefaces.progressbar.tr 3.component org. in ajax mode progress value is retrieved from a backing bean.component. Interval in seconds to do periodic requests in ajax mode.ProgressBar org.component. binding null Object widgetVar value disabled ajax null 0 FALSE FALSE String Integer Boolean Boolean interval 3000 Integer 272 . An el expression that maps to a server side UIComponent instance in a backing bean Name of the client side widget Value of the progress bar Disables or enables the progressbar Specifies the mode of progressBar.primefaces.component.prime.primefaces.primefaces.primefaces.progressbar.60 ProgressBar ProgressBar is a process status indicator that can either work purely on client side or interact with server side using ajax.com.ProgressBarRenderer Attributes Name id rendered Default Assigned by JSF TRUE String Boolean Type Description Unique identifier of the component Boolean value to specify the rendering of the component.ProgressBarRenderer org.ProgressBarTag org.

prime.com. • setValue(value) : Updates the progress value • getValue() : Returns the current progress value 273 . pb. } </script> Simple client side api is provided to retrieve and set the value of the progressbar. 2000). MethodExpression String MethodExpression Getting started with the ProgressBar ProgressBar has two modes. <p:progressBar widgetVar=”pb” /> <p:commandButton value="Start" type=”button” onclick="start()" /> <p:commandButton value="Cancel" type=”button” onclick="cancel()" /> <script type="text/javascript"> function start() { this.tr Name style styleClass onCompleteUpdate completeListener onCancelUpdate cancelListener Default null null null null null null String String String Type Description Inline style of the main container element. Following is a pure client side progressBar.setValue(pbClient.getValue() + 10). Specifies component(s) to update with ajax when progress is completed A server side listener to be invoked when a progress is completed.progressInterval = setInterval(function(){ pb.setValue(0). }. } function cancel() { clearInterval(this. Specifies component(s) to update with ajax when progress is cancelled A server side listener to be invoked when a progress is cancelled.progressInterval). “client”(default) or “ajax”.www. Style class of the main container element.

In order to set a different value. Following example adds a faces message and updates the growl component to display it when progress is completed or cancelled. define a completeListener or cancelListener respectively that refers to a java method. //getters and setters public void handleComplete() { //Add a faces message } public void handleCancel() { //Add a faces message } . Optionally oncompleteUpdate and onCancelUpdate options can be defined to update a part of the page. <p:progressBar interval=”5000” /> Ajax Progress Ajax mode is enabled by setting ajax attribute to true. in this case the value defined on a JSF backing bean is retrieved peridically and used to update the progress.tr Interval ProgressBar is based on polling and 3000 milliseconds is the default interval meaning every 3 seconds progress value will be recalculated. <p:progressBar ajax=”true” value=”#{progressBean. use the interval attribute. public class ProgressBean { } 274 private int progress.com.prime. //getters and setters Ajax Event Listeners If youʼd like to execute custom logic on server side when progress is completed or cancelled.progress}”/> public class ProgressBean { } private int progress.www.

Following is the list of structural style classes.ui-progressbar-value Applies Main container element of progressbar Value of the progressbar As skinning style classes are global.com.progress}” completeListener=”#{progressBean. see the main Skinning section for more information.ui-progressbar . 275 .handleCancel}” onCancelUpdate=”messages” ajax=”true”/> <p:growl id=”messages” /> Skinning ProgressBar resides in a main container which style and styleClass attributes apply. Style Class .tr <p:progressBar widgetVar=”pb” value=”#{progressBean. Here is an example based on a different theme.www.prime.handleComplete}” onCompleteUpdate=”messages” cancelListener=”#{progressBean.

PushRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String boolean Description Unique identifier of the component Boolean value to specify the rendering of the component.primefaces.61 Push Push component is an agent that creates a channel between the server and the client. An el expression that maps to a server side UIComponent instance in a backing bean Unique channel name of the connection between subscriber and the server.primefaces.prime.primefaces.component. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class push org.primefaces.primefaces.component.component. 276 .Push org. when set to false component will not be rendered.push.tr 3.push. “Ajax Push/Comet” for detailed information.www.primefaces.push.component.PushRenderer org. Javascript event handler that is process when the server publishes data.com.component org.PushTag org. binding channel onpublish null null null Object Object Object Getting started with the Push See chapter 6.Push org.component.

www.prime.com.tr

3.62 Rating
Rating component features a star based rating system. Rating can be used as a plain input component or with ajax RateListeners.

Info
Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class rating org.primefaces.component.rating.RatingTag org.primefaces.component.rating.Rating org.primefaces.component.Rating org.primefaces.component org.primefaces.component.RatingRenderer org.primefaces.component.rating.RatingRenderer

Attributes
Name id rendered Default Assigne d by JSF TRUE Type String boolean Description Unique identifier of the component Boolean value to specify the rendering of the component, when set to false component will not be rendered. An el expression that maps to a server side UIComponent instance in a backing bean Value of the component than can be either an EL expression of a literal text An el expression or a literal text that defines a converter for the component. When itʼs an EL expression, itʼs resolved to a converter instance. In case itʼs a static text, it must refer to a converter id

binding value converter

null null null

Object Object Converter/ String

277

www.prime.com.tr

Name immediate

Default FALSE

Type boolean

Description Boolean value that specifies the lifecycle phase the valueChangeEvents should be processed, when true the events will be fired at “apply request values”, if immediate is set to false, valueChange Events are fired in “process validations” phase Marks component as required A method binding expression that refers to a method validationg the input A method binding expression that refers to a method for handling a valuchangeevent Message to be displayed when required field validation fails. Message to be displayed when conversion fails. Message to be displayed when validation fields. Number of stars to display A server side listener to process a RateEvent Client side id of the component(s) to be updated after async partial submit request Disabled user interaction

required validator valueChangeListener requiredMessage converterMessage

FALSE null null null null null 5 null null FALSE

boolean MethodBindin g ValueChange Listener String String String int javax.el.Meth odExpression String boolean

validatorMessage
stars rateListener update disabled

Getting Started with Rating Rating is an input component that takes a double variable as itʼs value.
public class RatingController { } private double rating; //Getters and Setters

<p:rating value=”#{ratingController.rating}” />

278

www.prime.com.tr

When the enclosing form is submitted value of the rating will be assigned to the rating variable. Number of Stars Default number of stars is 5, if you need less or more stars use the stars attribute. Following rating consists of 10 stars.
<p:rating value=”#{ratingController.rating}” stars=”10”/>

Display Value Only In cases where you only want to use the rating component to display the rating value and disallow user interaction, set disabled to true. Ajax RateListeners In order to respond to rate events instantly rather than waiting for the user to submit the form, use the RateListener feature which sends an RateEvent via an ajax request. On server side you can listen these RateEvent by defining RateListeners as MethodExpressions. Rating below responds to a rate event instantly and updates the message component whose value is provided by the defined RateListener.
<p:rating rateListener=”#{ratingController.handleRate}” update=”msg”/> <h:outputText id=”msg” value=”#{ratingController.message}” />

public class RatingController { } private String message; public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } public void handleRate(RateEvent rateEvent) { message = “You rated:” + rateEvent.getRating(); }

279

www.prime.com.tr

3.63 RemoteCommand
RemoteCommand provides a way to execute JSF backing bean methods directly from javascript. Info
Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class remoteCommand org.primefaces.component.remotecommand.RemoteCommandTag org.primefaces.component.remotecommand.RemoteCommand org.primefaces.component.RemoteCommand org.primefaces.component org.primefaces.component.RemoteCommandRenderer org.primefaces.component.remotecommand.RemoteCommandRenderer

Attributes
Name id rendered Default Assigned by JSF TRUE String boolean Type Description Unique identifier of the component. Boolean value to specify the rendering of the component, when set to false component will not be rendered. An el expression that maps to a server side UIComponent instance in a backing bean A method expression thatʼd be processed in the partial request caused by uiajax. An actionlistener thatʼd be processed in the partial request caused by uiajax. Boolean value that determines the phaseId, when true actions are processed at apply_request_values, when false at invoke_application phase. Name of the command When set to true, ajax requests are not queued.

binding action actionListener immediate

null null null FALSE

Object javax.el.MethodEx pression javax.faces.event. ActionListener boolean

name async

null FALSE

String Boolean

280

www.prime.com.tr

Name process update onstart oncomplete onsuccess onerror global

Default null null null null null null TRUE String String String String String String

Type

Description Component id(s) to process partially instead of whole view. Client side id of the component(s) to be updated after async partial submit request. Javascript handler to execute before ajax request is begins. Javascript handler to execute when ajax request is completed. Javascript handler to execute when ajax request succeeds. Javascript handler to execute when ajax request fails. Global ajax requests are listened by ajaxStatus component, setting global to false will not trigger ajaxStatus.

Boolean

Getting started with RemoteCommand RemoteCommand is used by invoking the command from your javascript function.
<p:remoteCommand name=”increment” actionListener=”#{counter.increment}” out=”count” /> <h:outputText id=”count” value=”#{counter.count}” />

<script type=”text/javascript”> function customfunction() { //custom code increment(); //makes a remote call } </script>

Thatʼs it whenever you execute your custom javascript function(eg customfunction()), a remote call will be made and output text is updated. Note that remoteCommand must be nested inside a form.

281

www.prime.com.tr

3.64 Resizable
PrimeFaces features a resizable component that has the ability to make a JSF component resizable. Resizable can be used on various components like resize an input fields, panels, menus, images and more. Info
Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class resizable org.primefaces.component.resizable.ResizableTag org.primefaces.component.resizable.Resizable org.primefaces.component.Resizable org.primefaces.component org.primefaces.component.ResizableRenderer org.primefaces.component.resizable.ResizableRenderer

Attributes
Name id rendered Default Assigne d by JSF TRUE Type String boolean Description Unique identifier of the component Boolean value to specify the rendering of the component, when set to false component will not be rendered. An el expression that maps to a server side UIComponent instance in a backing bean Javascript variable name of the wrapped widget Displays a proxy when resizing Shows the height and width of the resizing component Handles to use, any combination of 't', 'b', 'r', 'l', 'bl', 'br', 'tl', 'tr' is valid, shortcut “all” enables all handlers. Displays a ghost effect Displays smaller handles

binding widgetVar proxy status handles

null null FALSE FALSE null

Object String boolean boolean boolean

ghost knobHandles

FALSE FALSE

String boolean

282

www.prime.com.tr

Name animate effect animateDuration minWidth maxWidth minHeight maxHeight

Default FALSE null 0.75 null null null null

Type String String double Integer Integer Integer Integer

Description Controls animation Effect for animation Duration of animation Minimum width to resize Maximum width to resize Minimum height to resize Maximum height to resize

Getting started with resizable To make a component resizable, just add p:resizable as a child to a parent component that needs to be resized;
<h:graphicImage id=”img” value=”/ui/barca/campnou.jpg”> <p:resizable /> </h:graphicImage>

Thatʼs it now an image can be resized by the user if he/she wants to see more detail :) Another common use case is the input fields, if users need more space for a textarea, make it resizable by;
<h:inputTextarea id=”area” value=”Resize me if you need more space”> <p:resizable /> </h:inputTextarea>

Note: Itʼs important for components thatʼre resized to have an assigned id because some components do not render their clientIdʼs if you donʼt give them an id explicitly.

Animations Other than plain resize handling, animations and effects are also supported.
<h:inputTextarea id=”area” value=”Resize me!!!”> <p:resizable proxy=”true” animate=”true” effect=”bounceOut”/> </h:inputTextarea>

283

www.prime.com.tr

Effect names • • • • • • • • • • • • • • • • backBoth backIn backOut bounceBoth bounceIn bounceOut easeBoth easeBothStrong easeIn easeInStrong easeNone easeOut easeOutStrong elasticBoth elasticIn elasticOut
Note: Effect names are case sensitive and incorrect usage may result in javascript errors

Boundaries To prevent overlapping with other elements on page, boundaries need to be specified. Thereʼre 4 attributes for this minWidth, maxWidth, minHeight and maxHeight. The valid values for these attributes are numbers in terms of pixels.
<h:inputTextarea id=”area” value=”Resize me!!!”> <p:resizable maxWidth=”200” maxHeight=”200”/> </h:inputTextarea>

284

resource.Resource org.component.prime.65 Resource Resource component manually adds resources like javascript and css bundled with PrimeFaces to a page.primefaces.primefaces.resource.tr 3.www. Following resource adds jquery bundled with Primefaces to the page.component.js” /> </head> 285 .primefaces.resource.component. An el expression that maps to a server side UIComponent instance in a backing bean Path of the resource binding name null null Object String Getting started with resource The best place to locate p:resource is inside head tag.primefaces.ResourceRenderer org. when set to false component will not be rendered.component.component org.primefaces.component. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class resource org.ResourceTag org.ResourceRenderer Attributes Name id rendered Default Assigne d by JSF TRUE Type String boolean Description Unique identifier of the component Boolean value to specify the rendering of the component.primefaces. <head> <p:resource name=”/jquery/jquery.com.Resource org.

An el expression that maps to a server side UIComponent instance in a backing bean Comma seperated list of resources to be excluded.primefaces.resources. binding exclude null null Object String Getting started with resources The best place to locate p:resources is inside head tag.com. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class resources org.component. when set to false component will not be rendered.ResourcesRenderer org.Resources org.primefaces.resources.component.tr 3.resources.primefaces. <head> <p:resources /> </head> 286 .www.66 Resources Resources component renders all script and link tags necessary for PrimeFaces component to to work.primefaces.component.prime.component.primefaces.ResourcesTag org.component.primefaces.ResourcesRenderer Attributes Name id rendered Default Assigne d by JSF TRUE Type String boolean Description Unique identifier of the component Boolean value to specify the rendering of the component.Resources org.component org.

use the exlude setting. provide a comma seperated list. If thereʼre more than once resources to exclude.com.www. <p:resources exclude=”/jquery/jquery.js”> 287 .prime.tr Excluding a resource In case youʼd like to avoid inclusion of a certain resource.

primefaces. resize.ScheduleRenderer 288 .com.component.ScheduleTag org.component.primefaces.Schedule org.www. Schedule is highly customizable featuring various views (month. day.primefaces.component.primefaces org. drag-drop. built-in I18N.primefaces. week).schedule.67 Schedule Schedule provides an Outlook Calendar.tr 3.prime.schedule. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class schedule org.schedule.ScheduleRenderer org.component. iCal like JSF component to manage events.Schedule org. customizable event dialog and skinning.primefaces.component.

when set to false component will not be rendered.com. 'basicWeek'. 'basicDay' The initial date that is used when schedule loads.tr Attributes Name id rendered Default Assigned by JSF TRUE Type String Boolean Description Unique identifier of the component Boolean value to specify the rendering of the component. possible values are 'month'.primefaces.prime. 'agendaDay'. 'agendaWeek'. A server side listener to invoke when an event is selected A server side listener to invoke when a date is selected binding null Object widgetVar value null null String Object locale aspectRatio view null null month Object Float String initialDate null Object showWeekends style styleClass editable draggable resizable eventSelectListener dateSelectListener TRUE null null FALSE FALSE FALSE null null Boolean String String Boolean Boolean Boolean Method Expression Method Expression 289 . events are resizable. can be String or a java. An el expression that maps to a server side UIComponent instance in a backing bean Javascript variable name of the widget An org. the schedule starts on the current date Specifies inclusion Saturday/Sunday columns in any of the views Style of the main container element of schedule Style class of the main container element of schedule Defines whether calendar can be modified. events are draggable.ScheduleModel instance representing the backed model Locale for localization.util.www. higher the value shorter the height is The view type to use.Locale instance Ratio of calendar width to height. If ommitted.model. When true. When true.

tr Name eventMoveListener eventResizeListener onEventSelectUpdate Default null null null Type Method Expression Method Expression String Description A server side listener to invoke when a date is moved A server side listener to invoke when a date is resized Components to update with ajax when an event is selected. agendaWeek . onDateSelectUpdate null String onEventMoveUpdate onEventResizeUpdate showHeader leftHeaderTemplate centerHeaderTemplate rightHeaderTemplate null null TRUE prev.com. next today title month.prime. Content of right side of header. agendaDay TRUE String String Boolean String String String allDaySlot Boolean Determines if all-day slot will be displayed in agendaWeek or agendaDay views Interval in minutes in an hour to create a slot. First hour to display in day view. by default event dialog is updated Components to update with ajax when an empty date is selected. Maximum time to display in a day view. Content of left side of header. Specifies visibility of header content. Content of center of header. Specifies first day of week.www. by default it's 0 corresponding to sunday slotMinutes firstHour minTime maxTime startWeekday 30 6 null null 0 Integer Integer String String Integer 290 . by default event dialog is updated Components to update with ajax when an event is moved. Components to update with ajax when an event is resized. Minimum time to display in a day view.

prime.com. Date getStartDate(). Mandatory properties required to create a new event are the title.ScheduleEvent instances. String getStyleClass().util.www.model.addEvent(new DefaultScheduleEvent(”title”. import java. 291 . <p:schedule value=”#{scheduleBean. package org.tr Getting started with Schedule Schedule needs to be backed by a org. Date getEndDate().Date.model. start date and end date.model}” /> public class ScheduleBean { } private ScheduleModel model. public ScheduleBean() { eventModel = new ScheduleModel<ScheduleEvent>(). Other properties such as allDay get sensible default values. public interface ScheduleEvent extends Serializable { public public public public public public public public } String getId().io. } DefaultScheduleEvent is the default implementation of ScheduleEvent interface. new Date())).primefaces. new Date(). String getTitle().primefaces. Object getData(). a schedule model consists of org. boolean isAllDay(). void setId(String id). Table below describes each property in detail.Serializable.primefaces. } public ScheduleModel getModel() { return model.ScheduleModel instance.model. eventModel. import java.

event. to enable event editing.prime.event.startDate}” /> <f:convertDateTime pattern=”dd/MM/yyyy” /> </p:inputMask> <h:outputLabel for=”to” value=”To:” /> <h:inputText id=”to” value=”#{scheduleBean.util.www.tr Property id title startDate endDate allDay styleClass data Description Used internally by PrimeFaces. Title of the event.event.update().Date. Flag indicating event is all day.endDate}” /> <f:convertDateTime pattern=”dd/MM/yyyy” /> </h:inputText> <h:outputLabel for=”allDay” value=”All Day:” /> <h:selectBooleanCheckbox id=”allDay” value=”#{scheduleBean. Visual style class to enable multi resource display.Date. <p:schedule value=”#{scheduleBean. Optional data you can set to be represented by Event.allDay}” /> <p:commandButton type=”reset” value=”Reset” /> <p:commandButton value=”Save” actionListener=”#{scheduleBean. End date of type java. Start date of type java. Editable Schedule Schedule is read-only by default.model}” editable=”true” widgetVar=”myschedule”> <p:scheduleEventDialog header=”Event Details”> <h:panelGrid columns=”2”> <h:outputLabel for=”title” value=”Title:” /> <h:inputText id=”title” value=”#{scheduleBean. ScheduleEventDialog is an optional abstact dialog where implementors can customize with the UI they want to display. set editable property to true.addEvent}” oncomplete=”myschedule.”/> </h:panelGrid> </p:scheduleEventDialog> </p:schedule> 292 .util. Hereʼs an example.title}” /> <h:outputLabel for=”from” value=”From:” /> <h:inputText id=”from” value=”#{scheduleBean.event.com. you donʼt need to define it manually as id is auto-generated.

addEvent(new DefaultScheduleEvent(”title”. Additionally simple addEvent method is added that will be processed when save button in dialog is clicked. a ScheduleEvent needs to be added to the backing bean to bind with the dialog. } public ScheduleEventImpl getEvent() { return event..tr As this schedule is editable. } Selecting an Event EventSelectListener is invoked each time an event is clicked. } public void addEvent(ActionEvent actionEvent) { if(event. public class ScheduleBean { } private ScheduleModel<ScheduleEvent> model. } public ScheduleModel<ScheduleEvent> getModel() { return model.model}” editable=”true” eventSelectListener=”#{scheduleBean.addEvent(event). } public void setEvent(ScheduleEventImpl event) { this.www. private ScheduleEventImpl event = new DefaultScheduleEvent(). new Date(). public ScheduleBean() { eventModel = new ScheduleModel<ScheduleEvent>(). eventModel. </p:schedule> 293 . new Date())).updateEvent(event). This simply syncs the event represented in dialog with ScheduleModel.getId() == null) eventModel.onEventSelect}”> .prime. <p:schedule value=”#{scheduleBean. else eventModel.event = event.com. event = new DefaultScheduleEvent()..

getScheduleEvent(). <p:schedule value=”#{scheduleBean. int minuteDelta = selectEvent.model}” editable=”true” eventMoveListener=”#{scheduleBean.model}” editable=”true” dateSelectListener=”#{scheduleBean. </p:schedule> public void onEventMove(ScheduleEntryMoveEvent selectEvent) { event = selectEvent. } 294 .getDate()).onEventMove}”> . DateSelectListener in following example. resets the event and configures start/end dates to display in dialog..setEndDate(selectEvent.. Optionally schedule has onEventSelectUpdate option to update any other component(s) on page.getDayDelta(). Moving an Event Events can be dragged and dropped into new dates.getScheduleEvent(). } Optionally schedule has onDateSelectEventUpdate option to update any other component (s) on page. to get notified about this user interaction with ajax.. define a server side eventMoveListener. } onSelectEvent listener above gets the selected event and sets it to ScheduleBeanʼs event property to display.getDate()).. int dayDelta = selectEvent. if defined scheduleEventDialog is updated by default. event.www. <p:schedule value=”#{scheduleBean. Selecting a Date DateSelectListener is similar to EventSelectedListener however it is fired when an empty date is clicked which is useful to update the UI with selected date information.com.onDateSelect}”> .getMinuteDelta().tr public void onEventSelect(ScheduleEntrySelectEvent selectEvent) { event = (ScheduleEventImpl) selectEvent.prime. </p:schedule> public void onDateSelect(DateSelectEvent selectEvent) { event = new DefaultScheduleEvent(). event. if defined scheduleEventDialog is updated by default.setStartDate(selectEvent.

getScheduleEvent(). the delta values are provided for information purposes. An example of this is demonstrated at editable schedule example. Instead.onEventResize}”> .ScheduleEntryResizeEvent passed to this listener provides useful information like the event that is resized and the difference in number of days/minutes. Optionally schedule has onEventResizeUpdate option to update any other component(s) on page after an event is resized and defined eventResizedListener is invoked. schedule will query itʼs server side ScheduleModel instance to check for updates..prime.www. you may notice a UI lag as the DOM will be regenerated and replaced. to get notified about this user interaction with ajax.com. Note that by the time this listener invoked. as a result this approach is much more effective then updating with regular PPR.event.Schedule widget. Ajax Updates Schedule has a quite complex UI which is generated on-the-fly by the client side PrimeFaces. </p:schedule> public void onEventMove(ScheduleEntryResizeEvent selectEvent) { event = selectEvent. Resizing an Event Events can be resized. As a result when you try to update schedule like with a regular PrimeFacess PPR.getDayDelta().widget.primefaces. Optionally schedule has onEventMoveUpdate option to update any other component(s) on page after an event is moved and defined eventMoveListener is invoked. } org. <p:schedule value=”#{scheduleBean. schedule already update moved eventʼs end date. int dayDelta = selectEvent.update() at oncomplete event handler. schedule already update moved eventʼs start and end dates. the delta values are provided for information purposes. 295 .event.getMinuteDelta().primefaces. Note that by the time this listener invoked. Whenever you call update..tr org. define a server side eventResizeListener. Schedule provides a simple client side api and the update method. int minuteDelta = selectEvent. save button is calling myschedule. transport method used to load events dynamically is JSON.model}” editable=”true” eventResizeListener=”#{scheduleBean.ScheduleEntryMoveEvent passed to this listener provides useful information like the event that is moved and the difference in number of days/minutes.

next: Button to move calendar forward one month/week/day.www.tr Lazy Loading Schedule assumes whole set of events are eagerly provided in ScheduleModel. //addEvent(. viewName: Button to change the view type based on the view type.. Date end) { //addEvent(. lazy loading features can help to improve performance. } }. 296 .model. public ScheduleBean() { lazyModel = new LazyScheduleModel() { @Override public void loadEvents(Date start.).primefaces. valid values of template options are. } public ScheduleModel getLazyModel() { return lazyModel.lazyModel}” /> To enable lazy loading of Schedule events. only the events that belong to the displayed time frame are fetched whereas in default eager more all events need to be loaded. loadEvents method is called with new boundaries everytime displayed timeframe is changed. if you have a huge data set of events.).. } Customizing Header Header controls of Schedule can be customized based on templates. <p:schedule value=”#{scheduleBean...prime.LazyScheduleModel and implement the loadEvents methods. you just need to provide an instance of org.com. public class ScheduleBean { } private ScheduleModel lazyModel. In lazy loading mode. • • • • • • • title: Text of current month/week/day information prev: Button to move calendar back one month/week/day. prevYear: Button to move calendar back one year nextYear: Button to move calendar forward one year today: Button to move calendar to current month/week/day.

rightHeaderTemplate and centerTemplate attributes.com. “basicWeek” and “basicDay”. agendaWeek <p:schedule value=”#{scheduleBean.next” centerTemplate=”month.www.model}” view=”agendaWeek”/> 297 . agendaWeek. Views 5 different views are supported.tr These controls can be placed at three locations on header which are defined with leftHeaderTemplate. agendaDay” </p:schedule> Output of this header will be as follows. <p:schedule value=”#{scheduleBean.prime. “agendaDay”. these are “month”.model}” leftHeaderTemplate”today” rightHeaderTemplate=”prev. “agendaWeek”.

prime.tr agendaDay <p:schedule value=”#{scheduleBean.com.www.model}” view=”basicWeek”/> basicDay <p:schedule value=”#{scheduleBean.model}” view=”agendaDay”/> basicWeek <p:schedule value=”#{scheduleBean.model}” view=”basicDay”/> 298 .

feel free to apply a patch and contact PrimeFaces team for any questions. 299 . Here is the full list of languages supported out of the box. schedule can automatically configure itself. Key tr ca pt it fr es de ja fi hu Language Turkish Catalan Portuguese Italian French Spanish German Japanese Finnish Hungarian If youʼd like to add a new language. depending on user-agent information.com.www. schedule will implicitly display itself in Turkish. as an example if the user is using a browser accepting primarily Turkish language. Locale information is retrieved from view locale and can be overriden to be a constant using locale attribute. As view locale information is calculated by JSF.prime.tr Locale Support Schedule has built-in support for various languages and default is English.

www. Skinning Schedule resides in a main container which style and styleClass attributes apply. monthNames: [].ScheduleResourceBundle.com. You can easily customize this object to add more languages in your application. Here is an example based on a different theme. </script> Make sure to execute this script block after the Schedule is initialized. day : “”.prime. ideal time would be when document is ready. month: “”. see the main Skinning section for more information.widget.ScheduleResourceBundle[‘key’] = { monthsNameShort:[]. dayNamesShort: []. <script type=”text/javascript”> PrimeFaces.widget.tr Each language translation is located in a javacript bundle object called PrimeFaces. As skinning style classes are global. 300 . week : “”. allDayText : “” }. today: “”.

component.prime.component.tr 3.schedule.primefaces org.component.schedule.primefaces.primefaces.component.68 ScheduleEventDialog ScheduleEventDialog is a customizable dialog specific to the Schedule component.ScheduleEventDialog org.www.primefaces. Implementors need to create the UI of dialog content.com.ScheduleEventDialog org.ScheduleEventDialogTag org.primefaces.schedule.primefaces.ScheduleEventDialogRenderer 301 .ScheduleEventDialogRenderer org.component. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class scheduleEventDialog org.

com. An el expression that maps to a server side UIComponent instance in a backing bean Title of the dialog binding header null null Object String Getting started with scheduleEventDialog See schedule component section for more information regarding the usage of scheduleEventDialog.tr Attributes Name id rendered Default Assigned by JSF TRUE Type String Boolean Description Unique identifier of the component Boolean value to specify the rendering of the component.prime. when set to false component will not be rendered. 302 .www.

69 Sheet Sheet is used with spreadsheet component to display a set of data.SheetTag org. Data to display Name of the request-scoped variable used to refer each data. when set to false component will not be rendered. Boolean value to specify the rendering of the component.primefaces. Number of rows to display per page.Sheet org.spreadsheet.com.spreadsheet. Info Tag Tag Class Component Class Component Type Component Family sheet org.tr 3.primefaces.primefaces.www. 303 . An el expression that maps to a server side UIComponent instance in a backing bean.component.component Attributes Name id rendered Default Assigned by JSF TRUE Type String Boolean Description Unique identifier of the component.prime.component.component.Sheet org.primefaces. Index of the first row to be displayed Title text of the sheet binding value var rows first title null null null null 0 null Object String String Integer Integer String Getting started with Sheet Please see Spreadsheet section to find out how a sheet is used.

component.primefaces.Slider org. when set to false component will not be rendered.SliderRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String Boolean Description Unique identifier of the component Boolean value to specify the rendering of the component.component.component.component org. An el expression that maps to a server side UIComponent instance in a backing bean Id of the input text that the slider will be used for Id of the component to display the slider value.primefaces.component.SliderTag org. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class slider org.SliderRenderer org.component.slider.slider. display modes and skinning.prime. Minimum value of the slider Maximum value of the slider Inline style of the container element Style class of the container element Boolean value to enable/disable the animated move when background of slider is clicked binding for display minValue maxValue style styleClass animate null null null 0 100 null null TRUE Object String String Integer Integer String String Boolean 304 .70 Slider Slider is an input component with various customization options like horizontal&vertical sliding.slider.tr 3.primefaces.Slider org.primefaces.primefaces.primefaces.com.www.

} <h:inputText id=”number” value=”#{sliderBean.tr Name type step Default horizontal 1 Type String Integer Description Sets the type of the slider. “horizontal” or “vertical”. Fixed pixel incerements that the slider move in disabled FALSE Boolean Disables or enables the slider.number}” /> <p:slider for=”number” /> Display Value Using display feature. } public void setNumber(int number) { this. Getting started with Slider Slider requires an input component to work with.number = number. public int getNumber() { return number.www. <h:inputHidden id=”number” value=”#{sliderBean.number}” /> <h:outputText value=”Set ratio to %” /> <h:outputText id=”output” value=”#{sliderBean. you can present a readonly display value and still use slider to provide input. for attribute is used to set the id of the input text component whose input will be provided by the slider. in this case for should refer to a hidden input to bind the value.number}” /> <p:slider for=”number” display=”output” /> 305 . public class SliderBean { } private int number.com.prime.

tr Vertical Slider By default slider works horizontally.number}” /> <p:slider for=”number” type=”vertical” minValue=”0” maxValue=”200”/> Step Step factor defines the interval between each point during sliding. if you want to turn it of animate attribute set the animate option to false.number}” /> <p:slider for=”number” step=”10” /> Animation Sliding is animated by default. Following slider can slide between -100 and +100. <h:inputText id=”number” value=”#{sliderController. vertical sliding is also supported and can be set using the type attribute.www. <h:inputText id=”number” value=”#{sliderBean. <h:inputText id=”number” value=”#{sliderBean.prime. Boundaries Maximum and minimum boundaries for the sliding is defined using minValue and maxValue attributes.number}” /> <p:slider for=”number” minValue=”-100” maxValue=”100”/> 306 .com. Default value is one adn it can be customized with step option.

prime.tr Skinning Slider resides in a main container which style and styleClass attributes apply. see the main Skinning section for more information.ui-slider-vertical . Here is an example based on a different theme.com. These attributes are handy to specify the dimensions of the slider. 307 . Class .www.ui-slider .ui-slider-horizontal .ui-slider-handle Applies Main container element Main container element of horizontal slider Main container element of vertical slider Slider handle As skinning style classes are global. Following is the list of structural style classes.

SpinnerTag org.tr 3.component.www. When itʼs an EL expression.primefaces.primefaces.component.component org.spinner.primefaces. An el expression that maps to a server side UIComponent instance in a backing bean Value of the component than can be either an EL expression of a literal text An el expression or a literal text that defines a converter for the component. itʼs resolved to a converter instance. it must refer to a converter id binding value converter null null null Object Object Converter/ String 308 .com. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class spinner org.component.SpinnerRenderer org.primefaces.71 Spinner Spinner is an input component to provide a numerical input via increment and decrement buttons.SpinnerRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String Boolean Description Unique identifier of the component Boolean value to specify the rendering of the component.spinner. when set to false component will not be rendered.component.component.Spinner org.prime.Spinner org. In case itʼs a static text.spinner.primefaces.primefaces.

tr Name immediate Default FALSE Type Boolean Description Boolean value that specifies the lifecycle phase the valueChangeEvents should be processed. Stepping factor for each increment and decrement Minimum bounday value Maximum boundary value Prefix of the input Suffix of the input Defines when the the buttons would be displayed. valueChange Events are fired in “process validations” phase Marks component as required A method binding expression that refers to a method validationg the input A method binding expression that refers to a method for handling a valuchangeevent Message to be displayed when required field validation fails. when true the events will be fired at “apply request values”.prime. Message to be displayed when conversion fails.www. if immediate is set to false. Message to be displayed when validation fields.com. Width of the buttons Html accesskey attribute Html alt attribute Html dir attribute Html disabled attribute Html lang attribute Html maxlength attribute Html onblur attribute Html onchange attribute 309 required validator valueChangeListener requiredMessage converterMessage validatorMessage stepFactor min max prefix suffix showOn width accesskey alt dir disabled lang maxlength onblur onchange FALSE null null null null null 1 null null null null null null null null null FALSE null null null null Boolean MethodEx pression MethodEx pression String String String Double Double Double String String String Integer String String String Boolean String Integer String String .

com.number}” /> 310 .prime. public class SpinnerBean { } private int number. //Getter and Setter <p:spinner value=”#{spinnerBean.www.tr Name onclick ondblclick onfocus onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup readonly size style styleClass tabindex title Default null null null null null null null null null null null FALSE null null null null null Type String String String String String String String String String String String Boolean Integer String String Integer String Description Html onclick attribute Html ondblclick attribute Html onfocus attribute Html onkeydown attribute Html onkeypress attribute Html onkeyup attribute Html onmousedown attribute Html onmousemove attribute Html onmouseout attribute Html onmouseover attribute Html onmouseup attribute Html readonly attribute Html size attribute Html style attribute Html styleClass attribute Html tabindex attribute Html title attribute Getting Started with Spinner Spinner is an input component and used just like a standard input text.

//Getter and Setter Output of this spinner would be. Prefix and Suffix Prefix and Suffix options enable placing strings on input field. Note that you might need to use a converter to avoid conversion errors since prefix/suffix will also be posted.number}” min=”0” max=”100”/> 311 . <p:spinner value=”#{spinnerBean.tr Step Factor Other than integers. For doubles use the stepFactor attribute to specify stepping amount.number}” prefix=”$”> <f:convertNumber currencySymbol=”$” type=”currency” /> </p:spinner> Boundaries In order to restrict the boundary values.25.com. use min and max options. <p:spinner value=”#{spinnerBean.www.prime. spinner also support doubles so the fractional part can be controller with spinner as well. In case an increment happens a couple of times.number}” stepFactor=”0. Following example uses a stepFactor 0.25”/> public class SpinnerBean { } private double number. <p:spinner value=”#{spinnerBean.

ui-spinner-up .tr Button Width Button width is specified in pixels and customized with width option. Here is an example based on a different theme. Class .www.ui-spinner .prime.ui-spinner-down Applies Main container element of spinner Container of buttons Increment button Decrement button As skinning style classes are global. 312 .ui-spinner-buttons . input field can be styled using style and styleClass options. Following is the list of structural style classes. <p:spinner value=”#{spinnerBean. see the main Skinning section for more information.number}” width=”32” /> Skinning Spinner consists of an input field and two buttons.com.

An el expression that maps to a server side UIComponent instance in a backing bean. when set to false component will not be rendered.SubmenuTag org. Label of the submenu header.component.prime.component.Submenu org.component.Submenu org.com.component Attributes Name id rendered Default Assigned by JSF TRUE Type String boolean Description Unique identifier of the component. Info Tag Tag Class Component Class Component Type Component Family submenu org. Boolean value to specify the rendering of the component.primefaces.primefaces.submenu.primefaces.submenu.72 Submenu Submenu is nested in a menu component and represents a navigation group.primefaces.www. Style of the submenu label Style class of the submenu label binding label labelStyle labelStyleClass null null null null Object String String String Getting started with Submenu Please see Menu or Menubar section to find out how submenu is used with the menus. 313 .tr 3.

www.component.primefaces.spreadsheet.component.component.73 Spreadsheet Spreadsheet is a data component with Excel like inline data editing features.spreadsheet.primefaces.primefaces. when set to false component will not be rendered.spreadsheet.primefaces.SpreadsheetRenderer Attributes Name id rendered Default Assigned by JSF TRUE String boolean Type Description Unique identifier of the component.SpreadsheetTag org.Spreadsheet org.component. Boolean value to specify the rendering of the component.tr 3.com. 314 .component org.prime.component.primefaces.Spreadsheet org.primefaces. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class spreadsheet org.SpreadsheetRenderer org.

String manufacturer.2005. public class Car { } private private private private . String color. Boolean Integer Getting started with Spreadsheet A spreadsheet can have one or more sheets.tr Name binding widgetVar title editable columnWidth Default null null null TRUE null Object String String Type Description An el expression that maps to a server side UIComponent instance in a backing bean. A sheet is a data component and itʼs usage is similar to a datatable. The code for CarBean that would be used to bind a sheet to the car list..add(new Car(”myModel”. public class CarBean { } private List<Car> cars. //add more cars } public List<Car> getCars() { return cars.prime. cars. We will be using a list of cars to display throughout the spreadsheet examples.www. String model. Variable name of the client side widget. public CarListController() { cars = new ArrayList<Car>().”blue”)).”ManufacturerX”. Defines commin column width in pixels. int year. Defines if editing of cells are editable.. Title text of the spreadsheet.com. } 315 .

com..color}" /> </p:column> </p:sheet> </p:spreadsheet> Important point is that column content of each sheet column must be an input text..manufacturer}" /> </p:column> <p:column> <h:inputText value="#{car. Multiple Sheets Any number of sheets can be displayed using spreadsheet and each sheet can display a different set of data.. </p:spreadsheet> Saving Data When saving the edited data displayed with spreadsheet. <p:spreadsheet widgetVar="ss" title="PrimeFaces Spreadsheet"> .year}" /> </p:column> <p:column> <h:inputText value="#{car.model}" /> </p:column> <p:column> <h:inputText value="#{car.save()” value=”Save” /> 316 .cars}" title="Cars"> <p:column> <h:inputText value="#{car. </p:spreadsheet> <p:commandButton onclick=”ss.tr <p:spreadsheet widgetVar="ss" title="PrimeFaces Spreadsheet"> <p:sheet var="car" value="#{tableBean..www.prime. save() function of the client side api needs to be called when submitting the form. <p:spreadsheet widgetVar="ss" title="PrimeFaces Spreadsheet"> <p:sheet> </p:sheet> <p:sheet> </p:sheet> .

set editable option to false. 317 . here is a spreadsheet based on a different theme..www. As an example. <p:spreadsheet widgetVar="ss" editable=”false”> . With this setting spreadsheet will be displayed as readonly. you can find more information at the main skinning documentation. </p:spreadsheet> Skinning Skinning CSS selectors of Spreadsheet are global.tr Readonly If youʼd like to restrict editing on spreadsheet.com..prime.

component.StackTag org.component.component org. An el expression that maps to a server side UIComponent instance in a backing bean.primefaces. An optional image to contain stacked items.primefaces.Stack org.www.prime.com.component.primefaces. Boolean value to specify the rendering of the component.StackRenderer org.primefaces.Stack org. 318 binding icon null null Object String .stack.stack.component.primefaces. when set to false component will not be rendered.primefaces.component.StackRenderer Attributes Name id rendered Default Assigned by JSF TRUE String boolean Type Description Unique identifier of the component.tr 3.stack. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class stack org.74 Stack Stack is a navigation component that mimics the stacks feature in Mac OS X.

pf-stack.prime.tr Name openSpeed closeSpeed widgetVar model Default 300 300 null null String Integer String Type Description Speed of the animation when opening the stack.www.png” url=”#”/> //. <p:stack icon=”/images/stack/stack.png”> <p:menuitem value=”Aperture” icon=”/images/stack/aperture.pf-stack { bottom: 28px. right: 40px. Override this style to change the location of stack. Javascript variable name of the client side widget. Location Stack is a fixed positioned element and location can be change via css. Thereʼs one important css selector for stack called . Stack below has five items with different icons and labels. MenuModel instance to create menus programmatically MenuModel Getting started with Stack Each item in the stack is represented with menuitems.. </p:stack> Initially stack will be rendered in collapsed mode.png” url=”#”/> <p:menuitem value=”Photoshop” icon=”/images/stack/photoshop. Speed of the animation when opening the stack.com. 319 .. } Dynamic Menus Menus can be created programmatically as well. . see the dynamic menus part in menu component section for more information and an example.

prime.tr 3.primefaces.component. 320 .primefaces.component.primefaces. Title text of the tab binding title null null Object Boolean Getting started with the Tab See the sections of components who utilize tab component for more information.Tab org. Boolean value to specify the rendering of the component.TabTag org.75 Tab Tab is a generic container component used by other PrimeFaces components such as tabView or accordionPanel.tabview.TabView. An el expression that maps to a server side UIComponent instance in a backing bean. when set to false component will not be rendered.Tab org.component Attributes Name id rendered Default Assigned by JSF TRUE Type String Boolean Description Unique identifier of the component.primefaces.component.www. Info Tag Tag Class Component Class Component Type Component Family tabView org.com.

tr 3.component.TabViewTag org. dynamic content loading with ajax and content transition effects.tabview. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class tabView org.component.TabViewRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String Boolean Description Unique identifier of the component.primefaces. Boolean value to specify the rendering of the component.component.prime.TabView org. 321 binding widgetVar activeIndex null null 0 Object String Integer .primefaces.primefaces. tabview. Index of the active tab.primefaces.76 TabView TabView is a tabbed panel component featuring client side tabs.component.component.tabview.TabViewRenderer org.primefaces. Variable name of the client side widget.com. when set to false component will not be rendered.primefaces. An el expression that maps to a server side UIComponent instance in a backing bean.www.TabView org.component org.

<p:tabView> <p:tab title=”Tab One”> <h:outputText value=”Lorem” /> </p:tab> <p:tab title=”Tab Two”> <h:outputText value=”Ipsum” /> </p:tab> <p:tab title=”Tab Three”> <h:outputText value=”Dolor” /> </p:tab> </p:tabView> Dynamic Tabs Thereʼre two toggleModes in tabview. To enable dynamic loading.com. content is loaded with ajax. 322 . caching only retrieves the tab contents once and subsequent toggles of a cached tab does not communicate with server. Dom event to use to activate a tab. collapsible event FALSE click Boolean String Getting started with the TabView TabView requires one more child tab components to display. Specifies the toggleMode. since inactive tabs are lazy loaded.www. By default. only the active tab contents are rendered and when an inactive tab header is selected. Duration of the transition effect. pages will load faster. non-dynamic (default) and dynamic. simply set dynamic option to true.prime. all tab contents are rendered to the client. When tab contents are lazy loaded by ajax toggleMode. If caching is turned off. on the other hand in dynamic mode. Dynamic mode is handy in reducing page size.tr Name effect effectDuration dynamic cache Default null null FALSE TRUE Type String String Boolean boolean Description Name of the transition effect. Specifies if all tabs can be collapsed. tab contents are reloaded from server each time tab is clicked.

<p:tabView dynamic=”true” cache=”false”> //tabs </p:tabView> Effects Content transition effects are controlled with effect and effectDuration attributes. turn off caching by cache to false. Here is an example based on a different theme.prime.ui-tabs-panel Applies Main tabview container element Main container of tab headers Each tab container As skinning style classes are global. see the main Skinning section for more information. “normal” (default) and “fast” are the valid options. Class . “height” and “width” are the choices for effect to use. by doing so. If you want to reload content of a tab each time a tab is selected. <p:tabView effect=”opacity” effectDuration=”fast”> //tabs </p:tabView> Skinning Following is the list of structural style classes.tr <p:tabView dynamic=”true”> //tabs </p:tabView> Content Caching Dynamically loaded tabs cache their contents by default.www. 323 .ui-tabs . reactivating a tab doesnʼt result in an ajax request since contents are cached. EffectDuration specifies the speed of the effect. “opacity”. “slow”.com.ui-tabs-nav .

prime.tr 324 .www.com.

component.primefaces.terminal.component.primefaces.www.TerminalRenderer 325 . Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class terminal org.component.Terminal org.component.primefaces.77 Terminal Terminal is an ajax powered web based terminal that brings desktop terminals to JSF.tr 3.prime.primefaces.component org.Terminal org.primefaces.TerminalTag org.primefaces.terminal.TerminalRenderer org.component.com.terminal.

toString(). <p:terminal commandHandler=”#{terminalBean. handleCommand method is invoked with the command name and the command arguments as a String array. Method to be called with arguments to process. String[] params) { if(command. else return command + “ not found”. when set to false component will not be rendered. Primary prompt text. MethodE xpression String widgetVar null Javascript variable name of the wrapped widget Getting started with the Terminal A command handler is necessary to interpret commands entered in terminal. 326 .prime. else if(command.equals(”greet”)) return “Hello “ + params[0].www. binding width height welcomeMessage prompt commandHandler null null null null prime $ null Object String String String String javax.tr Attributes Name id rendered Default Assigned by JSF TRUE Type String boolean Description Unique identifier of the component Boolean value to specify the rendering of the component.com.el.handleCommand}” /> public class TerminalBean { } public String handleCommand(String command. An el expression that maps to a server side UIComponent instance in a backing bean Width of the terminal Height of the terminal Welcome message to be displayed on initial terminal load. } Whenever a command is sent to the server.equals(”date”)) return new Date().

tr Full Screen Terminal Setting width and height to 100% and placing the terminal as a direct child of body element is enough to create a full page terminal.com.www.prime. <body> <p:terminal width=”100%” height=”100%” /> </body> 327 .

component.component.ThemeSwitcherRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String Boolea n Object Description Unique identifier of the component Boolean value to specify the rendering of the component.tr 3.ThemeSwitcher org.themeswitcher.com.primefaces.component.component org.primefaces.primefaces.primefaces.component. when set to false component will not be rendered.primefaces.primefaces.ThemeSwitcherTag org.component.www.themeswitcher. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class themeSwitcher org.ThemeSwitcher org. An el expression that maps to a server side UIComponent instance in a backing bean 328 binding null .78 ThemeSwitcher ThemeSwitcher enables switching PrimeFaces themes on the fly with no page refresh.themeswitcher.prime.ThemeSwitcherRenderer org.

ThemeSwitcher loads the selected themes from jQuery UI project page so online connection is required. <p:themeSwitcher /> 329 . themeSwitcher is used with no required setting.www. Method to be called with arguments to process.prime.com. Javascript variable name of the wrapped widget Switch Theme Theme: Getting started with the ThemeSwitcher In itʼs simplest form.tr Name theme width height buttonHeight initialText buttonPreText null 150 200 14 Default Type String Integer Integer Integer String String Description Width of the terminal Height of the terminal Welcome message to be displayed on initial terminal load. Primary prompt text.

primefaces.TooltipTag org. when set to false component will not be rendered.primefaces. In case itʼs a static text. it must refer to a converter id Javascript variable name of client side tooltip object.TooltipRenderer org. 330 binding value converter null null null Object Object Converter/ String widgetVar null String .79 Tooltip Tooltip goes beyond the legacy html title attribute by providing custom effects. When itʼs an EL expression.component.prime.tooltip.Tooltip org.TooltipRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String boolean Description Unique identifier of the component Boolean value to specify the rendering of the component. html content and advance skinning support.Tooltip org. events.www.tooltip.tooltip. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class tooltip org.primefaces.component org.component.component.tr 3.component.com. An el expression that maps to a server side UIComponent instance in a backing bean Value of the component than can be either an EL expression of a literal text An el expression or a literal text that defines a converter for the component.primefaces. itʼs resolved to a converter instance.primefaces.primefaces.component.

Tooltip below sets a tooltip on the input field. Id of the component to attach the tooltip. The corner of the target element to position the tooltip by. in this case you only need to place one tooltip to your page.prime. Id of the html element to attach the tooltip. Delay time for hiding the tooltip. This would also perform better compared to defining a tooltip for each component. Delay time for displaying the tooltip. Time in milliseconds to process the hide effect. Effect to be used for hiding. <h:inputSecret id=”pwd” value=”#{myBean. Event hiding the tooltip. Event displaying the tooltip. Time in milliseconds to display the effect. Getting started with the Tooltip Tooltip is used by nesting it as a child of itʼs target. The corner of the tooltip to position the targetʼs position.tr Name global targetPosition position showEvent showDelay showEffect showEffectLength hideEvent hideDelay hideEffect hideEffectLength style for forElement Default FALSE bottomRig ht topLeft mouseov er 140 fade 100 mouseout 0 fade 100 blue null null Type boolean String String String Integer String Integer String Integer String Integer String String String Description A global tooltip converts each title attribute to a tooltip.www. <p:tooltip global=”true” /> 331 . Name of the skinning theme. Effect to be used for displaying.password}” /> <p:tooltip for=”pwd” value=”Password must contain only numbers”/> Global Tooltip One powerful feature of tooltip is using title attributes of other JSF components to create the tooltips.com.

<h:inputSecret id=”pwd” value=”#{myBean.tr Effects Showing and Hiding of tooltip along with the effect durations can be customized easily.password}” /> <p:tooltip for=”pwd” value=”Password must contain only numbers” showDelay=”2000” hideDelay=”2000”/> Tooltip above waits for 2 seconds to show and hide itself. Tooltip below is displayed when the input gets the focus and hidden with onblur.www. <h:inputSecret id=”pwd” value=”#{myBean.png” /> <h:outputText value=”Visit PrimeFaces Home” /> </p:tooltip> 332 . <h:outputLink id=”lnk” value=”#”> <h:outputText value=”PrimeFaces Home” /> </h:outputLink> <p:tooltip for=”lnk”> <p:graphicImage value=”/images/prime_logo. Html Content Another powerful feature of tooltip is the ability to display custom content as a tooltip not just plain texts.password}” /> <p:tooltip for=”pwd” value=”Password must contain only numbers” showEffect=”slide” hideEffect=”slide” showEffectLength=”2000” hideEffectLength=”2000”/> Events A tooltip is shown on mouseover event and hidden when mouse is out.prime.com. An example is as follows. If you need to change this behaviour use the showEvent and hideEvent feature. <h:inputSecret id=”pwd” value=”#{myBean..password}” /> <p:tooltip for=”pwd” value=”Password must contain only numbers” showEvent=”focus” hideEvent=”blue”/> Delays Thereʼre sensable defaults for each delay to display the tooltips and these can be configured easily as follows.

color: '#A2D959' }.prime. • • • • • • blue cream dark green light red If you need to create your own style rather than using the built-on ones. Hereʼs the list of supported themes. Just like styling the charts provide your options with a custom javascript object. padding: 5. border: { width: 7. textAlign: 'center'. name: 'dark' }. use the style configuration.tr Skinning Tooltip Tooltip supports built-in themes. radius: 5. </script> <h:outputLink id=”lnk” value=”#”> <h:outputText value=”Custom” /> </h:inputSecret> <p:tooltip for=”lnk” value=”Tooltip with custom style” style=”custom”/> 333 . background: '#A2D959'. color: 'black'. tip: 'topLeft'.com. default theme is blue. <script type=”text/javascript”> var custom = { width: 200.www.

An el expression that maps to a server side UIComponent instance in a backing bean A TreeNode instance as the backing model.Tree org.tree.tr 3.com.tree.80 Tree Tree is is used for displaying hierarchical data or creating site navigations.component. binding null Object value null Object 334 .prime. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class tree org.component.primefaces.primefaces.primefaces.primefaces.tree.component.TreeRenderer org.www.primefaces.component org.component. when set to false component will not be rendered.primefaces.Tree org.TreeRenderer Attributes Name id rendered Default Assigned by JSF TRUE String Boolean Type Description Unique identifier of the component Boolean value to specify the rendering of the component.component.TreeTag org.

TreeNode array to reference the selections. Javascript variable name of the wrapped widget Javascript event to process when a tree node is clicked. Javascript event handler to process after instant ajax selection request.www.Method Expression javax. When set to true expanded nodes will be kept in memory.el. Id(s) of component(s) to update after node selection Javascript event handler to process before instant ajax selection request.Method Expression javax. Style of the main container element of tree Style class of the main container element of tree dynamic expandAnim FALSE null Boolean String collapseAnim null String nodeSelectListener nodeExpandListener nodeCollapseListener cache null null null TRUE javax. valid values are “FADE_IN” or “FADE_OUT” Animation to be displayed on node collapse. When set to true.tr Name var Default null String Type Description Name of the request-scoped variable that'll be used to refer each treenode data during rendering Specifies the ajax/client toggleMode Animation to be displayed on node expand.el.Method Expression Boolean widgetVar onNodeClick expanded null null FALSE String String boolean update onselectStart onselectComplete selection style styleClass null null null null null null String String String Object String String 335 .prime. valid values are “FADE_IN” or “FADE_OUT” Method expression to listen node select events Method expression to listen node expand events Method expression to listen node collapse events Specifies caching on dynamically loaded nodes.el.com. all nodes will be displayed as expanded on initial page load.

public TreeBean() { root = new TreeNode(”Root”.0”. public class TreeBean { } private TreeNode root. TreeNode API has a hierarchical data structure and represents the data to be populated in tree.1”. node0). TreeNode node001 = new TreeNode(”Node 0.0.TreeNode instance which corresponds to the root. TreeNode node00 = new TreeNode(”Node 0. public TreeNode getModel() { return root. TreeNode node11 = new TreeNode(”Node 1. node10).1”. node00).1”.0. TreeNode node1 = new TreeNode(”Node 1”. TreeNode node01 = new TreeNode(”Node 0. root).tr Name propagateSelectionUp Default FALSE Type Boolean Description Specifies if selection will be propagated up to the parents of clicked node Specifies if selection will be propagated down to the children of clicked node Defines the selectionMode propagateSelectionDown FALSE Boolean selectionMode null String Getting started with the Tree Tree is populated with a org. TreeNode node010 = new TreeNode(”Node 0. TreeNode node2 = new TreeNode(”Node 2”. root).model. null).0”. node1).0”. } 336 .0.primefaces. node1).www.com. TreeNode node10 = new TreeNode(”Node 1. node00). TreeNode node0 = new TreeNode(”Node 0”.1.0”.prime.0”. } TreeNode node000 = new TreeNode(”Node 0. node0). root). node01). TreeNode node100 = new TreeNode(”Node 1.

For example if you call node. default type name is “default”.root}” var=”node” dynamic=”true”> <p:treeNode> <h:outputText value=”#{node}”/> </p:treeNode> </p:tree> 337 .com.root}” var=”node”> <p:treeNode> <h:outputText value=”#{node}”/> </p:treeNode> </p:tree> TreeNode vs p:TreeNode You might get confused about the TreeNode and the p:treeNode component. TreeNode API is used to create the node model and consists of org. <p:tree value=”#{treeBean.model. bind the model to the tree as the value and specify a UI treeNode component as a child to display the nodes.prime.tr Once model is instantiated via TreeNodes. Document Tree example in upcoming section demonstrates a sample usage.primefaces.UITreeNode. on the other hand <p:treeNode /> tag represents a component of type org.TreeNode instances.component.www. Encapsulated data List of child nodes Parent node Flag indicating whether the node is expaned or not Dynamic Tree Tree is non-dynamic by default and toggling happens on client-side. Property type data children parent expanded String Object List<TreeNode> TreeNode Boolean Type Description type of the treeNode name. TreeNode API TreeNode has a simple API to use when building the backing model. <p:tree value=”#{treeBean.primefaces.setExpanded(true) on a particular node.tree. In order to enable ajax toggling set dynamic setting to true. tree will render that node as expanded. You can bind a TreeNode to a particular p:treeNode using the type name.

com. tree only loads the children of the particular expanded node and send to the client for display. 338 . this mode is suitable for relatively small datasets and provides fast user interaction. In order to solve this. or a document tree with various folders. On the otherhand itʼs not suitable for large data since all the data is sent to the client. you can place more than one <p:treeNode /> components each having a different type and use that “type” to bind TreeNodeʼs in your model.prime.tr Non-Dynamic When toggling is set to client all the treenodes in model are rendered to the client and tree is created. files each having a different formats (music. Multiple TreeNode Types Itʼs a common requirement to display different TreeNode types with a different UI (eg icon). Following example demonstrates a document explorer. Suppose youʼre using tree to visualize a company with different departments and different employees. To begin with here is the final output.www. Dynamic Dynamic mode uses ajax to fetch the treenodes from server side on deman. When a node is expanded. video). dynamic mode has the advantage of dealing with large data because only the child nodes of the root node is sent to the client initially and whole tree is lazily populated. compared to the client toggling.

} . height:22px. width:34px. cursor:pointer } 339 . height:22px.} /* Folder Theme */ . width:34px.ygtvlph { background: url(lph.ygtvlp { background: url(lp. cursor:pointer} .ygtvln { background: url(ln.ygtvtmh {background:url(tmh.gif) 0 0 no-repeat.ygtvtp {background:url(tp.height:22px.ygtvtm {background:url(tm. Tree Definition <p:tree value=”#{documentsController.} .} . cursor:pointer} . cursor:pointer } .documentStyle {background: url(doc.gif) 0 0 no-repeat.gif) 0 0 no-repeat.gif) 0 0 no-repeat. height:22px.www.gif) 0 0 no-repeat.gif) 0 0 no-repeat.ygtvtph { background: url(tph.mp3Style {background: url(mp3. width:34px.gif) 0 0 no-repeat. width:17px.} . width:17px. width:34px.gif) 0 0 no-repeat.com. height:22px. width:34px.png) no-repeat.pictureStyle {background: url(picture.tr Document Explorer is implemented with four different <p:treeNode /> components and additional CSS skinning to visualize expanded/closed folder icons. height:22px.nodeContent { margin-left:20px. height:22px. cursor:pointer } .gif) 0 0 no-repeat. width:34px.prime. cursor:pointer } .root}” var=”doc”> <p:treeNode> <h:outputText value=”#{doc}”/> </p:treeNode> <p:treeNode type=”document”> <h:outputText value=”#{doc}” styleClass=”documentStyle”/> </p:treeNode> <p:treeNode type=”picture”> <h:outputText value=”#{doc}” styleClass=”pictureStyle”/> </p:treeNode> <p:treeNode type=”mp3”> <h:outputText value=”#{doc}” styleClass=”mp3Style”/> </p:treeNode> </p:tree> Tree Node Styles . width:34px. cursor:pointer} . height:22px.ygtvtn {background:url(tn. height:22px.ygtvlm { background: url(lm.height:22px.ygtvlmh { background: url(lmh.png) no-repeat.gif) 0 0 no-repeat. width:34px. cursor:pointer } .png) no-repeat.} .

prime. TreeNode documents = new TreeNode(”Documents”. TreeNode oylebirgecer = new TreeNode(”mp3”.com. “Oyle Bir Gecer”. } } 340 . TreeNode nemalacak = new TreeNode(”mp3”. TreeNode primefaces = new TreeNode(”PrimeFaces”.jpg”. TreeNode cemKaraca = new TreeNode(”Cem Karaca”.jpg”.pages”. root). root). null). documents). erkinKoray). root).png”. “Nem Alacak Felek Benim”.tr DocumentBean public class DocumentsController { private TreeNode root. “Copculer”. work). music). TreeNode bisiyapmali = new TreeNode(”mp3”. “Toprak Ana”. TreeNode resume = new TreeNode(”document”. TreeNode mogollar = new TreeNode(”Mogollar”. cemKaraca).doc”. “barcelona. “optimus. pictures). “RefDoc. TreeNode pictures = new TreeNode(”Pictures”. TreeNode music = new TreeNode(”Music”. turkish). } public TreeNode getRoot() { return root. //Documents TreeNode expenses = new TreeNode(”document”. mogollar). “Resimdeki Goz Yaslari”.www. cemKaraca). pictures). TreeNode refdoc = new TreeNode(”document”. TreeNode resimdeki = new TreeNode(”mp3”. pictures).doc”. erkinKoray). documents). turkish). turkish). TreeNode optimus = new TreeNode(”picture”. //Music TreeNode turkish = new TreeNode(”Turkish”. TreeNode work = new TreeNode(”Work”. public DocumentsController() { root = new TreeNode(”root”. TreeNode erkinKoray = new TreeNode(”Erkin Koray”. “Resume. TreeNode toprakana = new TreeNode(”mp3”. work). “logo. “Bisi Yapmali”. //Pictures TreeNode barca = new TreeNode(”picture”. TreeNode copculer = new TreeNode(”mp3”. mogollar). primefaces). “Expenses. TreeNode primelogo = new TreeNode(”picture”.

closed. Event Handling Tree is an interactive component. Folders on the other hand have various states like open.getTreeNode(). Similarly document and pictures have their own p:treeNode representations.. This results in rendering all music nodes using that particular p:treeNode representation which displays a note icon. thereʼs also a p:treeNode component with same type “mp3”. see skinning section for more information. it can notify both client and server side listeners about certain events. use event listeners to get the selected node and add new nodes to that particalar tree at runtime.onNodeExpand}” nodeCollapseListener=”#{treeBean. Thereʼre currently three events supported. node select.getData().info(”Collapsed:” + node). the particular java method is executed with the NodeExpandEvent. logger.tr Integration between a TreeNode and a p:treeNode is the type attribute..model}” dynamic=”true” nodeSelectListener=”#{treeBean. closed mouseover and more. expand and collapse.www. </p:tree> The server side listeners are simple method expressions like.com. } public void onNodeCollapse(NodeCollapseEvent event) { String node = event. } public void onNodeExpand(NodeExpandEvent event) { String node = event. open mouse over.toString().toString().toString().getTreeNode(). For example when a node is expanded and a server side nodeExpandListener is defined on tree.prime. <p:tree value=”#{treeBean. for example music files in document explorer are represented using TreeNodes with type “mp3”. The idea for implementing such a use case would be providing only the root and child nodes to the tree.info(”Expanded:” + node). logger. public void onNodeSelect(NodeSelectEvent event) { String node = event. 341 .info(”Selected:” + node). Following tree has three listeners.getTreeNode().onNodeSelect}” nodeExpandListener=”#{treeBean.getData(). These states are easily skinned with predefined CSS selectors. } Event listeners are also useful when dealing with huge amount of data. logger.onNodeCollapse}”> .getData().

www.prime.com.tr

Selection Modes Node selection is a built-in feature of tree and it supports three different modes. single:$ Only one at a time can be selected. multiple: Multiple nodes can be selected. checkbox: Multiple selection is done with checkbox UI.
<p:tree value=”#{treeBean.root}” var=”node” selectionMode=”single|multiple|checkbox” selection=”#{treeBean.selectedNodes}”> <p:treeNode> <h:outputText value=”#{node}”/> </p:treeNode> </p:tree>

Selection should be an array of TreeNodes, tree will find the selected nodes and assign them to your selection model.
public class TreeBean { private TreeNode root; private TreeNode[] selectedNodes; } public TreeBean() { root = new TreeNode(”Root”, null); //populate nodes } public TreeNode getRoot() { return root; } public TreeNode[] getSelectedNodes() { return selectedNodes; } public void setSelectedNodes(TreeNode[] selectedNodes) { this.selectedNodes = selectedNodes; }

342

www.prime.com.tr

Note that for checkbox based selection, following CSS might be necessary to add for better indentation.
.ygtv-checkbox .ygtv-highlight0 .ygtvcontent, .ygtv-checkbox .ygtv-highlight1 .ygtvcontent, .ygtv-checkbox .ygtv-highlight2 .ygtvcontent { padding-left:20px; }

Thatʼs it, now the tree looks like;

Thatʼs it, when the form is submitted with a command component like a button, selected nodes will be populated in selectedNodes property of TreeBean. Instant Node Selection with Ajax Another common requirement is to click on a tree node and display detailed data represented by that node instantly. This is quite easy to implement with tree. Following example displays selected node information in a dialog when node is clicked;
public class TreeBean { } private TreeNode root; private TreeNode[] selectedNodes; public void onNodeSelect(NodeSelectEvent event) { selectedNode = event.getTreeNode(); } //getters, setters and build of tree model

343

www.prime.com.tr <h:form> <p:tree value=”#{treeBean.model}” nodeSelectListener=”#{treeBean.onNodeSelect}” selectionMode=”single” selection=”#{treeBean.selectedNodes}” update=”detail” onselectStart=”dlg.show” onselectComplete=”dlg.hide()”> <p:treeNode> <h:outputText value=”#{node}”/> </p:treeNode> </p:tree> <p:dialog header=”Selected Node” widgetVar=”dlg” width=”250px”> <h:outputText id=”detail” value=”#{treeBean.selectedNode.data}” /> </p:dialog>

</h:form>

When a node is selected, tree makes an ajax request that executes the nodeselectlistener, after that the component defined with the update attribute is updated with the partial response. Optional onselectStart and onselectComplete attributes are handy to execute custom javascript. Selection Propagation Selection propagation is controlled via two attributes named propagateSelectionDown and propagateSelectionUp. Both are false by default. Node Caching When caching is turned on by default, dynamically loaded nodes will be kept in memory so re-expanding a node will not trigger a server side request. In case itʼs set to false, collapsing the node will remove the children and expanding it later causes the children nodes to be fetched from server again. When caching is turned on collapse are not notified on the server side and expand events are executed only once.

Animations Expand and Collapse operations can be animated using expandAnim and collapseAnim. Thereʼre two valid values for these attributes, FADE_IN and FADE_OUT.

344

www.prime.com.tr <p:tree value=”#{treeBean.root}” var=”node” dynamic=”true” expandAnim=”FADE_IN” collapseAnim=”FADE_OUT” > <p:treeNode> <h:outputText value=”#{node}”/> </p:treeNode> </p:tree>

Handling Node Click If you need to execute custom javascript when a treenode is clicked, use the onNodeClick attribute. Your javascript method will be processed with passing an object containing node information as a parameter.
<p:tree value=”#{treeBean.root}” onNodeClick=”handleNodeClick”> ... </p:tree>

function handleNodeClick(args) { alert(”You clicked:” + args.node); }

Expand by default If you need all nodes to be displayed as expanded on initial page load, set the expanded setting to true.
<p:tree value=”#{treeBean.root}” expanded=”true”> ... </p:tree>

Skinning Tree Treeview has certain css selectors for nodes, for full list selectors visit; http://developer.yahoo.com/yui/treeview/#style

Skinning example below demonstrates a sample navigation menu implementation.

345

www.prime.com.tr .ygtvtn { background:transparent none repeat scroll 0 0; height:20px; width:1em; } .ygtvtm { background:transparent uri(sprite-menu.gif) no-repeat scroll -8px 2px; height:20px; width:1em; } .ygtvtmh { background:transparent uri(sprite-menu.gif) no-repeat scroll -8px -77px; height:20px; width:1em; } .ygtvtp { background:transparent uri(sprite-menu.gif) no-repeat scroll -8px -315px; height:20px; width:1em; } .ygtvtph { background:transparent uri(sprite-menu.gif) no-repeat scroll -8px -395px; height:20px; width:1em; } .ygtvln { background:transparent none repeat scroll 0 0; height:20px; width:1em; } .ygtvlm { background:transparent uri(sprite-menu.gif) no-repeat scroll -8px 2px; height:20px; width:1em; } .ygtvlmh { background:transparent uri(sprite-menu.gif) no-repeat scroll -8px -77px; height:20px; width:1em; } .ygtvlp { background:transparent uri(sprite-menu.gif) no-repeat scroll -8px -315px; height:20px; width:1em; } .ygtvlph { background:transparent uri(sprite-menu.gif) no-repeat scroll -8px -395px; height:20px; width:1em; } 346

www.prime.com.tr .ygtvdepthcell { background:transparent none repeat scroll 0 0; height:20px; width:1em; cursor:default; } .ygtvln, .ygtvtn { cursor:default; }

347

www.prime.com.tr

3.81 TreeNode
TreeNode is used with Tree component to represent a node in tree. Info
Tag Tag Class Component Class Component Type Component Family treeNode org.primefaces.component.tree.UITreeNodeTag org.primefaces.component.tree.UITreeNode org.primefaces.component.UITreeNode org.primefaces.component

Attributes
Name id Default Assigne d by JSF TRUE String Type Description Unique identifier of the component Boolean value to specify the rendering of the component, when set to false component will not be rendered. An el expression that maps to a server side UIComponent instance in a backing bean Type of the tree node Style class to apply a particular tree node type

rendered

boolean

binding

null

Object

type styleClass

default null

String String

Getting started with the TreeNode TreeNode is used with Tree component, refer to Tree section for more information.

348

www.prime.com.tr

3.82 TreeTable
Treet is is used for displaying hierarchical data in tabular format.

Info
Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class treeTable org.primefaces.component.treetable.TreeTableTag org.primefaces.component.treetable.TreeTable org.primefaces.component.TreeTable org.primefaces.component org.primefaces.component.TreeTableRenderer org.primefaces.component.treetable.TreeTableRenderer

Attributes
Name id rendered Default Assigned by JSF TRUE String Boolean Type Description Unique identifier of the component Boolean value to specify the rendering of the component, when set to false component will not be rendered. An el expression that maps to a server side UIComponent instance in a backing bean A TreeNode instance as the backing model.
349

binding

null

Object

value

null

Object

TreeNode resume = new DefaultTreeNode(”document”. “RefDoc. public DocumentsController() { root = new TreeNode(”root”.model. “barcelona.prime. Inline style of the container element. null). music).doc”. TreeNode documents = new DefaultTreeNode(”Documents”. TreeNode primefaces = new DefaultTreeNode(”PrimeFaces”. documents).jpg”. work). TreeNode refdoc = new DefaultTreeNode(”document”.www. Variable name of the client side widget. “logo.TreeNode instance that corresponds to the root node.doc”. primefaces). Style class of the container element.png”. //Pictures TreeNode barca = new DefaultTreeNode(”picture”. work). } public TreeNode getRoot() { return root. TreeTable is populated with an org. “Expenses. public class DocumentsController { private TreeNode root. pictures).com. TreeNode primelogo = new DefaultTreeNode(”picture”. pictures).primefaces. TreeNode optimus = new DefaultTreeNode(”picture”. TreeNode work = new DefaultTreeNode(”Work”. Boolean Boolean String Getting started with the TreeTable Similar to the Tree.tr Name var style styleClass readOnly expanded widgetVar Default null null null FALSE FALSE null String String String Type Description Name of the request-scoped variable used to refer each treenode. TreeNode pictures = new DefaultTreeNode(”Pictures”. } } 350 . pictures).pages”.jpg”. TreeNode API has a hierarchical data structure and represents the data to be populated in tree. //Music TreeNode turkish = new TreeNode(”Turkish”. //Documents TreeNode expenses = new DefaultTreeNode(”document”. root). documents). TreeNode music = new DefaultTreeNode(”Music”. Nodes are displayed as readonly and expanded. root). “Resume. Nodes are displayed as expanded. root). “optimus.

tr Usage on a page is very similar to a datatable. set expanded option to true. </p:treeTable> 351 . <p:treeTable value="#{documentsController.type}" /> </p:column> </p:treeTable> Expanded by Default If youʼd like to render the treeTable as expanded by default.root}" var="document"> <p:column> <f:facet name="header"> Name </f:facet> <h:outputText value="#{document.root}" var="document" expanded=”true”> .. toggle arrows are not rendered and treeTable is displayed as expanded. <p:treeTable value="#{documentsController.prime. </p:treeTable> ReadOnly by Default When readOnly mode is enabled.www..size}" /> </p:column> <p:column> <f:facet name="header"> Type </f:facet> <h:outputText value="#{document.name}" /> </p:column> <p:column> <f:facet name="header"> Size </f:facet> <h:outputText value="#{document...root}" var="document" readOnly=”true”> .com. <p:treeTable value="#{documentsController.

Class . Following is the list of structual style classes. Here is an example based on a different theme.ui-treetable-data Applies Main container element (table) Column header container Column header label Body element of the table containing data As skinning style classes are global. see the main Skinning section for more information.www.ui-treetable-header-label . 352 .com.tr Skinning TreeTable content resides in a container element which style and styleClass attributes apply.ui-treetable-header .ui-treetable .prime.

primefaces. Examples are “blur.component. An actionlistener thatʼd be processed in the partial request caused by uiajax. When set to true. UIAjax is attached to a javascript event of itʼs parent.component.www.primefaces.uiajax.component org.UIAjax org.MethodEx pression javax. when set to false component will not be rendered.component. UIAjax Classes Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class ajax org.faces.primefaces.event. binding event action actionListener immediate null null null null FALSE Object String javax.UIAjax org. keyup. etc” A method expression thatʼd be processed in the partial request caused by uiajax. ajax requests are not queued. Boolean value to specify the rendering of the component. click. when false at invoke_application phase.el.prime.tr 3.UIAjaxTag org. ActionListener boolean async FALSE Boolean 353 .com.component.primefaces. An el expression that maps to a server side UIComponent instance in a backing bean Javascript event to attach the uiajax.UIAjaxRenderer Attributes Name id rendered Default Assigned by JSF TRUE String boolean Type Description Unique identifier of the component. Boolean value that determines the phaseId.primefaces.83 UIAjax UIAjax is a generic component that can enable ajax behavior on a regular JSF component. when true actions are processed at apply_request_values.uiajax.uiajax.primefaces.UIAjaxRenderer org.component.

354 . UIAjax requires the clientId of itʼs parent at the rendered output. Note: Id attribute needs to be present because JSF implementations behave differently.tr Name process update onstart oncomplete onsuccess onerror global Default null null null null null null TRUE String String String String String String Type Description Component id(s) to process partially instead of whole view.com. Boolean Getting started with UIAjax UIAjax needs a parent and a javascript event of itʼs parent to work with. setting global to false will not trigger ajaxStatus. Javascript handler to execute when ajax request is completed. Javascript handler to execute when ajax request fails.firstname}”> <p:ajax event=”keyup” update=”out” /> </h:inputText> <h:outputText id=”out” value=”#{bean. Update is not mandatory. if you do not provide the update attribute. each time the user types and releases the key. Client side id of the component(s) to be updated after async partial submit request. an ajax request is sent to the server and normal JSF lifecycle is executed.www.prime. Global ajax requests are listened by ajaxStatus component.firstname}” /> In this example. by default p:ajax updates itʼs parent form. Javascript handler to execute when ajax request succeeds. Javascript handler to execute before ajax request is begins. When the response is received uiajax partially updates the output text with id “out”. While mojarra does not render the clientId of the inputText if id is not provided. <h:inputText id=”firstname” value=”#{bean. myfaces does.

<h:inputText id=”counter”> <p:ajax event=”keyup” update=”out” {counterBean.count = count.} public void increment(ActionEvent actionEvent) { count++. Following example executes an actionlistener each time keyup event occurs and counts the number of keyups.count}” /> actionListener=”# public class CounterBean { private int count.tr UIAjax and ActionEvents UIAjax extends from UICommand. } } UIAjax and Validations A tricky example of uiajax is validations to mimic client side validation.} public void setCount(int count) {this. Following example validates the inputtext on blur event of the input text being validated.firstname}” > <f:validateLength minimum=”5” /> <p:ajax event=”blur” update=”panel” /> </h:inputText> <h:message for=”firstname” /> </h:panelGrid> </p:panel> </h:form> 355 . this means it can execute action methods and actionListeners defined in a JSF backing bean. public int getCount() {return count.com.increment}”/> </h:inputText> <h:outputText id=”out” value=”#{counterBean.www.prime. h:form prependId=”false”> <p:panel id=”panel” header=”New Person”> <h:messages /> <h:outputText value=”5 characters minimum” /> <h:panelGrid columns=”3”> <h:outputLabel for=”firstname” value=”Firstname: *” /> <h:inputText id=”firstname” value=”#{pprBean.

84 Watermark Watermark displayes a hint on an input field describing what the field is for.www.prime.WatermarkRenderer Attributes Name id rendered Default Assigned by JSF TRUE String Boolean Type Description Unique identifier of the component. when set to false component will not be rendered.WatermarkRenderer org.primefaces. Boolean value to specify the rendering of the component. one way is to use for attribute. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class watermark org.com.tr 3.WatermarkTag org.Watermark org.primefaces. An el expression that maps to a server side UIComponent instance in a backing bean Text of watermark. <h:inputText id=”txt” value=”#{bean.component. Id of the component to attach the watermark jQuery selector to attach the watermark binding value for forElement null 0 null null Object Integer String String Getting started with Watermark Watermark requires a target of the input component.primefaces.component.searchKeyword}” /> <p:watermark for=”txt” value=”Search with a keyword” /> 356 .component.component org.component.Watermark org.primefaces.watermark.primefaces.primefaces.watermark.component.watermark.

This would result in updating bean properties with watermark values. watermarks are cleared. This would useful to deal with complex cases.date}” /> <p:watermark forElement=”#date input” value=”Choose a date” /> Form Submissions Watermark is set as the text of an input field which shouldnʼt be sent to the server when an enclosing for is submitted. <p:calendar id=”date” value=”#{bean.com. <h:inputText id=”txt” value=”#{bean. you can override this class to bring in your own style. Watermark component is clever enough to handle this case. 357 . by default in non-ajax form submissions.tr forElement Another way to define a watermark is to use a jQuery selector with the forElement feature.ui-watermarkʼ.prime.searchKeyword}” /> <p:watermark for=”txt” value=”Search with a keyword” /> <h:commandButton value=”Submit” /> <p:commandButton value=”Submit” onclick=”PrimeFaces.cleanWatermarks()” oncomplete=”PrimeFaces.showWatermarks()” /> Skinning Watermark Thereʼs only one css style class applying watermark which is ʻ. However ajax submissions required a little manual effort.www.

An el expression that maps to a server side UIComponent instance in a backing bean Id of the current step in flow Effect to be used for switching between steps.component.prime.component org.primefaces. Style of the main wizard container element. when set to false component will not be rendered.WizardRenderer org. Wizard consists of several child tab components where each tab represents a step in the process.tr 3.primefaces.component.primefaces. Boolean value to specify the rendering of the component.primefaces. Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class wizard org.com.Wizard org.component.wizard.WizardRenderer Attributes Name id rendered Default Assigned by JSF TRUE String boolean Type Description Unique identifier of the component.primefaces.WizardTag org.www.85 Wizard Wizard provides an ajax enhanced UI to implement a workflow easily in a single page.wizard.component. 358 binding step effect style null 0 fade null Object String String String .primefaces.component.Wizard org.wizard.

getCurrentInstance(). public class UserWizard { } private User user = new User().2 libraries like PrimeFaces optimus. To begin with create your backing bean. Optimal scope for wizard is viewScope which is built-in with JSF 2. itʼs important that the bean lives across multiple requests so avoid a request scope bean. As an example following wizard is used to create a new user in a total of 4 steps where last step is for confirmation of the information provided in first 3 steps. Variable name of the client side widget MethodExpression Boolean String String String Getting started with Wizard Each step in the flow is represented with a tab. 359 .user = user. lastname. } User is a simple pojo with properties such as firstname. MyFaces orchestra provides this scope. Specifies visibility of default navigator arrows.prime.www.getFirstname()).} public void setUser(User user) {this. Address Details and Contact Details. Following wizard requires 3 steps to get the user data.0. For JSF 1. Note that last tab contains read-only data for confirmation and the submit button. email and etc.addMessage(null. Personal Details. “Welcome :” + user.tr Name styleClass flowListener showNavBar onback onnext widgetVar Default null null TRUE null null null String Type Description Style class of the main wizard container element. msg).com. public User getUser() {return user. Javascript event handler to be invoked when flow goes back. Seam. FacesContext. Javascript event handler to be invoked when flow goes forward.} public void save(ActionEvent actionEvent) { //Persist user FacesMessage msg = new FacesMessage(”Successful”. Server side listener to invoke when wizard attempts to go forward or back.

info}”/> </h:panelGrid> </p:panel> </p:tab> 360 .tr <h:form> <p:wizard> <p:tab id=”personal”> <p:panel header=”Personal Details”> <h:messages errorClass=”error”/> <h:panelGrid columns=”2”> <h:outputText value=”Firstname: *” /> <h:inputText value=”#{userWizard. value”> <h:outputText value=”Street: “ /> <h:inputText value=”#{userWizard.www.city}” /> </h:panelGrid> </p:panel> </p:tab> <p:tab id=”contact”> <p:panel header=”Contact Information”> <h:messages errorClass=”error”/> <h:panelGrid columns=”2”> <h:outputText value=”Email: *” /> <h:inputText value=”#{userWizard.phone}”/> <h:outputText value=”Additional Info: “ /> <h:inputText value=”#{userWizard.user.lastname}” required=”true”/> <h:outputText value=”Age: “ /> <h:inputText value=”#{userWizard.email}” required=”true”/> <h:outputText value=”Phone: “ /> <h:inputText value=”#{userWizard.age}” /> </h:panelGrid> </p:panel> </p:tab> <p:tab id=”address”> <p:panel header=”Adress Details”> <h:messages errorClass=”error”/> <h:panelGrid columns=”2” columnClasses=”label.user.user.user.user.user.prime.postalCode}” /> <h:outputText value=”City: “ /> <h:inputText value=”#{userWizard.com.firstname}” required=”true”/> <h:outputText value=”Lastname: *” /> <h:inputText value=”#{userWizard.user.street}” /> <h:outputText value=”Postal Code: “ /> <h:inputText value=”#{userWizard.user.user.

city}”/> <h:outputText value=”Email: “ /> <h:outputText value=”#{userWizard.user.user.prime. only the current step is validated.user.lastname}”/> <h:outputText value=”Age: “ /> <h:outputText value=”#{userWizard.phone}”/> <h:outputText value=”Info: “ /> <h:outputText value=”#{userWizard.street}” /> <h:outputText value=”Postal Code: “ /> <h:outputText value=”#{userWizard.user. by this way when you click next. Partial validation is also built-in.user. 361 .email}” /> <h:outputText value=”Phone “ /> <h:outputText value=”#{userWizard. next tabʼs contents are loaded with ajax.www.com.info}”/> <h:outputText /> <h:outputText /> </h:panelGrid> <p:commandButton value=”Submit” actionListener=”#{userWizard.user.postalCode}”/> <h:outputText value=”City: “ /> <h:outputText value=”#{userWizard.firstname}”/> <h:outputText value=”Lastname: “ /> <h:outputText value=”#{userWizard.age}” /> <h:outputText value=”Street: “ /> <h:outputText value=”#{userWizard. if the current step is valid.save}” /> </p:panel> </p:tab> </p:wizard> </h:form> AJAX and Partial Validations Switching between steps is powered by ajax meaning each step is loaded dynamically with ajax.tr <p:tab id=”confirm”> <p:panel header=”Confirmation”> <h:panelGrid id=”confirmation” columns=”6”> <h:outputText value=”Firstname: “ /> <h:outputText value=”#{userWizard. Navigations Wizard provides two icons to interact with. Please see the skinning wizard section to know more about how to change the look and feel of a wizard.user.user. Validations are not executed when flow goes back.user. next and prev.

</p:wizard> public String handleFlow(FlowEvent event) { String currentStepId = event.. in case you need to execute custom javascript after wizard goes back or forth.handleFlow}”> . </p:wizard> <h:outputLink value=”#” onclick=”wiz.previous().www.getNextStep(). Steps here are simply the ids of tab.next(). You just need to provide the names of javascript functions as the values of these attributes.getNextStep()..prime. by using a flowListener you can decide which step to display next so wizard does not need to be linear always. <p:wizard flowListener=”#{userWizard.. String stepToGo = event. define a flowListener.getCurrentStep(). <p:wizard showNavBar=”false” widgetVar=”wiz”> .com. if you need to come up with your own UI.tr Custom UI By default wizard displays right and left arrows to navigate between steps. } if(skip) return “confirm”. Client Side Events Wizard is equipped with onback and onnext attributes. else return event.”>Back</h:outputLink> Navigators can also be customized using facets named back and next.”>Next</h:outputLink> <h:outputLink value=”#” onclick=”wiz. 362 . Ajax FlowListener If youʼd like get notified on server side when wizard attempts to go back or forward. set showNavBar to false and use the provided the client side api..

Selector .ui-wizard-nav-back .tr Skinning Wizard Wizard can be easily customized in terms of styling with the use of style/styleClass attributes and the well defined CSS selectors.ui-wizard . Wizard reside in a div container element which style and styleClass attributes apply.ui-wizard-content . Following is the list.www. 363 .ui-wizard-navbar .prime.ui-wizard-nav-next Main container element Container element of content Container of navigation controls Back navigation control Forward navigation control Applies Here is an example based on a different theme. Additionally a couple of css selectors exist for controlling the look and feel important parts of the wizard like the navigators.com.

Lets first create an example JSF page called touch.www.1 Getting Started with TouchFaces Thereʼre a couple of special components belonging to the touchfaces namespace. Palm.com.xhtml with the touchfaces namespace. <f:view xmlns=”http://www.com. TouchFaces is included in PrimeFaces and no additional configuration is required other than the touchfaces taglib.tr/touch”> </f:view> Next step is defining the <i:application /> component. It mainly targets devices with webkit browsers such as iPhone.org/1999/xhtml” xmlns:f=”http://java. default and dark. <i:application theme=”dark”> //content </i:application> 364 .w3. Themes can be customized using the theme attribute of the application.prime. TouchFaces is built on top of the jqTouch jquery plugin.sun.tr 4.com. “Notes” sample app using the dark theme whereas other apps have the default iphone theme.org/1999/xhtml” xmlns:f=”http://java.prime.tr/touch”> <i:application> </i:application> </f:view> Themes TouchFaces ships with two built-in themes.w3. <f:view xmlns=”http://www. 4.prime. all Android phones. Nokia S60 and etc. TouchFaces TouchFaces is the UI kit for developing mobile web applications with JSF.com/jsf/core” xmlns:i=”http://primefaces.sun.com/jsf/core” xmlns:i=”http://primefaces.

Thatʼs it. Itʼs important to use an icon of size 57x57 to get the best results. <i:application icon=”translate. you now have the base for your mobile web application.prime. To assign an icon to your TouchFaces app use the icon attribute of the application component. 365 .com.png”> //content </i:application> Hereʼs an example demonstrating how it looks when you add your touchfaces app to your home screen.tr Application Icon iPhone has a nice feature allowing users to add web apps to their home screen so that later they can launch these apps just like a native iphone app. Next thing is building the UI with views.www.

com.com.prime.tr 4.com/jsf/core” xmlns:i=”http://primefaces. rowGroups. TableViews TableView is a useful control in iPhone sdk and touchfaces includes a tableview as well to provide a similar feature. TableView consists of rowGroups and rowItems. rowItems and more.org/1999/xhtml” xmlns:f=”http://java. To set a view as the home view use a convention and set the id of the view as “home”. <f:view xmlns=”http://www.2 Views TouchFaces models each screen in a application as “views” and a view is created with the <i:view /> component. Hereʼs a sample tableView. a view can be built with core JSF and components and TouchFaces specific components like tableView.www.w3. <i:view id=”home” title=”Home Page”> //content </i:view> You can have as many views as you want inside an application.sun. Each view must have an id and an optional title.prime. only the home view would be displayed.tr/touch”> <i:application> <i:view id=”home” title=”Home Page”> //Home view content </i:view> </i:application> </f:view> When you run this page. 366 .

tr/touch”> <i:application> <i:view id=”home” title=”Home Page”> <i:tableView> <i:rowGroup title=”Group Title”> <i:rowItem value=”Row 1”/> <i:rowItem value=”Row 2”/> </i:rowGroup> </i:tableView> </i:view> </i:application> </f:view> Output of this page would be.edgetoedge .com.metal 367 .prime.rounded . Group Display Modes A rowgroup can be displayed in a couple of different ways default way is ʻroundedʼ which is used in previous example.prime.com/jsf/core” xmlns:i=”http://primefaces.tr <f:view xmlns=”http://www. Full list of possible values are.plastic .com.w3.sun.www.org/1999/xhtml” xmlns:f=”http://java. .

www.prime.com.tr Following list uses edgetoedge display mode. <i:tableView> <i:rowGroup title=”Group Title” display=”edgetoedge”> <i:rowItem value=”Row 1”/> <i:rowItem value=”Row 2”/> </i:rowGroup> </i:tableView> 368 .

<i:view id=”otherview” title=”Other view”> <f:facet name=”leftNavBar”> <i:navBarControl label=”Home” view=”home” /> </f:facet> //view content </i:view> Similarly a navBarControl to place the right side of the navigation bar use rightNavBar facet.3 Navigations TouchFaces navigations are based on conventions and some components has the ability to trigger a navigation. 369 .www. Also TouchFaces client side api provides useful navigation utilities. using the view attribute you can specify which view to display when the rowItem is clicked. <i:view> <i:tableView display=”regular”> <i:rowGroup title=”Group Title”> <i:rowItem value=”Other View” view=”otherview”/> </i:rowGroup> </i:tableView> </i:view> <i:view id=”otherview” title=”Other view”> //Other view content </i:view> NavBarControl You can also place navBarControls at the navigation bar for use cases such as navigation back and displaying another view.tr 4.prime. An example is rowItem. following control is placed at the left top corner and used to go back to a previous view. NavBarControlʼs are used as facets.com.

goBack() Example below demonstrates how to execute a java method with p:commandLink and go to another view after ajax request is completed.tr Navigation Effects Default animation used when navigation to a view is “slide”. Additional effects are.slide . . <p:commandLink actionListener=”#{bean.com.goTo(‘otherview’.flip .swap . .goTo(viewName.value}” update=”comp” oncomplete=”TouchFaces. ‘flip’)” /> 370 .flip .fade .dissolve .www.cube <i:view id=”otherview” title=”Other view”> <f:facet name=”leftNavBar”> <i:navBarControl label=”Settings” view=”settings” effect=”flip”/> </f:facet> //view content </i:view> TouchFaces Navigation API TouchFaces client side object provides two useful navigation metods.pop .prime.slideup . animation) .

Also rowItem component has built-in support for ajax and can easily load other views dynamically with ajax before displaying them. <i:view> <i:tableView display=”regular”> <i:rowGroup title=”Group Title”> <i:rowItem value=”Other View” view=”otherview” actionListener=”#{bean.tr 4. do ajax form submissions and other ajax use cases.action}” update=”table”/> </i:rowGroup> </i:tableView> </i:view> <i:view id=”otherview” title=”Other view”> <i:tableView id=”table” display=”regular”> <i:tableView> </i:view> 371 .prime.www.4 Ajax Integration TouchFaces is powered by PrimeFaces PPR infrastructure. An example would be. this allows loading views with ajax.com.

com. these apps are also deployed online so you can check them with your mobile device (preferrably iphone. Translate Weather News Notes Mobile Chat TwitFaces PathFinder . ipod touch or an android phone). Source codes are also available in PrimeFaces svn repository.www.prime.5 Sample Applications Thereʼre various sample applications developed with TouchFaces.tr 4. We strongly recommend using these apps as references since each of them use a different feature of TouchFaces.GPS Empty Slot :) 372 .

Boolean value to specify the rendering of the component.Application org.ApplicationRenderer Attributes Name id rendered Default Assigned by JSF TRUE String boolean Type Description Unique identifier of the component.primefaces.ApplicationTag org.primefaces.touch org. binding theme icon null null null Object String String 373 . “default” or “dark”.component.6. when set to false component will not be rendered.primefaces.touch. Icon of the app.component. 4.www.Application org.primefaces.applicaiton. An el expression that maps to a server side UIComponent instance in a backing bean Theme of the app.tr 4.ApplicationRenderer org.application.touch.touch.primefaces.prime.1 Application Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class application org.component.touch.application.component.touch.com.6 TouchFaces Components This section includes detailed tag information of TouchFaces Components.primefaces.

2 NavBarControl Info Tag Tag Class Component Class Component Type Component Family navBarControl org.primefaces. binding label view type effect null null null back null Object String String String String 374 .touch Attributes Name id rendered Default Assigned by JSF TRUE String boolean Type Description Unique identifier of the component.prime. when set to false component will not be rendered.primefaces.component. Type of the display.NavBarControl org.navbarcontrol.com. An el expression that maps to a server side UIComponent instance in a backing bean Label of the item. “back” or “button”. Boolean value to specify the rendering of the component.NavBarControlTag org. Id of the view to be displayed. Effect to be used when displaying the view navigated to.touch.touch.6.tr 4.NavBarControl org.component.primefaces.touch.www.primefaces.navbarcontrol.

3 RowGroup Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class rowGroup org. binding title null null Object String 375 .rowgroup.touch. An el expression that maps to a server side UIComponent instance in a backing bean Optional title of the row group.component.touch.prime. Boolean value to specify the rendering of the component.component.primefaces.RowGroupTag org.touch.6.rowgroup.RowGroup org.primefaces.www.component.rowgroup.com.primefaces.primefaces.touch org.component.tr 4.RowGroup org.touch.primefaces.primefaces.RowGroupRenderer Attributes Name id rendered Default Assigned by JSF TRUE String boolean Type Description Unique identifier of the component.RowGroupRenderer org. when set to false component will not be rendered.touch.

component. Client side of the component(s) to be updated after the partial request.component. when true actions are processed at apply_request_values. ActionListener boolean 376 . Boolean value that determines the phaseId.primefaces. An el expression that maps to a server side UIComponent instance in a backing bean Id of the view to be displayed. when set to false component will not be rendered.RowItemRenderer Attributes Name id rendered Default Assigned by JSF TRUE String boolean Type Description Unique identifier of the component.event.touch org.RowItem org.touch.rowitem. binding view url update value action actionListener immediate null null null null null null null FALSE Object String String String String javax.primefaces. Label of the item.com.RowItemTag org.prime.el.4 RowItem Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class rowItem org.RowItem org.MethodEx pression javax.touch.touch.rowitem.primefaces. when false at invoke_application phase. Optional external url link.component.primefaces.faces.primefaces.primefaces.www. An actionlistener thatʼd be processed in the partial request caused by uiajax.RowItemRenderer org.component.6.tr 4.touch.rowitem. Boolean value to specify the rendering of the component. A method expression thatʼd be processed in the partial request caused by uiajax.touch.

SwitchRenderer Attributes Name id rendered Default Assigned by JSF TRUE Type String boolean Description Unique identifier of the component.touch.primefaces.5 Switch Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class switch org.Switch org. valueChange Events are fired in “process validations” phase Marks component as required A method binding expression that refers to a method validationg the input binding value converter null null null Object Object Converter/ String immediate FALSE boolean required validator FALSE null boolean MethodBindi ng 377 . An el expression that maps to a server side UIComponent instance in a backing bean Value of the component than can be either an EL expression of a literal text An el expression or a literal text that defines a converter for the component. if immediate is set to false.Switch org.switch.www.component.com.component.primefaces.prime.primefaces.component.SwitchTag org.touch. When itʼs an EL expression.primefaces.switch.switch. itʼs resolved to a converter instance.component. Boolean value to specify the rendering of the component.touch. it must refer to a converter id Boolean value that specifies the lifecycle phase the valueChangeEvents should be processed.touch. when true the events will be fired at “apply request values”.touch.tr 4. when set to false component will not be rendered.primefaces. In case itʼs a static text.touch org.6.SwitchRenderer org.primefaces.

Message to be displayed when conversion fails. Message to be displayed when validation fields. 378 .www.com.tr Name valueChangeListener requiredMessage converterMessage validatorMessage Default null null null null Type ValueChang eListener String String String Description A method binding expression that refers to a method for handling a valuchangeevent Message to be displayed when required field validation fails.prime.

touch.primefaces.touch.prime.tableview.primefaces.tableview.6.tableview.component.6 TableView Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class tableView org.touch.touch org.com.component.www.primefaces.primefaces. An el expression that maps to a server side UIComponent instance in a backing bean binding null Object 379 .primefaces.touch.TableView org.primefaces.component.TableView org.TableViewRenderer org.TableView org.component.tr 4.TableViewRenderer Attributes Name id rendered Default Assigned by JSF TRUE String boolean Type Description Unique identifier of the component. Boolean value to specify the rendering of the component. when set to false component will not be rendered.touch.

Boolean value to specify the rendering of the component.touch.primefaces.touch. An el expression that maps to a server side UIComponent instance in a backing bean Optional title of the view.primefaces.6.View org.component.viewrenderer.primefaces. when set to false component will not be rendered.component.com.View org.tr 4.touch org.www.ViewRenderer Attributes Name id rendered Default Assigned by JSF TRUE String boolean Type Description Unique identifier of the component.ViewRenderer org.primefaces.primefaces.view.touch.7 View Info Tag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class view org.ViewTag org.prime.primefaces. binding title null regular Object String 380 .touch.view.touch.component.component.

fast and lightweight. <h:form prependId=”false”> <p:commandButton update=”display” /> <h:outputText id=”display” value=”#{bean. process. Servlet Filters. HtmlParsers and so on. remoteCommand and etc. poll. AjaxViewHandler. 5. If the component that triggers PPR request is at the same namingcontainer (eg.com.value}”/> </h:form> 381 . onstart. etc).prime. you can use the server ids directly. form) with the component(s) it renders. oncomplete.1. PrimeFaces also provides a generic PPR(Partial Page Rendering) mechanism to update any JSF component with an ajax request. PrimeFaces uses only one artifact: a PhaseListener to bring in AJAX. 5. Several components are equipped with the common PPR attributes (update. same applies to every component thatʼs capable of PPR such as commandLink.2 Using IDs Getting Started When using PPR you need to specify which component(s) to update with ajax. As a result thereʼs no need for JSF extensions like AjaxViewRoot.www.1 Partial Rendering In addition to components like autoComplete with built-in ajax capabilities. PrimeFaces aims to keep it clean.1.tr 5.1 Infrastructure PrimeFaces Ajax Framework follows a lightweight approach compared to other AJAX and JSF solutions. AjaxStateManager. We donʼt approach AJAX requests different than the regular requests. In this section although weʼll be using commandButton. 5.value}”/> </h:form> PrependId Setting prependId setting of a form has no effect in how PPR is used. Partial Rendering and Processing PrimeFaces provides a partial rendering and view processing feature to enable choosing what to process in JSF lifecyle and what to render in the end. <h:form> <p:commandButton update=”display” /> <h:outputText id=”display” value=”#{bean.

prime.value}”/> </h:form> Different NamingContainers If your page has different naming containers (eg. This might be the case when you are doing custom scripting on client side.com. PPR can handle requests that are triggered inside a namingcontainer that updates another namingcontainer. <h:form id=”form1”> <p:commandButton update=”form2:display” /> </h:form> <h:form id=”form2”> <h:outputText id=”display” value=”#{bean.value}”/> </h:form> 382 . <h:form id=”form1”> <p:commandButton update=”:form2:display” /> </h:form> <h:form id=”form2”> <h:outputText id=”display” value=”#{bean. <h:form id=”myform”> <p:commandButton update=”myform:display” /> <h:outputText id=”display” value=”#{bean. two forms).www.value}”/> </h:form> This is same as using naming container seperator char as the first character of id search expression so following would work as well. you need to define explicit clientIds to update.tr ClientId It is also possible to define the client id of the component to update.

value}”/> </h:form> Keywords can also be used together with explicit ids. display” is also supported.www.tr Multiple Components Multiple Components to update can be specified with providing a list of ids seperated by a comma. Encapsulating form of the PPR trigger is updated PPR does not change the DOM with ajax response.value1}”/> <h:outputText id=”display2” value=”#{bean.prime.value1}”/> <h:outputText id=”display2” value=”#{bean. whitespace or even both.display2” /> <h:outputText id=”display1” value=”#{bean. <h:form> <p:commandButton update=”@form” /> <h:outputText value=”#{bean. Keyword @this @parent @form @none Description Component that triggers the PPR is updated Parent of the PPR trigger is updated.value2}”/> </h:form> Keywords There are a couple of reserved keywords which serve as helpers. Comma <h:form> <p:commandButton update=”display1. 383 . Example below updates the whole form. so update=”@form.value2}”/> </h:form> WhiteSpace <h:form> <p:commandButton update=”display1 display2” /> <h:outputText id=”display1” value=”#{bean.com.

only specified components are rendered. PrimeFaces Ajax Javascript API See the javascript section 8.3 Notifying Users ajaxStatus is the component to notify the users about the status of global ajax requests.www. 5.prime. This feature is a simple but powerful enough to do group validations. If you want to do a “silent” request not to trigger ajaxStatus instead.4 Bits&Pieces Plain HTML and JSP When using JSP for JSF pages. PrimeFaces PPR has a limitation to update a component that contains plain html which means the html part will be ignored in partial response.2. 384 . This is only a case for JSP and does not happen with Facelets. avoiding validating unwanted components.1 Partial Validation A common use case of partial process is doing partial validations. Various components such as commandButton.tr 5.2 Partial Processing In Partial Page Rendering. Processing means executing Apply Request Values. When city is selected. similary in Partial Processing only defined components are processed. <p:commandButton value=”Silent” global=”false” /> <p:commandButton value=”Notify” global=”true” /> 5.com. it is triggered.1. See the ajaxStatus section to get more information about the component. commandLink are equipped with process attribute.3 to learn more about the PrimeFaces Javascript Ajax API. Global vs Non-Global By default ajax requests are global. meaning if there is an ajaxStatus component present on page. suppose you have a simple contact form with two dropdown components for selecting city and suburb. Process Validations. in examples weʼll be using commandButton. An example with commandButton would be.1. eliminating need of using immediate and many more use cases. set global to false. related suburbs of the selected city is populated in suburb dropdown. also thereʼs an inputText which is required. Update Model and Invoke Application JSF lifecycle phases only on defined components. 5.

www.city}”> <f:selectItems value=”#{bean. 5.city}”> <f:selectItems value=”#{bean.suburbChoices}” /> </h:selectOneMenu> <h:inputText value=”#{bean. <h:form> <h:selectOneMenu id=”cities” value=”#{bean.com.2.cityChoices}” /> <p:ajax actionListener=”#{bean.tr <h:form> <h:selectOneMenu id=”cities” value=”#{bean. only processing that should happen is cities dropdown.suburb}”> <f:selectItems value=”#{bean.email}” required=”true”/> </h:form> That is it.populateSuburbs}” event=”change” update=”suburbs” process=”cities”/> </h:selectOneMenu> <h:selectOneMenu id=”suburbs” value=”#{bean.populateSuburbs}” event=”change” update=”suburbs”/> </h:selectOneMenu> <h:selectOneMenu id=”suburbs” value=”#{bean.suburb}”> <f:selectItems value=”#{bean. 385 .email}” required=”true”/> </h:form> When the city dropdown is changed an ajax request is sent to execute populateSuburbs method which populates suburbChoices and finally update the suburbs dropdown. Parent of the PPR trigger is processed. Partial processing also supports keywords. Keyword @this @parent Description Component that triggers the PPR is processed.cityChoices}” /> <p:ajax actionListener=”#{bean. The solution is to define what to process in p:ajax. Problem is populateSuburbs method will not be executed as lifecycle will stop after process validations phase to jump render response as email input is not provided.2 Keywords Just like PPR. now populateSuburbs method will be called and suburbs list will be populated.suburbChoices}” /> </h:selectOneMenu> <h:inputText value=”#{bean. As weʼre just making a city change request.prime.

you can take advantage of partial processing. Whole component tree is processed just like a regular request. 5. <p:commandButton process=”panel” /> <p:panel id=”panel”> //Children </p:panel> 5.www. Same city-suburb example can be written with keywords as well. <h:selectOneMenu id=”cities” value=”#{bean. Example below demonstrates how to avoid executing page validations before navigating to another page. Whether you are doing a ajax request or a regular ajax request that causes a full page submit. <h:form> //Components with validation constraints <p:commandButton action=”navigate” process=”@this” ajax=”false”/> </h:form> 386 .2. all children of that panel would be processed in addition to the panel itself.com.prime.1. Compared to immediate.tr Keyword @form @none @all Description Encapsulating form of the PPR trigger is processed No component is processed. children of this component is processed as well.4 Ajax vs Non-Ajax An important feature of partial process is being a generic solution for both ajax and nonajax cases.populateSuburbs}” event=”change” update=”suburbs” process=”@this”/> </h:selectOneMenu> Important point to emphasize is. when a component is specified to process partially.cityChoices}” /> <p:ajax actionListener=”#{bean. See section 5.city}”> <f:selectItems value=”#{bean. This is usually achieved with setting immediate to true in standard JSF.2 for more information about how to define ids in process specification. So for example if you specify a panel.2. partial processing is much more flexible.3 Using Ids Partial Process uses the same technique applied in PPR to specify component identifiers to process.

net 387 . Http Streaming: With this approach. response is never committed and client always stays connected.com. deal with container differences.java. Following is a schema describing these techniques. Comet can be implemented with either long-polling or http-streaming. PrimeFaces Push is built-on top of Atmosphere Framework.3+.dev. <http://atmosphere.1 Atmosphere Atmosphere is a comet framework that can run on any application server supporting servlet 2. Current version of PrimeFaces is based on http-streaming. push data is streamed to the client to process. Next section describes atmosphere briefly. Each container provides their own proprietary solution (Tomcatʼs CometProcessor. long-polling support will be added very soon in upcoming releases.prime. after the response is retrieved browsers connects and begins to waiting for data again. JBossʼs HttpEvent.www. Auctions and chat are well known example use cases of comet technique.AsycnListener. Servlet 3. Ajax Push/Comet Comet is a model allowing a web server to push data to the browsers. See atmosphere home page for more information. Long-Polling: Browsers requests are suspended and only resumed when server decides to push data.servlet. 6. Glassfish Grizzly etc). Polling: Regular polling is not real comet. browser compatibility.0 aims to unify these apis with a standard javax. broadcasting of events and many more. Atmosphere does all the hard work. This approach has nothing to do with comet and just provided for comparison. basically browser sends request to server based on a specific interval.tr 6.

com.prime. youʼll also need the atmosphere-compat-* libraries.PrimeFacesCometServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>Comet Servlet</servlet-name> <url-pattern>/primefaces_comet/*</url-pattern> </servlet-mapping> Atmosphere Libraries PrimeFaces needs at least version of 0.0” encoding=”UTF-8”?> <Context> <Loader delegate=”true”/> </Context> 388 .2.net/maven/2/org/atmosphere/ context. 6.java. youʼll also need a context. PrimeFaces simplifies developing comet applications with JSF.www. <servlet> <servlet-name>Comet Servlet</servlet-name> <servlet-class>org. <?xml version=”1.1 Setup Comet Servlet First thing to do is to configure the PrimeFaces Comet Servlet. an example for this would be the PrimeFaces chat sample app that can easily be created with a couple of lines.xml If youʼre running tomcat.tr 6.xml under META-INF.comet. You can find these libraries at. you can download atmosphere from atmosphere homepage. http://download. This servlet handles the JSF integration and Atmosphere.5.primefaces.1.2 PrimeFaces Push PrimeFaces Lead Cagatay Civici is also a committer of Atmosphere Framework and as a result PrimeFaces Push is powered by Atmosphere Runtime.

public void send(ActionEvent event) { CometContext. /** * @param channel Unique name of communication channel * @param data Information to be pushed to the subscribers as json */ CometContext. weʼll develop a simple chat application with PrimeFaces. loggedIn = true.CometContext which has a simple api to push data to browsers.prime. Object data). private boolean loggedIn.comet. private String username.getCurrentInstance(). } public void login(ActionEvent event) { FacesContext.www.publish(”chat”. 6. message = null. new FacesMessage(”You're logged in!”)). public class ChatController implements Serializable { private String message.tr 6.publish(”chat”. } } //getters&setters 389 .”).addMessage(null.2.2. it has two attributes you need to define. onpublish: Javascript event handler to be called when server sends data.3 Push Component <p:push /> is a PrimeFaces component that handles the connection between the server and the browser.primefaces.publish(String channel.2. 6.com.2. letʼs begin with the backing bean.4 Putting it together: A Chat application In this section. username + “ has logged in. <p:push channel=”chat” onpublish=”handlePublish”/> channel: Name of the channel to connect and listen. CometContext. username + “: “ + message). CometContext Main element of PrimeFaces Push on server side is the org.

data.www.”/> </h:panelGrid> </p:panel> </h:form> <p:push channel=”chat” onpublish=”handlePublish” /> </body> .com.xhtml.data + ‘<br />’).val('').loggedIn}” toggleable=”true”> <h:panelGrid columns=”3”> <h:outputText value=”Message:” /> <h:inputText id=”txt” value=”#{chatController..login}” oncomplete=”$('#display').send}” oncomplete=”$('#txt').username}” /> <p:commandButton value=”Login” actionListener=”#{chatController.loggedIn}”> <h:panelGrid columns=”3” > <h:outputText value=”Username:” /> <h:inputText value=”#{chatController. } </script> </head> <body> <p:outputPanel id=”display” /> <h:form prependId=”false”> <p:growl id=”growl” /> <p:panel header=”Sign in” rendered=”#{!chatController..append(response.message}” /> <p:commandButton value=”Send” actionListener=”#{chatController.prime. <head> <script type=”text/javascript”> function handlePublish(response) { $(‘#display’).tr And the chat. Published object is serialized as JSON.slideDown()”/> </h:panelGrid> </p:panel> <p:panel header=”Signed in as : #{chatController...username}” rendered=”#{chatController. 390 . . passed to publish handlers and is accesible using response.

PrimeFaces defines two javascript namespaces. YUI version is 2.8.Tree .2 Namespaces To be compatible with other javascript entities on a page..* Contains custom PrimeFaces widgets like.com.PrimeFaces. params) cleanWatermarks() showWatermarks() 7.widget.widget..widget.ajax namespace contains the ajax API which is described in next section. Show addSubmitParam(parent.4.Poll .PrimeFaces. fn) Description Escaped JSF ids with semi colon to work with jQuery selectors Executes the fn callback function when a specific dom element with identifier “id” is ready when document is being loaded Adds hidden request parameters dynamically Watermark component extension. Thereʼre two libraries we use.prime.r4 and jQuery version is 1.DataTable .1 PrimeFaces Global Object PrimeFaces is the main javascript object providing utilities like onContentReady and more.tr 7.and more.2.ajax. these are the latest versions at the time of writing. 7. 391 . Javascript API PrimeFaces renders unobstrusive javascript which cleanly seperates behavior from the html.PrimeFaces. dom manipulation plus some UI plugins. Method escapeClientId(id) onContentReady(id. Most of the components have a corresponding client side widget with same name.* PrimeFaces. PrimeFaces. cleans all watermarks on page before submitting the form. PrimeFaces.widget. YUI for most of the widget controls and jQuery for ajax. .www.

xmlhttprequest and optional arguments provided by RequestContent API. Configuration Options Option formId async global onstart(xhr) Description Id of the form element to serialize. default is true. params: Parameters to send. Javascript callback to process when ajax request returns with success code. config. onsuccess(data. Takes xmlhttprequest as the parameter.tr 7. PrimeFaces. xhr.AjaxRequest(url. status string and optional arguments provided by RequestContext API. args) onerror(xhr. status string and exception thrown if any.prime. xmlhttprequest.3 Ajax API PrimeFaces Ajax Javascript API is powered by jQuery and optimized for JSF. PrimeFaces. Function signature is as follows. status. url: URL to send the request.ajax. Takes three arguments. status. config: Configuration options. Takes three arguments.com. return false to cancel the request. default is false. parameters). Whole API consists of three properly namespaced simple javascript functions.www. Flag to define if p:ajaxStatus should be triggered or not. Javascript callback to process before sending the ajax request.ajax. Takes four arguments. xml response. Javascript callback to process when ajax request fails. Flag to define whether request should go in ajax queue or not. xmlhttprequest. Javascript callback to process when ajax request completes. status code. args) 392 . status.AjaxRequest Sends ajax requests that execute JSF lifecycle and retrieve partial output. exception) oncomplete(xhr.

PrimeFaces.com.tr Parameters You can send any number of parameters as the third argument of request function.} }). PrimeFaces. in addition thereʼre some predefined parameters name that have a special meaning to PrimeFaces.ajax. { formId:’userForm’.www.. ‘param_name2’:’value2’ } ). 393 . {formId:’userForm’}).name}” /> .AjaxRequest(‘/myapp/createUser. <h:form id=”userForm”> <h:inputText id=”username” value=”#{userBean.PARTIAL_SOURCE_PARAM Description Component Id(s) to update Component Id(s) to process Examples Suppose you have a JSF page called createUser. oncomplete:function(xhr. PrimeFaces.AjaxRequest(‘/myapp/createUser..PARTIAL_UPDATE_PARAM PrimeFaces.jsf with a simple form and some input components.jsf’. {formId:’userForm’}.ajax.AjaxRequest(‘/myapp/createUser.ajax. Adding a status callback is also easy using the configuration object. status) {alert(‘Done’). { ‘param_name1’:’value1’. More components </h:form> You can post all the information in form with ajax using.user. Name PrimeFaces.jsf’.jsf’. You can pass as many parameters as you want using the parameters option.prime.

Finally you can configure request to what to process and what to update. provide the id using the parameters option. PrimeFaces.AjaxResponse updates the specified components if any and synchronizes the client side JSF state.prime.PARTIAL_UPDATE_PARAM:’username’. {formId:’userForm’}. PrimeFaces.AjaxRequest(‘/myapp/createUser.ajax.ajax.ajax.jsf’.tr If youʼd like to update a component with ajax.ajax.faces. PrimeFaces. PrimeFaces. Serializes a javascript object literal like {name:ʼR10ʼ. Method encodeViewState updateState serialize(literal) Description Encodes value held by javax. {formId:’userForm’}. number:10} to “name=R10&number=10” 394 .ViewState hidden parameter.PARTIAL_UPDATE_PARAM:’username’} ). Example below processes createUserButton on the server side and update username component. {PrimeFaces.ajax. Syncs serverside state with client state.www. { PrimeFaces.AjaxResponse PrimeFaces. serializing a javascript object literal to a request query string and more.AjaxUtils AjaxUtils contains useful utilities like encoding client side JSF viewstate.AjaxRequest(‘/myapp/createUser.com. DOM updates are implemented using jQuery which uses a very fast algorithm. PrimeFaces.jsf’.PARTIAL_PROCESS_PARAM:’createUserButton’ } ).

prime.com.www. http://www. Skinning PrimeFaces is integrated with powerful ThemeRoller CSS Framework.tr 8. Currently there are 28 pre-designed themes that you can preview and download from PrimeFaces theme gallery.html 395 .primefaces.org/themes.

Once you have created your own theme the way you like follow the steps in installing themes section to start using it.2 Creating a New Theme If youʼd like to create your own theme instead of using the pre-defined ones. <link type=”text/css” rel=”stylesheet” href=”%PATH_TO_THEME_FOLDER%/skin.0).tr 9. <link type=”text/css” rel=”stylesheet” href=”#{request.www. <context-param> <param-name>primefaces. as an example assume you want to use redmond theme which youʼve copied the theme contents to themes folder of your application.css and images that are located in images folder. A theme consists of a css file called skin. 1) Add the skin.css file to your JSF page using link or h:outputStylesheet(JSF 2.com.prime. extract the contents to a folder in your applications. 396 .contextPath}/themes/redmond/skin. that is easy as well because ThemeRoller provides a powerful and easy to use online tool for this. once you download the zipped theme file from PrimeFaces Theme Gallery.css” /> 2) Configure PrimeFaces not to add itʼs bundled default skin (sam).css” /> 9.skin</param-name> <param-value>none</param-value> </context-param> Thatʼs it.1 Applying a Theme Applying a theme to your PrimeFaces project is very easy.

mostly they only define colors.ui-widget { font-size: 12px !important.www.ui-state-default .ui-icon Applies All PrimeFaces components Header section of a component Content section of a component Default class of a clickable Hover class of a clickable When a clickable is selected An icon of a component These classes are not aware of structural css like margins and paddings. use the .ui-widget .prime. dimensions and positioning.ui-widget style class. . . For example Panel componentʼs header section has the . display type.ui-widget.ui-widget-header . PrimeFaces seperates structual css from skinning css.ui-panel-titlebar style class.ui-widget-header also that defines the panel colors also applies to the panel header. Skinning Tips 1) To change the font-size of PrimeFaces components globally.ui-widget . background images are some examples of type of selectors. Skinning Selectors ThemeRoller features a couple of skinning selectors.ui-state-hover . to change the color of a panel header you donʼt need to about this class as . colors.ui-state-active . An example with 12px font size.tr 9.ui-widget-content .com. Selector . most important of these are. padding. Structural CSS These style classes define the skeleton of the components and include css properties such as margin. } 397 . Skinning CSS Skinning defines the look and feel. This clean seperation brings great flexibility in Skinning because you donʼt need to know each and every skinning selectors of components to change their style.3 How Skinning Works Powered by ThemeRoller.

398 .contextPath}/themes/#{user. 4) If you are using Apache Trinidad or JBoss RichFaces.theme}/skin. PrimeFaces Theme Gallery includes Trinidadʼs Casablanca and RichFacesʼs BlueSky theme. keep the userʼs selected theme in a session scoped bean and use EL to change it dynamically when including the skin.www. select one of the pre-designed themes that is close to the color scheme you want and customize that to save time.tr 2) To create a themeable application.com. You can use these themes to make PrimeFaces look like Trinidad or RichFaces components.css to your page.prime.css” /> 3) When creating your own theme with themeroller tool. <link type=”text/css” rel=”stylesheet” href=”#{request.

status. RequestContext API Method isAjaxRequest() addCallBackParam(String name. requestContext.getCurrentInstance().1 RequestContext RequestContext is a simple utility that provides useful goodies such as adding parameters to ajax callback functions. args)” /> public void validate(ActionEvent actionEvent) { //isValid = calculate isValid RequestContext requestContext = RequestContext.addCallbackParam(”isValid”. Callback Parameters There may be cases where you need values from backing beans in ajax callbacks. RequestContext requestContext = RequestContext. Object value) addPartialUpdateTarget(String target).getCurrentInstance().hide() to the oncomplete event of a p:commandButton in dialog.validate}” oncomplete=”handleComplete(xhr. true or false). Utilities 9.tr 9. Description Returns a boolean value if current request is a PrimeFaces ajax request. RequestContext can be obtained similarly to FacesContext.prime.www. you need to hide the dialog or if thereʼre any validation errors. itʼll always hide the dialog even it still needs to be open. Specifyes component(s) to update at runtime. } 399 .com. Adds parameters to ajax callbacks like oncomplete. Callback Parameters are serialized to JSON and provided as an argument in ajax callbacks. <p:commandButton actionListener=”#{bean. form needs to be open. Suppose you have a form in a p:dialog and when the user ends interaction with form. If you only add dialog.

args) { var isValid = args. Each parameter is serialized as JSON and accessesible through args parameter so pojos are also supported just like primitive values. args) { var firstname = args. public void validate(ActionEvent actionEvent) { //isValid = calculate isValid RequestContext requestContext = RequestContext.isValid. Following example sends a pojo called User that has properties like firstname and lastname to the client. status.user.prime.com. requestContext. addPartialUpdateTarget method is added to handle this case. <script type=”text/javascript”> function handleComplete(xhr. Runtime Partial Update Configuration There may be cases where you need to define which component(s) to update at runtime rather than specifying it declaratively at compile time.getCurrentInstance(). status. } </script> You can add as many callback parameters as you want with addCallbackParam API. button actionListener decides which part of the page to update on-the-fly. requestContext.hide(). 400 .tr isValid parameter will be available in handleComplete callback as.www. the value of this parameter is true only when a validation error happens at processValidations phase of JSF lifecycle.addCallbackParam(”isValid”. } </script> Default validationFailed By default validationFailed callback parameter is added implicity.addCallbackParam(”user”. In example below. } <script type=”text/javascript”> function handleComplete(xhr.lastname. true or false).user. user).firstname. if(isValid) dialog. var lastname = args.

2 EL Functions PrimeFaces provides built-in EL extensions that are helpers to common use cases... Returns a boolean value if has any of the given roles or not.getCurrentInstance().save}” /> <p:panel id=”panel”> .com.. <h:form id=”form1”> <h:inputText id=”name” /> </h:form> //#{p:component(‘name’)} returns ‘form1:name’ Page Authorization Function ifGranted(String role) ifAllGranted(String roles) ifAnyGranted(String roles) Description Returns a boolean value if user has given role or not.tr <p:commandButton value=”Save” actionListener=”#{bean. 401 . if(outcome) requestContext.www. 9.prime. This function is useful if you need to work with javacript. </p:panel> public void save(ActionEvent actionEvent) { //boolean outcome = . </p:panel> <p:dataTable id=”table”> . RequestContext requestContext = RequestContext...addPartialUpdateTarget(”table”).. } When the save button is clicked. you can either configure the datatable or the panel to be updated with ajax response. Common Functions Function component(ʻidʼ) Description Returns clientId of the component with provided server id parameter. depending on the outcome. else requestContext. Returns a boolean value if has all of the given roles or not.addPartialUpdateTarget(”panel”).

ROLE_READER’)}” /> <p:commandButton rendered=”#{p:ifAnyGranted(‘ROLE_ADMIN. Returns the principial instance of the logged in user. Returns the name of the logged in user.com.www.tr Function ifNotGranted(String roles) remoteUser() userPrincipal() Description Returns a boolean value if has all of the given roles or not.prime. <p:commandButton rendered=”#{p:ifGranted(‘ROLE_ADMIN’)}” /> <h:inputText disabled=”#{p:ifGranted(‘ROLE_GUEST’)}” /> <p:inputMask rendered=”#{p:ifAllGranted(‘ROLE_EDITOR. ROLE_EDITOR’)}” /> <p:commandButton rendered=”#{p:ifNotGranted(‘ROLE_GUEST’)}” /> <h:outputText value=”Welcome: #{p:remoteUser}” /> 402 .

Source codes of these applications are available at the PrimeFaces subversion repository and theyʼre deployed online time to time.tr 10. Integration with Java EE PrimeFaces is all about front-end and can be backed by your favorite enterprise application framework. Application MovieCollector PhoneBook BookStore Technologies PrimeFaces-Spring-JPA PrimeFaces-Seam-JPA PrimeFaces-Optimus-Guice-JPA All applications are built with maven and use in memory databases so itʼs as easy as running. Following frameworks are fully supported.com.www.prime. mvn clean jetty:run or mvn clean jetty:run-exploded command to deploy in your local environment. • Spring Core (JSF Centric JSF-Spring Integration) • Spring WebFlow (Spring Centric JSF-Spring Integration) • Seam Weʼve created sample applications to demonstrate several technology stacks involving PrimeFaces and JSF at the front layer. 403 .

xhtml extension to the list. Presence of PrimFaces jar in classpath enables tag and attribute completion support.com. 11. Open Preferences .tr 11.prime.> General -> Content Types -> Text -> JSP and add *. IDE Support 11.www.8 out of the box.2 Eclipse Eclipse requires a little hack to enable completion support with Facelets.1 NetBeans PrimeFaces tag completion is supported by NetBeans 6. 404 .

405 . PrimeFaces components can get tag/attribute completion when opened with jsp editor.www.com.prime.tr With this setting.

tr 406 .com.www.prime.

<?xml version=”1. Portlets PrimeFaces works well in a portlet environment.faces.www.faces.defaultViewId.portlet.jsp</value> </init-param> <init-param> <name>javax.prime.xsd http://java.tr 12. PrimeFaces portlets should work with any compliant portlet-bridge implementation.0” xmlns:xsi=”http://www.xml from the prime-portlet application that is available in subversion repository of PrimeFaces.org/2001/XMLSchema-instance” xsi:schemaLocation=”http://java.jsp</value> </init-param> <init-param> <name>javax.xsd”> <portlet> <portlet-name>primeportlet</portlet-name> <display-name>Prime Portlet</display-name> <portlet-class>javax. PrimeFaces Ajax infrastructure is tuned for portal environments.w3.0 JSRs are tested and supported.xsd” version=”2.com/xml/ns/portlet/portlet-app_2_0.sun.0 and portlet 2.portlet.faces.edit</name> <value>/edit.sun.0”?> <portlet-app xmlns=”http://java.com/xml/ns/portlet/portlet-app_2_0.xml Hereʼs a sample portlet.preserveActionParams</name> <value>true</value> </init-param> <supports> <mime-type>text/html</mime-type> <portlet-mode>view</portlet-mode> <portlet-mode>edit</portlet-mode> </supports> <portlet-info> <title>Prime Portlet</title> <short-title>Prime</short-title> </portlet-info> </portlet> </portlet-app> 407 . portlet.com/xml/ns/portlet/portletapp_2_0.com. we highly encourage using MyFaces portlet bridge which is the reference implementation.view</name> <value>/view. both portlet 1.portlet.GenericFacesPortlet</portlet-class> <init-param> <name>javax.faces.defaultViewId.portlet.sun.

com.faces.portlet. 408 .prime.tr Important note here is to preserve the action parameters to make PrimeFaces PPR work with portlets.www. <init-param> <name>javax.preserveActionParams</name> <value>true</value> </init-param> Other than this thereʼs no specific change in the application configuration.

org/documentation.com. Please use the forum before creatin an issue instead.prime. 409 . Forum is public to everyone and registration is required to do a post.com. wiki and more please visit.html Support Forum PrimeFaces discussions take place at the support forum. Project Resources Documentation Reference documentation is the major resource for documentation.com/p/primefaces/issues/list Online Demo PrimeFaces ShowCase demo is deployed online at.tr/forum Source Code PrimeFaces source is at google code subversion repository.primefaces. taglib docs.com/svn Issue Tracker PrimeFaces issue tracker uses google codeʼs issue management system.google.prime. http://primefaces.org:8080/prime-showcase Twitter and Facebook You can follow PrimeFaces on twitter using @primefaces and join the Facebook group. http://www. http://code.googlecode. http://primefaces. http://www. for additional documentation like apidocs.tr 13.primefaces.www.

itʼs publicly available and free registration is required before posting. can primefaces be compatible? Compatibility is a major goal of PrimeFaces. Is enterprise support available? Yes. 9.www. Where is the source for the example demo applications? Source code of demo applications are in the svn repository of PrimeFaces at /examples/ trunk folder. The common reason is the response mimeType when using with PrimeFaces with facelets.tr 14. PrimeFaces leader Cagatay Civici is a JavaServer Faces Expert Group Member. What is the license PrimeFaces have? PrimeFaces is free to use and licensed under Apache License V2.prime. 7. 8. With facelets some components like charts do not work in Safari or Chrome but thereʼs no problem with Firefox. we aim to be compatible with major component suites. How can I get support? Support forum is the main area to ask for help. a Turkish software development company specialized in Agile Software Development. 2. Apache V2 License is a commercial friendly library. Who develops PrimeFaces? PrimeFaces is developed and maintained by Prime Technology. With facelets you can use the <f:view contentType=”text/html”> to enforce this setting. JSF and Java EE. Please do not email the developers of PrimeFaces directly and use support forum instead.com.primefaces. IceFaces is known to be incompatible. Where can I get an unreleased snapshot? Nightly snapshot builds of a future release is deployed at http://repository. http://www. Please visit support page on PrimeFaces website for more information. enterprise support is also available. Apache MyFaces PMC member and committer of Atmosphere Ajax Push Framework. 410 .prime. 6.org/support. 3. You need to make sure responseType is “text/html”.tr.com. 5. Iʼm using x component library in my project. FAQ 1. Can I use PrimeFaces in a commercial software? Yes. JBoss Richfaces and Apache Trinidad(see this blog entry) are tested with and known to be compatible with PrimeFaces. Nightly snapshot builds of each sample application are deployed at Prime Technology Maven Repository.html 4.

tr THE END 411 .com.www.prime.