Home

USER'S GUIDE 3.3

1. public void setCountCint count this count count public void increment count Events Default client side events are defined by components that support client behaviors for input components it is onchange and for command components it is onclick In order to override the dom event to trigger the ajax request use event option In following example ajax request is triggered when key is up on input field lt h inputText id firstname value bean text gt lt p ajax update out event keyup gt lt h inputText gt lt h outputText id out value bean text gt Partial Processing Partial processing is used with process option which defaults to this meaning the ajaxified component See section 5 for detailed information on partial processing 19 PrimeFaces User s Guide 3 3 AjaxStatus AjaxStatus is a global notifier for ajax requests made by PrimeFaces components i Info Tag ajaxStatus Component Class org primefaces component ajaxstatus AjaxStatus Component Type org primefaces component AjaxStatus Component Family org primefaces component Renderer Type org primefaces component AjaxStatusRenderer Renderer Class org primefaces component ajaxstatus AjaxStatusRenderer Attributes i Unique identifier of the component rendered TRUE Boolean Boolean value to specify the rendering of the component binding null Object An el expression that maps to a server side UIC
2. public StreamedContent getMediaQ return media 256 PrimeFaces User s Guide 3 58 MegaMenu MegaMenu is a horizontal navigation component that displays submenus together Info Tag Component Class Component Type Component Family Renderer Type Renderer Class Attributes Megamenu S O MegaMenu displays submenus of root items together Sports Entertainment Business Tech Quit wa im Soprancs lt p column gt lt p submenu label Sports 1 gt megaMenu org primefaces component megamenu MegaMenu org primefaces component MegaMenu org primefaces component org primefaces component MegaMenuRenderer org primefaces component megamenu MegaMenuRenderer rendered binding widgetVar model style styleClass TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered null Object An el expression that maps to a server side UIComponent instance in a backing bean Name of the client side widget null MenuModel MenuModel instance to create menus programmatically Inline style of the component Style class of the component 257 PrimeFaces User s Guide autoDisplay TRUE Boolean Defines whether submenus will be displayed on mouseover or not When set to false click event is required to display Getting Started with MegaMenu Layout of MegaMenu is grid based and root items require columns as children to d
3. Info Tag tooltip Component Class org primefaces component tooltip Tooltip Component Type org primefaces component Tooltip Component Family org primefaces component Renderer Type org primefaces component TooltipRenderer Renderer Class org primefaces component tooltip TooltipRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean value null Object Value of the component than can be either an EL expression of a literal text converter null Converter An el expression or a literal text that defines a String 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 417 PrimeFaces User s Guide Id of the component to attach the tooltip styleClass Style class of the tooltip Getting started with the Tooltip Tooltip is used by attaching it to a target component Tooltip value can also be retrieved from target s title so following is same Events and Effects A tooltip is shown on mouseover event and hidden when mouse is out by default If you need to change this behaviour use the showEvent and hideEvent feature Tooltip below is displayed when the input gets the focus and hidden with onblur Availab
4. String newFileName servletContext getRealPath File separator photocam File separator captured png FileImageOutputStream imageOutput try imageOutput new FileImageOutputStreamCnew FileCnewFileName imageOutput writeCdata Q data length imageOutput closed b catch Exception e throw new FacesExceptionC Error in writing captured image Notes e PhotoCam is a flash canvas and javascript solution e It is not supported in IE at the moment and this will be worked on in future versions 304 PrimeFaces User s Guide 3 74 PickList PickList is used for transferring data between two different collections Available Starting fa Messi 10 t gt t Iniesta 8 Vila 7 Alves 2 Be Bo Bo Info Component Class org primefaces component picklist Panel Component Type org primefaces component PickList Component Family org primefaces component Renderer Type org primefaces component PickListRenderer Renderer Class org primefaces component picklist PickListRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean value null Object Value of the component than can be either an EL expression of a literal text converter null Convert An el expression or a literal text that
5. Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean Getting Started with RowExpansion See datatable expandable rows section for more information about how rowExpansion is used 336 PrimeFaces User s Guide 3 87 RowToggler RowToggler is a helper component for datatable Info Tag row loggler Component Class org primefaces component rowtoggler Rowloggler Component Type org primefaces component Row Toggler Component Family org primefaces component Renderer Type org primefaces component RowTogglerRenderer Renderer Class org primefaces component rowtoggler RowTogglerRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean Getting Started with Row See expandable rows section in datatable documentation for more information about usage 337 3 88 Schedule PrimeFaces User s Guide Schedule provides an Outlook Calendar iCal like JSF component to manage events Info o o July 2010 month week day org primefaces component schedule Schedule Component Class Component Type Component Family Renderer Type
6. Inline Mode Inline mode acts like a modal dialog you can display other JSF content on the page using the lightbox overlay Simply place your overlay content in the inline facet Clicking the link in the example below will display the panelGrid contents in overlay Client Side API Widget PrimeFaces widget LightBox Skinning Lightbox resides in a main container element which style and styleClass options apply Following is the list of structural style classes As skinning style classes are global see the main Skinning section for more information 252 PrimeFaces User s Guide 3 56 Log Log component is a visual console to display logs on JSF pages This is an info message This is an info message 00 This is a warn message This is a warn message This is a debug message This is a debug message This is an error message This is an error message This is a debug message bo RP bd lt This is a debug message This is a warn message This is an info message woh tiie fa ee Info Tag Component Class org primefaces component log Log Component Type org primefaces component Log Component Family org primefaces component Renderer Type org primefaces component LogRenderer Renderer Class org primefaces component log LogRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding
7. Renderer Class org primefaces component focus FocusRenderer Attributes rendered TRUE boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side eoe aa instance in a backing bean ee the exact component to set focus context The root The root component to start first input search to start first input search minSeverity error String Minimum severity level to be used when finding the first invalid component Getting started with Focus By default focus will find the first enabled and visible input component on page and apply focus Input component can be any element such as input textarea and select 183 PrimeFaces User s Guide Following is a simple example lt h form gt lt p panel id panel header Register gt lt p focus gt lt p messages gt lt h panelLGrid columns 3 gt lt h outputLabel for firstname value Firstname gt lt h inputText id firstname vaLlue pprBean firstname required true Label Firstname gt lt p message for firstname gt lt h outputLabel for Surname value Surname gt lt h inputText id surname value pprBean surname required true Label Surname gt lt p message for Surname gt lt h panelGrid gt lt p commandButton value Submit update panel actionListener pprBean savePerson gt lt p
8. String currentStepId event getCurrentStepQ String stepToGo event getNextStepQ ifCskip return confirm else return event getNextStep Steps here are simply the ids of tab by using a flowListener you can decide which step to display next so wizard does not need to be linear always If you need to update other component s on page within a flow use RequestContext update String clientId api Client Side Callbacks Wizard is equipped with onback and onnext attributes in case you need to execute custom javascript after wizard goes back or forth You just need to provide the names of javascript functions as the values of these attributes lt p wizard onnext alert Next onback alertC Back gt lt p wizard gt 438 PrimeFaces User s Guide Client Side API Widget PrimeFaces widget Wizard next o fa ponese O o Sao OO M Hides back button showBackNav hideBackNav Skinning Wizard resides in a container element that style and styleClass attributes apply Following is the list of structural css classes ui wizard navbar Container of navigation controls ui wizard nav back Back navigation control ui wizard nav next Forward navigation control As skinning style classes are global see the main Skinning section for more information ul wizard step title Each step title 439 PrimeFaces User s Guide 4 Partial Rendering and Processing PrimeFaces pr
9. immediate FALSE Boolean When set true process validations logic is executed at apply request values phase for this component required FALSE Marks component as required validator null MethodExpr A method binding expression that refers to a method validationg the input valueChangeListener null ValueChange A method binding expression that refers to a Listener method for handling a valuchangeevent requiredMessage null String Message to be displayed when required field a oe fails converterMessage Message to be Message to be displayed when conversion fails when conversion fails Daemons os pome maono orna Getting started with the ImageCropper ImageCropper is an input component and image to be cropped is provided via the image attribute The cropped area of the original image is used to create a new image this new image can be accessed on the backing bean by setting the value attribute of the image cropper Assuming the image is at WEBAPP ROOT campnou jpg 217 PrimeFaces User s Guide org primefaces model CroppedImage belongs a PrimeFaces API and contains handy information about the crop process Following table describes CroppedImage properties originalFileName Name of the original file that s cropped bytes byte Contents of the cropped area as a byte array External Images ImageCropper has the ability to crop external images as well Context Relative Path For local images ImageCroppe
10. lt p menuitem value Save actionListener bean save update comp gt lt p menuitem value Update actionListener bean update ajax false gt lt p menuitem value Navigate url http www primefaces org gt lt p Submenu gt lt p menu gt Dynamic Menus Menus can be created programmatically as well this is more flexible compared to the declarative approach Menu metadata is defined using an org primefaces model MenuModel instance PrimeFaces provides the built in org primefaces model DefaultMenuModel implementation For further customization you can also create and bind your own MenuModel implementation public class MenuBean private MenuModel model public MenuBean model new DefauLtMenuModel First submenu Submenu submenu new Submenud submenu setLabelC Dynamic Submenu 1 MenuItem item new MenulItemQ item setVaLueC Dynamic Menuitem 1 1 item setUr1lC submenu getChildren addCitem model addSubmenuCsubmenu public MenuModel getModel return model 263 PrimeFaces User s Guide Skinning Menu resides in a main container element which style and styleClass attributes apply Following is the list of structural style classes Style Class Applies As skinning style classes are global see the main Skinning section for more information 264 PrimeFaces User s Guide 3 60 Menubar Menubar is a horizontal navigation component D File
11. target carBean selectedCar gt lt p commandButton gt lt p coLumn gt coLumns lt p dataTable gt Single Selection with Row Click Previous method works when the button is clicked if you d like to enable selection wherever the row is clicked use selectionMode option lt p dataTable var car value carBean cars selectionMode single selection carBean selectedCar rowKey car id gt coLumns lt p dataTable gt 131 PrimeFaces User s Guide Multiple Selection with Row Click Multiple row selection is similar to single selection but selection should reference an array of the domain object displayed and user needs to use press modifier key e g ctrl during selection Selection on Double Click By default row based selection is enabled by click event enable db ClickSelect so that clicking double on a row does the selection Single Selection with RadioButton Selection a row with a radio button placed on each row is a common case datatable has built in support for this method so that you don t need to deal with h selectOneRadio s and low level bits In order to enable this feature define a column with selectionMode set as single Multiple Selection with Checkboxes Similar to how radio buttons are enabled define a selection column with a multiple selectionMode DataTable will also provide a selectAll checkbox at column header RowKey RowKey should a unique id
12. Edit v Help v Actions v x Quit Ajax gt p Save J O Non Ajax gt Update ee Info Component Class org primefaces component menubar Menubar Component Type org primefaces component Menubar Component Family org primefaces component Renderer Type org primefaces component MenubarRenderer Renderer Class org primefaces component menubar MenubarRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side eo instance in a backing bean widgetVar Name of the client side Name of the client side widget model null MenuModel MenuModel instance to create menus lt 4 style Inline Inline style ofmenubar o of menubar styleClass Style class of menubar autoDisplay FALSE Boolean Defines whether the first level of submenus will be displayed on mouseover or not When set to false click event is required to display 265 PrimeFaces User s Guide Getting started with Menubar Submenus and menuitems as child components are required to compose the menubar lt p menubar gt lt p submenu Label Mail gt lt p menuitem value Gmail url http www google com gt lt p menuitem value Hotmail url http ww hotmail com gt lt p menuitem value Yahoo Mail url http mail yahoo com gt lt p submenu gt lt p submenu Label Videos
13. Inline style of the main container of the main container Getting started with the TabView TabView requires one more child tab components to display Titles can also be defined by using title facet Dynamic Tabs There re two toggleModes in tabview non dynamic default and dynamic By default all tab contents are rendered to the client on the other hand in dynamic mode only the active tab contents are rendered and when an inactive tab header is selected content is loaded with ajax Dynamic mode is handy in reducing page size since inactive tabs are lazy loaded pages will load faster To enable dynamic loading simply set dynamic option to true 401 PrimeFaces User s Guide lt p tabView dynamic true gt tabs lt p tabView gt Content Caching Dynamically loaded tabs cache their contents by default by doing so reactivating a tab doesn t result in an ajax request since contents are cached If you want to reload content of a tab each time a tab is selected turn off caching by cache to false Effects Content transition effects are controlled with effect and effectDuration attributes EffectDuration specifies the speed of the effect slow normal default and fast are the valid options lt p tabView effect fade effectDuration fast gt tabs lt p tabView gt Ajax Behavior Events tabChange and tabClose are the ajax behavior events of tabview that are executed when a tab is
14. Renderer Class Attributes org primefaces component Schedule org primefaces org primefaces component ScheduleRenderer org primefaces component schedule ScheduleRenderer B not be rendered Boolean value to specify the rendering of the component when set to false component will binding null Object An el expression that maps to a server side eo instance in a backing bean Name of the client side Name of the client side widget value null Object An org primefaces model ScheduleModel instance representing the backed model locale null Object Locale for localization can be String or a java util Locale instance widgetvar PrimeFaces User s Guide es null Float Ratio of calendar width to height higher the value shorter the height is view month String The view type to use possible values are month agendaDay agendaWeek basic Week basicDay initialDate null Object The initial date that is used when schedule loads If ommitted the schedule starts on the current date showWeekends TRUE Boolean Specifies inclusion Saturday Sunday columns in any of the views style null String Style of the main container element of schedule styleClass null String Style class of the main container element of ae draggable TRUE When true events are When true events are draggable TRUE When true events are resizable showHeader TRUE Specifies visibility of header content leftHeaderTemplate Con
15. eventMove org primefaces event ScheduleEntryMoveEvent When an event is moved eventResize org primefaces event ScheduleEntryResizeEvent When an event is resized Ajax Updates Schedule has a quite complex UI which is generated on the fly by the client side PrimeFaces widget Schedule widget to save bandwidth and increase page load performance As a result when you try to update schedule like with a regular PrimeFacess PPR you may notice a UI lag as the DOM will be regenerated and replaced Instead Schedule provides a simple client side api and the update method Whenever you call update schedule will query it s server side ScheduleModel instance to check for updates transport method used to load events dynamically is JSON as a result this approach is much more effective then updating with regular PPR An example of this is demonstrated at editable schedule example save button is calling myschedule update at oncomplete event handler Editable Schedule Let s put it altogether to come up a fully editable and complex schedule lt h form gt lt p schedule value bean eventModel editable true widgetVar myschedule gt lt p ajax event dateSelect Listener bean onDateSelect update eventDetails oncomplete eventDialog show gt lt p ajax event eventSelect Listener bean onEventSelect lt p schedule gt lt p dialog widgetVar eventDialog header Event Details gt lt h panelGrid id eventDetails col
16. gt lt p ajax event rate Listener ratingBean handleRate update msgs gt lt p ajax event canceL listener ratingBean handleCancel update msgs gt lt p rating gt lt p messages id msgs gt public class RatingBean private Integer rating public void handleRateCRateEvent rateEvent Integer rate Integer rateEvent getRating Add facesmessage public void handleCancel Add facesmessage getter setter Client Side Callbacks onRate is called when a star is selected with value as the only parameter value gt lt p rating value ratingBean rating onRate alert You rated 323 PrimeFaces User s Guide Client Side API Widget PrimeFaces widget Rating set Value value Updates rating value with provided one Skinning ProgressBar resides in a main container which style and styleClass attributes apply Following is the list of structural style classes Style Class Applies 324 PrimeFaces User s Guide 3 81 RemoteCommand RemoteCommand provides a way to execute JSF backing bean methods directly from javascript Info Component Class org primefaces component remotecommand RemoteCommand Component Type org primefaces component RemoteCommand Component Family org primefaces component Renderer Type org primefaces component RemoteCommandRenderer Renderer Class org primefaces component remotecommand RemoteCommandRenderer Attributes i
17. 3 46 ImageCropper 3 47 ImageSwitch 3 48 Inplace 3 49 InputMask 3 50 InputText 3 51 InputTextarea 3 52 Keyboard 3 53 Layout 3 54 LayoutUnit PrimeFaces User s Guide 160 162 166 169 170 174 177 183 185 188 199 200 205 209 212 214 216 220 223 227 231 234 238 243 248 3 55 LightBox 3 56 Log 3 57 Media 3 58 MegaMenu 3 59 Menu 3 60 Menubar 3 61 MenuButton 3 62 Menultem 3 63 Message 3 64 Messages 3 65 NotificationBar 3 66 OrderList 3 67 OutputLabel 3 68 OutputPanel 3 69 OverlayPanel 3 70 Panel 3 71 PanelGrid 3 72 Password 3 73 PhotoCam 3 74 PickList 3 75 Poll 3 76 Printer 3 77 ProgressBar 3 78 Push 3 79 RadioButton PrimeFaces User s Guide 250 253 255 257 260 265 268 270 273 275 278 280 284 287 289 292 295 298 303 305 311 314 315 319 320 3 80 Rating 3 81 RemoteCommand 3 82 Resizable 3 83 Ring 3 84 Row 3 85 RowEditor 3 86 RowExpansion 3 87 RowToggler 3 88 Schedule 3 89 ScrollPanel 3 90 SelectBooleanButton 3 91 SelectBooleanCheckbox 3 92 SelectChecboxMenu 3 93 SelectManyButton 3 94 SelectManyCheckbox 3 95 SelectManyMenu 3 96 SelectOneButton 3 97 SelectOneListbox 3 98 SelectOneMenu 3 99 SelectOneRadio 3 100 Separator 3 101 Sheet 3 102 SlideMenu 3 103 Slider 3 104 Spacer PrimeFaces User s Guide 321 325 327 331 334 335 336 337 338 346 348 350 352 354 356 358 360 362 364 368 371 373 376 379 384 PrimeFaces Us
18. 3rd message 276 PrimeFaces User s Guide Severity Levels Using severity attribute you can define which severities can be displayed by the component For instance you can configure messages to only display infos and warnings Escaping Messages escapes html content in messages in case you need to display html enable escape option Skinning Message Full list of CSS selectors of message is as follows Style Class Applies ui messages severity Container element of the message ui messages severity detail Detail text ui messages severity icon Icon of the message severity can be info error warn and error 277 PrimeFaces User s Guide 3 65 NotificationBar NotificationBar displays a multipurpose fixed positioned panel for notification Info Component Class org primefaces component notificationbar NotificationBar Component Type org primefaces component NotificatonBar Component Family org primefaces component Renderer Type org primefaces component NotificationBarRenderer Renderer Class org primefaces component notificationbar NotificationBarRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side ce aT instance in a backing bean style Style of the container element of the container element styleClass Sty
19. 6 xavi jpg CM players add new PlayerC Puyol 5 puyol jpg CB getter amp setter for players lt p ring value ringBean players var player gt lt p graphicImage value images barca player photo gt lt p ring gt Item Selection A column is required to process item selection from ring properly lt p ring value ringBean players var player gt lt p coLumn gt UI to select an item e g commandLink lt p coLumn gt lt p ring gt Easing Following is the list of available options for easing animation swing easeInQuart easeOutSine easeInElastic e easeInBounce easeInQuad easeOutQuart easeInExpo easeOutElastic e easeOutBounce easeOutQuad easeInOutQuart easeOutExpo easeInOutElastic e easeInOutBounce easeInOutQuad easeInQuint easeInOutExpo easeInBack easeInCubic easeOutQuint easeInCirc easeOutBack easeOutCubic easeInOutQuint easeOutCirc easeInOutBack easeInOutCubic easeInSine easeInOutCirc 332 PrimeFaces User s Guide Skinning Ring resides in a main container which style and styleClass attributes apply Following is the list of structural style classes Style Class Applies ui ring item Each item in the list 333 PrimeFaces User s Guide 3 84 Row Row is a helper component for datatable Info Tag row Component Class org primefaces component row Row Component Type org primefaces component Row Component Family org primefaces compo
20. Circle circle new CircleCnew LatLng 36 879466 30 667648 model addOverlayCcircle public MapModel getModel return this model Rectangles A circle is represented by org primefaces model map Rectangle lt p gmap center 41 381542 2 122893 zoom 15 type hybrid style width 60 px height 4 px model mapBean model gt public class MapBean private MapModel model public MapBean model new DefaultMapModel LatLng coordi new LatLng 36 879466 30 667648 LatLng coord2 new LatLng 36 883707 30 689216 Rectangle rectangle new Rectangle Ccoord1 coord2 model addOverlayCcircle public MapModel getModel return this model Ajax Behavior Events GMap provides many custom ajax behavior events for you to hook in to various features overlaySelect org primefaces event map OverlaySelectEvent When an overlay is selected 192 PrimeFaces User s Guide Following example displays a FacesMessage about the selected marker with growl component lt h form gt lt p growl id growl gt lt p gmap center 41 381542 2 122893 zoom 15 type hybrid style width 60 px height 4 px model mapBean model gt lt p ajax event overlaySelect listener mapBean onMarkerSelect update growL gt lt p gmap gt lt h form gt public class MapBean private MapModel model public MapBean model new DefaultMapModel1 add markers pub
21. Component Class org primefaces component chart pie PieChart Component Type org primefaces component chart PieChart Component Family org primefaces component Renderer Type org primefaces component chart PieChartRenderer Renderer Class org primefaces component chart pie PieChartRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered UIComponent instance in a backing bean 62 it Tite of he car PrimeFaces User s Guide showDataLabels FALSE Displays data on each slice legendCols Column count of legend legendRows Row count of legend Getting started with PieChart PieChart is created with an org primefaces model chart PieChartModel instance public class Bean private PieChartModel model public Bean model new PieChartModel model setC Brand 1 540 model setC Brand 2 325 model setC Brand 3 702 model setC Brand 4 421 public PieChartModel getModel return model lt p pieChart value bean model legendPosition w gt E Brand 1 Brand 2 Brand 3 amp Brand 4 63 PrimeFaces User s Guide Customization PieChart can be customized using various options such as fill sliceMargin and diameter here is an example 64 PrimeFaces User s Guide 3 12 2 Line Chart Line chart visualizes one or more series of data in a line graph Info Tag l
22. PrimeFaces User s Guide Client Side API Widget PrimeFaces widget Slider getValue Pe Number Number Returns Returns the current value current value setValue value value Value to set void Updates slider value e one isable0 index Index of tab to disable Index of tab to disable void Disables slider slider enable index Index of tab to enable Enables slider Skinning Slider resides in a main container which style and styleClass attributes apply These attributes are handy to specify the dimensions of the slider Following is the list of structural style classes ui slider horizontal Main container element of horizontal slider Main container element of vertical slider ui slider handle Slider handle As skinning style classes are global see the main Skinning section for more information 383 PrimeFaces User s Guide 3 104 Spacer Spacer is used to put spaces between elements Info Tag spacer Component Class org primefaces component spacer Spacer Component Type org primefaces component Spacer Component Family org primefaces component Renderer Type org primefaces component SpacerRenderer Renderer Class org primefaces component spacer SpacerRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side e instance
23. dataFormat Format of data labels legendCols Column count of legend 71 PrimeFaces User s Guide legendRows Row count of legend Getting started with DonutChart PieChart is created with an org primefaces model chart DonutChartModel instance public class Bean private DonutChart model public Bean model new DonutChart Map lt String Number gt circlel new LinkedHashMap lt String Number gt circlel putC Brand 1 150 circlel putC Brand 2 400 circlel putC Brand 3 200 circlel putC Brand 4 10 donutModel addCircleCcirclel Map lt String Number gt circle2 new LinkedHashMap lt String Number gt circle2 putC Brand 1 540 circle2 putC Brand 2 125 circle2 putC Brand 3 702 circle2 putC Brand 4 421 donutModel addCircleCcircle2 Map lt String Number gt circle3 new LinkedHashMap lt String Number gt circle3 putC Brand 1 40 circle3 putC Brand 2 325 circle3 putC Brand 3 402 circle3 putC Brand 4 421 donutModel addCircleCcircle3 public DonutChart getModel return model lt p donutChart value bean model legendPosition w gt E Brand 1 Brand 2 72 Customization DonutChart can be customized using various options 73 E Brand 1 Brand 2 E Brand 3 E Brand 4 PrimeFaces User s Guide PrimeFaces User s Guide 3 12 5 Bubble Chart BubbleChart visualizes entities that are defined in
24. else return command not found Whenever a command is sent to the server handleCommand method is invoked with the command name and the command arguments as a String array Focus To add focus on terminal use client side api following example shows how to add focus on a terminal nested inside a dialog lt p commandButton type Show Terminal type button onclick dlg show term focus gt lt p dialog widgetVar dlg width 600 height 400 header Terminal gt lt p terminal widgetVar term commandHandLer terminalBean handLeCommand width 590px gt lt p dialog gt 408 PrimeFaces User s Guide 3 115 ThemeSwitcher ThemeSwitcher enables switching PrimeFaces themes on the fly with no page refresh Choose Theme Choose Theme E a cupertino trontastic Info Tag themeSwitcher Component Class org primefaces component themeswitcher ThemeSwitcher Component Type org primefaces component ThemeSwitcher Component Family org primefaces component Renderer Type org primefaces component ThemeSwitcherRenderer Renderer Class org primefaces component themeswitcher ThemeSwitcherRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side e ae instance in a backing bean widgetvar Name of the client side Name of t
25. immediate Boolean When set true process validations logic is executed at apply request values phase for this component FALSE Marks component as required validator null MethodExpr A method expression that refers to a method validationg the input valueChangeListener null MethodExpr A method expression that refers to a method for handling a valuechangeevent 356 PrimeFaces User s Guide validation fails String User presentable name layout lineDirection String Layout of the checkboxes valid values are lineDirection horizontal and pageDirection vertical String Callback to execute on value change String Inline style of the component styleClass String Style class of the container Getting started with SelectManyCheckbox SelectManyCheckbox usage is same as the standard one Skinning SelectManyCheckbox resides in a main container which style and styleClass attributes apply As skinning style classes are global see the main Skinning section for more information Following is the list of structural style classes Style Class Applies 357 PrimeFaces User s Guide 3 95 SelectManyMenu SelectManyMenu is an extended version of the standard SelectManyMenu with theme integration Info Tag Component Class Component Type Component Family Renderer Type Renderer Class Attributes Messi Bojan n Iniesta m Villa Xavi Puyol z selectManyMenu org primefaces com
26. lt p panel id pnl header Draggable Panel gt lt h outputText value I am dragged in grid mode gt lt p panel gt lt p draggable for pnl grid 20 40 gt Containment A draggable can be restricted to a certain section on page following draggable cannot go outside of it s parent lt p outputPanel layout block style width 4 Q px height 20Q0px gt lt p panel id conpnl header Restricted gt lt h outputText value I am restricted to my parent s boundaries gt lt p panel gt lt p outputPanel gt lt p draggable for conpnl containment parent gt 154 PrimeFaces User s Guide 3 29 2 Droppable Info Component Class org primefaces component dnd Droppable Component Type org primefaces component Droppable Component Family org primefaces component Renderer Type org primefaces component DroppableRenderer Renderer Class org primefaces component dnd DroppableRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object 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 add droppable behavior disabled FALSE Disables of enables droppable behavior hoverStyleClass null String Style class to apply when an acceptable draggable is dragged over activeStyleClass null String Style cla
27. rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean action null MethodExpr A method expression or a String outcome that d be String processed when button is clicked actionListener null MethodExpr An actionlistener that d be processed when button is clicked immediate FALSE Boolean Boolean value that determines the phaseld when true actions are processed at apply request values when false at invoke_application phase ajax TRUE Boolean Specifies the submit mode when set to true default submit would be made with Ajax FALSE When set to true ajax requests are not queued Component s to process partially instead of whole view 93 PrimeFaces User s Guide onstart null String Client side callback to execute before ajax request is begins oncomplete null String Client side callback to execute when ajax request is completed onsuccess null String Client side callback to execute when ajax request succeeds onetror Client side callback to execute when ajax request fails global TRUE Defines whether to trigger ajaxStatus or not partialSubmit Enables serialization of values belonging to the partially processed components only style Inline style of the button element styleClass StyleClass of the button element onblur Client side callba
28. you can either configure the datatable or the panel to be updated with ajax response Execute Javascript RequestContext provides a way to execute javascript when the ajax request completes this approach is easier compared to passing callback params and execute conditional javascript Example below hides the dialog when ajax request completes 463 PrimeFaces User s Guide 9 2 EL Functions PrimeFaces provides built in EL extensions that are helpers to common use cases Common Functions component id Returns clientId of the component with provided server id parameter This function is useful if you need to work with javascript widget Var id Provides the widgetVar of a component Component WidgetVar Page Authorization ifGranted String role Returns a boolean value if user has given role or not ifAllGranted String roles Returns a boolean value if has all of the given roles or not ifAnyGranted String roles Returns a boolean value if has any of the given roles or not ifNotGranted String roles Returns a boolean value if has all of the given roles or not remoteUser Returns the name of the logged in user userPrincipal Returns the principal instance of the logged in user 464 PrimeFaces User s Guide 465 PrimeFaces User s Guide 10 Portlets PrimeFaces supports portlet environments based on JSF 2 and Portlet 2 APIs A portlet bridge is necessary to run a JSF application as a p
29. Component Type Component Family Renderer Type Renderer Class Attributes Movies v RA Scarface Goodfellas Carlito s Way Godfather selectCheckboxMenu org primefaces component selectcheckboxmenu SelectCheckboxMenu org primefaces component SelectCheckboxMenu org primefaces component org primefaces component SelectCheckboxMenuRenderer org primefaces component selectcheckboxmenu SelectCheckboxMenuRenderer rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side e instance in a backing bean vae o Value of the component Value of the component referring to a List to a List converter null Converter An el expression or a literal text that defines a String 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 immediate Boolean When set true process validations logic is executed at apply request values phase for this component FALSE Marks component as required validator null MethodExpr A method expression that refers to a method validationg the input valueChangeListener null MethodExpr A method expression that refers to a method for handling a valuechangeevent 352 PrimeFaces User s Guide requiredMessage Message to be displayed when required
30. Error Value is required Number diz Info Tag outputLabel Component Class org primefaces component outputlabel OutputLabel Component Type org primefaces component OutputLabel Component Family org primefaces component Renderer Type org primefaces component OutputLabelRenderer Renderer Class org primefaces component outputlabel OutputLabelRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean accesskey null String The accesskey attribute is a standard HTML attribute that sets the access key that transfers focus to this element when pressed dir null String Direction indication for text that does not inherit directionality Valid values are LTR and RTL TRUE Defines if value should be escaped or not 284 PrimeFaces User s Guide onblur null String Client side callback to execute when component loses focus onclick null String Client side callback to execute when component is clicked ondblclick null String Client side callback to execute when component is double clicked onfocus null String Client side callback to execute when component receives focus onkeydown null String Client side callback to execute when a key is pressed down over component onkeypress null String Client side callback to execute when a
31. Firstname Surname t Save 296 PrimeFaces User s Guide Rowspan and Colspan PanelGrid supports rowspan and colspan options as well in this case row and column markup should be defined manually Skinning PanelGrid PanelGrid resides in a main container which style and styleClass attributes apply Following is the list of structural style classes Style Class Applies ui panelgrid Main container element of panelGrid As skinning style classes are global see the main Skinning section for more information 297 PrimeFaces User s Guide 3 2 Password Password component is an extended version of standard inputSecret component with theme integration and strength indicator Basic re a Feedback Turkish Inline Feedback Please enter a password Info Tag password Component Class org primefaces component password Password Component Type org primefaces component Password Component Family org primefaces component Renderer Type org primefaces component PasswordRenderer Renderer Class org primefaces component password PasswordRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean value null Object Value of the component than can be either an EL expression of a literal text converter nu
32. HTML5S features so advanced mode might behave differently across browsers and gracefully degrade for legacy browsers like IE It is also suggested to offer simple upload mode to the users of your application as a fallback Filter Configuration FileUpload filter s default settings can be configured with init parameters Two configuration options exist threshold size and temporary file upload location 181 PrimeFaces User s Guide Parameter Name Description thresholdSize Maximum file size in bytes to keep uploaded files in memory If a file exceeds this limit it ll be temporarily written to disk uploadDirectory Disk repository path to keep temporary files that exceeds the threshold size By default it is System getProperty java io tmpdir An example configuration below defined thresholdSize to be 50kb and uploads to user s temporary folder Note that uploadDirectory is used internally you should implement the logic to save the file contents yourself in your backing bean Tips e Multiple advanced uploaders in same form is not supported at the moment 182 PrimeFaces User s Guide 3 37 Focus Focus is a utility component that makes it easy to manage the element focus on a JSF page Info Tag focus Component Class org primefaces component focus Focus Component Type org primefaces component Focus FocusTag Component Family org primefaces component Renderer Type org primefaces component FocusRenderer
33. Layout Layout is based on a borderLayout model that consists of 5 different layout units which are top left center right and bottom This model is visualized in the schema below Full Page Layout Layout has two modes you can either use it for a full page layout or for a specific region in your page This setting is controlled with the fullPage attribute which is false by default The regions in a layout are defined by layoutUnits following is a simple full page layout with all possible units Note that you can place any content in each layout unit 244 PrimeFaces User s Guide lt p layout fullPage true gt lt p LayoutUnit position north size 50 gt lt h outputText value Top content gt lt p LayoutUnit gt lt p layoutUnit position sSouth size 100 gt lt h outputText value Bottom content gt lt p LayoutUnit gt lt p LayoutUnit position west size 3Q00 gt lt h outputText value Left content gt lt p LayoutUnit gt lt p layoutUnit position east size 200 gt lt h outputText value Right Content gt lt p LayoutUnit gt lt p layoutUnit position center gt lt h outputText value Center Content gt lt p LayoutUnit gt lt p Layout gt Forms in Full Page Layout When working with forms and full page layout avoid using a form that contains layoutunits as generated dom may not be the same So following is invalid lt p layout fullPage true gt lt h
34. PrimeFaces User s Guide public class MapBean private MapModel model public MapBean model new DefaultMapModel1 Polyline polyline new Polyline polyline getPaths addCnew LatLng 36 879466 30 667648 polyline getPaths addCnew LatLng 36 883707 30 689216 polyline getPaths addCnew LatLng 36 879703 30 706707 polyline getPaths addCnew LatLng 36 885233 37 702323 model addOverlay polyline public MapModel getModel return this model Polygons A polygon is represented by org primefaces model map Polygon lt p gmap center 41 381542 2 122893 zoom 15 type hybrid style width 60 px height 4 px model mapBean model gt public class MapBean private MapModel model public MapBeand model new DefaultMapModel Polygon polygon new Polygon polyline getPaths addCnew LatLng 36 879466 30 667648 polyline getPaths C addCnew LatLng 36 883707 30 689216 polyline getPaths C addCnew LatLng 36 879703 30 706707 model addOverlLay polygon t public MapModel getModel Q return this model H Circles A circle is represented by org primefaces model map Circle lt p gmap center 41 381542 2 122893 zoom 15 type hybrid style width 60 px height 4 px model mapBean model gt 191 PrimeFaces User s Guide public class MapBean private MapModel model public MapBean model new DefaultMapModel1
35. Total Amount 600 Bet 500 RED BLACK PrimeFaces Team is in contact with PortletBridge team to improve the integration 469 PrimeFaces User s Guide 11 Integration with Java EE PrimeFaces is all about front end and can be backed by your favorite enterprise application framework Following frameworks are fully supported e Spring Core JSF Centric JSF Spring Integration e Spring WebFlow Spring Centric JSF Spring Integration e Spring Roo PrimeFaces Addon e EJBs e CDI We ve created sample applications to demonstrate several technology stacks involving PrimeFaces and JSF at the front layer Source codes of these applications are available at the PrimeFaces subversion repository and they re deployed online time to time CDI and EJBs PrimeFaces fully supports a JAVA EE 6 environment with CDI and EJBs Spring WebFlow We as PrimeFaces team work closely with Spring WebFlow team PrimeFaces is suggested by SpringSource as the preferred JSF component suite for SWF applications SpringSource repository has two samples based on SWF PrimeFaces a small showcase and booking faces example Spring ROO SpringSource provides an official JSF PrimeFaces Addon https jira springsource org browse ROO 516 470 12 IDE Support 12 1 NetBeans NetBeans 7 0 bundles PrimeFaces when creating a new project you can select PrimeFaces from components tab v New Web Application Steps Frameworks 1 Choose Project 2 N
36. Unique identifier of the component rendered TRUE Boolea Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean action null MethodExpr A method expression that d be processed in the partial request caused by uiajax actionListener null MethodExpr An actionlistener that d be processed in the partial request caused by uiajax immediate Boolean Boolean value that determines the phaseld when true actions are processed at apply request values when false at invoke_application phase oncomplete null String Javascript handler to execute when ajax request is completed String Javascript handler to execute before ajax request is begins String Javascript handler to execute when ajax request succeeds String Javascript handler to execute when ajax request fails 325 PrimeFaces User s Guide global TRUE Boolean Global ajax requests are listened by ajaxStatus component setting global to false will not trigger ajaxStatus partialSubmit TRUE Boolean Enables serialization of values belonging to the partially processed components only FALSE When enabled command is executed on page load Getting started with RemoteCommand RemoteCommand is used by invoking the command from your javascript code That s it whenever you execute your custom javascript function eg cu
37. Updates If you need to display messages with growl after an ajax request you just need to update it Note that if you enable autoUpdate growl will be updated automatically with each ajax request anyway 206 PrimeFaces User s Guide Positioning Growl is positioned at top right corner by default position can be controlled with a CSS selector called ui growl With the below setting growl will be located at top left corner ui growl Left 20px Targetable Messages There may be times where you need to target one or more messages to a specific message component for example suppose you have growl and messages on same page and you need to display some messages on growl and some on messages Use for attribute to associate messages with specific components lt p messages for somekey gt lt p growl for anotherkey gt FacesContext context FacesContext getCurrentInstanceQ context addMessageC somekey facesMessage1 context addMessageC somekey facesMessage2 context addMessageC anotherkey facesMessage3 In sample above messages will display first and second message and growl will only display the 3rd message Severity Levels Using severity attribute you can define which severities can be displayed by the component For instance you can configure growl to only display infos and warnings lt p growl severity info warn gt Escaping Growl escapes html content in message
38. a particular page but still requires all data to be loaded into memory Lazy loading datatable renders a particular page similarly but also only loads the page data into memory not the whole dataset In order to implement this you d need to bind a org primefaces model LazyDataModel as the value and implement load method and enable lazy option Also you must implement getRowData and getRowKey if you have selection enabled lt p dataTable var car value carBean model paginator true rows 10 Lazy true gt columns lt p dataTable gt public class CarBean private LazyDataModel model public CarBeanQ model new LazyDataModel 0verride public void loadCint first int pageSize String sortField SortOrder sortOrder Map lt String String gt filters load physical data HE int totalRowCount logical row count based on a count query model setRowCount totalRowCount public LazyDataModel getModel return model DataTable calls your load implementation whenever a paging sorting or filtering occurs with following parameters e first Offset of first data to start from e pageSize Number of data to load e sortField Name of sort field e g model for sortBy car model e sortOrder SortOrder enum e filter Filter map with field name as key e g model for filterBy car model and value In addition to load method totalRowCount needs to be provided so that paginator can dis
39. and none String Specifies the list item type String Name of the client side widget a itemType null f paginatorPosition both type String String String String Boolean Defines if paginator should be hidden if total data count is less than number of rows per page String Inline style of the main container String Style class of the main container String Name of the iterator to refer each row index String Name of the exported request scoped variable to represent state of the iteration same as in ui repeat varStatus paginatorAlwaysVisible TRUE styleClass Null Getting started with the DataList Since DataList is a data iteration component it renders it s children for each data represented with var option See itemType section for more information about the possible values Ordered Lists DataList displays the data in unordered format by default if you d like to use ordered display set type option to ordered 122 Item Type itemType defines the bullet type of each item For ordered lists following item types are available Ferrari 1960 Renault 1985 Ford 2003 Audi 1976 Opel 1983 Ferrari 1974 Chrysler 1980 Audi 1980 Chrysler 1983 ZtTAOmmMON wp pP cr Teme ans p Ferrari 1960 Renault 1985 Ford 2003 Audi 1976 Opel 1983 Ferrari 1974 Chrysler 1980 Audi 1980 Chrysler 1983 And for unordered lists available values are Opel 1980 Chrysler
40. apply Following is the list of structural style classes Style Class Applies ui toolbar ui separator Divider in a toolbar ui toolbar group left Left toolbarGroup container ui toolbar group right Right toolbarGroup container As skinning style classes are global see the main Skinning section for more information 415 PrimeFaces User s Guide 3 118 ToolbarGroup ToolbarbarGroup is a helper component for Toolbar component to define placeholders Info Tag toolbarGroup Component Class org primefaces component toolbar ToolbarGroup Component Type org primefaces component ToolbarGroup Component Family org primefaces component Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean align null String Defines the alignment within toolbar valid values are left and right style Inline style of the container element styleClass Style class of the container element Getting Started with the ToolbarGroup See toolbar documentation for more information about how Toolbar Group is used 416 PrimeFaces User s Guide 3 119 Tooltip Tooltip goes beyond the legacy html title attribute by providing custom effects events html content and advance theme support to This tooltip is displayed when input gets the focus
41. as required validator null Method A method binding expression that refers to a method Expr validationg the input valueChangeListener null Method A method binding expression that refers to a method for Expr handling a valuchangeevent requiredMessage null Message to be displayed when required field validation fails 231 PrimeFaces User s Guide accesskey String Access key that when pressed transfers focus to the input element alt String Alternate textual description of the input field autocomplete String Controls browser autocomplete behavior dir String Direction indication for text that does not inherit directionality Valid values are LTR and RTL lang null String Code describing the language used in the generated markup for this component maxlength null Integer Maximum number of characters that may be entered in this field onblur null String Client side callback to execute when input element loses focus onchange null String Client side callback to execute when input element loses focus and its value has been modified since gaining focus onclick null String Client side callback to execute when input element is clicked ondblclick null String Client side callback to execute when input element is double clicked onfocus null String Client side callback to execute when input element receives focus onkeydown null String Client side callback to execute when a key is pressed down over input element onkeypress
42. autoComplete also supports events inherited from regular input text such as blur focus mouseover in addition to itemSelect Similarly itemUnselect event is provided for multiple autocomplete when an item is removed by clicking the remove icon In this case org primefaces event Unselect instance is passed to a listener if defined ItemTip Itemtip is an advanced built in tooltip when mouse is over on suggested items Content of the tooltip is defined via the itemtip facet lt p autoComplete value autoCompleteBean selectedPLlayer1 id basicPojo comp LeteMethod autoCompLeteBean completePlayer var p itemLabel p name itemValue p converter pLlayer gt lt f facet name itemtip gt lt h panelGrid columns 2 cellpadding 5 gt lt f facet name header gt lt p graphicImage value images barca p photo gt lt f facet gt lt h outputText value Name gt lt h outputText id modeLNo value p name gt lt h outputText value Number gt lt h outputText id year value p number gt lt h outputText value Position gt lt h outputText value p position gt lt h paneLGrid gt lt f facet gt lt p autoComplete gt A Afellay Alves Adriano Name Abid Number 22 LB Rosition 30 PrimeFaces User s Guide Client Side Callbacks onstart and oncomplete are used to execute custom javascript before and after an ajax request to load sug
43. c1362bl1d 1968 Mercedes Blue eclf0bb1 1962 Renault Green 9b0b3fe3 2001 Mercedes Yellow de0517b3 2002 Volkswagen Green 3e702116 1972 BMW Blue 49612134 1994 Ford Black bf19778d 1983 Audi Red 4ecd938b 1962 Opel Yellow contains startsWith exact endsWith Filter located at header is a global one applying on all fields this is implemented by calling client side api method called fi ter important part is to specify the id of the input text as globalFilter which is a reserved identifier for datatable 130 PrimeFaces User s Guide Row Selection There are several ways to select row s from datatable Let s begin by adding a Car reference for single selection and a Car array for multiple selection to the CarBean to hold the selected data public class CarBean private List lt Car gt cars private Car selectedCar private Car selectedCars public CarBeanQ cars new ArrayList lt Car gt Q cars addCnew CarC myModel 2005 ManufacturerX blue add more cars getters and setters Single Selection with a Command Component This method is implemented with a command component such as commandLink or commandButton Selected row can be set to a server side instance by passing as a parameter if you are using EL 2 2 or using f setPropertyActionListener lt p dataTable var car value carBean cars gt lt p coLumn gt lt p commandButton value Select gt lt f setPropertyActionListener value car
44. cell ui datatable even Even numbered rows ui datatable odd Odd numbered rows As skinning style classes are global see the main Skinning section for more information 143 PrimeFaces User s Guide 3 27 DefaultCommand Which command to submit the form with when enter key is pressed a common problem in web apps not just specific to JSF Browsers tend to behave differently as there doesn t seem to be a standard and even if a standard exists IE probably will not care about it There are some ugly workarounds like placing a hidden button and writing javascript for every form in your app DefaultCommand solves this problem by normalizing the command e g button or link to submit the form with on enter key press Info Tag defaultCommand Component Class org primefaces component defaultcommand DefaultCommand Component Type org primefaces component DefaultCommand Component Family org primefaces component Renderer Type org primefaces component DefaultCommandRenderer Renderer Class org primefaces component defaultcommand DefaultCommandRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side oo instance in a backing bean e o Name of the client side aeta target Identifier of the default command Identifier of the default command component context null String I
45. changed and closed respectively Here is an example of a tabChange behavior implementation lt p tabView gt lt p ajax event tabChange listener bean onChange gt tabs lt p tabView gt public void onChangeCTabChangeEvent event Tab activeTab event getTab VEE Re Your listener if defined will be invoked with an org primefaces event TabChangeEvent instance that contains a reference to the new active tab and the accordion panel itself For tabClose event listener will be passed an instance of org primefaces event TabCloseEvent 402 PrimeFaces User s Guide Dynamic Number of Tabs When the tabs to display are not static use the built in iteration feature similar to u1 repeat lt p tabView value bean list var ListItem gt lt p tab title 1istItem propertyA gt lt h outputText value ListItem propertyB gt More content lt p tab gt lt p tabView gt Orientations Tabview supports four different orientations mode top default left right and bottom lt p tabView orientation Left gt tabs lt p tabView gt Godfather Part Part Il soemetnelians The story begins as Don Vito Corleone the head of a New York Mafia family oversees his daughter s wedding His beloved son Michael has just come home from the war but does not intend to become part of his father s business T hrough Michael s life the nature of the family business becomes clear T
46. city gt email gt phone gt info gt lt p commandButton value Submit actionListener userWizard save gt lt p panel gt lt p tab gt lt p wizard gt lt h form gt AJAX and Partial Validations Switching between steps is based on ajax meaning each step is loaded dynamically with ajax Partial validation is also built in by this way when you click next only the current step is validated if the current step is valid next tab s contents are loaded with ajax Validations are not executed when flow goes back Navigations Wizard provides two icons to interact with next and prev Please see the skinning wizard section to know more about how to change the look and feel of a wizard 437 PrimeFaces User s Guide Custom Ul By default wizard displays right and left arrows to navigate between steps if you need to come up with your own UI set showNavBar to false and use the provided the client side api lt p wizard showNavBar false widgetVar wiz gt lt p wizard gt lt h outputLink value onclick wiz nextQ gt Next lt h outputLink gt lt h outputLink value onclick wiz backQ gt Back lt h outputLink gt Ajax FlowListener If you d like get notified on server side when wizard attempts to go back or forward define a flowListener lt p wizard flowListener userWizard handleFlow gt lt p wizard gt public String handleFlow CFlowEvent event
47. classes are global see the main Skinning section for more information 310 PrimeFaces User s Guide 3 75 Poll Poll is an ajax component that has the ability to send periodical ajax requests Info a Component Class org primefaces component poll Poll Component Type org primefaces component Poll Component Family org primefaces component Renderer Type org primefaces component PollRenderer Renderer Class org primefaces component poll PollRenderer Attributes rendered TRUE Boolean Boolean value to se ers son the rendering of the component when set to false component will not be rendered binding null Object Anel expression that maps to a server side UIJComponent instance ina ar bean eee Se ee TE MethodExpr A method expression to invoke by polling immediate FALSE Boolean Boolean value that determines the phaseId when true actions are processed at apply_request_values when false at invoke_application phase FALSE When set to true ajax requests are not queued process null String Component id s to process partially instead of whole view Javascript handler to execute before ajax request is begins oncomplete null String Javascript handler to execute when ajax request is a J Javascript handler to execute when ajax request succeeds handler to execute when ajax request succeeds Javascript handler to execute when ajax request fails 311 PrimeFaces User s Guide global TRUE Boolean Global ajax requests a
48. column gt lt p column style width 75 gt player name player number lt p column gt lt p pickList gt Reordering PickList support reordering of source and target lists these are enabled by showSourceControls and showTargetControls options 308 PrimeFaces User s Guide Effects An animation is displayed when transferring when item to another or reordering a list default effect is fade and following options are available to be applied using effect attribute effectSpeed attribute is used to customize the animation speed valid values are slow normal and fast onTransfer If you d like to execute custom javascript when an item is transferred bind your javascript function to onTransfer attribute Captions Caption texts for lists are defined with facets named sourceCaption and targetCaption Skinning PrimeFaces User s Guide PickList resides in a main container which style and styleClass attributes apply Following is the list of structural style classes Style Class ui picklist ui picklist list ui picklist list source ui picklist list target ui picklist source controls ui picklist target controls ui picklist button ui picklist button move up ui picklist button move top ui picklist button move down ui picklist button move bottom ui picklist button add ui picklist button add all ui picklist button remove all ui picklist button add As skinning style
49. dataTable var player value tableBean players gt lt f facet name header gt FCB Statistics lt f facet gt lt p columnGroup type header gt lt p row gt lt p column rowspan 2 headerText PLayer sortBy player name gt lt p column colspan 2 headerText Stats gt lt p row gt lt p row gt lt p column headerText Goals gt lt p column headerText Assists gt lt p row gt lt p coLumnGroup gt lt p subTable var stats value player stats gt lt f facet name header gt player name lt f facet gt lt p coLumn gt stats season lt p coLumn gt lt p coLumn gt stats goals lt p coLumn gt lt p coLumn gt stats assists lt p coLumn gt lt p columnGroup type footer gt lt p row gt lt p coLumn footerText Totals style text align right gt lt p column footerText player allGoals gt lt p column footerText player allAssists gt lt p row gt lt p coLumnGroup gt lt p subTable gt lt p dataTable gt 140 PrimeFaces User s Guide FCB Statistics Stats Player Goals Assists Messi 2005 2006 4 2 2006 2007 10 7 2007 2008 16 10 2008 2009 32 15 2009 2010 51 22 2010 2011 55 30 Totals 168 86 Xavi 2005 2006 6 15 2006 2007 10 20 2007 2008 12 22 2008 2009 9 24 2009 2010 8 21 2010 2011 10 25 Totals 55 127 Iniesta 2005 2006 4 12 2006 2007 7 9 2007 2008 10 14 2008 2009 15 17 2009 2010 1
50. form gt lt p layoutUnit position west size 100 gt h outputText value Left Pane gt lt p LayoutUnit gt lt p layoutUnit position center gt lt h outputText value Right Pane gt lt p LayoutUnit gt lt h form gt lt p Layout gt A layout unit must have it s own form instead also avoid trying to update layout units because of same reason update it s content instead Dimensions Except center layoutUnit other layout units must have dimensions defined via size option Element based layout Another use case of layout is the element based layout This is the default case actually so just ignore fullPage attribute or set it to false Layout example below demonstrates creating a split panel implementation 245 PrimeFaces User s Guide Ajax Behavior Events Layout provides custom ajax behavior events for each layout state change org primefaces event ToggleEvent When a unit is expanded or collapsed close org primefaces event CloseEvent When a unit is closed org primefaces event ResizeEvent When a unit is resized Stateful Layout Making layout stateful would be easy once you create your data to store the user preference you can update this data using ajax event listeners provided by layout For example if a layout unit is collapsed you can save and persist this information By binding this persisted information to the collapsed attribute of the layout unit layout will be rend
51. gt lt p Spacer width 5 gt lt p commandButton value Login actionListener chatController login update container image Uui icon ui icon person gt lt h panelGroup gt lt p fieldset gt lt h form gt lt p push onmessage handleMessage channel chat widgetVar chatAgent gt lt script type text javascript gt function handleMessageCevt data var chatContent C chatContent c hatContent append data keep scroll chatContent scrollTopCchatContent heightC lt script gt PrimeFaces Push currently provides P2P communication and next feature to support is JMS integration 452 PrimeFaces User s Guide 7 Javascript API PrimeFaces renders unobstrusive javascript which cleanly seperates behavior from the html Client side engine is powered by jQuery version 1 7 2 which is the latest at the time of the writing 7 1 PrimeFaces Namespace PrimeFaces is the main javascript object providing utilities and namespace escapeClientId id Escaped JSF ids with semi colon to work with jQuery addSubmitParam el name param Adds request parameters dynamically to the element getCookie name Returns cookie with given name setCookie name value Sets a cookie with given nam and value info msg debug msg warn msg error msg Client side log API changeTheme theme Changes theme on the fly with no page refresh clean Watermarks Watermark component extension cleans a
52. images var image gt lt p graphicImage value image gt lt ul repeat gt lt p imageSwitch gt Slideshow or Manual ImageSwitch is in slideShow mode by default if you d like manual transitions disable slideshow and use client side api to create controls lt p imageSwitch effect FlyIn widgetVar imageswitch gt images lt p imageSwitch gt lt span onclick imageswitch previous gt Previous lt span gt lt span onclick imageswitch next gt Next lt span gt Client Side API void stopSlideshow Stops slideshow mode voud pauseSlideshow Pauses slideshow mode void toggleSlideShow Toggles slideshow mode 221 PrimeFaces User s Guide Effect Speed The speed is considered in terms of milliseconds and specified via the speed attribute List of Effects ImageSwitch supports a wide range of transition effects Following is the full list note that values are case Sensitive blindX blindY blindZ e cover e curtainX curtainY e fade fadeZoom growX growY none scrollUp scrollDown scrollLeft scrollRight scroll Vert shuffle slideX slideY e toss e tumUp turnDown turnLeft tumRight uncover e wipe zoom 222 PrimeFaces User s Guide 3 48 Inplace Inplace provides easy inplace editing and inline content display Inplace consists of two members display element is the initial clickable label and inline element is the hidden content that is di
53. in a backing bean title Advisory tooltip informaton tooltip informaton Getting started with Spacer Spacer is used by either specifying width or height of the space Spacer in this example separates this text and this text 384 PrimeFaces User s Guide 3 105 Spinner Spinner is an input component to provide a numerical input via increment and decrement buttons E 21 v Info Component Class org primefaces component spinner Spinner Component Type org primefaces component Spinner Component Family org primefaces component Renderer Type org primefaces component SpinnerRenderer Renderer Class org primefaces component spinner SpinnerRenderer Attributes i rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean value null Object Value of the component than can be either an EL expression of a literal text converter null Convert An el expression or a literal text that defines a converter er String 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 immediate Boolean Boolean value that specifies the lifecycle phase the valueChangeEvents should be processed when true the events will be fired at apply request values if immed
54. information about the component 442 PrimeFaces User s Guide Global vs Non Global By default ajax requests are global meaning if there is an ajaxStatus component present on page it is triggered If you want to do a silent request not to trigger ajaxStatus instead set global to false An example with commandButton would be 4 1 4 Bits amp Pieces PrimeFaces Ajax Javascript API See the javascript section to learn more about the PrimeFaces Javascript Ajax API 443 PrimeFaces User s Guide 4 2 Partial Processing In Partial Page Rendering only specified components are rendered similarly in Partial Processing only defined components are processed Processing means executing Apply Request Values Process Validations Update Model and Invoke Application JSF lifecycle phases only on defined components This feature is a simple but powerful enough to do group validations avoiding validating unwanted components eliminating need of using immediate and many more use cases Various components such as commandButton commandLink are equipped with process attribute in examples we ll be using commandButton 4 2 1 Partial Validation A common use case of partial process is doing partial validations suppose you have a simple contact form with two dropdown components for selecting city and suburb also there s an inputText which is required When city is selected related suburbs of the selected city is populated in suburb
55. is a PrimeFaces component that handles the connection between the server and the browser it has two attributes you need to define lt p push channel chat onmessage handlePublish gt channel Name of the channel to connect and listen onpublish Javascript event handler to be called when server sends data 6 4 Samples 6 4 1 Counter Counter is a global counter where each button click increments the count value and new value is pushed to all subscribers public class GlobalCounterBean implements Serializable private int count public int getCount return count public void setCountCint count this count count public synchronized void increment count 5 RequestContext getCurrentInstance pushC counter count 450 PrimeFaces User s Guide lt h form gt lt h outputText value globalCounter count styleCLass display gt lt p commandButton value Click actionListener globalCounter increment gt lt h form gt lt p push onmessage handleMessage channel counter gt lt script type text javascript gt function handleMessageCevt data C display htmlCdata lt script gt 10486 Click When the button is clicked JSF button invokes the increment method and RequestContext API forwards the pushed data to the counter channel of the push server then push server forwards this data to all subscribers Finally handleMessage javascript funct
56. jpg gt lt p graphicImage value images nature3 jpg gt lt p graphicImage value images nature4 jpg gt lt p carousel gt Content Display Another use case of carousel is tab based content display The story begins as Don Vito Corleone the head of a New York Mafia family oversees his daughter s wedding His beloved son Michael has just come home from the war but does not intend to become part of his father s business T hrough Michael s life the nature of the family business becomes clear The business of the family is just like the head of the family kind and benevolent to those who give respect but given to ruthless violence whenever anything stands against the good of the family lt p carousel rows 1 itemStyle height 20Qpx width 6 Qpx gt lt p tab title Godfather Part I gt lt h panelGrid columns 2 cellpadding 10 gt lt p graphicImage value images godfather godfather1 jpg gt lt h outputText value The story begins as Don Vito gt lt h panelGrid gt lt p tab gt lt p tab title Godfather Part II gt lt h panelGrid columns 2 cellpadding 10 gt lt p graphicImage value images godfather godfather2 jpg gt lt h outputText value Francis Ford Coppola s gt lt h panelGrid gt lt p tab gt lt p tab title Godfather Part III gt lt h panelGrid columns 2 cellpadding 10 gt lt p graphicImage value images godfather godfather3 jpg gt lt h ou
57. key is pressed and released over component onkeyup null String Client side callback to execute when a key is released over component onmousedown null String Client side callback to execute when a pointer button is pressed down over component onmouseout null String Client side callback to execute when a pointer button is moved away from component onmouseover null String Client side callback to execute when a pointer button is moved onto component onmouseup null String Client side callback to execute when a pointer button is released over component Getting Started with OutputPanel Usage is same as standard outputPanel an input component is associated with for attribute 285 PrimeFaces User s Guide Auto Label OutputLabel sets its value as the label of the target component to be displayed in validation errors so the target component does not need to define the label attribute again can be rewritten as Support for Advanced Components Some PrimeFaces input components like spinner autocomplete does not render just basic inputs so standard outputLabel component cannot apply focus to these however PrimeFaces outputPanel can Validations When the target input is required outputLabel displays symbol next to the value In case any validation fails on target input label will also be displayed with theme aware error styles Skinning Label renders a label element that style and styleClass attributes ap
58. lt p coLumn gt lt p themeSwitcher gt 410 PrimeFaces User s Guide 3 116 TieredMenu TieredMenu is used to display nested submenus with overlays Info Tag Component Class Component Type Component Family Renderer Type Renderer Class Attributes c Ajax Menuitems gt l B Save Non Ajax Menuitem gt Update A Navigations p a org primefaces component tieredmenu TieredMenu org primefaces component TieredMenu org primefaces component org primefaces component TieredMenuRenderer org primefaces component tieredmenu Tiered MenuRenderer rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean model null org primefaces model MenuModel instance for programmatic menu MenuModel styleClass Style class of the component autoDisplay TRUE Boolean Defines whether the first level of submenus will be displayed on mouseover or not When set to false click event is required to display me String Id of the component whose triggerEvent will show the dynamic positioned menu Corer of menu to align with trigger element 411 PrimeFaces User s Guide Corner of trigger to align with menu element overlay FALSE Boolean Defines positioning when enabled menu is displayed with absolute position
59. lt p droppable for selectedCars tolerance touch activeStyleCLlass ui state highlight datasource availableCars onDrop handleDrop gt lt p ajax listener tableBean onCarDrop update dropArea availableCars gt lt p droppable gt lt h form gt lt script type text javascript gt function handleDropCevent ui ui draggable fadeOut fast fade out the dropped item lt script gt 158 PrimeFaces User s Guide Tolerance There are four different tolerance modes that define the way of accepting a draggable 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 Following example has two images only first image can be accepted by droppable Skinning hoverStyleClass and activeStyleClass attributes are used to change the style of the droppable when interacting with a draggable 159 PrimeFaces User s Guide 3 30 Dock Dock component mimics the well known dock interface of Mac OS X Info Component Class org primefaces component dock Dock Component Type org primefaces component Dock Component Family org primefaces component Renderer Type org primefaces component DockRenderer Renderer Class org prim
60. message severity is displayed and message text is visible as a tooltip e both default Both icon and text are displayed Severity Levels Using severity attribute you can define which severities can be displayed by the component For instance you can configure messages to only display infos and warnings Escaping Component escapes html content in messages by default in case you need to display html enable escape option Skinning Message Full list of CSS selectors of message is as follows Style Class Applies ui message severity Container element of the message ui message severity summary Summary text ui message severity detail Detail text severity can be info error warn and error 274 PrimeFaces User s Guide 3 64 Messages Messages is a pre skinned extended version of the standard JSF messages component oy Sample info message PrimeFaces rocks A Sample warn message Watch out for PrimeFaces EJ Sample error message PrimeFaces makes no mistakes Info Tag Component Class Component Type Component Family Renderer Type Renderer Class Attributes messages org primefaces component messages Messages org primefaces component Messages org primefaces component org primefaces component MessagesRenderer org primefaces component messages MessagesRenderer rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false componen
61. model Following example demonstrates multiple selection with custom content support lt p autoComplete id advanced value autoCompLeteBean selectedPlayers compLeteMethod autoCompLeteBean completePlayer var p itemLabel p name itemValue p converter player multiple true gt lt p column style width 20 text align center gt lt p graphicImage value images barca p photo gt lt p coLumn gt lt p column style width 80 gt p name p number lt p coLumn gt lt p autoComplete gt public class AutoCompleteBean private List lt Player gt selectedPlayers ie Ajax Behavior Events Instead of waiting for user to submit the form manually to process the selected item you can enable instant ajax selection by using the itemSelect ajax behavior Example below demonstrates how to display a message about the selected item instantly lt p autoComplete value bean text compLeteMethod bean compLlete gt lt p ajax event itemSelect Listener bean handleSelect update msg gt lt p autoComplete gt lt p messages id msg gt PrimeFaces User s Guide public class Bean public void handleSelect SelectEvent event Object item event getObjectQ FacesMessage msg new FacesMessage Selected Item item Your listener if defined will be invoked with an org primefaces event Select instance that contains a reference to the selected item Note that
62. null Object An el expression that maps to a server side UIComponent instance in a backing bean Getting started with Log Log component is used simply as adding the component to the page 253 PrimeFaces User s Guide Log API PrimeFaces uses client side log apis internally for example you can use log component to see details of an ajax request Log API is also available via global PrimeFaces object in case you d like to use the log component to display your logs 254 PrimeFaces User s Guide 3 57 Media Media component is used for embedding multimedia content such as videos and music to JSF views Media renders lt object gt or lt embed gt html tags depending on the user client Info media Component Class org primefaces component media Media Component Type org primefaces component Media Component Family org primefaces component Renderer Type org primefaces component MediaRenderer Renderer Class org primefaces component media MediaRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side OO instance in a backing bean Type of the etewssoniy possible values are quicktime windows flash real width Width of the player Getting started with Media In it s simplest form media component requires a source to play this is d
63. pnl handle div ui panel titLebar gt Drag Axis Dragging can be limited to either horizontally or vertically lt p panel id pnl header Draggable Panel gt lt h outputText value I am dragged on an axis only gt lt p panel gt lt p draggable for pnl axis x or y gt 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 lt p panel id pnl header Draggable Panel gt lt h outputText value I am cloned gt lt p panel gt lt p draggable for pnl helper clone gt Revert When a draggable is not dropped onto a matching droppable revert option enables the component to move back to it s original position with an animation lt p panel id pnl header Draggable Panel gt lt h outputText value I will be reverted back to my original position gt lt p panel gt lt p draggable for pnl revert true gt Opacity During dragging opacity option can be used to give visual feedback helper of following panel s opacity is reduced in dragging 153 PrimeFaces User s Guide lt p panel id pnl header Draggable Panel gt lt h outputText value My opacity is lower during dragging gt lt p panel gt lt p draggable for pnl opacity 0 5 gt Grid Defining a grid enables dragging in specific pixels This value takes a comma separated dimensions in x y format
64. prevent duplicate facet callback bindings e Provide a fixed width height to the ajaxStatus to prevent page layout from changing e Components like commandButton has an attribute global to control triggering of AjaxStatus e There is an ajax loading gif bundled with PrimeFaces which you can use 22 PrimeFaces User s Guide 3 4 AutoComplete AutoComplete provides live suggestions while an input is being typed E 20 LS 22 23 24 25 26 27 28 29 Info Component Class org primefaces component autocomplete AutoComplete Component Type org primefaces component AutoComplete Component Family org primefaces component Renderer Type org primefaces component AutoCompleteRenderer Renderer Class org primefaces component autocomplete AutoCompleteRenderer Attributes Unique identifier of the component identifier of the component rendered TRUE Boolean Boolean value to specify the rendering of the component binding null Object An el expression that maps to a server side UIComponent instance in a backing bean value null Object Value of the component than can be either an EL expression of a literal text converter null Converter An el expression or a literal text that defines a String 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 23 PrimeFaces User s Guide B When set true proc
65. primefaces component ConfirmDialogRenderer Renderer Class org primefaces component confirmdialog ConfirmDialogRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side C instance in a backing bean widgetVar Name of the client side Name of the client side widget o PrimeFaces User s Guide styleClass Style class of the dialog container closable TRUE Defines if close icon should be displayed or not appendToBody FALSE Appends dialog as a child of document body visible FALSE Whether to display confirm dialog on load Getting started with ConfirmDialog ConfirmDialog has a simple client side api show and hide functions are used to display and close the dialog respectively You can call these functions to display a confirmation from any component like commandButton commandLink menuitem and more lt h form gt lt p commandButton type button onclick cd showQ gt lt p confirmDialog message Are you sure about destroying the world header Initiating destroy process severity alert widgetVar cd gt lt p commandButton value Yes Sure actionListener buttonBean destroyWorld update messages oncomplete confirmation hideC gt lt p commandButton value Not Yet onclick confirmation hide Q type button gt lt p confirmDialog
66. sorting String Unique identifier of a row 126 String ascending or descending PrimeFaces User s Guide draggableColumns FALSE Boolean Columns can be reordered with dragdrop when enabled Getting started with the DataTable We will be using the same Car and CarBean classes described in DataGrid section lt p dataTable var car value carBean cars gt lt p coLumn gt lt f facet name header gt lt h outputText value Model gt lt f facet gt lt h outputText value car modeL gt lt p column gt lt p coLumn gt lt f facet name header gt lt h outputText value Year gt lt f facet gt lt h outputText value car year gt lt p column gt lt p coLumn gt lt f facet name header gt lt h outputText value Manufacturer gt lt f facet gt lt h outputText value 4 car manufacturer gt lt p column gt lt p coLumn gt lt f facet name header gt lt h outputText value CoLlor gt lt f facet gt lt h outputText value car color gt lt p coLumn gt lt p dataTable gt Header and Footer Both datatable itself and columns can have headers and footers List of Cars Model Manufacturer Color Year 16c9b7c6 Mercedes Maroon 1979 de0e4475 Volkswagen Maroon 1994 d17a0cac Ford Black 1998 Odb0095d Ford Red 1983 c09b2d08 Renault Red 1962 a5e3c203 Volkswagen Green 2007 196bd9e9 Ford White 1994 111db4d2 Ford Silver 1994 73b17bd
67. sorting algorithm which uses a java comparator you can plug in your own sort method lt p dataTable var car value carBean cars dynamic true gt lt p column sortBy car model sortFunction carBean sortByModel1 headerText Model gt lt h outputText value car modeL gt lt p coLumn gt more columns lt p dataTable gt public int sortByModelCCar cari Car car2 return 1 1 if car1 is less than equal to or greater than car2 DataTable can display data sorted by default to implement this use the sortBy option of datatable and optional sortOrder Table below would be initially displayed as sorted by model lt p dataTable var car value carBean cars sortBy car model gt lt p column sortBy car model sortFunction carBean sortByModel headerText Model gt lt h outputText value car modeL gt lt p coLumn gt more columns lt p dataTable gt Data Filtering Similar to sorting ajax based filtering is enabled at column level by setting fi terBy option lt p dataTable var car value carBean cars gt lt p column filterBy car model gt lt f facet name header gt lt h outputText value Model gt lt f facet gt lt h outputText value car modeL gt lt p coLumn gt more columns lt p dataTable gt 129 PrimeFaces User s Guide Filtering is triggered with keyup event and filter inputs can be
68. styled using filterStyle filterStyleClass attributes If you d like to use a dropdown instead of an input field to only allow predefined filter values use fi terOptions attribute and a collection array of selectitems as value In addition filterMatchMode defines the built in matcher which is startsWith by default Following is an advanced filtering datatable with these options demonstrated lt p dataTable var car value carBean cars widgetVar carsTable gt lt f facet name header gt lt p outputPanel gt lt h outputText value Search all fields gt lt h inputText id globalFilter onkeyup carsTable filterQ gt lt p outputPanel gt lt f facet gt lt p column filterBy car model headerText Model filterMatchMode contains gt lt h outputText value car modeL gt lt p coLumn gt lt p column filterBy car year headerText Year footerText startsWith gt lt h outputText value car year gt lt p coLumn gt lt p column filterBy car manufacturer headerText Manufacturer filterOptions carBean manufacturerOptions filterMatchMode exact gt lt h outputText value car manufacturer gt lt p coLumn gt lt p column filterBy car color headerText Color filterMatchMode endsWith gt lt h outputText value car color gt lt p coLumn gt lt p dataTable gt Search all fields Model Year Manufacturer Color 9fle82ad 1989 Volkswagen Black
69. tag with different strengths Transformers RIA AJAX jQuery NextGen usF 2 0 Mobile Themes Rocks Info Component Class org primefaces component tagcloud TagCloud Component Type org primefaces component TagCloud Component Family org primefaces component Renderer Type org primefaces component TagCloudRenderer Renderer Class org primefaces component tagcloud TagCloudRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered ee instance in a backing bean widgetVar Name of the client side Name of the client side widget Getting started with the TagCloud TagCloud requires a backend TagCloud model to display 405 PrimeFaces User s Guide TagCloud API org primefaces model tagcloud TagCloudModel void addTag TagCloudItem item void removeTag TagCloudItem item PrimeFaces provides org primefaces model tagcloud DefaultlagCloudModel as the default implementation org primefaces model tagcloud TagCloudItem String getLabel Returns label of the tag String getUrl Returns url of the tag int getStrength Returns strength of the tag between 1 and 5 PrimeFaces provides org primefaces model tagcloud DefaultTagCloudItem as the default implementation Skinning TagCloud resides in a container element that style and styleClass attributes apply ui tagcloud applies to main container and wi tagclou
70. the paginator widget Skinning DataList resides in a main div container which style and styleClass attributes apply Following is the list of structural style classes ui datalist Main container element ui datalist content Content container ui datalist item Each item in list As skinning style classes are global see the main Skinning section for more information Tips e DataList supports lazy loading data via LazyDataModel see DataTable lazy loading section If you need full control over list type markup set type to none With this setting datalist does not render item tags like li and behaves like ui repeat e DataList provides two facets named header and footer that you can use to provide custom content at these locations 124 PrimeFaces User s Guide 3 26 DataTable DataTable is an enhanced version of the standard Datatable that provides built in solutions to many commons use cases like paging sorting selection lazy loading filtering and more Model Year Manufacturer Color 62da385e 2000 Opel Green 9429b69f 2007 Mercedes Brown Obidb0d0 2001 BMW Orange ledc33c9 1977 Audi Red c9a6048e 2009 Opel Blue 272e6dc3 1964 Ford Brown cbde87b3 2007 Volkswagen Yellow cOf941e5 1998 Opel White 41a1c297 2003 Volvo Maroon Info Tag dataTable Component Class org primefaces component datatable DataTable Component Type org primefaces component DataTable Component Family org primefaces component Renderer Type
71. this setting suggestions will start when user types the 3rd character at the input field Query Delay AutoComplete is optimized using queryDelay option by default autoComplete waits for 300 milliseconds to query a suggestion request if you d like to tune the load balance give a longer value Following autoComplete waits for 1 second after user types an input lt p autoComplete value bean text completeMethod bean complete queryDelay 1000 gt Custom Content AutoComplete can display custom content by nesting columns lt p autoComplete value autoCompleteBean selectedPLayer compLeteMethod autoCompleteBean completePLlayer var p itemValue p converter pLayer gt lt p coLumn gt lt p graphicImage value images barca p photo width 40 height 50 gt lt p coLumn gt lt p coLumn gt p name p number lt p coLumn gt lt p autoComplete gt Dropdown Mode When dropdown mode is enabled a dropdown button is displayed next to the input field clicking this button will do a search with an empty query a regular completeMethod implementation should load all available items as a response lt p autoComplete value bean text completeMethod bean complete dropdown true gt 28 PrimeFaces User s Guide Multiple Selection AutoComplete supports multiple selection as well to use this feature set multiple option to true and define a list as your backend
72. to execute during sliding onSlideEnd Client side callback to execute when slide ends Getting started with Slider Slider requires an input component to work with for attribute is used to set the id of the input component whose input will be provided by the slider public class SliderBean private int number public int getNumber return number public void setNumberCint number this number number lt h inputText id number value sliderBean number gt lt p slider for number gt Display Value Using display feature you can present a readonly display value and still use slider to provide input in this case for should refer to a hidden input to bind the value lt h inputHidden id number value sliderBean number gt lt h outputText value Set ratio to gt lt h outputText id output value sliderBean number gt lt p slider for number display output gt Set ratio to 21 380 PrimeFaces User s Guide Vertical Slider By default slider s orientation is horizontal vertical sliding is also supported and can be set using the type attribute Step Step factor defines the interval between each point during sliding Default value is one and it is customized using step option Animation Sliding is animated by default if you want to turn it of animate attribute set the animate option to false Boundaries Maximum and minimum boundaries f
73. using nodeType option of context menu that matches the tree node type Skinning Tree resides in a container element which style and styleClass options apply Following is the list of structural style classes Style Class Applies ui tree nodes Child nodes container As skinning style classes are global see the main Skinning section for more information 427 PrimeFaces User s Guide 3 121 TreeNode TreeNode is used with Tree component to represent a node in tree Info Tag treeNode Component Class org primefaces component tree UITreeNode Component Type org primefaces component UITreeNode Component Family org primefaces component Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean Getting started with the TreeNode TreeNode is used by Tree and TreeTable components refer to sections of these components for more information 428 PrimeFaces User s Guide 3 122 TreeTable Treetable is is used for displaying hierarchical data in tabular format Document Viewer Name Size Type Documents Folder P gt Work Folder P gt PrimeFaces Folder P gt Pictures Folder P gt Movies Folder P Info Tag treeTable Component Class org primefaces component treetable TreeTable Component Type org prim
74. widget disabled FALSE Disables or enables the progressbar ajax FALSE Boolean Specifies the mode of progressBar in ajax mode progress value is retrieved from a backing bean 3000 Interval in seconds to do periodic requests in ajax mode PrimeFaces User s Guide style Inline style of the main container element styleClass Style class of the main container element labelTemplate Template of the progress label Getting started with the ProgressBar ProgressBar has two modes client default or ajax Following is a pure client side progressBar lt p progressBar widgetVar pb gt lt p commandButton value Start type button onclick StartQ gt lt p commandButton value Cancel type button onclick cancelQ gt lt script type text javascript gt function startQ this progressInterval setInterval functionQd pb setValue pbClient getValue 10 2000 function cancel clearInterval this progressInterval pb setValue Q lt script gt Ajax Progress Ajax mode is enabled by setting ajax attribute to true in this case the value defined on a managed bean is retrieved periodically and used to update the progress lt p progressBar ajax true value progressBean progress gt public class ProgressBean private int progress getter and setter 316 PrimeFaces User s Guide Interval ProgressBar is based on polling and 3000 milliseconds is the defaul
75. zoom 15 type hybrid style width 600 px height 40 px streetView true gt Avinguda Litoral Ronda del Litoral Barcelona CT Address is approximate 194 PrimeFaces User s Guide Map Controls Controls on map can be customized via attributes like navigationControl and mapTypeControl Alternatively setting disableDefaultUI to true will remove all controls at once Native Google Maps API In case you need to access native google maps api with javascript use provided getMap method Full map api is provided at http code google com apis maps documentation javascript reference html GMap API org primefaces model map MapModel org primefaces model map DefaultMapModel is the default implementation Method Description addOverlay Overlay overlay Adds an overlay to map List lt Marker gt getMarkers Returns the list of markers List lt Polyline gt getPolylines Returns the list of polylines List lt Rectangle gt getRectangles 195 PrimeFaces User s Guide org primefaces model map Overlay rs ae Id of the overlay generated and used internally org primefaces model map Marker extends org primefaces model map Overlay org primefaces model map Polyline extends org primefaces model map Overlay org primefaces model map Polygon extends org primefaces model map Overlay 196 PrimeFaces User s Guide strokeOpacity Opacity of a line stroke Weight Weight of a line fillColor Ba
76. 0 Volvo Blue 1973 8 digit code 1960 2010 In total there are 9 cars 127 PrimeFaces User s Guide lt p dataTable var car value carBean cars gt lt f facet name header gt List of Cars lt f facet gt lt p coLumn gt lt f facet name header gt Model lt f facet gt car modeL lt f facet name footer gt 8 digit code lt f facet gt lt p coLlumn gt lt p coLumn headerText Year footerText 1960 2010 gt car year lt p coLumn gt more columns lt f facet name header gt In total there are fn lengthCcarBean cars cars lt f facet gt lt p dataTable gt headerText and footerText attributes on column are handy shortcuts for header and footer facets that just display plain texts Pagination DataTable has a built in ajax based paginator that is enabled by setting paginator option to true see pagination section in dataGrid documentation for more information about customization lt p dataTable var car value carBean cars paginator true rows 10 gt columns lt p dataTable gt Sorting Defining sortBy attribute enables ajax based sorting on that particular column lt p dataTable var car value carBean cars gt lt p column sortBy car model headerText Model gt lt h outputText value car modeL gt lt p coLumn gt more columns lt p dataTable gt 128 PrimeFaces User s Guide Instead of using the default
77. 1966 Volvo 1962 Audi 1990 Ford 1972 Mercedes 2003 BMW 1984 Audi 1975 Volvo 1973 Definition Lists Third type of dataList is definition lists that display inline description for each item to use definition list set type option to definition Detail content is provided with the facet called description Opel 1980 Chrysler 1966 Volvo 1962 Audi 1990 Ford 1972 Mercedes 2003 BMW 1984 Audi 1975 Volvo 1973 PrimeFaces User s Guide i Ferrari 1960 ii Renault 1985 iii Ford 2003 Audi 1976 Opel 1983 Ferrari 1974 ii Chrysler 1980 Audi 1980 Chrysler 1983 Opel 1980 Chrysler 1966 Volvo 1962 Audi 1990 Ford 1972 Mercedes 2003 BMW 1984 Audi 1975 Volvo 1973 Model 61a10db5 Year 2008 Oo Model 9efc3d27 Year 1973 Model 2d1a03f2 Year 2009 Model 987f2246 Year 1963 Model 14b594fc Year 1998 Q 123 PrimeFaces User s Guide Ajax Pagination DataList has a built in paginator that is enabled by setting paginator option to true Pagination configuration and usage is same as dataGrid see pagination section in dataGrid documentation for more information and examples Selecting Data Data selection can be implemented same as in dataGrid see selecting data section in dataGrid documentation for more information and examples Client Side API Widget PrimeFaces widget DataList getPaginator P Paginator Returns
78. 2 How can I get support Support forum is the main area to ask for help it s publicly available and free registration is required before posting Please do not email the developers of PrimeFaces directly and use support forum instead 3 Is enterprise support available Yes enterprise support is also available Please visit support page on PrimeFaces website for more information http www primefaces org support html 4 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 Snapshot builds of samples are deployed at PrimeFaces Repository time to time 5 Some components like charts do not work in Safari or Chrome but there s no problem with Firefox The common reason is the response mimeType when using with PrimeFaces You need to make sure responseType is text html You can use the lt f view contentType text html gt to enforce this 6 My page does not navigate with PrimeFaces commandButton and commandLink If you d like to navigate within an ajax request use redirect instead of forward or set ajax to false 7 Where can I get an unreleased snapshot Nightly snapshot builds of a future release is deployed at http repository primefaces org 8 What is the license PrimeFaces have PrimeFaces is free to use and licensed under Apache License V2 9 Can I use PrimeFaces in a commercial software Yes Apache V2 License is
79. 4 104 4 bubbleModel addBubbleCnew BubbleChartSeriesC Bugatti 50 123 60 bubbleModel addBubbleCnew BubbleChartSeriesC BMW 15 89 25 bubbleModel addBubbleCnew BubbleChartSeriesC Audi 40 180 80 bubbleModel addBubbleCnew BubbleChartSeriesC AstonMartin 70 70 48 public BubbleChartModel getModel return model lt p bubbleChart value bean model xaxisLabel Price yaxisLabel Sales title Sample Bubble Chart gt Sample Bubble Chart 150 Sales Price 75 PrimeFaces User s Guide Customization BubbleChart can be customized using various options os Custom Bubble Chart 76 PrimeFaces User s Guide 3 12 6 Ohlc Chart An open high low close chart is a type of graph typically used to visualize movements in the price of a financial instrument over time Info Component Class org primefaces component chart ohle OhlcChart Component Type org primefaces component chart OhlcChart Component Family org primefaces component Renderer Type org primefaces component chart OhlcChartRenderer Renderer Class org primefaces component chart ohle OhlcChartRenderer Attributes null Unique identifier of the component rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean 77 Prime
80. 4 16 2010 2011 17 22 Totals 67 90 Ajax Behavior Events DataTable provides many custom ajax behavior events for you to hook in to various features org primefaces event ColumnResizeEvent When a column is being selected toggleSelect Co a y l When header checkbox is toggled 141 PrimeFaces User s Guide For example datatable below makes an ajax request when a row is selected with a click on row Client Side API Widget PrimeFaces widget DataTable getPaginator P aginator Returns the paginator insance clearFilters Poi Clears all column filters getSelectedRowsCount PL Number Returns number of selected rows selectRow r silent r number or tr element void Selects the given row as jQuery object silent flag to fire row select ajax behavior unselectRow r silent r number or tr element as jQuery object silent flag to fire row select ajax behavior toggleCheckAIl PL void Toggles header checkbox state Skinning DataTable resides in a main container element which style and styleClass options apply Following is the list of structural style classes Main container element ui datatable footer Table footer 142 ui datatable header Table header PrimeFaces User s Guide ui cell editor Container of input and output controls of an editable cell ui cell editor input Container of input control of an editable cell ui cell editor output Container of output control of an editable
81. 50 300 250 200 PrimeFaces User s Guide 2004 2005 2006 67 2007 2008 PrimeFaces User s Guide 3 12 3 Bar Chart Bar chart visualizes one or more series of data using bars Info Tag barChart Component Class org primefaces component chart bar BarChart Component Type org primefaces component chart BarChart Component Family org primefaces component Renderer Type org primefaces component chart BarChartRenderer Renderer Class org primefaces component chart bar BarChartRenderer Attributes null Unique identifier of the component rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean widgetVar Name of the client side widget value ChartModel Datasource to be displayed on the chart style Inline style of the chart styleClass Style class of the chart it Tie of the chat legendPosition Position of the legend barPadding s integer Padding of bars barMargin Margin of bars orientation Orientation of bars valid values are vertical and horizontal 68 PrimeFaces User s Guide breakOnNull FALSE Boolean Whether line segments should be broken at null value fall will join point on either side of line seriesColors Comma separated list of colors in hex format shadow TRU
82. 9 2007 2008 10 14 2008 2009 5 2009 2010 14 2010 2011 17 22 Info Attributes id Unique identifier of the component rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered value Data of the component var Name of the data iterator Getting started with SubTable binding null Object An el expression that maps to a server side UIComponent instance in a backing bean See DataTable section for more information 397 PrimeFaces User s Guide 3 110 SummaryRow SummaryRow is a helper component of datatable used for dynamic grouping Model s Year s Manufacturer X Color 20b7dd32 1983 Volvo Orange 93583964 1962 Volvo White 6e68d612 1970 Volvo Brown a127d75d 1968 Volvo Black 3d5ba523 1994 Volvo Red Total 51545 4d784acf 2002 Volkswagen Red Oe43ef6e 1978 Volkswagen Black 4b0ee961 1960 Volkswagen Red 8b1bdfef 2008 Volkswagen White Total 680121 40b0c19d 2000 Renault Green ad fi6ee 1967 Renault Maroon ec645794 1983 Renault Green Total 67468 Info Component Class org primefaces component summaryrow SummaryRow Component Type org primefaces component SummaryRow Component Family org primefaces component Renderer Type org primefaces component SummaryRowRenderer Renderer Class org primefaces component summaryrow SummaryRowRenderer Attributes id Unique identifier of the component rendered TRUE Boolean Boolean value to specify the r
83. Applies ul contextmenu Container element of menu ui menuitem Each menu item ui menuitem link Anchor element in a link item ui menuitem text Text element in an item As skinning style classes are global see the main Skinning section for more information 106 PrimeFaces User s Guide 3 22 Dashboard Dashboard provides a portal like layout with drag amp drop based reorder capabilities TO sen 000 Finance Content Lifestyle Content Sports Content Politics OSG Ry weather x Politics Content Weather Content Info Tag dashboard Component Class org primefaces component dashboard Dashboard Component Type org primefaces component Dashboard Component Family org primefaces component Renderer Type org primefaces component DashboardRenderer Renderer Class org primefaces component dashboard DashboardRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side ener instance in a backing bean widgetvar Name of the client side Name of the client side widget model null Dashboard Dashboard model instance representing the layout of Model UL disabled FALSE Disables Disables reordering feature o feature Inline style of the dashboard container styleClass Style class of the dashboard container Getting started with Dashboard Dashb
84. C Liferay DTD Display 5 1 0 EN http www liferay com dtd liferay display_5_1_ dtd gt lt dispLay gt lt category name category sample gt lt portlet id 1 gt lt category gt lt display gt Pages That is it for the configuration a sample portlet page is a partial version of the regular page to provide only the content without html and body tags 468 PrimeFaces User s Guide edit xhtml lt f view xmlns http www w3 org 1999 xhtmL xmLns h http java sun com jsf htmL xmLns f http java sun com jsf core xmLns ui http java sun com jsf facelets xmLns p http primefaces prime com tr ui gt lt h head gt lt h head gt lt h form gt lt h panelGrid id grid columns 2 cellpadding 10px gt lt f facet name header gt lt p messages id messages gt lt f facet gt lt h outputText value Total Amount gt lt h outputText value gambitControLller amount gt lt h outputText value Bet gt lt h inputText value gambitController bet gt lt p commandButton value RED actionListener gambitController playRed update parent gt lt p commandButton value BLACK actionListener gambitController playBlack update parent gt lt h panelGrid gt lt h form gt lt f view gt i LIFERAY EE Enterprise Open Source For Life Welcome Portlets Liferay Portlets PrimeFaces Portlet Return to Full Page
85. Car cars new Car columns size Q for int j 0 j lt columns sizeQ j cars j Create car object dynamicCars add cars 133 PrimeFaces User s Guide Grouping Grouping is defined by ColumnGroup component used to combine datatable header and footers lt p dataTable var sale value carBean sales gt lt p columnGroup type header gt lt p row gt lt p coLumn rowspan 3 headerText Manufacturer gt lt p coLumn colspan 4 headerText Sales gt lt p row gt lt p row gt lt p column colspan 2 headerText Sales Count gt lt p column colspan 2 headerText Profit gt lt p row gt lt p row gt lt p column headerText Last Year gt lt p column headerText This Year gt lt p column headerText Last Year gt lt p column headerText This Year gt lt p row gt lt p coLumnGroup gt lt p coLumn gt sale manufacturer lt p column gt lt p coLumn gt sale LastYearProfit lt p column gt lt p coLumn gt sale thisYearProfit lt p coLumn gt lt p coLumn gt sale lastYearSale t lt p column gt lt p coLumn gt sale thisYearSale lt p coLlumn gt lt p coLlumnGroup type footer gt lt p row gt lt p column colspan 3 style text align right footerText Totals gt lt p column footerText tabLeBean lastYearTotaL gt lt p column footerText tabLeBean thisYearTotaL gt lt p row gt lt p c
86. Community is a member of JavaServer Faces Expert Group the founder and project lead of PrimeFaces and PMC member of open source JSF implementation Apache MyFaces He s a recognized speaker in international conferences including SpringOne Jazoon JAX W JAX JSFSummit JSFDays Con Fess and many local events such as JUGs Cagatay is also an author and technical reviewer of a couple books regarding web application development with Java and JSF As an experienced trainer he has trained over 300 developers on Java EE technologies mainly JSF Spring EJB 3 x and JPA Cagatay is currently working as a principal consultant for Prime Teknoloji the company he co founded in Turkey PrimeFaces User s Guide 1 Introduction 1 1 What is PrimeFaces PrimeFaces is an open source JSF component suite with various extensions e Rich set of components HtmlEditor Dialog AutoComplete Charts and many more e Built in Ajax based on standard JSF 2 0 Ajax APIs e Lightweight one jar zero configuration and no required dependencies e Ajax Push support via websockets e Mobile UI kit to create mobile web applications for handheld devices e Skinning Framework with 30 built in themes and support for visual theme designer tool e Extensive documentation e Large vibrant and active user community e Developed with passion from application developers to application developers 1 2 Prime Teknoloji PrimeFaces is created and maintained by Pr
87. E Shows shadow or not enhancedLegend TRUE Specifies interactive legend Getting Started with Bar Chart xaxisLabel Label of the x axis BarChart is created with an org primefaces model chart CartesianChartModel instance Reusing the same model sample from lineChart section 150 0 0 0 2004 2005 2006 2007 2008 Orientation Bars can be displayed horizontally using the orientation attribute 69 PrimeFaces User s Guide 2008 2007 2006 2005 Hie 2004 I Giris 0 0 22 2 44 4 66 7 88 9 111 1 133 3 155 6 177 8 200 0 Stacked BarChart Enabling stacked option displays bars in stacked format noo E Boys 2004 2005 2006 2007 2008 70 PrimeFaces User s Guide 3 12 4 Donut Chart DonutChart is a combination of pie charts Info Tag donutChart Component Class org primefaces component chart donut DonutChart Component Type org primefaces component chart DonutChart Component Family org primefaces component Renderer Type org primefaces component chart DonutChartRenderer Renderer Class org primefaces component chart donut DonutChartRenderer Attributes i Unique identifier of the component when set to false component will not be rendered instance in a backing bean Render solid slios Shows shadow ornot Displays data on each slie Format ofdata labels Columncountofteyend fill Render solid slices shadow Shows shadow or not showDataLabels Displays data on each slice
88. Faces User s Guide Ajax Support Ajax is a built in feature of hotkeys meaning you can do ajax calls with key combinations Following form can be submitted with the ctr shift s combination Note that hotkey will not be triggered if there is a focused input on page 211 PrimeFaces User s Guide 3 44 IdleMonitor IdleMonitor watches user actions on a page and notify callbacks in case they go idle or active again Info Tag idleMonitor Component Class org primefaces component idlemonitor IdleMonitor Component Type org primefaces component I dleMonitor Component Family org primefaces component Renderer Type org primefaces component I dleMonitorRenderer Renderer Class org primefaces component idlemonitor IdleMonitor Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean timeout 300000 Integer Time to wait in milliseconds until deciding if the user is idle Default is 5 minutes Client side callback to execute when user goes idle Client side callback to execute when user goes idle Getting Started with IdleMonitor To begin with you can hook in to client side events that are called when a user goes idle or becomes active again Example below toggles visibility of a dialog to respond these events 212 PrimeFaces
89. Faces User s Guide Getting started with OhlcChart OhlcChart is created with an org primefaces model chart OhlcChartModel instance public class Bean private OhlcChartModel model public Bean model new OhlcChartModel ohLcModel addRecord new Ohl cChartSeries 2007 143 82 144 56 136 04 136 97 ohLcModel addRecord Cnew Ohl cChartSeries 2008 138 7 139 68 135 18 135 4 ohLcModel addRecord Cnew Ohl cChartSeries 2009 143 46 144 66 139 79 140 02 ohLcModel addRecord Cnew Ohl cChartSeries 2010 140 67 143 56 132 88 142 44 ohLcModel addRecord Cnew Ohl cChartSeries 20 11 136 01 139 5 134 53 139 48 ohLcModel addRecord Cnew Ohl cChartSeries 2012 124 76 135 9 124 55 135 81 ohLcModel addRecord Cnew Ohl cChartSeries 2012 123 73 129 31 121 57 122 5 getter lt p ohlcChart value bean model xaxisLabel Year yaxisLabel Price Change K Unit title Sample Ohlc Chart gt Sample Ohlc Chart 5 a gi ai 35 Y x y 12 4 CandleStick OhlcChart can display data in candle stick format as well lt p ohlcChart value bean model xaxisLabel Sector yaxisLabel Index Value title Ohlc Chart with Candle Stick gt Ohlc Chart with Candle Stick 2 Waa Sector 78 PrimeFaces User s Guide 3 12 7 MeterGauge Chart MeterGauge chart visualizes data on a meter gauge display Info Tag meterGaugeChart Component Class org primefaces component chart meter
90. InCirc easeOutBack easeOutCubic easeInOutQuint easeOutCirc easeInOutBack easeInOutCubic easeInSine easeInOutCirc Ajax Behavior Events Resizable provides default and only resize event that is called on resize end In case you have a listener defined it will be called by passing an org primefaces event ResizeEvent instance as a parameter lt h inputTextarea id area value Resize me if you need more space gt lt p resizable for area gt lt p ajax listener resizeBean handleResize gt lt p resizable gt 329 PrimeFaces User s Guide public class ResizeBean public void handleResizeCResizeEvent event int width event getWidthQ int height event getHeight Client Side Callbacks Resizable has three client side callbacks you can use to hook in your javascript onStart onResize and onStop All of these callbacks receive two parameters that provide various information about resize event lt h inputTextarea id area value Resize me if you need more space gt lt p resizable for area onStop handleStopCevent ui gt function handleStop event ui ui helper helper element as a jQuery object ui originalPosition top left position before resizing ui originalSize width height before resizing ui positon top left after resizing ui size width height of current size Skinning Style Class Applies ui resizable Element that is resizable ui resizable handle H
91. New York Mafia family oversees his daughter s wedding His beloved son Michael has just come home from the war but does not intend to become part of his father s business T hrough Michael s life the nature of the family business becomes clear The business of the family is just like the head of the family kind and benevolent to those who give respect but given to ruthless violence whenever anything stands against the good of the family Info Component Class org primefaces component tabview Tab View Component Type org primefaces component Tab View Component Family org primefaces component Renderer Type org primefaces component Tab ViewRenderer Renderer Class org primefaces component tabview Tab ViewRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding Object An el expression that maps to a server side UIComponent instance in a backing bean 400 PrimeFaces User s Guide cache TRUE Boolean When tab contents are lazy loaded by ajax toggleMode caching only retrieves the tab contents once and subsequent toggles of a cached tab does not communicate with server If caching is turned off tab contents are reloaded from server each time tab is clicked onTabChange null String Client side callback to execute when a tab is clicked onTabShow null String Client side callback to execute when a tab is a syle Inline
92. Select gt lt p ajax event expand listener treeBean onNodeExpand gt lt p ajax event collapse listener treeBean onNodeCollapse gt lt p tree gt public void onNodeSelect NodeSelectEvent event String node event getTreeNode getDataC toStringQ public void onNodeExpand NodeExpandEvent event String node event getTreeNode getDataC toStringQ public void onNodeCollapse NodeCollapseEvent event String node event getTreeNode getDataC toStringQ Event listeners are also useful when dealing with huge amount of data The idea for implementing such a use case would be providing only the root and child nodes to the tree use event listeners to get the selected node and add new nodes to that particular tree at runtime Selection Node selection is a built in feature of tree and it supports three different modes Selection should be a TreeNode for single case and an array of TreeNodes for multiple and checkbox cases tree finds the selected nodes and assign them to your selection model single Only one at a time can be selected selection should be a TreeNode reference multiple Multiple nodes can be selected selection should be a TreeNode reference checkbox Multiple selection is done with checkbox UI selection should be a TreeNode reference 425 PrimeFaces User s Guide lt p tree value treeBean root var node selectionMode checkbox selection treeBean select
93. Tag separator Component Class org primefaces component separator Separator Component Type org primefaces component Separator Component Family org primefaces component Renderer Type org primefaces component Separator Renderer Class org primefaces component separator Separator Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side ae aa instance in a backing bean title Advisory tooltip informaton tooltip informaton styleClass Style class of the separator Getting started with Separator In its simplest form separator is used as 371 PrimeFaces User s Guide Dimensions Separator renders a lt hr gt tag which style and styleClass options apply Special Separators Separator can be used inside other components such as menu and toolbar as well Skinning As mentioned in dimensions section style and styleClass options can be used to style the separator Following is the list of structural style classes Applies ui separator Separator element As skinning style classes are global see the main Skinning section for more information 372 PrimeFaces User s Guide 3 101 Sheet Sheet is an excel like component to do data manipulation featuring resizable columns ajax sorting horizontal vertical scrolling frozen headers keyboard nav
94. UI treeNode component as a child to display the nodes 421 PrimeFaces User s Guide TreeNode vs p TreeNode TreeNode API is used to create the node model and consists of org primefaces model TreeNode instances on the other hand lt p treeNode gt tag represents a component of type org primefaces component tree UlTreeNode You can bind a TreeNode to a particular p treeNode using the type name Document Tree example in upcoming section demonstrates a sample usage TreeNode API TreeNode has a simple API to use when building the backing model For example if you call node setExpanded true on a particular node tree will render that node as expanded expanded Flag indicating whether the node is expanded or not Dynamic Tree Tree is non dynamic by default and toggling happens on client side In order to enable ajax toggling set dynamic setting to true Non Dynamic When toggling is set to client all the treenodes in model are rendered to the client and tree is created this mode is suitable for relatively small datasets and provides fast user interaction On the otherhand it s not suitable for large data since all the data is sent to the client Dynamic Dynamic mode uses ajax to fetch the treenodes from server side on demand compared to the client toggling 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 popu
95. User s Guide Controlling Timeout By default idleMonitor waits for 5 minutes 300000 ms until triggering the onidle event You can customize this duration with the timeout attribute Ajax Behavior Events IdleMonitor provides two ajax behavior events which are idle and active that are fired according to user status changes Example below displays messages for each event lt p idleMonitor timeout 5000 update messages gt lt p ajax event idle listener bean idleListener update msg gt lt p ajax event active listener bean activeListener update msg gt lt p idleMonitor gt lt p growl id msg gt public class Bean public void idleListener Add facesmessage public void idleqd Add facesmessage 213 PrimeFaces User s Guide 3 45 ImageCompare ImageCompare provides a rich user interface to compare two images 000 1 000009 moh Info imageCompare org primefaces component imagecompare ImageCompare org primefaces component ImageCompare org primefaces component org primefaces component ImageCompareRenderer org primefaces component imagecompare ImageCompareRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean 214 PrimeFaces User s Guide Ge
96. Value evaluates it to get the instance of StreamedContent from bean and streams contents to client As a result there will be 2 requests to display an image first browser will make a request to load the page and then another one to the dynamic image url that points to JSF resource handler Please note that you cannot use viewscope beans as viewscoped bean is not available in resource loading request Passing Parameters and Data Iteration You can pass request parameters to the graphicImage via f param tags as a result the actual request rendering the image can have access to these values This is extremely handy to display dynamic images if your image is in a data iteration component like datatable or ui repeat 204 PrimeFaces User s Guide 3 42 Growl Growl is based on the Mac s growl notification widget and used to display FacesMessages in an overlay bd Name Validation Error Value is required Name Validation Error Value is required Info Tag growl Component Class org primefaces component growl Growl Component Type org primefaces component Growl Component Family org primefaces component Renderer Type org primefaces component GrowlRenderer Renderer Class org primefaces component growl GrowlRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server si
97. a commercial friendly library PrimeFaces does not bundle any third party software that conflicts with Apache 10 Which browsers are supported by PrimeFaces IE7 8 9 Safari Firefox Chrome and Opera 474 PrimeFaces User s Guide THE END 475
98. a form inside a dialog e Do not place dialog inside tables containers likes divs with relative positioning or with non visible overflow defined in cases like these functionality might be broken This is not a limitation but a result of DOM model For example dialog inside a layout unit tabview accordion are a couple of examples Same applies to confirmDialog as well 150 PrimeFaces User s Guide 3 29 Drag amp Drop Drag amp Drop utilities of PrimeFaces consists of two components Draggable and Droppable 3 29 1 Draggable Info Tag draggable Component Class org primefaces component dnd Draggable Component Type org primefaces component Draggable Component Family org primefaces component Renderer Type org primefaces component DraggableRenderer Renderer Class org primefaces component dnd DraggableRenderer Attributes rendered TRUE boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean FALSE Displays a proxy element instead of actual element dragOnly FALSE Specifies a draggable that can t be dropped Id of the component to add draggable behavior disabled FALSE Disables draggable behavior when true Specifies drag axis valid values are x and y containment null String Constraints dragging within the boundaries of containment element he
99. about the capabilities Dynamic Menus Menus can be created programmatically as well see the dynamic menus part in menu component section for more information and an example Skinning Menubar resides in a main container which style and styleClass attributes apply Following is the list of structural style classes ui ui ui menuitem text Text element in an item As skinning style classes are global see the main Skinning section for more information 267 PrimeFaces User s Guide 3 61 MenuButton MenuButton displays different commands in a popup menu z opona Update x Delete Z Homepage Info Component Class org primefaces component menubutton MenuButton Component Type org primefaces component MenuButton Component Family org primefaces component Renderer Type org primefaces component MenuButtonRenderer Renderer Class org primefaces component menubutton MenuButtonRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side 2 OC instance in a backing bean value Label ofthe button of the button 268 PrimeFaces User s Guide Getting started with the MenuButton MenuButton consists of one ore more menuitems Following menubutton example has three menuitems first one is used triggers an action with ajax second on
100. ackTrace return null 219 PrimeFaces User s Guide 3 47 ImageSwitch Imageswitch component is a simple image gallery component Previous Next Info Tag imageSwitch Component Class org primefaces component imageswitch ImageSwitch Component Type org primefaces component ImageSwitch Component Family org primefaces component Renderer Type org primefaces component ImageSwitchRenderer Renderer Class org primefaces component imageswitch ImageSwitchRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side oO instance in a backing bean widgetVar Name of the client side Name of the client side widget 220 PrimeFaces User s Guide Getting Started with ImageSwitch ImageSwitch component needs a set of images to display Provide the image collection as a set of children components lt p imageSwitch effect FlyIn widgetVar imageswitch gt lt p graphicImage value images naturel jpg gt lt p graphicImage value images nature2 jpg gt lt p graphicImage value images nature3 jpg gt lt p graphicImage value images nature4 jpg gt lt p imageSwitch gt Most of the time images could be dynamic ui repeat is supported to implement this case lt p imageSwitch widgetVar imageswitch gt lt ui repeat value bean
101. alueChangeListener null MethodExpr A method expression that refers to a method for handling a valuechangeevent requiredMessage null String Message to be displayed when required field validation fails Message to be displayed when conversion fails Message to be displayed when validation fields Name of the client side widget Name of the iterator moveUpLabel Move String Label of move up button Up moveTopLabel Move String Label of move top button Top moveDownLabel Move String Label of move down button Down moveBottomLabel Move String Label of move bottom button Bottom controlsLocation left String Location of the reorder buttons valid values are left right and none 281 PrimeFaces User s Guide Getting started with OrderList A list is required to use OrderList component public class OrderListBean private List lt String gt cities public OrderListBeanQ cities new ArrayList lt String gt Q cities addC Istanbul cities addC Ankara cities addC Izmir citites addC Antalya cities addC Bursa getter amp setter for cities lt p orderList value orderListBean cities var city itemLabel city itemVaLue city gt When the form is submitted orderList will update the cities list according to the changes on client side Advanced OrderList OrderList supports displaying custom content instead of simple labels by using columns In addition po
102. ame and Location 3 Server and Settings 4 Frameworks oO JavaServer Faces O Struts 1 3 8 O bHihernsate 225 PrimeFaces User s Guide Select the frameworks you want to use in your web application O Spring Web MVC JavaServer Faces Configuration Components Suite None Libraries Configuration Components PrimeFaces 2 1 Select the JSF component suite to setup for your web application Code completion is supported by NetBeans 6 9 lt Back Next gt Transitional EN 1 lt xml version 1 0 encoding UTF 8 gt 2 lt DOCTYPE html PUBLIC W3C DTD XHTML 1 0 i lt html xmlns http www w3 org 1999 xhtml 4 xmlns h http java sun com jsf html 5 xmlns p http primefaces prime com tr ui gt 6 7 8 lt h body gt 9 10 lt p 11 lt p accordionPanel gt primefaces p is lt h J lt p ajax gt primefaces p 5 m lt p ajaxStatus gt primefaces p lt p autoComplete gt primefaces p lt p barChart gt primefaces p lt p calendar gt primefaces p lt p captcha gt primefaces p lt p carousel gt rimefaces p lt p chartSeries gt primefaces p lt p collector gt primefaces p lt p colorPicker gt primefaces p lt p column gt primefaces p lt p columnChart gt primefaces p lt p commandButton gt primefaces p lt p commandLink gt primefaces p lt p confirmDialog gt rimefaces p lt p dataExporter gt primefaces p of 2Oc
103. ame of the client side Name of the client side widget 185 PrimeFaces User s Guide effectSpeed Duration of animation in milliseconds panel Width Width of the viewport frameWidth Width of the frames frameHeight Height of the frames filmstripStyle Style of the filmstrip panelHeight Height of the viewport Getting Started with Galleria Images to displayed are defined as children of galleria Galleria displays the details of an image using an overlay which is displayed by clicking the information icon Title of this popup is retrieved from the image title attribute and description from alt attribute so it is suggested to provide these attributes as well Dynamic Collection Most of the time you would need to display a dynamic set of images rather than defining each image declaratively For this you can use built in data iteration feature 186 PrimeFaces User s Guide Effects There are four different options for the animation to display when switching images e fade default e flash e pulse e slide By default animation takes 700 milliseconds use effectDuration option to tune this Skinning Galleria resides in a main container element which style and styleClass options apply Following is the list of structural style classes ui galleria thumbnails container ui galleria thumbnails list ui galleria thumbnails ui galleria image ui galleria image thumb nav left ui galleria image t
104. ameter is used to specify if your application requires a sensor like GPS locator Four options are required to place a gmap on a page these are center zoom type and style center Center of the map in lat Ing format zoom Zoom level of the map 189 PrimeFaces User s Guide type Type of map valid values are hybrid satellite hybrid and terrain style Dimensions of the map MapModel GMap is backed by an org primefaces model map MapModel instance PrimeFaces provides org primefaces model map DefaultMapModel as the default implementation API Docs of all GMap related model classes are available at the end of GMap section and also at javadocs of PrimeFaces Markers A marker is represented by org primefaces model map Marker lt p gmap center 41 381542 2 122893 zoom 15 type hybrid style width 60 px height 4 px model mapBean model gt public class MapBean private MapModel model new DefaultMapModel public MapBean model addOverlayCnew Marker Cnew LatLng 36 879466 30 667648 M1 more overlays public MapModel getModel return this model ott Irhagery 2010 Cnes Spot Image Data SIO NOAA U S Navy NGA GEBCQ Digitaljobe Geo tarsos Polylines A polyline is represented by org primefaces model map Polyline lt p gmap center 41 381542 2 122893 zoom 15 type hybrid style width 60 px height 4 px model mapBean model gt 190
105. andle element ui resizable handle handlekey Particular handle element identified by handlekey like e s ne ui resizable proxy Proxy helper element for visual feedback 330 PrimeFaces User s Guide 3 83 Ring Ring is a data display component with a circular animation Info org primefaces component ring Ring org primefaces component Ring org primefaces component org primefaces component RingRenderer org primefaces component ring RingRenderer Attributes String Unique identifier of the component rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean String Name of the client side widget Object Collection to display String Name of the data iterator String Inline style of the container element styleClass String Style class of the container element String Type of easing to use in animation 331 PrimeFaces User s Guide Getting started with Ring A collection is required to use the Ring component public class RingBean private List lt Player gt players public RingBean players new ArrayList lt Player gt Q players add new Player Messi 10 messi jpg CF players add new Player Iniesta 8 iniesta jpg CM players add new Player Villa 7 villa jpg CF players add new Player Xavi
106. aoadadaanaanankaadka amp AR 471 Cancel Help httg W3C DTD XHTML 1 0 Transitional EN PrimeFaces User s Guide h 1 lt xml version 1 0 encoding UTF 8 gt 2 lt DOCTYPE html PUBLIC 3 lt html xmlns http www w3 0rg 1999 xhtml 4 xmlns h http java sun com jsf html 5 xmlns p http primefaces prime com tr ui gt 6 7 8 lt h body gt 9 10 lt p accordionPanel 11 12 lt h body gt 13 lt html gt multipleSelection rendered speed style styleClass PrimeFaces and NetBeans teams are in communication to discuss the next step of PrimeFaces integration in NetBeans at the time of writing 12 2 Eclipse Code completion works out of the box for Eclipse when JSF facet is enabled lt ui composition xmlns http www w3 org 1999 xhtml xmlns ui http java sun com jsf facelets xmlins h http java sun com jsf html xmlns fe http java sun com jsf core xmins p http primefaces prime com tr ui template templates ui xhtml gt lt ui define name content gt lt gt prajaxStatus lt gt p autoComplete lt gt p barChart lt gt p breadCrumb lt gt p calendar lt gt pscaptcha lt gt pscarousel lt gt pochartSeries Element p accordionPanel lt ui composition xmins http ww w3 org 1999 xhtml xmlns ui http java sun com jsf facelets xmlns http java sun com jsf html xmlins f ht
107. aptcha CaptchaRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean value null Object Value of the component than can be either an EL expression of a literal text converter null Converter An el expression or a literal text that defines a String 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 immediate Boolean When set true process validations logic is executed at apply request values phase for this component FALSE Marks component as required PrimeFaces User s Guide validator null MethodExpr A method binding expression that refers to a method validationg the input valueChangeListener null ValueChange A method binding expression that refers to a Listener method for handling a valuchangeevent requiredMessage null String Message to be displayed when required field a fails pee Message to be Message to be displayed when conversion fails when conversion fails validatorMessage Message to be displayed when validation fields C theme oe e e Theme of the Theme ofthe captcha Getting Started with Captcha Catpcha is implemented as an input component with a built in validator that is integra
108. atable composite components are naming containers in addition tabView accordionPanel dataTable dataGrid dataList carousel galleria ring sheet and subTable are PrimeFaces component that implement NamingContainer 441 PrimeFaces User s Guide Multiple Components Multiple Components to update can be specified with providing a list of ids separated by a comma whitespace or even both lt h form gt lt p commandButton update display1 display2 gt lt p commandButton update display1 display2 gt lt h outputText id display1 value bean value1 gt lt h outputText id display2 value bean value2 gt lt h form gt Keywords There are a couple of reserved keywords which serve as helpers this Component that triggers the PPR is updated p gg p arent Parent of the PPR trigger is updated p gg p form Encapsulating form of the PPR trigger is updated p 8 none PPR does not change the DOM with ajax response all Whole document is updated as in non ajax requests Example below updates the whole form lt h form gt lt p commandButton update form gt lt h outputText value bean vaLlue gt lt h form gt Keywords can also be used together with explicit ids so update form display is also supported 4 1 3 Notifying Users ajaxStatus is the component to notify the users about the status of global ajax requests See the ajaxStatus section to get more
109. ation fails Message to be displayed when conversion fails Message to be displayed when validation fields Getting started with SelectBooleanButton SelectBooleanButton usage is similar to selectBooleanCheckbox Skinning SelectBooleanButton resides in a main container which style and styleClass attributes apply As skinning style classes are global see the main Skinning section for more information Following is the list of structural style classes Style Class Applies ui selectbooleanbutton Main container element 349 PrimeFaces User s Guide 3 91 SelectBooleanCheckbox SelectBooleanCheckbox is an extended version of the standard checkbox with theme integration v Info selectBooleanCheckbox Component Class org primefaces component selectbooleancheckbox SelectBooleanCheckbox Component Type org primefaces component SelectBooleanCheckbox al Family org primefaces component Renderer Renderer Type org primefaces component SelectBooleanCheckboxRenderer Renderer Class org primefaces component selectbooleancheckbox SelectBooleanCheckbox Renderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side ee instance in a backing bean value o Value of the component Value of the component referring to a List to a List converter null Converter An el expre
110. ationbar close Close icon element 279 PrimeFaces User s Guide 3 66 OrderList OrderList is used to sort a collection featuring drag amp drop based reordering transition effects and pojo support Available Iniesta 8 Villa 7 Xavi 6 Info Tag orderList Component Class org primefaces component orderlist OrderList Component Type org primefaces component OrderList Component Family org primefaces component Renderer Type org primefaces component OrderListRenderer Renderer Class org primefaces component orderlist OrderListRenderer Attributes id String Unique identifier of the component rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean value Value of the component referring to a List 280 PrimeFaces User s Guide converter null Converter String 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 immediate FALSE Boolean When set true process validations logic is executed at apply request values phase for this component FALSE Marks component as required validator null MethodExpr A method expression that refers to a method validationg the input v
111. b Component Family org primefaces component Renderer Type org primefaces component BreadCrumbRenderer Renderer Class org primefaces component breadcrumb BreadCrumbRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component binding null Object An el expression that maps to a server side UIComponent instance in a backing bean model null MenuModel MenuModel instance to create menus programmatically styleClass Style class of main container Getting Started with BreadCrumb Steps are defined as child menuitem components in breadcrumb PrimeFaces User s Guide Dynamic Menus Menus can be created programmatically as well see the dynamic menus part in menu component section for more information and an example Skinning Breadcrumb resides in a container element that sty e and styleClass options apply Following is the list of structural style classes Style Class Applies ui breadcrumb ui menu item text Each menuitem label ui breadcrumb chevron Seperator of menuitems As skinning style classes are global see the main Skinning section for more information Tips If there is a dynamic flow use model option instead of creating declarative p menuitem components and bind your MenuModel representing the state of the flow e Breadcrumb can do ajax non ajax action requests as well since p menuitem has this option In this case breadcrumb must be nested in a form e url o
112. back to execute when button is clicked side callback to execute when button is clicked ondblclick null String Client side callback to execute when button is double clicked onfocus null String Client side callback to execute when button receives focus onkeydown null String Client side callback to execute when a key is pressed down over button onkeypress null String Client side callback to execute when a key is pressed and released over button onkeyup null String Client side callback to execute when a key is released over button onmousedown null String Client side callback to execute when a pointer button is pressed down over button onmousemove null String Client side callback to execute when a pointer button is moved within button onmouseout null String Client side callback to execute when a pointer button is moved away from button onmouseover null String Client side callback to execute when a pointer button is moved onto button onmouseup null String Client side callback to execute when a pointer button is C el over button Inline Inline style ofthe button of the button 39 PrimeFaces User s Guide Getting Started with Button p button usage is same as standard h button an outcome is necessary to navigate using GET requests Assume you are at source xhtml and need to navigate target xhtml Parameters Parameters in URI are defined with nested lt f param gt tags O e gt 7 Icons for but
113. be displayed when required field validation fails Message to be displayed when conversion fails Message to be displayed when validation fields Name of the client side widget accesskey null String Access key that when pressed transfers focus to the input element Alternate textual description of the input field Controls browser autocomplete behavior dir String Direction indication for text that does not inherit directionality Valid values are LTR and RTL disabled FALSE Disables a field lang null String Code a nis the language used in the generated markup for this component maxlength null Integer Maximum number of characters that may be entered in this field onblur null String Client side callback to execute when input element loses focus onchange null String Client side callback to execute when input element loses focus and its value has been modified since gaining focus onclick null String Client side callback to execute when input element is clicked ondblclick null String Client side callback to execute when input element is double clicked onfocus null String Client side callback to execute when input element receives focus onkeydown null String Client side callback to execute when a key is pressed down over input element PrimeFaces User s Guide onkeypress null String Client side callback to execute when a key is pressed and released over input element onkeyup null String Client side callback to e
114. be used throughout the datagrid datalist and datatable examples 116 PrimeFaces User s Guide The code for CarBean that would be used to bind the datagrid to the car list public class CarBean private List lt Car gt cars public CarBeanQ cars new ArrayList lt Car gt cars addCnew CarC myModel 2005 ManufacturerX blue add more cars public List lt Car gt getCarsd return cars lt p dataGrid var car value carBean cars columns 3 rows 12 gt lt p coLumn gt lt p panel header car model gt lt h paneLGrid coLumns 1 gt lt p graphicImage value images cars car manufacturer jpg gt lt h outputText value car year gt lt h panelGrid gt lt p panel gt lt p coLumn gt lt p dataGrid gt This datagrid has 3 columns and 12 rows As datagrid extends from standard UIData 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 As a result datagrid is displayed as ES CE Cae T E 1978 1991 1991 O CS Ca EJ KJ 1992 1992 2002 R C Lon i is A 2009 1969 1987 C e Coo 5 D 1992 2008 1983 117 PrimeFaces User s Guide Ajax Pagination DataGrid has a built in paginator that is enabled by setting paginator option to true Paginator Template Paginator is customized using paginatorTemplateOption that accepts various keys of UI cont
115. blockUI block pnl trigger SaveBtn deleteBtn updateBtn gt Custom Content In order to display custom content like a loading text and animation place the content inside the blockUI lt p dataTable id dataTable var car value tabLeBean cars paginator true rows 10 gt lt p coLumn gt lt f facet name header gt lt h outputText value Model gt lt f facet gt lt h outputText value car modeL gt lt p column gt more columns lt p dataTable gt lt p blockUI block dataTable trigger dataTable gt LOADING lt br gt lt p graphicImage value images ajax loader gif gt lt p blockUI gt 34 PrimeFaces User s Guide Client Side API Widget PrimeFaces widget BlockUI Skinning Following is the list of structural style classes ui blockui content Container for custom content As skinning style classes are global see the main Skinning section for more information Tips e BlockUI does not support absolute and fixed positioned components at the moment e g dialog 35 PrimeFaces User s Guide 3 6 BreadCrumb Breadcrumb is a navigation component that provides contextual information about page hierarchy in the workflow gt Sports gt Football gt Countries gt Spain gt F C Barcelona gt Squad gt Lionel Messi Info Tag breadCrumb Component Class org primefaces component breadcrumb BreadCrumb Component Type org primefaces component BreadCrum
116. c text it must refer to a converter id immediate FALSE Boolean When set true process validations logic is executed at a request values phase for this component required o FALSE Marks component as Marks component as required validator null oe A method binding expression that refers to a method validationg the input valueChangeListener null MethodExpr A method binding expression that refers to a method for handling a valuechangeevent requiredMessage Message to be displayed when required field validation ae Message to be Message to be displayed when conversion fails when conversion fails validatorMessage Message to be displayed when validation fields 303 PrimeFaces User s Guide widgetVar Name of the client side widget style Inline style of the component Getting started with PhotoCam Capture is triggered via client side api s capture method Also a method expression is necessary to invoke when an image is captured Sample below captures an image and saves it to a directory lt h form gt lt p photoCam widgetVar pc listener photoCamBean oncapture update photos gt lt p commandButton type button value Capture onclick pc captureC gt lt h form gt public class PhotoCamBean public void oncapture CaptureEvent captureEvent byte data captureEvent getData ServletContext servletContext CServletContext FacesContext getCurrentInstance getExternalContext getContextQ
117. callback to execute when link is clicked ondblclick null String Client side callback to execute when link is double clicked onfocus null String Client side callback to execute when link receives focus onkeydown null String Client side callback to execute when a key is pressed down over link onkeypress null String Client side callback to execute when a key is pressed and released over link onkeyup null String Client side callback to execute when a key is released over link onmousedown null String Client side callback to execute when a pointer button is pressed down over link onmousemove null String Client side callback to execute when a pointer button is moved within link onmouseout null String Client side callback to execute when a pointer button is moved away from link onmouseover null String Client side callback to execute when a pointer button is moved onto link onmouseup null String Client side callback to execute when a pointer button is released over link accesskey Access key that when pressed transfers focus to the link charset null String Character encoding of the resource designated by this hyperlink 99 PrimeFaces User s Guide Name ame Default Description o O coords null E Position and shape of the hot spot on the screen for client use in image maps Direction indication for text that does not inherit e Valid values are LTR and RTL Tasa Disantes term hreflang null Stri
118. cars public TableBeand cars populate data getters and setters lt p sheet value tableBean cars var car scrollHeight 300 gt lt f facet name caption gt List of Cars lt f facet gt lt p column headerText Model style width 125px gt lt h inputText value car modeL gt lt p coLumn gt lt p column headerText Year style width 125px gt lt h inputText value car year gt lt p column gt lt p column headerText Manufacturer style width 125px gt lt h inputText value car manufacturer gt lt p coLumn gt lt p column headerText Color style width 125px gt lt h inputText value car color gt lt p column gt lt p sheet gt When the parent form of the sheet is submitted sheet will update the data according to the changes on client side 374 PrimeFaces User s Guide Sorting Sorting can be enabled using the sortBy option of the column component Skinning Sheet resides in a container that style and styleClass attributes apply As skinning style classes are global see the main Skinning section for more information Following is the list of structural style classes 375 PrimeFaces User s Guide 3 102 SlideMenu TieredMenu is used to display nested submenus with sliding animation Prime Links gt TouchFaces Back Info Component Class org primefaces component slidemenu SlideMenu Component Type org primefaces
119. ce In case it s a static text it must refer to a converter id 321 PrimeFaces User s Guide immediate FALSE Boolean 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 method validationg the input method for handling a valuchangeevent validation fails style Inline style of the component styleClass Style class of the component cancel TRUE When enabled displays a cancel icon to reset Getting Started with Rating Rating is an input component that takes a double variable as it s value 322 PrimeFaces User s Guide 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 lt p rating value ratingBean rating stars 10 gt Display Value Only In cases where you only want to use the rating component to display the rating value and disallow user interaction set readonly to true Using disabled attribute does the same but adds disabled visual styles Ajax Behavior Events Rating provides rate and cancel as ajax behavior events A defined listener for rate event will be executed by passing an org primefaces event RateEvent as a parameter and cancel event will be invoked with no parameter lt p rating value ratingBean rating
120. changes by the user size null Integer Number of characters used to determine the width of the input element Getting Started with Spinner Spinner is an input component and used just like a standard input text 387 PrimeFaces User s Guide Step Factor Other than integers spinner also support decimals so the fractional part can be controller with spinner as well For decimals use the stepFactor attribute to specify stepping amount Following example uses a stepFactor 0 25 Output of this spinner would be a 0 00 After an increment happens a couple of times 2 25 Prefix and Suffix Prefix and Suffix options enable placing fixed strings on input field Note that you would need to use a converter to avoid conversion errors since prefix suffix will also be posted A 21 Boundaries In order to restrict the boundary values use min and max options 388 PrimeFaces User s Guide Ajax Spinner Spinner can be ajaxified using client behaviors like f ajax or p ajax In example below an ajax request is done to update the outputtext with new value whenever a spinner button is clicked Skinning Spinner resides in a container element that using style and styleClass applies Following is the list of structural style classes ui spinner button up Increment button ui spinner button down Decrement button As skinning style classes are global see the main Skinning section for more informa
121. ck to execute when button loses focus onchange null String Client side callback to execute when button loses focus and its value has been modified since gaining focus onclick Client side callback to execute when button is clicked ondblclick null String Client side callback to execute when button is double clicked onfocus null String Client side callback to execute when button receives focus onkeydown null String Client side callback to execute when a key is pressed down over button onkeypress null String Client side callback to execute when a key is pressed and released over button onkeyup null String Client side callback to execute when a key is released over button onmousedown null String Client side callback to execute when a pointer button is pressed down over button onmousemove null String Client side callback to execute when a pointer button is moved within button onmouseout null String Client side callback to execute when a pointer button is moved away from button onmouseover null String Client side callback to execute when a pointer button is moved onto button onmouseup null String Client side callback to execute when a pointer button is released over button onselect null String Client side callback to execute when text within button is selected by user 94 PrimeFaces User s Guide Name Default Ba Description Access key that when pressed transfers focus to the a a a Alternate textual Alter
122. ckground color of the polygon fillOpacity Opacity of the polygon org primefaces model map Circle extends org primefaces model map Overlay org primefaces model map Rectangle extends org primefaces model map Overlay org primefaces model map LatLng lat Latitude of the coordinate Ing Longitude of the coordinate 197 PrimeFaces User s Guide org primefaces model map LatLngBounds GMap Event API All classes in event api extends from javax faces event FacesEvent org primefaces event map MarkerDragEvent org primefaces event map OverlaySelectE vent org primefaces event map PointSelectEvent org primefaces event map StateChangeEvent LatLngBounds Boundaries of the map 198 PrimeFaces User s Guide 3 40 GMapInfoWindow GMapInfo Window is used with GMap component to open a window on map when an overlay is selected Map Satelite Info Tag gmap InfoWindow org primefaces component gmap GMapInfo WindowTag org primefaces component gmap GMapInfo Window org primefaces component GMapInfoWindow org primefaces component Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean max Width Maximum width of the info window Getting started with GMapInfoWindow See GMap section for more
123. component SlideMenu Component Family org primefaces component Renderer Type org primefaces component SlideMenuRenderer Renderer Class org primefaces component slidemenu SlideMenuRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean widgetVar Name of the client side widget model null org primefaces model MenuModel instance for programmatic menu MenuModel style Inline style of the component styleClass Style class of the component bucklan Ten for bac ik trigger null String Id of the component whose triggerEvent will show the dynamic positioned menu 376 PrimeFaces User s Guide Corner of menu to align with trigger element Corner of trigger to align with menu element overlay FALSE Boolean Defines positioning when enabled menu is displayed with absolute position relative to the trigger Default is false meaning static positioning triggerEvent click String Event name of trigger that will show the dynamic positioned menu Getting started with the SlideMenu SlideMenu consists of submenus and menuitems submenus can be nested and each nested submenu will be displayed with a slide animation lt p SlideMenu gt lt p submenu label Ajax Menuitems icon ui icon refresh gt lt p menuitem vaLlue Save act
124. configuration of the animation provide these parameters with the f param tag lt h outputText value bean vaLlue gt lt p effect type sScale event mouseover gt lt f param name percent value 90 gt lt p effect gt lt h outputText gt It s important to provide string options with single quotes lt h outputText value bean vaLlue gt lt p effect type blind event click gt lt f param name direction value horizontal gt lt p effect gt lt h outputText gt For the full list of configuration parameters for each effect please see the jquery documentation http docs jquery com UI Effects 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 by using load as the event name Following example animates messages with pulsate effect after ajax request completes lt p messages id messages gt lt p effect type pulsate event Load delay 500 gt lt f param name mode value show gt lt p effect gt lt p messages gt lt p commandButton value Save actionListener bean action update messages gt 168 PrimeFaces User s Guide 3 33 FeedReader FeedReader is used to display content from a feed Info Tag feedReader Component Class org primefaces component feedreader Feed Reader Component Type org primefaces component FeedReader Component Family org pri
125. d list of JSF component ids to be updated Basically any JSF component not just PrimeFaces components should be updated with the Ajax response In the following example form is submitted with ajax and display outputText is updated with the ajax response Tip You can use the ajaxStatus component to notify users about the ajax request Icons An icon on a button is provided using icon option iconPos is used to define the position of the button which can be left or right 96 PrimeFaces User s Guide disk is a simple css class with a background property You can also use the pre defined icons from ThemeRoller like ui icon search Client Side API Widget PrimeFaces widget CommandButton Skinning CommandButton renders a button tag which style and styleClass applies Following is the list of structural style classes Style Class Applies ui button text only Button element when icon is not used ui button text Label of button As skinning style classes are global see the main Skinning section for more information 97 PrimeFaces User s Guide 3 19 CommandLink CommandLink extends standard JSF commandLink with Ajax capabilities Info Tag Component Class Component Type Component Family Renderer Type Renderer Class Attributes commandLink org primefaces component commandlink CommandLink org primefaces component CommandLink org primefaces component org primefaces component C
126. d mask template Date 11 12 2010 Phone 523 453 4253 Phone with Ext 234 532 4524 x35254 taxlid 52 3434234 SSN 234 52 3452 Product Key 5 Info Tag inputMask Component Class org primefaces component inputmask InputMask Component Type org primefaces component InputMask Component Family org primefaces component Renderer Type org primefaces component InputMaskRenderer Renderer Class org primefaces component inputmask InputMaskRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side 22 instance in a backing bean a PlaceHolder in mask am value null Object Value of the component than can be either an EL expression of a literal text 227 PrimeFaces User s Guide converter Converter An el expression or a literal text that defines a String 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 immediate FALSE Boolean When set true process validations logic is executed at os request values phase for this component required FALSE Marks component as Marks component as required validator null MethodExpr A method binding expression that refers to a method validationg the input valueChangeListener null MethodExpr A m
127. d p rowEditor is used to toggle edit view displays of a row lt p dataTable var car value carBean cars gt lt f facet name header gt In Cell Editing lt f facet gt lt p coLumn headerText Model gt lt p celLEditor gt lt f facet name output gt lt h outputText value car modeL gt lt f facet gt lt f facet name input gt lt h inputText value car model gt lt f facet gt lt p cellEditor gt lt p coLumn gt more columns with cell editors lt p coLumn gt lt p rowEditor gt lt p coLumn gt lt p dataTable gt In Cell Editing Model Year Manufacturer 824641lad 1976 Volvo a9bf1625 1961 Volkswagen d859a7ba 1977 Ferrari 9379f6fS 1961 Renault E 744a8017 1960 Chrysler 80feefe5 2000 Opel 9e0c7267 1982 Opel 33124250 1984 Ford 0349899f 1977 Renault Color Options Yellow Orange Brown Wo vx Silver Silver Yellow Red Red Red When pencil icon is clicked row is displayed in editable mode meaning input facets are displayed and output facets are hidden Clicking tick icon only saves that particular row and cancel icon reverts the changes both options are implemented with ajax See ajax behavior events section for more information about cell edit event 137 PrimeFaces User s Guide Lazy Loading Lazy Loading is a built in feature of datatable to deal with huge datasets efficiently regular ajax based pagination works by rendering only
128. d strength 1 5 applies to each tag As skinning style classes are global see the main Skinning section for more information 406 PrimeFaces User s Guide 3 114 Terminal Terminal is an ajax powered web based terminal that brings desktop terminals to JSF Welcome to PrimeFaces Terminal how are you today prime date Wed Jan 12 13 29 13 EET 2011 prime greet Optimus Hello Optimus prime xyz xyz not found prime Info Component Class org primefaces component terminal Terminal Component Type org primefaces component Terminal Component Family org primefaces component Renderer Type org primefaces component TerminalRenderer Renderer Class org primefaces component terminal TerminalRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered a instance in a backing bean width Width ofthe terminal of the terminal 407 PrimeFaces User s Guide commandHandler MethodExpr Method to be called with arguments to process Getting started with the Terminal A command handler is necessary to interpret commands entered in terminal lt p terminal commandHandler terminalBean handleCommand gt public class TerminalBean public String handleCommand String command String params ifCcommand equalsC greet return Hello params Q else i1fCcommand equalsC date return new Date toStringQ
129. data Table element containing data ui datagrid column A column in grid As skinning style classes are global see the main Skinning section for more information Tips e DataGrid supports lazy loading data via LazyDataModel see DataTable lazy loading section e DataGrid provides two facets named header and footer that you can use to provide custom content at these locations 120 PrimeFaces User s Guide 3 25 DataList DataList presents a collection of data in list layout with several display types Cars 1 of 10 5 Ferrari 1997 Volkswagen 1991 Renault 2009 Mercedes 1983 Chrysler 1969 Info Tag dataList Component Class org primefaces component datalist DataList Component Type org primefaces component DataList DataListTag Component Family org primefaces component Renderer Type org primefaces component DataListRenderer Renderer Class org primefaces component datalist DataListRenderer Attributes rendered TRUE boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean yae Data to display null String Name of the request scoped variable used to refer each data rows Number of rows to display per page 121 PrimeFaces User s Guide me O ra String Type of the list valid values are unordered ordered definition
130. dating bean properties with watermark values Watermark component is clever enough to handle this case by default in non ajax form submissions watermarks are cleared However ajax submissions requires a little manual effort Skinning There s only one css style class applying watermark which is ui watermark you can override this class to bring in your own style Note that this style class is not applied when watermark uses html5 placeholder if available 433 PrimeFaces User s Guide 3 124 Wizard Wizard provides an ajax enhanced UI to implement a workflow easily in a single page Wizard consists of several child tab components where each tab represents a step in the process Personal Address Contact Confirmation annie Personal Details Firstname Lastname Age Skip to last Next Info Component Class org primefaces component wizard Wizard Component Type org primefaces component Wizard Component Family org primefaces component Renderer Type org primefaces component WizardRenderer Renderer Class org primefaces component wizard WizardRenderer Attributes rendered TRUE Boolean Boolean value to sof esos the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a ae bean eee of the main wizard container element styleClass Style class of the main wizard container element class of t
131. de Ajax Behavior Events Inplace editing is enabled via editor option public class InplaceBean private String text getter setter lt p inplace editor true gt lt h inputText value inpLaceBean text gt lt p inpLace gt PrimeFaces wv x save and cancel are two provided ajax behaviors events you can use to hook in the editing process public class InplaceBean private String text public void handleSave cd add faces message with update text value getter setter lt p inplace editor true gt lt p ajax event Save listener inplaceBean handleSave update msgs gt lt h inputText value inpLaceBean text gt lt p inplace gt lt p growL id msgs gt Client Side API Widget PrimeFaces widget Inplace w ae Peaneciteinaree hide P void Shows display element and hides content 225 PrimeFaces User s Guide toggle void Toggles visibility of between content and display element save P void Triggers an ajax request to process inplace input cancel P void Triggers an ajax request to revert inplace input Skinning Inplace resides in a main container element which style and styleClass options apply Following is the list of structural style classes As skinning style classes are global see the main Skinning section for more information 226 PrimeFaces User s Guide 3 49 InputMask InputMask forces an input to fit in a define
132. de ColorPicker has two modes default mode is popup and other available option is inline lt p colorPicker value bean color mode inline gt 86 PrimeFaces User s Guide Skinning ColorPicker resides in a container element which style and styleClass options apply Following is the list of structural style classes ui colorpicker rgb hex Hex input Example below changes the skin of color picker to a silver look and feel 87 PrimeFaces User s Guide Silver ui colorpicker container background image urlCsilver_background png Silver ui colorpicker_hex background image urlCsilver_hex png Silver ui colorpicker_rgb_r background image urlCsilver_rgb_r png silver ui colorpicker_rgb_g background image url silver_rgb_g png silver ui colorpicker_rgb_b background image url silver_rgb_b png silver ui colorpicker_hsb_s background image url silver_hsb_s png silver ui colorpicker_hsb_h background image url silver_hsb_h png silver ui colorpicker_hsb_b background image url silver_hsb_b png silver ui colorpicker_submit background image url silver_submit png 88 PrimeFaces User s Guide 3 15 Column Column is an extended version of the standard column used by various PrimeFaces components like datatable treetable and more Info Component Class org primefaces component column Column Component Ty
133. de UIComponent instance in a backing bean sticky FALSE Boolean Specifies if the message should stay instead of hidden automatically showSummary TRUE Boolean Specifies if the summary of message should be ee showDetail FALSE Specifies if the detail of message should be displayed if the detail of message should be displayed globalOnly FALSE Boolean When true only facesmessages without clientids are displayed life 6000 Integer Duration in milliseconds to display non sticky es autoUpdate FALSE Specifies auto update mode auto update mode 205 PrimeFaces User s Guide redisplay TRUE Defines if already rendered messaged should be displayed for null String Name of associated key takes precedence when used with globalOnly TRUE Defines whether html would be escaped or not Comma separated list of severities to display only Getting Started with Growl Growl usage is similar to standard h messages component Simply place growl anywhere on your page since messages are displayed as an overlay the location of growl in JSF page does not matter Lifetime of messages By default each message will be displayed for 6000 ms and then hidden A message can be made sticky meaning it ll never be hidden automatically If growl is not working in sticky mode it s also possible to tune the duration of displaying messages Following growl will display the messages for 5 seconds and then fade out Growl with Ajax
134. de gt lt p treeNode type picture icon ui icon ui icon image gt lt h outputText value doc name gt lt p treeNode gt lt p treeNode type mp3 icon ui icon ui icon video gt lt h outputText value doc name gt lt p treeNode gt lt p tree gt 423 PrimeFaces User s Guide public class Bean private TreeNode root public Bean root new TreeNodeC root null TreeNode documents new TreeNodeC Documents root TreeNode pictures new TreeNodeC Pictures root TreeNode music new TreeNodeC Music root TreeNode work new TreeNodeC Work documents TreeNode primefaces new TreeNodeC PrimeFaces documents Documents TreeNode expenses new TreeNodeC document Expenses doc work TreeNode resume new TreeNodeC document Resume doc work TreeNode refdoc new TreeNodeC document RefDoc pages primefaces Pictures TreeNode barca new TreeNodeC picture barcelona jpg pictures TreeNode primelogo new TreeNodeC picture Logo jpg pictures TreeNode optimus new TreeNodeC picture optimus png pictures Music TreeNode turkish new TreeNode Turkish music TreeNode cemKaraca new TreeNode Cem Karaca turkish TreeNode erkinKoray new TreeNode Erkin Koray turkish TreeNode mogollar new TreeNode Mogollar turkish TreeNode nemalacak new TreeNode mp3 Nem Alacak Felek Benim cemKaraca TreeNode resimdeki new Tre
135. defines a er String 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 immediate Boolean When set true process validations logic is executed at apply request values phase for this component FALSE Marks component as required 305 Name validator valueChangeListener requiredMessage converterMessage PrimeFaces User s Guide null null null null Method A method binding expression that refers to a Expr method validationg the input Method A method binding expression that refers to a Expr method for handling a valuchangeevent String Message to be displayed when required field validation fails Message to be displayed when conversion fails Name of the iterator removeLabel removeAllLabel moveUpLabel moveTopLabel moveDownLabel moveButtomLabel showSourceControls show TargetControls onTransfer label itemDisabled Remove Remove All Move Up Move Top Move Down Move Buttom FALSE FALSE null null FALSE Title of remove button Title of remove all button Title of move up button Title of move top button Title of move down button Title of move bottom button String Specifies visibility of reorder buttons of source list Specifies visibility of reorder buttons of target list String Client side callback to execute when an item is transfer
136. dentifier of the grouping component to enable multiple default commands in a form Getting Started with the DefaultCommand DefaultCommand must be nested inside a form requires target option to reference a clickable command Example below triggers btn2 when enter key is pressed Note that an input must have focused due to browser nature 144 PrimeFaces User s Guide Tips e If you need multiple default commands on same page use context attribute that refers to the ancestor component of the target input 145 PrimeFaces User s Guide 3 28 Dialog Dialog is a panel component that can overlay other elements on page Login Username Password Login Info Tag dialog Component Class org primefaces component dialog Dialog Component Type org primefaces component Dialog Component Family org primefaces component Renderer Type org primefaces component DialogRenderer Renderer Class org primefaces component dialog DialogRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side Cora aaa instance in a backing bean jwidgetVar Name of the client side Name of the client side widget 146 PrimeFaces User s Guide T ne closable TRUE Defines if close icon should be displayed or not onShow null String Client side callback to execute when dialo
137. dropdown When the city dropdown is changed an ajax request is sent to execute populateSuburbs method which populates suburbChoices and finally update the suburbs dropdown 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 Reason is p ajax has all as the value stating to process every component on page but there is no need to process the inputText The solution is to define what to process in p ajax As we re just making a city change request only processing that should happen is cities dropdown 444 PrimeFaces User s Guide lt h form gt lt h selectOneMenu id cities value bean city gt lt f selectItems value bean cityChoices gt lt p ajax actionListener bean populateSuburbs event change update Suburbs process this gt lt h selectOneMenu gt lt h selectOneMenu id Suburbs value bean suburb gt lt f selectItems value bean suburbChoices gt lt h selectOneMenu gt lt h inputText value bean email required true gt lt h form gt That is it now populateSuburbs method will be called and suburbs list will be populated Note that default value for process option is this already for p ajax as stated in AjaxBehavior documentation it is explicitly defined here to give a better understanding of how partial processing works 4 2 2 Keywords Just like updat
138. e Info Tag carousel Component Class org primefaces component carousel Carousel Component Type org primefaces component Carousel Component Family org primefaces component Renderer Type org primefaces component CarouselRenderer Renderer Class org primefaces component carousel CarouselRenderer Attributes id String Unique identifier of the component rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean value Object A value expression that refers to a collection var String Name of the request scoped iterator TowWs Integer Number of visible items per page first fo Integer Index of the first element to be displayed widgetVar String Name of the client side widget circular FALSE Boolean Sets continuous scrolling vertical FALSE Sets vertical scrolling 55 PrimeFaces User s Guide scrolling automatically after being initialized effect Name of the animation could be fade or slide Name of the animation could be fade or slide utCirc Getting Started with Carousel Calendar has two main use cases data and general content display To begin with data iteration let s use a list of cars to display with carousel public class Car private String model private int year private String manufacturer pri
139. e theme css images 1 The theme package you ve downloaded from ThemeRoller will have a css file and images folder Make sure you have deselect all components option on download page so that your theme only includes skinning styles Extract the contents of the package and rename jquery ui version custom css to theme css 2 Image references in your theme css must also be converted to an expression that JSF resource loading can understand example would be url images ui bg highlight hard_ 100 f9f9f9 1x100 png should be url resource primefaces yourtheme images ui bg highlight hard 100 f9f9f9 1x100 png Once the jar of your theme is in classpath you can use your theme like 458 PrimeFaces User s Guide 8 3 How Themes Work Powered by ThemeRoller PrimeFaces separates structural css from skinning css Structural CSS These style classes define the skeleton of the components and include css properties such as margin padding display type dimensions and positioning Skinning CSS Skinning defines the look and feel properties like colors border colors background images Skinning Selectors ThemeRoller features a couple of skinning selectors most important of these are These classes are not aware of structural css like margins and paddings mostly they only define colors This clean separation brings great flexibility in theming because you don t need to know each and every skinning selectors of com
140. e s se lt h inputTextarea id area value Resize me if you need more space gt lt p resizable for area handles e w n se sw ne nw gt 328 PrimeFaces User s Guide Visual Feedback Resize helper is the element used to provide visual feedback during resizing By default actual element itself is the helper and two options are available to customize the way feedback is provided Enabling ghost option displays the element itself with a lower opacity in addition enabling proxy option adds a css class called ui resizable proxy which you can override to customize lt h inputTextarea id area value Resize me if you need more space gt lt p resizable for area proxy true gt ui resizable proxy border 2px dotted 00F Effects Resizing can be animated using animate option and setting an effect name Animation speed is mn customized using effectDuration option slow normal and fast as valid values lt h inputTextarea id area value Resize me if you need more space gt lt p resizable for area animate true effect Swing effectDuration normaL gt Following is the list of available effect names swing easeInQuart easeOutSine easeInElastic e easeInBounce easeInQuad easeOutQuart easeInExpo easeOutElastic e easeOutBounce easeOutQuad easeInOutQuart easeOutExpo easeInOutElastic e easeInOutBounce easeInOutQuad easeInQuint easeInOutExpo easeInBack easeInCubic easeOutQuint ease
141. e does the similar but without ajax and third one is used for redirect purposes Dynamic Menus Menus can be created programmatically as well see the dynamic menus part in menu component section for more information and an example Skinning MenuButton resides in a main container which style and styleClass attributes apply As skinning style classes are global see the main Skinning section for more information Following is the list of structural style classes 269 PrimeFaces User s Guide 3 62 Menultem Menultem is used by various menu components of PrimeFaces Info Tag menultem Tag Class org primefaces component menuitem MenultemTag Component Class org primefaces component menuitem Menultem Component Type org primefaces component Menultem Component Family org primefaces component Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side lt E instance in a backing bean vane fool String Label of the menuitem of the menuitem actionListener null javax el MethodE Action listener to be invoked when menuitem is xpression clicked action null javax el MethodE Action to be invoked when menuitem is clicked xpression immediate FALSE Boolean When true action of this menuitem is processed after oe request phase jot fut Sing Url to be Url to be nav
142. e input gets the focus a keyboard is displayed Built in Layouts There re a couple of built in keyboard layouts these are qwerty qwertyBasic and alphabetic For example keyboard below has the alphabetic layout bij c j djie fji h An lng Close k Ljimjiallo pile r S t Clear t Maj wel et y ea Shift Back Custom Layouts Keyboard has a very flexible layout mechanism allowing you to come up with your own layout Another example 241 PrimeFaces User s Guide c r e a t E yjioj u r Close own t e m p a t e Shift ejjaj s i y A layout template basically consists of built in keys and your own keys Following is the list of all built in keys back e clear e close e shift spacebar space e halfspace All other text in a layout is realized as seperate keys so prime would create 5 keys as p r i m e Use dash to seperate each member in layout and use commas to create a new row Keypad By default keyboard displays whole keys if you only need the numbers use the keypad mode ShowMode There re a couple of different ways to display the keyboard by default keyboard is shown once input field receives the focus This is customized using the showMode feature which accept values focus button both Keyboard below displays a button next to the input field when the button is clicked the keyboard is shown CG Button can also be customized using the buttonI
143. e node type Skinning TreeTable content resides in a container element which style and styleClass attributes apply Following is the list of structural style classes ui treetable Main container element ui treetable header Header of treetable Body element of the table containing data As skinning style classes are global see the main Skinning section for more information 431 PrimeFaces User s Guide 3 123 Watermark Watermark displays a hint on an input field Info Component Class org primefaces component watermark Watermark Component Type org primefaces component Watermark Component Family org primefaces component Renderer Type org primefaces component WatermarkRenderer Renderer Class org primefaces component watermark WatermarkRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean CN a Id of the component to attach the watermark forElement jQuery selector to attach the watermark Getting started with Watermark Watermark requires a target of the input component one way is to use for attribute 432 PrimeFaces User s Guide 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 This would result in up
144. eFaces User s Guide 3 12 8 Skinning Charts Charts are built on top of jqlot javascript library that uses a canvas tag and can be styled using regular css Following is the list of style classes EAR Additionally style and styleClass options of charts apply to the container element of charts use these attribute to specify the dimensions of a chart In case you d like to change the colors of series use the seriesColors options 81 PrimeFaces User s Guide 3 12 9 Ajax Behavior Events itemSelect is one and only ajax behavior event of charts this event is triggered when a series of a chart is clicked In case you have a listener defined it ll be executed by passing an org primefaces event ItemSelectEvent instance Example above demonstrates how to display a message about selected series in chart PrimeFaces User s Guide 3 12 10 Charting Tips jqPlot Charts components use jqPlot as the underlying charting engine which uses a canvas element under the hood with support for IE jFreeChart If you like to use static image charts instead of canvas based charts see the JFreeChart integration example at graphicImage section Note that static images charts are not rich as PrimeFaces chart components and you need to know about jFreeChart apis to create the charts 83 PrimeFaces User s Guide 3 13 Collector Collector is a simple utility to manage collections declaratively Info ActionListener Clas
145. eNode mp3 Resimdeki Goz Yaslari cemKaraca TreeNode copculer new TreeNode mp3 Copculer erkinKoray TreeNode oylebirgecer new TreeNodeC mp3 Oyle Bir Gecer erkinKoray TreeNode toprakana new TreeNodeC mp3 Toprak Ana mogollar TreeNode bisiyapmali new TreeNode mp3 Bisi Yapmali mogollar public TreeNode getRoot return root Ei Integration between a TreeNode and a p treeNode is the type attribute for example music files in document explorer are represented using TreeNodes with type mp3 there s also a p treeNode component with same type mp3 This results in rendering all music nodes using that particular p treeNode representation which displays a note icon Similarly document and pictures have their own p treeNode representations Folders on the other hand have two states whose icons are defined by expandedIcon and collapsedIcon attributes 424 PrimeFaces User s Guide Ajax Behavior Events Tree provides various ajax behavior events expand org primefaces event NodeExpandEvent When a node is expanded collapse org primefaces event NodeCollapseEvent When a node is collapsed select org primefaces event NodeSelectEvent When a node is selected collapse org primefaces event NodeUnselectEvent When a node is unselected Following tree has three listeners lt p tree value treeBean model dynamic true gt lt p ajax event Select Listener treeBean onNode
146. ea style class As skinning style classes are global see the main Skinning section for more information 237 PrimeFaces User s Guide 3 52 Keyboard Keyboard is an input component that uses a virtual keyboard to provide the input Notable features are the customizable layouts and skinning capabilities ne She eee A Ajeet s Close eraj ak pode dea ees bese pe k ake p 7 8 9 q wie r t y u i o p A B 4 5 6 ajis idji f jigii hii j k I baj pa 3 Boj eej wey eon iDa pae e fees 0 Shift Enter Back Clear Info Attributes id Assigned String Unique identifier of the component by JSF rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean value null Object Value of the component than can be either an EL expression of a literal text converter null Converter An el expression or a literal text that defines a String 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 immediate FALSE Boolean When set true process validations logic is executed at apply request values phase for this component 238 PrimeFaces User s Guide required FALSE Marks component as required validator null MethodExpr A method binding expr
147. edNodes gt lt p treeNode gt lt h outputText value node gt lt p treeNode gt lt p tree gt public class TreeBean private TreeNode root private TreeNode selectedNodes public TreeBean root new TreeNodeC Root null populate nodes getters and setters That s it now the checkbox based tree looks like below When the form is submitted with a command component like a button selected nodes will be populated in selectedNodes property of TreeBean x Node 0 Bg Node 0 0 E Node 0 0 0 E Node 0 0 1 gt Node 0 1 gt o Node 1 Bh Node 2 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 Handling Node Click If you need to execute custom javascript when a treenode is clicked use the onNodeClick attribute Your javascript method will be invoked with passing the html element of the node In case you have datakey defined you can access datakey on client side by using node attr data datakey that represents the data represented by the backing tree model 426 PrimeFaces User s Guide ContextMenu Tree has special integration with context menu you can even match different context menus with different tree nodes
148. eedback false match pwd2 Label Password 1 required true gt lt p password id pwd2 value passwordBean password6 feedback false Label Password 2 required true gt 301 PrimeFaces User s Guide Skinning Structural selectors for password is as follows ui password panel Overlay panel of strength indicator ui password info Strength label As skinning style classes are global see the main Skinning section for more information 302 PrimeFaces User s Guide 3 73 PhotoCam PhotoCam is used to take photos with webcam and send them to the JSF backend model Info Tag photoCam Component Class org primefaces component photocam PhotoCam Component Type org primefaces component PhotoCam Component Family org primefaces component Renderer Type org primefaces component PhotoCamRenderer Renderer Class org primefaces component photocam PhotoCamRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean value null Object Value of the component than can be either an EL expression of a literal text converter null Converter An el expression or a literal text that defines a String converter for the component When it s an EL expression it s resolved to a converter instance In case it s a stati
149. efaces component TreeTable Component Family org primefaces component Renderer Type org primefaces component TreeTableRenderer Renderer Class org primefaces component treetable TreeTableRenderer Attributes String Unique identifier of the component rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean Object A TreeNode instance as the backing model var null String Name of the request scoped variable used to refer each treenode String Style class of the container element Object Selection reference 429 PrimeFaces User s Guide selectionMode Type of selection mode scrollable FALSE Whether or not the data should be scrollable Getting started with the TreeTable Similar to the Tree TreeTable is populated with an org primefaces model TreeNode instance that corresponds to the root node TreeNode API has a hierarchical data structure and represents the data to be populated in tree For an example model to be displayed is a collection of documents public class Document private String name private String size private String type getters setters lt p treeTable value bean root var document gt lt p coLumn gt lt f facet name header gt Name lt f facet gt lt h outputText value document name gt
150. efaces component dock DockRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean model null MenuModel MenuModel instance to create menus programmatically 160 PrimeFaces User s Guide Getting started with the Dock A dock is composed of menuitems Position Dock can be located in two locations top or bottom default For a dock positioned at top set position to top Dock Effect When mouse is over the dock items icons are zoomed in The configuration of this effect is done via the max Width 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 Skinning Following is the list of structural style classes positon can be top or bottom Style Class Applies As skinning style classes are global see the main Skinning section for more information 161 PrimeFaces User s Guide 3 31 Editor Editor is an input component with rich text editing capabilities m Se BS la PrimeFaces ROCKS Info Component Class org primefaces component editor Kditor Component Type org primefaces component Editor Component Family org primefaces component Renderer Type org primefaces com
151. efine each section in a grid lt p megaMenu gt lt p submenu Label TV icon ui icon check gt lt p coLumn gt lt p submenu lLabel TV 1 gt lt p menuitem value TV 1 url lt p menuitem vaLlue TV 1 url lt p Submenu gt lt p submenu lLabel TV 2 gt lt p menuitem value TV 2 url lt p menuitem value TV 2 url lt p menuitem vaLlue TV 2 url lt p Submenu gt lt p submenu lLabel TV 3 gt lt p menuitem value TV 3 url lt p menuitem vaLlue TV 3 url lt p Submenu gt lt p coLumn gt lt p coLumn gt lt p submenu Label TV 4 gt lt p menuitem vaLlue TV 4 url lt p menuitem value 4 url lt p submenu gt lt p submenu Label TV 5 gt lt p menuitem value TV 5 url lt p menuitem value eye url lt p menuitem value TV 5 url lt p submenu gt lt p submenu Label TV 6 gt lt p menuitem value 6 url lt p menuitem value TV 6 url lt p menuitem value aie url lt p submenu gt lt p coLumn gt lt p Submenu gt more root items lt p megaMenu gt 258 PrimeFaces User s Guide Custom Content Any content can be placed inside columns Root Menuitem MegaMenu supports menuitem as root menu options as well Following example allows a root menubar item to execute an action to logout the user Dynamic Menus Menus can be created programmatically as well see the dynamic menus part in menu componen
152. efined using the value attribute 255 PrimeFaces User s Guide Player Types By default players are identified using the value extension so for instance mov files will be played by quicktime player You can customize which player to use with the player attribute lt p media value http www youtube com v ABCDEFGH pLlayer flash gt Following is the supported players and file types Player Types windows asx asf avi wma wmv quicktime aif aiff aac au bmp gsm mov mid midi mpg mpeg mp4 m4a psd qt qtif qif qti snd tif tiff wav 3g2 3pg flash flv mp3 swf real ra ram rm rpm rv smi smil Parameters Different proprietary players might have different configuration parameters these can be specified using f param tags lt p media value media ria_with_primefaces mov gt lt f param name param1 value valuel gt lt f param name param2 value value2 gt lt p media gt StreamedContent Support Media component can also play binary media content example for this use case is storing media files in datatabase using binary format In order to implement this bind a StreamedContent lt p media value mediaBean media width 250 height 225 player quicktime gt public class MediaBean private StreamedContent media public MediaControllerd InputStream stream Create binary stream from database media new DefaultStreamedContent stream video quicktime
153. ehavior null String Direction indication for text that does not inherit directionality Valid values are LTR and RTL lang null String Code describing the language used in the generated markup for this component maxlength null Integer Maximum number of characters that may be entered in this field onblur null String Client side callback to execute when input element loses focus 43 PrimeFaces User s Guide onchange null String Client side callback to execute when input element loses focus and its value has been modified since gaining focus onclick null String Client side callback to execute when input element is clicked ondblclick null String Client side callback to execute when input element is double clicked onfocus null String Client side callback to execute when input element receives focus onkeydown null String Client side callback to execute when a key is pressed down over input element onkeypress null String Client side callback to execute when a key is pressed and released over input element onkeyup null String Client side callback to execute when a key is released over input element onmousedown null String Client side callback to execute when a pointer button is pressed down over input element onmousemove null String Client side callback to execute when a pointer button is moved within input element onmouseout null String Client side callback to execute when a pointer button is moved away from in
154. electManyButton resides in a main container which style and styleClass attributes apply As skinning style classes are global see the main Skinning section for more information Following is the list of structural style classes Style Class Applies ui selectmanybutton Main container element 355 PrimeFaces User s Guide 3 94 SelectManyCheckbox SelectManyCheckbox is an extended version of the standard SelectManyCheckbox with theme integration Info Tag Component Class Component Type Component Family Renderer Type Renderer Class Attributes Option 1 Option 2 Option 3 selectManyCheckbox org primefaces component selectmanycheckbox SelectManyCheckbox org primefaces component SelectManyCheckbox org primefaces component org primefaces component SelectManyCheckboxRenderer org primefaces component selectmanycheckbox SelectManyCheckboxRenderer rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side a ae instance in a backing bean vane o Value of the component Value of the component referring to a List to a List converter null Converter An el expression or a literal text that defines a String 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
155. electOneListbox SelectOneListbox is an extended version of the standard SelectOneListbox with theme integration Info Tag Component Class Component Type Component Family Renderer Type Renderer Class Attributes Messi Bojan 0 Iniesta Villa Xavi Puyol selectOneListbox org primefaces component selectonelistbox SelectOneListbox org primefaces component SelectOneListbox org primefaces component org primefaces component SelectOneListboxRenderer org primefaces component selectonelistbox SelectOneListBoxRenderer String Unique identifier of the component rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean Object Value of the component referring to a List converter null Converter An el expression or a literal text that defines a String 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 immediate Boolean When set true process validations logic is executed at apply request values phase for this component FALSE Boolean Marks component as required validator null MethodExpr A method expression that refers to a method validationg the input 362 PrimeFaces User s Guide valueChangeListener null MethodExp
156. endering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean listener null MethodExpr Method expression to execute before rendering summary row e g to calculate totals Getting started with SummaryRow See DataTable section for more information 398 PrimeFaces User s Guide 3 111 Tab Tab is a generic container component used by other PrimeFaces components such as tabView and accordionPanel Info Tag tab Component Class org primefaces component Tab View Tab Component Type org primefaces component Tab Component Family org primefaces component Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean Getting started with the Tab See the sections of components who utilize tab component for more information As tab is a shared component not all attributes may apply to the components that use tab 399 PrimeFaces User s Guide 3 112 TabView TabView is a tabbed panel component featuring client side tabs dynamic content loading with ajax and content transition effects Godfather Part I Godfather Part II Godfather Part Ill ca The story begins as Don Vito Corleone the head of a
157. ent CloseE vent Example below adds a FacesMessage when dialog is closed and updates the messages component to display the added message lt p dialog gt lt p ajax event close lListener dialogBean handleClose update msg gt Content lt p dialog gt lt p messages id msg gt public class DialogBean public void handleCloseCCloseEvent event Add facesmessage k Two other ajax behavior events are maximize and minimize that are invoked when dialog is maximized or minimized Client Side Callbacks Similar to close listener onShow and onHide are handy callbacks for client side in case you need to execute custom javascript lt p dialog onShow alert Visible onHide alert Hidden gt Content lt p dialog gt Client Side API Widget PrimeFaces widget Dialog 149 PrimeFaces User s Guide Skinning Dialog resides in a main container element which sty eClass option apply Following is the list of structural style classes Style Class Applies ui dialog Container element of dialog ui dialog content Dialog body As skinning style classes are global see the main Skinning section for more information Tips e Use appendToBody with care as the page definition and html dom would be different for example if dialog is inside an h form component and appendToBody is enabled on the browser dialog would be outside of form and may cause unexpected results In this case nest
158. ent and places a scrollbar live scrolling is necessary to deal with huge data in this case data is fetched whenever the scrollbar reaches bottom Set iveScroll to enable this option lt p dataTable var car value bean data scrollable true scrollHeight 150 LiveScroLLl true gt lt p coLumn width 100 gt columns lt p dataTable gt Scrolling has 3 modes x y and x y scrolling that are defined by scro l Height and scroll Width Expandable Rows RowToggler and RowExpansion facet are used to implement expandable rows lt p dataTable var car value carBean cars gt lt f facet name header gt Expand rows to see detailed information lt f facet gt lt p coLumn gt lt p rowloggler gt lt p coLumn gt columns lt p rowExpansion gt Detailed content of a car lt p rowExpansion gt lt p dataTable gt p rowToggler component places an expand collapse icon clicking on a collapsed row loads expanded content with ajax Expand rows to see detailed information Model Year 0b8313c2 1976 2be34a8c 1995 08e342c4 2004 b5d03231 1998 oo0oo0oo Model b5d03231 Year 1998 Manufacturer Mercedes Color Red b50b6dcc 1974 db39801c 1995 o o f76c474f 1989 2c9b67a2 2005 o 94fb553f 1973 136 Incell Editing PrimeFaces User s Guide Incell editing provides an easy way to display editable data p cellEditor is used to define the cell editor of a particular column an
159. entifier from your data model and used by datatable to find the selected rows You can either define this key by using the rowKey attribute or by binding a data model which implements org primefaces model SelectableDataModel 132 PrimeFaces User s Guide Dynamic Columns Dynamic columns is handy in case you can t know how many columns to render Columns component is used to define the columns programmatically It requires a collection as the value two iterator variables called var and columnIndexVar Features like sortBy and filterBy are supported however advanced features like editing is not lt p dataTable var cars value tableBean dynamicCars id carsTable gt lt p coLumns value tabLeBean columns var coLumn coLumnIndexVar colIndex gt lt f facet name header gt column lt f facet gt lt h outputText value cars coLIndex model gt lt br gt lt h outputText value cars colIndex year gt lt br gt lt h outputText value cars coLIndex color gt lt p coLumns gt lt p dataTable gt public class CarBean private List lt String gt columns private List lt Car gt dynamicCars public CarBean Q popuLateCoLumns popuLateCars public void populateCoLlumnsd columns new ArrayListQ forCint i 0 1 lt 3 i columns addC Brand i public void populateCars dynamicCars new ArrayList lt Car gt Q for int i i lt 9 i
160. eorderEvent instance containing information about reorder Following dashboard displays a message about the reorder event 108 PrimeFaces User s Guide lt p dashboard model bean mode1l gt lt p ajax event reorder update messages listener bean handleReorder gt panels lt p dashboard gt lt p growl id messages gt public class Bean public void handleReorder DashboardReorderEvent event String widgetId event getWidgetIdQ int widgetIndex event getItemIndex int columnIndex event getColumnIndex int senderColumnIndex event getSenderCoLlumnIndex Add facesmessage If a widget is reordered in the same column senderColumnIndex will be null This field is populated only when a widget is transferred to a column from another column Also when the listener is invoked dashboard has already updated it s model Disabling Dashboard If you d like to disable reordering feature set disabled option to true lt p dashboard disabled true panels lt p dashboard gt Toggle Close and Options Menu Widgets presented in dashboard can be closable toggleable and have options menu as well dashboard doesn t implement these by itself as these features are already provided by the panel component See panel component section for more information lt p dashboard model dashboardBean model gt lt p panel id sports closable true toggleable true gt Sp
161. er s Guide 3 105 Spinner 385 3 106 SplitButton 390 3 107 Submenu 394 3 108 Stack 395 3 109 SubTable 397 3 110 SummaryRow 398 3 111 Tab 399 3 112 TabView 400 3 113 TagCloud 405 3 114 Terminal 407 3 115 ThemeSwitcher 409 3 116 TieredMenu 411 3 117 Toolbar 414 3 118 ToolbarGroup 416 3 119 Tooltip 417 3 120 Tree 420 3 121 TreeNode 428 3 122 TreeTable 429 3 123 Watermark 432 3 124 Wizard 434 4 Partial Rendering and Processing 440 4 1 Partial Rendering 440 4 1 1 Infrastructure 440 4 1 2 Using IDs 440 4 1 3 Notifying Users 442 PrimeFaces User s Guide 4 1 4 Bits amp Pieces 443 4 2 Partial Processing 444 4 2 1 Partial Validation 444 4 2 2 Keywords 445 4 2 3 Using Ids 445 4 3 PFS PrimeFaces Selectors 446 5 PrimeFaces Mobile 448 6 PrimeFaces Push 449 6 1 Setup 449 6 2 Push API 450 6 3 Push Component 450 6 4 Samples 450 6 4 1 Counter 450 6 4 2 Chat 451 7 Javascript API 453 7 1 PrimeFaces Namespace 453 7 2 Ajax API 454 8 Themes 456 8 1 Applying a Theme 457 8 2 Creating a New Theme 458 8 3 How Themes Work 459 8 4 Theming Tips 460 9 Utilities 461 9 1 RequestContext 461 9 2 EL Functions 464 10 Portlets 10 1 Dependencies 10 2 Configuration 11 Integration with Java EE 12 IDE Support 12 1 NetBeans 12 2 Eclipse 13 Project Resources 14 FAQ PrimeFaces User s Guide 466 466 467 470 471 471 472 473 474 About the Author Cagatay Civici a k a Optimus Prime in PrimeFaces
162. ered as the user left it last time Client Side API Widget PrimeFaces widget Layout toggle position Toggles layout unit show position Shows layout unit hide unit Hides layout unit 246 PrimeFaces User s Guide Skinning Following is the list of structural style classes ui layout position Position based layout unit ui layout unit header Layout unit header ui layout unit content Layout unit body As skinning style classes are global see the main Skinning section for more information 247 PrimeFaces User s Guide 3 54 LayoutUnit LayoutUnit represents a region in the border layout model of the Layout component Info Tag layoutUnit Component Class org primefaces component layout LayoutUnit Component Type org primefaces component LayoutUnit Component Family org primefaces component Attributes Boolean value to specify the rendering of the component when set to false component will not be rendered oT ae instance in a backing bean position Position Position ofthe unit the unit styleClass Style class of the component 248 PrimeFaces User s Guide effect Effect name of the layout transition effectSpeed Effect speed of the layout transition Getting started with LayoutUnit See layout component documentation for more information regarding the usage of layoutUnits 249 PrimeFaces User s Guide 3 55 LightBox Lightbox features a powerful overlay that ca
163. erer Class org primefaces component stack StackRenderer Attributes Unique identifier of the component identifier of the component rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a ee bean Lion An An optional image to contain stacked items image to contain stacked items a ft ivi i ens 395 PrimeFaces User s Guide Getting started with Stack Each item in the stack is represented with menuitems Stack below has five items with different icons and labels Initially stack will be rendered in collapsed mode Location Stack is a fixed positioned element and location can be change via css There s one important css selector for stack called ui stack Override this style to change the location of stack Dynamic Menus Menus can be created programmatically as well see the dynamic menus part in menu component section for more information and an example Skinning Applies ui stack Main container element of stack ui stack ul li span Label of a stack item 396 PrimeFaces User s Guide 3 109 SubTable SummaryRow is a helper component of datatable used for grouping FCB Statistics Messi 2005 2006 4 2006 2007 10 2007 2008 16 o 2008 2009 32 2009 2010 51 22 2010 2011 55 30 Iniesta 2005 2006 4 2 2006 2007 7
164. es partial processing also supports keywords Important point to note is when a component is specified to process partially children of this component is processed as well So for example if you specify a panel all children of that panel would be processed in addition to the panel itself lt p commandButton process paneL gt lt p panel id panel gt Children lt p panel gt 4 2 3 Using Ids Partial Process uses the same technique applied in PPR to specify component identifiers to process See section 5 1 2 for more information about how to define ids in process specification using commas and whitespaces 445 PrimeFaces User s Guide 4 3 PFS PrimeFaces Selectors PFS integrates jQuery Selector API with JSF component referencing model so for partial update and process referencing JSF components can be done using jQuery Selector API instead of regular JSF model which is based on UIComponent findComponent Here are some examples Update all forms update Cform Update first form update Cform first Update all components that has styleClass named mystyle update C mystyle Update and process all inputs update C input process C input Update all datatables update C ui datatable Process input components inside any panel and update all panels process C uil panel input update C ui paneLl Process input components but not select components process C i
165. ess validations logic is executed at apply request values phase for this component required o FALSE Marks component as required validator null MethodExpr A method expression that refers to a method validationg the input valueChangeListener null MethodExpr A method expression that refers to a method for handling a valuchangeevent converterMessage completeMethod a ll a Message to be displayed when required field validation fails Message to be displayed when conversion fails Message to be displayed when validation fails Name of the client side widget Method providing suggestions Name of the iterator used in pojo based suggestion JmaxResults Maximum number of results to be displayed minQueryLength Integer Number of characters to be typed before starting to query queryDelay Integer Delay to wait in milliseconds before sending each query to the server forceSelection FALSE Boolean When enabled autoComplete only accepts input from the selection list onstart null String Client side callback to execute before ajax request to load suggestions begins oncomplete null String Client side callback to execute after ajax request to load ae completes Defines whether to trigger Defines whether to trigger ajaxStatus or not or not 24 PrimeFaces User s Guide accesskey null String Access key that when pressed transfers focus to the input element String Alternate textual description of the
166. ession that refers to a method validationg the input valueChangeListener null MethodExpr A method binding expression that refers to a method for handling a valuchangeevent requiredMessage null String Message to be displayed when required field validation fails showMode Specifies the showMode focus button both buttonImageOnly FALSE boolean When set to true only image of the button would be displayed accesskey null String Access key that when pressed transfers focus to the input element alt Alternate textual description of the input field autocomplete Controls browser autocomplete behavior dir null String Direction indication for text that does not inherit directionality Valid values are LTR and RTL disabled FALSE Disables input field label A localized user presentable name lang null String Code describing the language used in the generated markup for this component 239 PrimeFaces User s Guide Nme ame Default Description o maxlength null Integer Maximum number of characters that may be entered in this field onblur null String Client side callback to execute when input element loses focus onchange null String Client side callback to execute when input element loses focus and its value has been modified since gaining focus onclick null String Client side callback to execute when input element is clicked ondblclick null String Client side callback to execute when input eleme
167. ete functionCxhr status falertC Done DA We highly recommend using p remoteComponent instead of low level javascript api as it generates the same with much less effort and less possibility to do an error PrimeFaces ajax AjaxResponse PrimeFaces ajax AjaxResponse updates the specified components if any and synchronizes the client side JSF state DOM updates are implemented using jQuery which uses a very fast algorithm 455 PrimeFaces User s Guide 8 Themes PrimeFaces is integrated with powerful ThemeRoller CSS Framework Currently there are 30 pre designed themes that you can preview and download from PrimeFaces theme gallery ww we hw we Th FF fe b hh w w i h Me Te We T fr s CECE EN gs far als m sCs fix EN Sic fms ec x acai OE Bh Sah te A a wale wee Te ee ee ee ee ww 4 2 Dm ms ae i oe Be ew H o My o o as o enh amp gt n amp m oY 2 gt i 7 s 0 A A oo ae tt a a J n JES z on wh s 2 2 JE pu Ww rae DANE o Juty 2010 o o duty 2010 o o ay ets o o myo o Su Mo Te we fr s Se Mo Te We TR fr Se eeren Be Me te We T fr Se ne DEDE st sf of 7 sf 9 0 a Doan oon DDODooo sa x9 20 23 22 2 24 DODoDooo 25 26 27 28 29 30 33 456 PrimeFaces User s Guide 8 1 Applying a Theme Applying a theme to your PrimeFaces project is very easy Each theme is packaged as a jar file download the theme you want to use add it to the classpath of y
168. ethod binding expression that refers to a method for handling a valuchangeevent requiredMessage null String Message to be displayed when required field validation fails converterMessage _ Message to be displayed when conversion fails o a to be displayed when validation fields widgetVar Name of the client side Name of the client side widget accesskey null String Access key that when pressed transfers focus to the input element wo o a a Alternate textual description of the input field Controls browser autocomplete behavior null String Direction indication for text that does not inherit directionality Valid values are LTR and RTL D 4 FALSE Disables o field label A localized user A localized user presentable name name lang null String Code describing the language used in the generated markup for this component maxlength null Integer Maximum number of characters that may be entered in this field onblur null String Client side callback to execute when input element loses focus onchange null String Client side callback to execute when input element loses focus and its value has been modified since gaining focus onclick null String Client side callback to execute when input element is clicked ondblclick null String Client side callback to execute when input element is double clicked 228 PrimeFaces User s Guide onfocus null String Client side callback to execute when input element receive
169. event CloseEvent When panel is closed 293 PrimeFaces User s Guide Popup Menu Panel has built in support to display a fully customizable popup menu an icon to display the menu is placed at top right corner This feature is enabled by defining a menu component and defining it as the options facet Skinning Panel Panel resides in a main container which style and styleClass attributes apply Following is the list of structural style classes Style Class Applies ui panel Main container element of panel As skinning style classes are global see the main Skinning section for more information 294 PrimeFaces User s Guide 3 71 PanelGrid PanelGrid is an extension to the standard panelGrid component with additional features such as theming and colspan rowspan Info Tag Component Class Component Type Component Family Renderer Type Renderer Class Attributes 1995 96 NBA Playoffs Conf Semifinals Conf Finals NBA Finals Champion Seattle 4 Seattle 4 Houston 0 Seattle 2 Utah 4 Utah 3 San Antonio 2 Chicago Chicago 4 Chicago 4 New York 1 Chicago 4 Atlanta 1 Orlando 0 Orlando 4 Finals MVP Season MVP Michael Jordan Chicago Top Scorer panelGrid org primefaces component panelgrid PanelGridRenderer org primefaces component PanelGrid org primefaces component org primefaces component PanelGridRenderer org primefaces component panelgrid PanelGridRenderer rendered TRUE Boolean Boolea
170. eventModel updateEvent event event new DefauLtScheduleEvent reset dialog form public void onEventSelect ScheduleEntrySelectEvent e event e getScheduleEvent public void onDateSelect DateSelectEvent e event new DefaultScheduleEvent e getDate e getDateQ Lazy Loading Schedule assumes whole set of events are eagerly provided in ScheduleModel if you have a huge data set of events lazy loading features would help to improve performance In lazy loading mode only the events that belong to the displayed time frame are fetched whereas in default eager more all events need to be loaded lt p schedule value scheduleBean lazyModel gt To enable lazy loading of Schedule events you just need to provide an instance of org primefaces model LazyScheduleModel and implement the loadEvents methods loadEvents method is called with new boundaries every time displayed timeframe is changed 342 PrimeFaces User s Guide public class ScheduleBean private ScheduleModel lLazyModel public ScheduleBean LazyModel new LazyScheduleModel 0verride public void loadEvents Date start Date end addEvent 3 addEvent 3 s public ScheduleModel getLazyModel return lazyModel Customizing Header Header controls of Schedule can be customized based on templates valid values of template options are e title Text of current month week day informati
171. f datagrid Here is an example to demonstrate how to select data from datagrid and display within a dialog with ajax lt h form id carForm gt lt p dataGrid var car value carBean cars columns 3 rows 12 gt lt p coLumn gt lt p panel header car model gt lt p commandLink update carForm display oncomplete dlg show gt lt f setPropertyActionListener value car target carBean selectedCar lt h outputText value 4 car model gt lt p commandLink gt lt p panel gt lt p coLumn gt lt p dataGrid gt lt p dialog modal true widgetVar dlg gt lt h panelGrid id display columns 2 gt lt f facet name header gt lt p graphicImage value images cars car manufacturer jpg gt lt f facet gt lt h outputText value Model gt lt h outputText value carBean selectedCar year gt more selectedCar properties lt h panelLGrid gt lt p dialog gt lt h form gt public class CarBean private List lt Car gt cars private Car selectedCar getters and setters 119 PrimeFaces User s Guide Client Side API Widget PrimeFaces widget DataGrid getPaginator P Paginator Returns the paginator widget Skinning DataGrid resides in a main div container which style and styleClass attributes apply Following is the list of structural style classes ui datagrid Main container element ui datagrid content Content container ui datagrid
172. false gt content lt p tieredMenu gt 412 PrimeFaces User s Guide Overlay TieredMenu can be positioned relative to a trigger component following sample attaches a tieredMenu to the button so that whenever the button is clicked tieredMenu will be displayed in an overlay itself Show Ajax Menuitems gt Non Ajax Menuitem gt 2 Navigations Client Side API Widget PrimeFaces widget TieredMenu EC Soomees EC orae O mmo O O p O a Skinning TieredMenu resides in a main container which style and styleClass attributes apply Following is the list of structural style classes Style Class Applies ui menu ui tieredmenu Container element of menu ui menuitem Each menu item ui menuitem link Anchor element in a link item ui menuitem text Text element in an item As skinning style classes are global see the main Skinning section for more information 413 PrimeFaces User s Guide 3 117 Toolbar Toolbar is a horizontal grouping component for commands and other content per Gi all D New Ga Open i 8 0 8 v Options Info Tag toolbar Component Class org primefaces component toolbar Toolbar Component Type org primefaces component Toolbar Component Family org primefaces component Renderer Type org primefaces component ToolbarRenderer Renderer Class org primefaces component toolbar ToolbarRenderer Attributes rendered TRUE Boolean Boolean value to s
173. false if you d like to disable theming on input field components such as p inputText p inputTextarea 460 PrimeFaces User s Guide 9 Utilities 9 1 RequestContext RequestContext is a simple utility that provides useful goodies such as adding parameters to ajax callback functions RequestContext can be obtained similarly to FacesContext RequestContext API Method Description isAjaxRequest Returns a boolean value if current request is a PrimeFaces ajax request addCallBackParam String name Object value Adds parameters to ajax callbacks like oncomplete update String clientld Specifies component s to update at runtime execute String script Executes script after ajax request completes scrollTo String clientId Scrolls to the component with given clientld after ajax request completes Callback Parameters There may be cases where you need values from backing beans in ajax callbacks Suppose you have a form in a p dialog and when the user ends interaction with form you need to hide the dialog or if there re any validation errors dialog needs to stay open Callback Parameters are serialized to JSON and provided as an argument in ajax callbacks 461 PrimeFaces User s Guide is Valid parameter will be available in handleComplete callback as lt script type text javascript gt function handleCompleteCxhr status args var isValid args isValid ifCisValid dialog hided lt scr
174. field validation fails converterMessage Message to be displayed when conversion fails validatorMessage Message to be displayed when validation fields widgetVar Name of the client side widget disabled Disables the component label User presentable name onchange Callback to execute on value change style Inline style of the component styleClass Style class of the container height Height of the overlay Getting started with SelectCheckboxMenu SelectCheckboxMenu usage is same as the standard selectManyCheckbox or PrimeFaces selectCheckboxMenu components Skinning SelectCheckboxMenu resides in a main container which style and styleClass attributes apply As skinning style classes are global see the main Skinning section for more information Following is the list of structural style classes Style Class Applies ae 353 PrimeFaces User s Guide 3 93 SelectManyButton SelectManyButton is a multi select component using button UI Info Tag Component Class Component Type Component Family Renderer Type Renderer Class Attributes a selectManyButton org primefaces component selectmanybutton SelectManyButton org primefaces component SelectManyButton org primefaces component org primefaces component SelectManyButton org primefaces component selectmanybutton SelectManyButton rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will no
175. filter name gt lt servlet name gt Faces Servlet lt servlet name gt lt filter mapping gt Simple File Upload Simple file upload mode works in legacy mode with a file input whose value should be an UploadedFile instance lt h form enctype multipart form data gt lt p fileUpload value fileBean file mode simple gt lt p commandButton value Submit ajax false gt lt h form gt import org primefaces model UplLoadedFile public class FileBean private UploadedFile file getter setter Advanced File Upload Default mode of fileupload is advanced that provides a richer UI In this case FileUploadListener is the way to access the uploaded files when a file is uploaded defined fileUploadListener is processed with a FileUploadEvent as the parameter lt p fileUpload fileUploadListener 4 fiLeBean handleFileUpload gt 179 PrimeFaces User s Guide public class FileBean public void handleFileUpLoad FileUploadEvent event UploadedFile file event getFileQ application code Multiple Uploads Multiple uploads can be enabled using the multiple attribute This way multiple files can be selected and uploaded together lt p fileUpload fileUploadListener fileBean handleFileUpload multiple true gt Auto Upload Default behavior requires users to trigger the upload process you can change this way by setting auto to true Auto uploads are triggered as soon as files a
176. g is displayed onHide null String Client side callback to execute when dialog is hidden hi Getting started with the Dialog position Defines where the dialog should be displayed hideEffect Effect to use when hiding the dialog Dialog is a panel component containing other components note that by default dialog is not visible Show and Hide Showing and hiding the dialog is easy using the client side api 147 PrimeFaces User s Guide Effects There are various effect options to be used when displaying and closing the dialog Use showEffect and hideEffect options to apply these effects e explode e fade fold highlight e puff pulsate scale shake size slide transfer Position By default dialog is positioned at center of the viewport and position option is used to change the location of the dialog Possible values are e Single string value like center left right top bottom representing the position within viewport Comma separated x and y coordinate values like 200 500 Comma separated position values like top right Use single quotes when using a combination Some examples are described below 148 PrimeFaces User s Guide Ajax Behavior Events close event is one of the ajax behavior events provided by dialog that is fired when the dialog is hidden If there is a listener defined it ll be executed by passing an instance of org primefaces ev
177. gauge MeterGaugeChart Component Type org primefaces component chart MeterGauge Component Family org primefaces component Renderer Type org primefaces component chart MeterGaugeChartRenderer Renderer Class org primefaces component chart metergauge MeterGaugeChartRenderer Attributes Boolean value to specify the rendering of the component when set to false component will not be rendered ee instance in a backing bean widgetVar fool String Name of the client side Name of the client side widget o labelHeightA djust Number of pixels to offset the label up and down intervalOuterRadius Radius of the outer circle of the internal ring 79 PrimeFaces User s Guide Getting started with MeterGaugeChart PieChart is created with an org primefaces model chart MeterGaugeChartModel instance public class Bean private MeterGaugeChartModel model public Bean List lt Number gt intervals new ArrayList lt Number gt add 20 add 50 add 120 add 220 th model new MeterGaugeChartModelC km h 140 intervals h public MeterGaugeChartModel getModel return model lt p meterGaugeChart value bean model gt Customization MeterGaugeChart can be customized using various options lt p meterGaugeChart value bean model showTickLabels false LabelHeightAdjust 110 intervalOuterRadius 110 seriesColors 66cc66 93b75f E7E658 cc6666 gt 80 Prim
178. gestions onstart callback gets a request parameter and oncomplete gets a response parameter these parameters contain useful information For example request is the query string and response is the xhr request sent under the hood Client Side API Widget PrimeFaces widget AutoComplete Method Params Return Type Description search value value keyword for search Initiates a search with given value close Hides suggested items menu disable Disables the input field enable i Enables the input field deactivate i Deactivates search behavior activate i Activates search behavior Skinning Following is the list of structural style classes ui autocomplete Container element ui autocomplete input Input field ui autocomplete panel Container of suggestions list ui autocomplete items List of items ui autocomplete item Each item in the list ui autocomplete query Highlighted part in suggestions As skinning style classes are global see the main Skinning section for more information 31 PrimeFaces User s Guide Tips e Do not forget to use a converter when working with pojos e Enable forceSelection if you d like to accept values only from suggested list e Increase query delay to avoid unnecessary load to server as a result of user typing fast 32 PrimeFaces User s Guide 3 5 BlockUl BlockUI is used to block JSF components during ajax processing Ajax Pagination Ia lt a 1 3 45
179. gt lt h form gt Message Message can be defined in two ways either via message option or message facet Message facet is useful if you need to place custom content instead of simple text Note that header can also be defined using the header attribute or the header facet lt p confirmDialog widgetVar cd header Confirm gt lt f facet name message gt lt h outputText value Are you sure gt lt f facet gt IL aR lt p confirmDialog gt Severity Severity defines the icon to display next to the message default severity is alert and the other option is info 102 PrimeFaces User s Guide Client Side API Widget PrimeFaces widget ConfirmDialog Skinning ConfirmDialog resides in a main container element which style and styleClass options apply Following is the list of structural style classes ui dialog buttonpane Footer button panel As skinning style classes are global see the main Skinning section for more information 103 PrimeFaces User s Guide 3 21 ContextMenu ContextMenu provides an overlay menu displayed on mouse right click event B Save Update x Delete Homepage Info Component Class org primefaces component contextmenu ContextMenu Component Type org primefaces component ContextMenu Component Family org primefaces component Renderer Type org primefaces component ContextMenuRenderer Renderer Class org primefaces component contextmenu ContextMe
180. gt lt p menuitem value Youtube url http www youtube com gt lt p menuitem value Break url http ww break com gt lt p submenu gt lt p menubar gt Nested Menus To create a menubar with a higher depth nest submenus in parent submenus lt p menubar gt lt p submenu Label File gt lt p submenu Label New gt lt p menuitem value Project url gt lt p menuitem value O0ther url gt lt p submenu gt lt p menuitem value Open url gt lt p menuitem gt lt p menuitem value Quit url gt lt p menuitem gt lt p submenu gt lt p submenu Label Edit gt lt p menuitem value Undo url gt lt p menuitem gt lt p menuitem value Redo url gt lt p menuitem gt lt p submenu gt lt p submenu Label Help gt lt p menuitem Label Contents url gt lt p submenu lLabel Search gt lt p submenu Label Text gt lt p menuitem vaLue Workspace url gt lt p submenu gt lt p menuitem value File url gt lt p submenu gt lt p submenu gt lt p menubar gt Root Menuitem Menubar supports menuitem as root menu options as well lt p menubar gt lt p menuitem Label Logout action bean logout gt lt p menubar gt 266 PrimeFaces User s Guide Ajax and Non Ajax Actions As menu uses menuitems it is easy to invoke actions with or without ajax as well as navigation See menuitem documentation for more information
181. gt gt bi Model Year Manufacturer Color 9816c1c9 2001 Opel Yellow 43fb87ae 1993 Renault White e2cb6c1a 1998 E White aac257b5 1984 LOADING Green s o 7aa229b6 1990 a White 65d3dc85 1960 viwive Silver 61752724 2009 Opel Red c620f632 1983 Volkswagen White 3066aea8 1998 Audi Black 3fd09492 1991 Renault Black a lt a 1 3 4 5 gt gt eI Info Tag blockUI Component Class org primefaces component blockui BlockUI Component Type org primefaces component BlockUI Component Family org primefaces component Renderer Type org primefaces component BlockUI Renderer Renderer Class org primefaces component blockui BlockUIRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component binding null Object An el expression that maps to a server side UIComponent instance in a backing bean 33 PrimeFaces User s Guide Getting Started with BlockUl BlockUI requires trigger and block attributes to be defined With the special ajax integration ajax requests whose source is trigger components will block the ui onstart and unblock oncomplete Example below blocks the ui of the panel when saveBtn is clicked and unblock when ajax response is received lt p panel id pnl header My Panel gt content lt p commandButton id saveBtn value Save gt lt p panel gt lt p blockUI block pnl trigger SaveBtn gt Multiple triggers are defined as a comma separated list lt p
182. h inputText value userWizard user email required true gt lt h outputText value Phone gt lt h inputText value userWizard user phone gt lt h outputText value Additional Info gt lt h inputText value userWizard user info gt lt h panelGrid gt lt p panel gt lt p tab gt 436 PrimeFaces User s Guide lt p tab id confirm gt lt p panel header Confirmation gt lt h panelGrid id confirmation columns 6 gt lt h outputText value Firstname gt lt h outputText value userWizard user firstname gt lt h outputText value Lastname gt lt h outputText value userWizard user Lastname gt lt h lt h lt h lt h lt h lt h lt h lt h lt h lt h lt h lt h lt h lt h lt h lt h outputText outputText outputText outputText outputText outputText outputText outputText outputText outputText outputText outputText outputText outputText outputText outputText lt h panelLGrid gt value Age gt vaLlue userWizard value Street gt value userWizard value Postal Code vaLlue userWizard value City gt value userWizard value Email gt vaLlue userWizard value Phone gt vaLlue userWizard value Info gt value userWizard gt gt age gt street gt postalCode gt
183. he business of the family is just like the head of the family kind and benevolent to those who give respect but given to ruthless violence whenever anything stands against the good of the family Godfather Part Ill Client Side Callbacks Tabview has two callbacks for client side onTabChange is executed when an inactive tab is clicked and onTabShow is executed when an inactive tab becomes active to be shown lt p tabView onTabChange handleTabChangeCevent index gt tabs lt p tabView gt function handleTabChangeCindex index Index of the new tab 403 PrimeFaces User s Guide Client Side API Widget PrimeFaces widget Tab View select index index Index of tab to display void Activates tab with given index selectTab index index Index of tab to display void Deprecated use select instead Activates tab with given index disable index index Index of tab to disable void Disables tab with given index enable index index Index of tab to enable void Enables tab with given index remove index index Index of tab to remove void Removes tab with given index getLength Number Returns the number of tabs tab Skinning As skinning style classes are global see the main Skinning section for more information Following is the list of structural style classes ui tabs panel Each tab container 404 PrimeFaces User s Guide 3 113 TagCloud TagCloud displays a collection of
184. he client side widget 0 409 PrimeFaces User s Guide styleClass Style class of the component var Variable name to refer to each item height Height of the panel tabindex Position of the element in the tabbing order Getting Started with the ThemeSwitcher ThemeSwitcher usage is very similar to selectOneMenu lt p themeSwitcher style width 15 px gt lt f selectItem itemLabel Choose Theme itemValue gt lt f selectItems value bean themes gt lt p themeSwitcher gt Stateful ThemeSwitcher By default themeswitcher just changes the theme on the fly with no page refresh in case you d like to get notified when a user changes the theme e g to update user preferences you can use an ajax behavior lt p themeSwitcher value bean theme effect fade gt lt f seLlectItem itemLabel Choose Theme itemValue gt lt f selectItems value themeSwitcherBean themes gt lt p ajax listener bean saveTheme gt lt p themeSwitcher gt Advanced ThemeSwitcher ThemeSwitcher supports displaying custom content so that you can show theme previews lt p themeSwitcher gt lt f seLlectItem itemLabel Choose Theme itemValue gt lt f selectItems value themeSwitcherBean advancedThemes var theme itemLabel theme name itemValue theme gt lt p coLumn gt lt p graphicImage value images themes t image gt lt p coLumn gt lt p coLumn gt t name
185. he container element onTabChange null String Client side callback to invoke when an inactive tab is clicked onTabShow null String Client side callback to invoke when a tab gets eee dynamic FALSE Defines the Defines the toggle mode mode contents from server a ee vane List to iterate to List to iterate to display dynamic number of tabs dynamic number of tabs f at e ost Getting Started with Accordion Panel Accordion panel consists of one or more tabs and each tab can group any content Titles can also be defined with title facet Dynamic Content Loading AccordionPanel supports lazy loading of tab content when dynamic option is set true only active tab contents will be rendered to the client side and clicking an inactive tab header will do an ajax request to load the tab contents This feature is useful to reduce bandwidth and speed up page loading time By default activating a previously loaded dynamic tab does not initiate a request to load the contents again as tab is cached To control this behavior use cache option 15 PrimeFaces User s Guide lt p accordionPanel dynamic true gt tabs lt p accordionPanel gt Client Side Callbacks onTabChange is called before a tab is shown and onTabShow is called after Both receive container element of the tab to show as the parameter lt p accordionPanel onTabChange handleChange panel1 gt tabs lt p accordionPanel gt
186. he main wizard container element flowListener null MethodExpr Server side listener to invoke when wizard attempts to go a or back TRUE Specifies visibility of default navigator arrows visibility of default navigator arrows showStepStatus TRUE Specifies visibility of default step title bar 434 PrimeFaces User s Guide onback null String Javascript event handler to be invoked when flow goes back onnext null String Javascript event handler to be invoked when flow goes Pac oo backLabel Label of back navigation button Getting Started with Wizard Each step in the flow is represented with a tab 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 To begin with create your backing bean it s important that the bean lives across multiple requests so avoid a request scope bean Optimal scope for wizard is viewScope public class UserWizard private User user new User public User getUser return user public void setUser User user this user user public void save ActionEvent actionEvent Persist user FacesMessage msg new FacesMessage Successful Welcome user getFirstname FacesContext getCurrentInstance addMessage null msg User is a simple pojo with properties such as firstname lastname email and etc Following wizard requires 3 steps to get the
187. he position use my and at options that takes combinations of left right bottom and top e g right bottom Dynamic Mode Dynamic mode enables lazy loading of the content in this mode content of the panel is not rendered on page load and loaded just before panel is shown Also content is cached so consecutive displays do not load the content again This feature is useful to reduce the page size and reduce page load time Skinning Panel Panel resides in a main container which style and styleClass attributes apply Following is the list of structural style classes Style Class Applies ui overlaypanel Main container element of panel As skinning style classes are global see the main Skinning section for more information Tips e Enable appendToBody when overlayPanel is in other panel components like layout dialog 291 PrimeFaces User s Guide 3 70 Panel Panel is a grouping component with content toggle close and menu integration FC Barcelona is one of only three clubs never to have been relegated from La Liga and is the most successful club in Spanish football along with Real Madrid having won twenty La Liga titles a record twenty five Spanish Cups eight Spanish Super Cups four Eva Duarte Cups and two League Cups They are also one of the most successful clubs in European football having won fourteen official major trophies in total including ten UEFA competitions They have won three UEFA Champions League ti
188. he save button invokes save method of the bean and updates messages Nested options defined as menuitems do ajax non ajax requests as well as regular navigation to an external url 392 PrimeFaces User s Guide Client Side API Widget PrimeFaces widget SplitButton Skinning SplitButton renders a container element which style and styleClass applies Following is the list of structural style classes As skinning style classes are global see the main Skinning section for more information 393 PrimeFaces User s Guide 3 107 Submenu Submenu is nested in menu components and represents a sub menu items Info Tag Component Class org primefaces component submenu Submenu Component Type org primefaces component Submenu Component Family org primefaces component Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered UIComponent instance in a backing bean Getting started with Submenu Please see Menu or Menubar section to find out how submenu is used with the menus 394 PrimeFaces User s Guide 3 108 Stack Stack is a navigation component that mimics the stacks feature in Mac OS X en axo B Info Component Class org primefaces component stack Stack Component Type org primefaces component Stack Component Family org primefaces component Renderer Type org primefaces component StackRenderer Rend
189. humb nay right As skinning style classes are global see the main Skinning section for more information 187 PrimeFaces User s Guide 3 39 GMap GMap is a map component integrated with Google Maps API V3 Info gmap org primefaces component gmap GMap org primefaces component Gmap org primefaces component org primefaces component GmapRenderer org primefaces component gmap GmapRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean 188 PrimeFaces User s Guide model null MapModel An org primefaces model MapModel instance disableDefaultUI FALSE Disables default UI controls TRUE Defines visibility of navigation control mapTypeControl TRUE Defines visibility of map type control draggable TRUE Defines draggability of map disabledDoubleClickZoom FALSE Disables zooming on mouse double click onPointClick null String Javascript callback to execute when a point on map is clicked fitBounds TRUE Boolean Defines if center and zoom should be calculated automatically to contain all markers on the map Getting started with GMap First thing to do is placing V3 of the Google Maps API that the GMap is based on Ideal location is the head section of your page As Google Maps api states mandatory sensor par
190. iate is set to false valueChange Events are fired in process validations phase validator null Method A method binding expression that refers to a method Expr validationg the input 385 PrimeFaces User s Guide valueChangeListener null Method A method binding expression that refers to a method for Expr handling a valuchangeevent requiredMessage Message to be displayed when required field validation fails converterMessage Message to be displayed when conversion fails validatorMessage Message to be displayed when validation fields widgetVar Name of the client side widget stepFactor Stepping factor for each increment and decrement min Minimum boundary value max Maximum boundary value prefix Prefix of the input suffix String Suffix of the input String Access key that when pressed transfers focus to the input element String Alternate textual description of the input field String Controls browser autocomplete behavior String Direction indication for text that does not inherit directionality Valid values are LTR and RTL disabled FALSE Boolean Disables input field label null String A localized user presentable name lang null String Code describing the language used in the generated markup for this component maxlength null Integer Maximum number of characters that may be entered in this field onblur null String Client side callback to execute when input element loses focus onchange null Str
191. icating that this component will prevent changes by the user size null Integer Number of characters used to determine the width of the Peo element style o Inline Inline style of the input element of the input element 300 PrimeFaces User s Guide Getting Started with Password Password is an input component and used just like a standard input text When feedback option is enabled a password strength indicator is displayed lt p password value bean password feedback truel false gt public class Bean private String password public String getPassword return password public void setPassword String password this password password 118N Although all labels are in English by default you can provide custom labels as well Following password gives feedback in Turkish lt p password value bean password promptLabel Lutfen ifre giriniz weakLabel Zay1if goodLabel Orta seviye strongLabel G l feedback true gt Inline Strength Indicator By default strength indicator is shown in an overlay if you prefer an inline indicator just enable inline mode lt p password value mybean password inline true feedback true gt Confirmation Password confirmation is a common case and password provides an easy way to implement The other password component s id should be used to define the match option lt p password id pwd1 value passwordBean password6 f
192. ients PushServer Jetty 6 1 Setup Push Server PrimeFaces Push uses a servlet as a dispatcher This servlet should be in a different application than the JSF application and at the moment can only be deployed on jetty server lt servlet gt lt servlet name gt Push Servlet lt servlet name gt lt servlet class gt org primefaces push PushServlet lt servlet class gt lt Load on startup gt 1 lt load on startup gt lt init param gt lt param name gt channels lt param name gt lt param value gt chat counter lt param value gt lt init param gt lt servlet gt lt servlet mapping gt lt servlet name gt Push Servlet lt servlet name gt lt urL pattern gt prime push lt url pattern gt lt servlet mapping gt channels configuration defines the topic names that push server can publish to URL Configuration The JSF application needs to define the push server url to send messages lt context param gt lt param name gt primefaces PUSH_SERVER_URL lt param name gt lt param vaLue gt ws url_to_push_server lt param vaLue gt lt context param gt 449 PrimeFaces User s Guide 6 2 Push API JSF app can push data to the server by using the RequestContext API param channel Unique name of communication channel param data Information to be pushed to the subscribers as json RequestContext push String channel Object data 6 3 Push Component lt p push gt
193. igated when menuitem is clicked when menuitem is clicked process null String Component id s to process partially instead of whole view 270 PrimeFaces User s Guide update null String Client side id of the component s to be updated after async partial submit request disabled FALSE Disables the menuitem onstart null String Javascript handler to execute before ajax request is begins oncomplete null String Javascript handler to execute when ajax request is completed onsuccess null String Javascript handler to execute when ajax request succeeds onetror null String Javascript handler to execute when ajax request fails global TRUE Boolean Global ajax requests are listened by ajaxStatus component setting global to false will not trigger ajaxStatus partialSubmit TRUE Boolean Enables serialization of values belonging to the a processed components only ajax TRUE Specifies submit mode submit mode Getting started with Menultem Menultem is a generic component used by the following PrimeFaces components e Menu e MenuBar e Breadcrumb e Dock e Stack e MenuButton Note that some attributes of menuitem might not be supported by these menu components Refer to the specific component documentation for more information Navigation vs Action Menuitem has two use cases directly navigating to a url with GET and doing a POST do execute an action which you can still do navigation with JSF navigation rules Th
194. igation multi cell selection with meta shift keys bulk delete update and more List of Cars A gt B lt c lt D gt 1 Model Year Manufacturer Color 2 66160332 1978 Chrysler Orange 3 df362448 1992 Ford Silver 4 8e3420d9 1980 BMW Silver 5 b2187d0f 1965 Ford Orange 6 1b9da720 1998 Volvo Orange 7 255d29fd 1960 Ford Red 8 9af8a7cf 2008 Opel Brown 9 182fab90 2000 Volvo Brown 10 2281bf45 1999 Volvo Red 11 bb859d9b 1965 BMW Blue 12 8255e0fe 1970 Ferrari Yellow 13 869fe433 2002 Opel White i 14 cd93d17e 2009 Mercedes Maroon v Info Tag sheet Component Class org primefaces component sheet Sheet Component Type org primefaces component Sheet Component Family org primefaces component Renderer Type org primefaces component SheetRenderer Renderer Class org primefaces component sheet SheetRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean 373 PrimeFaces User s Guide styleClass Style class of the container element scrollWidth Width of the viewport scrollHeight Height of the viewport Getting started with Sheet Sheet usage is similar to a datatable two important points for sheet are e Columns must be fixed width e Column child must be an input text public class TableBean private List lt Car gt
195. ilable for effect attribute blind e bounce e clip e drop 365 PrimeFaces User s Guide e explode e fold e highlight gt puff e pulsate e scale e shake e size e slide Custom Content SelectOneMenu can display custom content in overlay panel by using column component and the var option to refer to each item public class MenuBean private List lt Player gt players private Player selectedPlayer public OrderListBeanQ players new ArrayList lt Player gt Q players add new Player Messi 10 messi jpg more players getters and setters lt p selectOneMenu value menuBean selectedPlayer converter player var p gt lt f selectItem itemLabel Select One itemValue gt lt f selectItems value menuBean players var player itemLabel player name itemValue player gt lt p column gt lt p graphicImage value images barca p photo width 40 height 50 gt lt p coLumn gt lt p coLumn gt p name p number lt p coLumn gt lt p selectOneMenu gt Select One Select One 0 10 ea Bojan 9 Q EA Iniesta 366 PrimeFaces User s Guide Editable Editable SelectOneMenu provides a UI to either choose from the predefined options or enter a manual input Set editable option to true to use this feature Salar ca Ankara Istanbul Izmir Client Side API Widget PrimeFaces widget SelectOneMenu Sk
196. ime Teknoloji a Turkish software development company specialized in Agile and Java EE consulting PrimeFaces Team members are full time engineers at Prime Teknoloji e a atay ivici Architect and Lead Developer e Yi it Dar n Core Developer QA amp Test e Mustafa Dasgin Core Developer QA amp Test Omer Gok Core Developer QA amp Test e Utku S nmez Tester e Cenk ivici Mentor 11 PrimeFaces User s Guide 2 Setup 2 1 Download PrimeFaces has a single jar called primefaces version jar There are two ways to download this jar you can either download from PrimeFaces homepage or if you are a maven user you can define it as a dependency Download Manually Three different artifacts are available for each PrimeFaces version binary sources and bundle Bundle contains binary sources and javadocs Download with Maven Group id of the dependency is org primefaces and artifact id is primefaces In addition to the configuration above you also need to add PrimeFaces maven repository to the repository list so that maven can download it PrimeFaces User s Guide 2 2 Dependencies PrimeFaces only requires a JAVA 5 runtime and a JSF 2 x implementation as mandatory dependencies There re some optional libraries for certain features commons fileupload 1 2 1 FileUpload Listed versions are tested and known to be working with PrimeFaces other versions of these dependencies may also work bu
197. imeFaces User s Guide public void onDrop DragDropEvent ddEvent String draggedId ddEvent getDragId Client id of dragged component String droppedId ddEvent getDropId Client id of dropped component Object data ddEvent getDataQ Model object of a datasource onDrop onDrop is a client side callback that is invoked when a draggable is dropped it gets two parameters event and ui object holding information about the drag drop event lt p outputPanel id zone styleClass slot gt lt p droppable for zone onDrop handleDrop gt function handleDrop Cevent ui var draggable ui draggable draggable element a jQuery object helper ui helper helper element of draggable a jQuery object position ul position position of draggable helper offset ui offset absolute position of draggable helper DataSource Droppable has special care for data elements that extend from UIData e g datatable datagrid in order to connect a droppable to accept data from a data component define datasource option as the id of the data component Example below show how to drag data from datagrid and drop onto a droppable to implement a dragdrop based selection Dropped cars are displayed with a datatable public class TableBean private List lt Car gt availableCars private List lt Car gt droppedCars public TableBeanQ availableCars populate data getters and setters public void onCarDrop DragDr
198. ineChart Component Class org primefaces component chart line LineChart Component Type org primefaces component chart LineChart Component Family org primefaces component Renderer Type org primefaces component chart LineChartRenderer Renderer Class org primefaces component chart line LineChartRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered UIComponent instance in a backing bean Minimum Y axis value Maximum Y axis value fink fost ie Nim se max att be fna value fall will join point on either side of line Comma separated list of colors in hex format 65 PrimeFaces User s Guide Getting started with LineChart LineChart is created with an org primefaces model chart CartesianChartModel instance public class Bean private CartesianChartModel model public ChartBeanQd model new CartesianChartModelQ ChartSeries boys new ChartSeries boys setLabel Boys boys set 2004 120 boys set 2005 100 ChartSeries girls new ChartSeries girls setLabelC Girls girls setC 2004 52 girls setC 2005 60 model addSeries boys model addSeries girs public CartesianChartModel getModelQ return model lt p lineChart value chartBean model lLegendPosition e gt 66 AreaChart AreaCharts is implemented by enabling stacked and fill options 3
199. information about how gmapInfo Window is used 199 PrimeFaces User s Guide 3 41 Graphiclmage PrimeFaces GraphicImage extends standard JSF graphic image component with the ability of displaying binary data like an inputstream Main use cases of GraphicImage is to make displaying images stored in database or on the fly images easier 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 Info Tag graphicImage Component Class org primefaces component graphicimage GraphicImage Component Type org primefaces component GraphicImage Component Family org primefaces component Renderer Type org primefaces component GraphicImageRenderer Renderer Class org primefaces component graphicimage GraphicImageRenderer Attributes Boolean value to specify the rendering of the component when set to false component will not be rendered UIComponent instance in a backing bean a CS a ae OO a fe fee ieee C C PrimeFaces User s Guide ie Enables Disables browser from caching the image Getting started with Graphiclmage GraphicImage requires an org primefaces model StreamedContent content as it s value StreamedContent is an interface and PrimeFaces provides a built in implementation called DefaultStreamedContent Following examples loads an image from the classpath DefaultStreamedContent gets an inputstream as the first parameter and mime ty
200. ing Client side callback to execute when input element loses focus and its value has been modified since gaining focus onclick null String Client side callback to execute when input element is clicked ondblclick null String Client side callback to execute when input element is double clicked onfocus null String Client side callback to execute when input element receives focus onkeydown null String Client side callback to execute when a key is pressed down over input element 386 PrimeFaces User s Guide onkeypress null String Client side callback to execute when a key is pressed and released over input element onkeyup null String Client side callback to execute when a key is released over input element onmousedown null String Client side callback to execute when a pointer button is pressed down over input element onmousemove null String Client side callback to execute when a pointer button is moved within input element onmouseout null String Client side callback to execute when a pointer button is moved away from input element onmouseover null String Client side callback to execute when a pointer button is moved onto input element onmouseup null String Client side callback to execute when a pointer button is released over input element onselect null String Client side callback to execute when text within input element is selected by user readonly FALSE Boolean Flag indicating that this component will prevent
201. ing a specific JSF component to the printer not the whole page Info Behavior Class org primefaces component behavior Printer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean Getting started with the Printer Printer is attached to any command component like a button or a link Examples below demonstrates how to print a simple output text or a particular image on page 314 PrimeFaces User s Guide 3 7 ProgressBar ProgressBar is a process status indicator that can either work purely on client side or interact with server side using ajax Client Side ProgressBar Cancel Advanced Ajax ProgressBar Cancel A 47 47 4 34 Info Component Class org primefaces component progressbar ProgressBar Component Type org primefaces component Progressbar Component Family org primefaces component Renderer Type org primefaces component ProgressBarRenderer Renderer Class org primefaces component progressbar ProgressBarRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side 2 instance in a backing bean widgetVar Name of the client side Name of the client side
202. inning SelectOneMenu resides in a container element that style and styleClass attributes apply As skinning style classes are global see the main Skinning section for more information Following is the list of structural style classes Style Class Applies ui selectonemenu label Label of the component ui selectonemenu trigger Container of dropdown icon ul selectonemenu items Items list ul selectonemenu items Each item in the list 367 PrimeFaces User s Guide 3 99 SelectOneRadio SelectOneRadio is an extended version of the standard SelectOneRadio with theme integration Info Tag Component Class Component Type Component Family Renderer Type Renderer Class Attributes Option 1 Option 2 Option 3 selectOneRadio org primefaces component selectoneradio SelectOneRadio org primefaces component SelectOneRadio org primefaces component org primefaces component SelectOneRadioRenderer org primefaces component selectoneradio SelectOneRadioRenderer rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side a een ae instance in a backing bean value o Value of the component Value of the component referring to a List to a List converter null Converter An el expression or a literal text that defines a String converter for the component When it s an EL ex
203. input element loses focus 299 PrimeFaces User s Guide onchange null String Client side callback to execute when input element loses focus and its value has been modified since gaining focus onclick null String Client side callback to execute when input element is clicked ondblclick null String Client side callback to execute when input element is double clicked onfocus null String Client side callback to execute when input element receives focus onkeydown null String Client side callback to execute when a key is pressed down over input element onkeypress null String Client side callback to execute when a key is pressed and released over input element onkeyup null String Client side callback to execute when a key is released over input element onmousedown null String Client side callback to execute when a pointer button is pressed down over input element onmousemove null String Client side callback to execute when a pointer button is moved within input element onmouseout null String Client side callback to execute when a pointer button is moved away from input element onmouseover null String Client side callback to execute when a pointer button is moved onto input element onmouseup null String Client side callback to execute when a pointer button is released over input element onselect null String Client side callback to execute when text within input element is selected by user readonly FALSE Boolean Flag ind
204. input field autocomplete String Controls browser autocomplete behavior dir null String Direction indication for text that does not inherit directionality Valid values are LTR and RTL disabled FALSE Boolean Disables input field label String A localized user presentable name null String Code describing the language used in the generated markup for this component maxlength null Integer Maximum number of characters that may be entered in this field onblur null String Client side callback to execute when input element loses focus onchange null String Client side callback to execute when input element loses focus and its value has been modified since gaining focus onclick null String Client side callback to execute when input element is clicked ondblclick null String Client side callback to execute when input element is double clicked onfocus null String Client side callback to execute when input element receives focus onkeydown null String Client side callback to execute when a key is pressed down over input element onkeypress null String Client side callback to execute when a key is pressed and released over input element onkeyup null String Client side callback to execute when a key is released over input element onmousedown null String Client side callback to execute when a pointer button is pressed down over input element onmousemove null String Client side callback to execute when a pointer button is moved within i
205. ion is called where data parameter is the new count integer 6 4 2 Chat Chat is a simple p2p messaging implementation public class ChatBean implements Serializable private String message private String username private boolean loggedIn public void send ActionEvent event RequestContext getCurrentInstance pushC chat username message message null public void login ActionEvent event loggediIn true RequestContext getCurrentInstance pushC chat username has logged in getters amp setters 451 PrimeFaces User s Guide lt h form gt lt p fieldset id container Legend PrimeChat gt lt h panelGroup rendered chatController loggedIn gt lt p outputPanel lLayout block style width 6 Qpx height 200px overflow auto styleClass chatContent gt lt p separator gt lt p inputText value chatController message styleClass messageInput gt lt p Spacer width 5 gt lt p commandButton value Send actionListener chatController send global false oncompLete C messageInput valC focusQ gt lt p Sspacer width 5 gt lt p commandButton value Disconnect actionListener chatController disconnect global false oncomplete chatAgent close update container gt lt h panelGroup gt lt h panelGroup rendered not chatController loggedIn gt Username lt p inputText value chatController username
206. ionListener buttonBean save update messages icon ui icon disk gt lt p menuitem value Update actionListener buttonBean update update messages icon ui icon arrowrefresh 1 w gt lt p Submenu gt lt p submenu Label Non Ajax Menuitem icon ui icon newwin gt lt p menuitem value Delete actionListener buttonBean delete update messages ajax false icon ui icon close gt lt p submenu gt lt p separator gt lt p submenu label Navigations icon ui icon extlink gt lt p submenu label Prime Links gt lt p menuitem value Prime url http www prime com tr gt lt p menuitem value PrimeFaces url http www primefaces org gt lt p submenu gt lt p menuitem value Mobile url mobile gt lt p submenu gt lt p slideMenu gt Overlay SlideMenu can be positioned relative to a trigger component following sample attaches a slideMenu to the button so that whenever the button is clicked menu will be displayed in an overlay itself 377 PrimeFaces User s Guide Client Side API Widget PrimeFaces widget TieredMenu Skinning TieredMenu resides in a main container which style and styleClass attributes apply Following is the list of structural style classes i i menu list List container i u ui menuitem Each menu item ui menuitem link Anchor element in a link item ui menuitem text Text element in an item As skinning style classes are g
207. ipt gt You can add as many callback parameters as you want with addCallbackParam API Each parameter is serialized as JSON and accessible through args parameter so pojos are also supported just like primitive values Following example sends a pojo called User that has properties like firstname and lastname to the client public void validated isValid calculate isValid RequestContext requestContext RequestContext getCurrentInstance requestContext addCallbackParamC isValid true or false requestContext addCallbackParamC user user lt script type text javascript gt function handleComplete xhr status args var firstname args user firstname var lastname args user Lastname lt script gt Default validationFailed By default validationFailed callback parameter is added implicitly if JSF validation fails 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 addPartialUpdateTarget method is added to handle this case In example below button actionListener decides which part of the page to update on the fly lt p commandButton value Save actionListener bean save gt lt p panel id panel gt lt p panel gt lt p dataTable id table gt lt p panel gt 462 PrimeFaces User s Guide When the save button is clicked depending on the outcome
208. is is decided by url attribute if it is present menuitem does a GET request if not parent form is posted 271 PrimeFaces User s Guide Icons There are two ways to specify an icon of a menuitem you can either use bundled icons within PrimeFaces or provide your own via css ThemeRoller Icons Custom Icons 272 PrimeFaces User s Guide 3 63 Message Message is a pre skinned extended version of the standard JSF message component Text text Validation Error Value is required Info Tag message Component Class org primefaces component message Message Component Type org primefaces component Message Component Family org primefaces component Renderer Type org primefaces component MessageRenderer Renderer Class org primefaces component message MessageRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIJComponent instance in a backing bean FALSE Specifies if the summary of the FacesMessage should be displayed showDetail TRUE Boolean Specifies if the detail of the FacesMessage should be displayed Getting started with Message Message usage is exactly same as standard message 273 PrimeFaces User s Guide Display Mode Message component has three different display modes e text Only message text is displayed e icon Only
209. iteral text that defines String 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 immediate Boolean When set true process validations logic is executed at apply request values phase for this component 41 PrimeFaces User s Guide required FALSE Marks component as required validator null MethodExpr A method expression that refers to a method validationg the input valueChangeListener null MethodExpr A method expression that refers to a method for handling a valuchangeevent requiredMessage null String Message to be displayed when required field validation fails converterMessage null String Message to be displayed when conversion fails validatorMessage Message to be displayed when validation fails widgetvar M Stins Name of the client side widget mindate Date or String Sets calendar s minimum visible date maxdate Date or String Sets calendar s maximum visible date disabled FALSE ay the calendar when set to true MM dd DateFormat pattern for localization o locale Locale String Locale to be used for labels and conversion _ to be used for labels and conversion popuplIcon Icon of the popup button popupIconOnly FALSE Boolean When enabled popup icon is rendered oo the button navigator FALSE Enables Enables month year navigator navigator timeZone null TimeZone String or a
210. java util TimeZone instance to specify the timezone used for date conversion defaults to TimeZone getDefault 0 readonlyInput FALSE Boolean Makes input text of a popup calendar readonly showButtonPanel FALSE Boolean Visibility of button panel containing today and done buttons effect null String Effect to use when displaying and showing the O calendar effectDuration Duration Duration of the effect o the effect showOn both String Client side event that displays the popup calendar PrimeFaces User s Guide showWeek FALSE Displays the week number next to each week disabled Weekends FALSE Disables weekend columns showOtherMonths FALSE Displays days belonging to other months selectOtherMonths FALSE Boolean Enables selection of days belonging to other months yearRange Year range for the navigator default c 10 c 10 timeOnly Shows only timepicker without date stepHour Hour steps stepMinute Minute steps stepSecond Second steps minHour fo integer Minimum boundary for hour selection maxHour Maximum boundary for hour selection minMinute o fanteger Minimum boundary for minute selection max Minute s9 integer Maximum boundary for hour selection JminSecond O mteger Minimum boundary for second selection FmaxSecond fso mteger Maximum boundary for second selection accesskey null String Access key that when pressed transfers focus to the input element field autocomplete Controls browser autocomplete b
211. ject we suggest adding the code to a javascript file and include in your application Following is a Turkish calendar bug n To override calculated pattern from locale use the pattern option dd MM yyyy 06 07 2010 yy M d 10 7 13 EEE dd MMM yyyy Fri 23 Jul 2010 PrimeFaces User s Guide Effects Various effects can be used when showing and hiding the popup calendar options are e show slideDown fadeIn Ajax Behavior Events Calendar provides a dateSelect ajax behavior event to execute an instant ajax selection whenever a date is selected If you define a method as a listener it will be invoked by passing an org primefaces event DateSelectEvent instance In popup mode calendar also supports regular ajax behavior events like blur keyup and more Date Ranges Using mindate and maxdate options selectable dates can be restricted Values for these attributes can either be a string or a java util Date PrimeFaces User s Guide July 2010 Su Mo Tu We Th Ffr Sa i _ 2 3 4 _ 5 _6 2 _8 9 _20 11 12 13 14 E9 Navigator is an easy way to jump between months years quickly TimePicker O Nov 2010 fe O Su Mo Tu We Th Fr Sa TEE E 7 8 9120 a11 a2 13 14 15 16 17 18 19 20 21 _22 23 24 25 _26 27 28 29 30 TimePicker functionality is enabled by adding time format to your pattern o o November 2011 Su Mo Tu We Th Fr Sa izis e
212. jos are supported if a converter is defined public class OrderListBean private List lt Player gt players public OrderListBeanQ players new ArrayList lt Player gt players add new Player Messi 10 messi jpg players add new Player Iniesta 8 iniesta jpg players add new Player Villa 7 villa jpg players add new Player Xavi 6 xavi jpg getter amp setter for players 282 PrimeFaces User s Guide Header A facet called caption is provided to display a header content for the orderlist Effects An animation is executed during reordering default effect is fade and following options are available for effect attribute e blind bounce e clip e drop e explode fold e highlight e puff e pulsate scale e shake e size slide Skinning OrderList resides in a main container which style and styleClass attributes apply As skinning style classes are global see the main Skinning section for more information Following is the list of structural style classes Style Class Applies ul orderlist Main container element ui orderlist list Container of items ui orderlist item Each item in the list ui orderlist caption Caption of the list 283 PrimeFaces User s Guide 3 67 OutputLabel OutputPanel is a an extension to the standard outputLabel component New Person EJ Lidt15 name Validation Error Value is required Extended Label Validation
213. lass org primefaces component radiobutton RadioButtonRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side e T instance in a backing bean disabled Disabled the Disabled the component o a C e Getting started with RadioButton See custom layout part in SelectOneRadio section for more information 320 PrimeFaces User s Guide 3 80 Rating Rating component features a star based rating system Basic www Calbak wwwwww AjaxRate Owww Readonly fr Disabled Info Tag rating Component Class org primefaces component rating Rating Component Type org primefaces component Rating Component Family org primefaces component Renderer Type org primefaces component RatingRenderer Renderer Class org primefaces component rating RatingRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean value null Object Value of the component than can be either an EL expression of a literal text converter null Converter An el expression or a literal text that defines a String converter for the component When it s an EL expression it s resolved to a converter instan
214. lated When a 422 PrimeFaces User s Guide node is expanded tree only loads the children of the particular expanded node and send to the client for display Multiple TreeNode Types It s a common requirement to display different TreeNode types with a different UI eg icon Suppose you re using tree to visualize a company with different departments and different employees or a document tree with various folders files each having a different formats music video In order to solve this you can place more than one lt p treeNode gt components each having a different type and use that type to bind TreeNode s in your model Following example demonstrates a document explorer To begin with here is the final output v Documents v Work D Expenses doc D Resume doc gt PrimeFaces v Pictures barcelonajpg logo jpg optimusprime png v Movies v Al Pacino amp Scarface Carlitos Way gt Robert De Niro Document Explorer is implemented with four different lt p treeNode gt components and additional CSS skinning to visualize expanded closed folder icons lt p tree value bean root var doc gt lt p treeNode expandedIcon ui icon ui icon folder open colLapsedIcon ui icon ui icon folder collapsed gt lt h outputText value doc name gt lt p treeNode gt lt p treeNode type document icon ui icon ui icon document gt lt h outputText value doc name gt lt p treeNo
215. le options for effects are e explode fold highlight puff pulsate scale shake size slide 418 PrimeFaces User s Guide Html Content Another powerful feature of tooltip is the ability to display custom content as a tooltip not just plain texts An example is as follows Skinning Tooltip has only uwi tooltip as a style class and is styled with global skinning selectors see main skinning section for more information 419 PrimeFaces User s Guide 3 120 Tree Tree is is used for displaying hierarchical data and creating site navigations v Noded v Node 0 0 Node 0 0 0 Node 0 0 1 gt Node 0 1 gt Node 1 Node 2 Info Component Class org primefaces component tree Tree Component Type org primefaces component Tree Component Family org primefaces component Renderer Type org primefaces component TreeRenderer Renderer Class org primefaces component tree TreeRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean widgetVar Name of the client side widget value A TreeNode instance as the backing model var null String Name of the request scoped variable that ll be used to refer each treenode data dynamic FALSE Specifies the ajax client toggleMode cache TRUE Boolean Specifies caching on dyna
216. leClass of the container element effect Name of the effect fade slide or none effectSpeed Speed of the effect slow normal or fast autoDisplay FALSE When true panel is displayed on page load Getting started with NotificationBar As notificationBar is a panel component any content can be placed inside 278 PrimeFaces User s Guide Showing and Hiding To show and hide the content notificationBar provides an easy to use client side api that can be accessed through the widgetVar show displays the bar and hide hides it isVisible and toggle are additional client side api methods Note that notificationBar has a default built in close icon to hide the content Effects Default effect to be used when displaying and hiding the bar is fade another possible effect is slide If you d like to turn off animation set effect name to none In addition duration of the animation is controlled via effectSpeed attribute that can take normal slow or fast as it s value Position Default position of bar is top other possibility is placing the bar at the bottom of the page Note that bar positioning is fixed so even page is scrolled bar will not scroll Skinning style and styleClass attributes apply to the main container element Additionally there are two pre defined css selectors used to customize the look and feel Selector Applies ui notificationbar Main container element ul notific
217. leanButton Component Type org primefaces component SelectBooleanButton Component Family org primefaces component Renderer Type org primefaces component SelectBooleanButtonRenderer Renderer Class org primefaces component selectbooleanbutton SelectBooleanButtonRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean value null Value of the component referring to a List converter null Converter An el expression or a literal text that defines a String 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 immediate FALSE Boolean When set true process validations logic is executed at apply request values phase for this component required FALSE Marks component as required validator null MethodExpr A method expression that refers to a method validationg the input valueChangeListener null MethodExpr A method expression that refers to a method for handling a valuechangeevent 348 Name requiredMessage converterMessage validatorMessage widgetVar disabled label onchange style styleClass onLabel offLabel onIcon offlcon PrimeFaces User s Guide Message to be displayed when required field valid
218. lic MapModel getModel return model public void onMarkerSelect OverlaySelectEvent event Marker selectedMarker Marker event getOverlay add facesmessage InfoWindow A common use case is displaying an info window when a marker is selected gmapInfoWindow is used to implement this special use case Following example displays an info window that contains an image of the selected marker data lt h form gt lt p gmap center 41 381542 2 122893 zoom 15 type hybrid style width 60 px height 4 px model mapBean model gt lt p ajax event overlaySelect listener mapBean onMarkerSelect gt lt p gmapInf oWindow gt lt p graphicImage value images mapBean marker data image gt lt h outputText value mapBean marker data titLe gt lt p gmap InfoWindow gt lt p gmap gt lt h form gt 193 PrimeFaces User s Guide public class MapBean private MapModel model private Marker marker public MapBean model new DefaultMapModel1 add markers public MapModel getModel return model public Marker getMarker return marker public void onMarkerSelect OverlaySelectEvent event this marker Marker event getOverLlayQ t Se 6 Data SIO NOAA U S Navy NGA GEBCO DigitalGlobe GeoEye Terms of Use Street View StreeView is enabled simply by setting streetView option to true lt p gmap center 41 381542 2 122893
219. ll watermarks on page before submitting the form skinInput input Progressively enhances an input element with theming show Watermarks Shows watermarks on form To be compatible with other javascript entities on a page PrimeFaces defines two javascript namespaces PrimeFaces widget Contains custom PrimeFaces widgets like PrimeFaces widget DataTable PrimeFaces widget Tree PrimeFaces widget Poll and more Most of the components have a corresponding client side widget with same name PrimeFaces ajax PrimeFaces ajax namespace contains the ajax API which is described in next section 453 PrimeFaces User s Guide 7 2 Ajax API PrimeFaces Ajax Javascript API is powered by jQuery and optimized for JSF Whole API consists of three properly namespaced simple javascript functions PrimeFaces ajax AjaxRequest Sends ajax requests that execute JSF lifecycle and retrieve partial output Function signature is as follows Configuration Options Description formId Id of the form element to serialize if not defined parent form of source is used async Flag to define whether request should go in ajax queue or not default is false global Flag to define if p ajaxStatus should be triggered or not default is true update Component s to update with ajax TOCeSS Component s to process in partial request p p p p q Client id of the source component causing the request Additional parameters t
220. ll Converter An el expression or a literal text that defines a String 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 immediate FALSE Boolean When set true process validations logic is executed at a request values phase for this component required FALSE Marks component as Marks component as required 298 PrimeFaces User s Guide validator null MethodExpr A method expression that refers to a method validationg the input valueChangeListener null MethodExpr A method binding expression that refers to a method for handling a valuechangeevent requiredMessage null String Message to be displayed when required field validation fails promptLabel Please String Label of prompt enter a password Id of another password component to match value against accesskey null String Access key that when pressed transfers focus to the input element Alternate textual description of the input field Controls browser autocomplete behavior dir null String Direction indication for text that does not inherit directionality Valid values are LTR and RTL disabled FALSE Disables input field lang null String Code describing the language used in the generated markup for this component maxlength null Integer Maximum number of characters that may be entered in this field onblur null String Client side callback to execute when
221. lobal see the main Skinning section for more information 378 PrimeFaces User s Guide 3 103 Slider Slider is used to provide input with various customization options like orientation display modes and skinning 21 Info Component Class org primefaces component slider Slider Component Type org primefaces component Slider Component Family org primefaces component Renderer Type org primefaces component SliderRenderer Renderer Class org primefaces component slider SliderRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side eee instance in a backing bean Id of the Td of the input text that the slider will be used for text that the slider will be used for ee Id of the component to display the slider value Inline a of the container element styleClass Style class of the container element class of the container element animate TRUE Boolean Boolean value to enable disable the animated move when a a of slider is clicked Sets the Sets the type of the slider horizontal or vertical of the slider horizontal or vertical pe fine Fixed pixel increments that the slider move in disabled FALSE Disables or enables the slider PrimeFaces User s Guide onSlideStart Client side callback to execute when slide begins onSlide Client side callback
222. lper oot Helper element to display when dragging revert FALSE Boolean Reverts draggable to it s original position when not dropped onto a valid droppable FALSE Draggable will snap to edge of near elements 151 PrimeFaces User s Guide null String Specifies the snap mode Valid values are both inner and outer wm E o2 Distance from the snap element in pixels to trigger E jrindex O ZIndex to Zindex to apply during dragging during dragging Defines the opacity of the helper during dragging stack null String In stack mode draggable overlap is controlled automatically using the provided selector dragged item always overlays other draggables Scope key to match draggables and droppables dashboard Id of the dashboard to connect with Getting started with Draggable Any component can be enhanced with draggable behavior basically this is achieved by defining the id of component using the for attribute of draggable If you omit the for attribute parent component will be selected as the draggable target Handle By default any point in dragged component can be used as handle if you need a specific handle you can define it with handle option Following panel is dragged using it s header only 152 PrimeFaces User s Guide lt p panel id pnl header Draggable Panel gt lt h outputText value I can only be dragged using my header gt lt p panel gt lt p draggable for
223. lt h panelLGrid gt lt p fieldset gt Toggleable Fieldset Francis Ford Coppola s legendary continuation and sequel to his landmark 1972 film The_Godfather parallels the young Vito Corleone s rise with his son Michael s spiritual fall deepening The_Godfather s depiction of the dark side of the American dream In the early 1900s the child Vito flees his Sicilian village for America after the local Mafia kills his family Vito struggles to make a living legally or illegally for his wife and growing brood in Little Italy killing the local Black Hand Fanucci after he demands his customary cut of the tyro s business With Fanucci gone Vito s communal stature grows 171 PrimeFaces User s Guide Ajax Behavior Events toggle is the default and only ajax behavior event provided by fieldset that is processed when the content is toggled In case you have a listener defined it will be invoked by passing an instance of org primefaces event ToggleEvent Here is an example that adds a facesmessage and updates growl component when fieldset is toggled lt p growld id messages gt lt p fieldset Legend Toggleable Fieldset toggleable true lt p ajax listener bean onToggle update messages gt content lt p fieldset gt public void onToggleCToggleEvent event Visibility visibility event getVisibilityQ FacesMessage msg new FacesMessage msg setSummary Fieldset event getIdQ toggled msg se
224. lt p coLumn gt lt p coLumn gt lt f facet name header gt Size lt f facet gt lt h outputText value document size gt lt p coLumn gt lt p coLumn gt lt f facet name header gt Type lt f facet gt lt h outputText value document type gt lt p coLumn gt lt p treeTable gt 430 PrimeFaces User s Guide Backing model is same as the documents example in tree Selection Node selection is a built in feature of tree and it supports two different modes Selection should be a TreeNode for single case and an array of TreeNodes for multiple case tree finds the selected nodes and assign them to your selection model single Only one at a time can be selected selection should be a TreeNode reference multiple Multiple nodes can be selected selection should be a TreeNode reference Ajax Behavior Events TreeTable provides various ajax behavior events to respond user actions org primefaces event NodeExpandEvent When a node is expanded org primefaces event NodeCollapseEvent When anode is collapsed org primefaces event NodeSelectEvent When a node is selected org primefaces event NodeUnselectEvent When anode is unselected org primefaces event ColumnResizeEvent When a column is resized ContextMenu TreeTable has special integration with context menu you can even match different context menus with different tree nodes using nodeType option of context menu that matches the tre
225. lt script type text javascript gt function handleChangeCpanel panel new tab content container lt script gt Ajax Behavior Events tabChange is the one and only ajax behavior event of accordion panel that is executed when a tab is toggled lt p accordionPanel gt lt p ajax event tabChange listener bean onChange gt lt p accordionPanel gt public void onChangeCTabChangeEvent event Tab activeTab event getTab a Your listener if defined will be invoked with an org primefaces event TabChangeEvent instance that contains a reference to the new active tab and the accordion panel itself Dynamic Number of Tabs When the tabs to display are not static use the built in iteration feature similar to u1 repeat lt p accordionPanel value bean 1list var ListItem gt lt p tab title 1listItem propertyA gt lt h outputText value ListItem propertyB gt More content lt p tab gt lt p accordionPanel gt PrimeFaces User s Guide Disabled Tabs A tab can be disabled by setting disabled attribute to true Multiple Selection By default only one tab at a time can be active enable multiple mode to activate multiple tabs Client Side API Widget PrimeFaces widget AccordionPanel select index index Index of tab to display Activates tab with given index unselect index index Index of tab to hide Deactivates tab with given index Ski
226. mage and buttonImageOnly attributes 242 PrimeFaces User s Guide 3 53 Layout Layout component features a highly customizable borderLayout model making it very easy to create complex layouts even if you re not familiar with web design lt http localhost 8080 prime showcase ui layoutComplex jsf a PrimeFaces ShowCase PRIMEFACES Next Generation Component Suite TS ee rr ar Menu 1 Change Theme redmond A o o July 2010 month week day eect m ies vie wad a Su Mo Tu We Th Fr Sa 1 2 3 PEDE nEn EEN 11 12 13 14 15 16 17 18 19 20 21 22 23 24 4 5 6 ae 10 25 26 27 28 29 30 31 z Ew Menu 2 Menu 3 Info Attributes Unique identifier of the component rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean aie obi lien da da fullPage FALSE Specifies whether layout should span all page or not 243 PrimeFaces User s Guide style null String Style to apply to container element this is only applicable to element based layouts styleClass null String Style class to apply to container element this is only applicable to element based layouts onResize Client side callback to execute when a layout unit is resized closeTitle Title label of the close button Getting started with
227. mefaces component Renderer Type org primefaces component FeedReaderRenderer Renderer Class org primefaces component feedreader Feed ReaderRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side oo instance in a backing bean Getting started with FeedReader FeedReader requires a feed url to display and renders it s content for each feed item Note that you need the ROME library in your classpath to make feedreader work 169 PrimeFaces User s Guide 3 34 Fieldset Fieldset is a grouping component as an extension to html fieldset Simple FieldSet The story begins as Don Vito Corleone the head of a New York Mafia family oversees his daughter s wedding His beloved son Michael has just come home from the war but does not intend to become part of his father s business T hrough Michael s life the nature of the family business becomes clear The business of the family is just like the head of the family kind and benevolent to those who give respect but given to ruthless violence whenever anything stands against the good of the family Info Tag fieldset Component Class org primefaces component fieldset Fieldset Component Type org primefaces component Fieldset Component Family org primefaces component Renderer Type org primefaces component FieldsetRende
228. mically loaded nodes When set to true expanded nodes will be kept in memory 420 PrimeFaces User s Guide onNodeClick Javascript event to process when a tree node is clicked selection Object TreeNode array to reference the selections style Style of the main container element of tree styleClass Style class of the main container element of tree selectionMode Defines the selectionMode highlight Highlights nodes on hover when selection is enabled datakey Unique key of the data presented by nodes Getting started with the Tree Tree is populated with a org primefaces model TreeNode instance which corresponds to the root TreeNode API has a hierarchical data structure and represents the data to be populated in tree public class TreeBean private TreeNode root public TreeBean root new TreeNode Root null TreeNode node new TreeNodeC Node 0 root TreeNode node1 new TreeNodeC Node 1 root TreeNode node2 new TreeNodeC Node 2 root TreeNode node Q new TreeNode Node 0 0 nodeQ TreeNode node 1 new TreeNodeC Node Q 1 nodeQ TreeNode node1 new TreeNode Node 1 0 node1 TreeNode node11 new TreeNode Node 1 1 node1 TreeNode node QQ new TreeNodeC Node 0 0 0 nodeQQ TreeNode node Q1 new TreeNodeC Node 0 0 1 nodeQ Q TreeNode node 10 new TreeNodeC Node 0 1 0 nodeQ1 TreeNode node100 new TreeNodeC Node 1 0 0 node10 getter Then specify a
229. ml Portlet configuration file should be located under WEB INF folder This portlet has two modes view and edit lt xml version 1 Q gt lt portlet app xmlns http java sun com xml ns portLlet portLlet app_2_Q xsd version 2 0 xmLns xsi http www w3 org 2Q 01 XMLSchema instance xsi schemaLocation http java sun com xml ns portlet portlet app_2_0 xsd http java sun com xmL ns portlet portlet app_2_Q xsd gt lt portlet gt lt portlet name gt 1 lt portlet name gt lt display name gt PrimeFaces Portlet lt display name gt lt portlet class gt org portLetfaces bridge GenericFacesPortLet lt portlet class gt lt init param gt lt name gt javax portlet faces defaultViewId view lt name gt lt value gt view xhtml lt value gt lt init param gt lt init param gt lt name gt javax portlet faces defaultViewId edit lt name gt lt value gt edit xhtml lt value gt lt init param gt lt supports gt lt mime type gt text html lt mime type gt lt portlLet mode gt view lt portlet mode gt lt portlet mode gt edit lt portlet mode gt lt supports gt lt portlet info gt lt titlLe gt PrimeFaces Portlet lt title gt lt short title gt PrimeFaces Portlet lt short titLle gt lt keywords gt JSF 2 0 lt keywords gt lt portlet info gt lt portlet gt lt portlet app gt web xml Faces Servlet is only necessary to initialize JSF framework internals lt xml version 1 encoding UTF 8 gt l
230. n 1 itemValue 1 gt lt f selectItem itemLabel Option 2 itemValue 2 gt lt f selectItem itemLabel Option 3 itemValue 3 gt lt p selectOneRadio gt lt h panelGrid columns 3 gt lt p radioButton id opti for customRadio itemIndex Q gt lt h outputLabel for opt1i value Option 1 gt lt p spinner gt lt p radioButton id opt2 for customRadio itemIndex 1 gt lt h outputLabel for opt2 value Option 2 gt lt p inputText gt lt p radioButton id opt3 for customRadio itemIndex 2 gt lt h outputLabel for opt3 value Option 3 gt lt p calendar gt lt h panelGrid gt 369 PrimeFaces User s Guide RadioButton s for attribute should refer to a selectOneRadio component and itemIndex points to the index of the selectItem When using custom layout option selectOneRadio component should be placed above any radioButton that points to the selectOneRadio Skinning SelectOneRadio resides in a main container which style and styleClass attributes apply As skinning style classes are global see the main Skinning section for more information Following is the list of structural style classes Style Class Applies ui radiobutton Container of a radio button ui radiobutton box Container of radio button icon ui radiobutton icon Radio button icon 370 PrimeFaces User s Guide 3 100 Separator Seperator displays a horizontal line to separate content Info
231. n button onmouseout null String Client side callback to execute when a pointer button is moved away from button onmouseover null String Client side callback to execute when a pointer button is moved onto button PrimeFaces User s Guide onmouseup null String Client side callback to execute when a pointer button is released over button onselect null String Client side callback to execute when text within button is selected by user accesskey null String Access key that when pressed transfers focus to the button String Alternate textual description of the button null String Direction indication for text that does not inherit directionality Valid values are LTR and RTL disabled FALSE Boolean Disables the button image String Style class for the button icon deprecated use icon label String A localized user presentable name lang null String Code describing the language used in the generated markup for this component tabindex Integer Position of the button element in the tabbing order title String Advisory tooltip information readonly FALSE Boolean Flag indicating that this component will prevent changes by the user icon String Icon of the button as a css class widgetVar String Name of the client side widget Getting started with SplitButton SplitButton usage is similar to a regular commandButton Additional commands are placed inside the component and displayed in an overlay In example below clicking t
232. n display images multimedia content other JSF components and external urls Info Attributes id mutt String Unique identifier of the component identifier of the component rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance ina a ee o bean Name of the client side Name of the client side widget Style of the container element not the overlay element styleClass Style class of the container element not the overlay element 250 PrimeFaces User s Guide Width of the overlay in iframe mode Height of the overlay in iframe mode Images The images displayed in the lightBox need to be nested as child outputLink components Following lightBox is displayed when any of the links are clicked IFrame Mode LightBox also has the ability to display iframes inside the page overlay following lightbox displays the PrimeFaces homepage when the link inside is clicked Clicking the outputLink will display PrimeFaces homepage within an iframe Inline Mode Inline mode acts like a modal dialog you can display other JSF content on the page using the lightbox overlay Simply place your overlay content in the inline facet Clicking the link in the example below will display the panelGrid contents in overlay 251 PrimeFaces User s Guide
233. n phase FALSE When set to true ajax requests are not queued process null String Component id s to process partially instead of whole view update null String Client side id of the component s to be updated after async partial submit request 209 PrimeFaces User s Guide Name Default type OOOO Deeriin O Description onstart null String Javascript handler to execute before ajax request is begins oncomplete null String Javascript handler to execute when ajax request is completed onsuccess null String Javascript handler to execute when ajax request succeeds onerror null String Javascript handler to execute when ajax request fails global TRUE Boolean Global ajax requests are listened by ajaxStatus component setting global to false will not trigger ajaxStatus partialSubmit TRUE Boolean Enables serialization of values belonging to the partially processed components only Getting Started with HotKey HotKey is used in two ways either on client side with the event handler or with ajax support Simplest example would be When this hotkey is on page pressing the a key will alert the Pressed key a text Key combinations Most of the time you d need key combinations rather than a single key Integration Here s an example demonstrating how to integrate hotkeys with a client side api Using left and right keys will switch the images displayed via the p imageSwitch component 210 Prime
234. n value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean 295 PrimeFaces User s Guide columns fo integer Number of columns in grid style Inline style of the panel styleClass Style class of the panel columnClasses Comma separated list of column style classes Getting started with PanelGrid Basic usage of panelGrid is same as the standard one lt p panelGrid columns 2 gt lt h outputLabel for firstname value Firstname gt lt p inputText id firstname value bean firstname label Firstname gt lt h outputLabel for Surname value Surname gt lt p inputText id surname value bean surname Label Surname gt lt p paneLGrid gt Header and Footer PanelGrid provides facets for header and footer content lt p panelGrid columns 2 gt lt f facet name header gt Basic PanelGrid lt f facet gt lt h outputLabel for firstname value Firstname gt lt p inputText id firstname value bean firstname label Firstname gt lt h outputLabel for Surname value Surname gt lt p inputText id surname value bean surname Label Surname gt lt f facet name footer gt lt p commandButton type button value Save icon ui 1con check gt lt f facet gt lt p paneLGrid gt Basic PanelGrid
235. nate textual description of the button of the button Direction indication for text that does not inherit directionality Valid values are LTR and RTL disabled FALSE Disables the button ee class for the button icon deprecated use icon abel A localized user A localized user presentable name name lang null String Code describing the language used in the generated E a for this component ee Position of the button element in the Position of the button element in the tabbing order order title Advisory tooltip information readonly FALSE Boolean Flag indicating that this component will prevent changes by the user Getting started with CommandButton CommandButton usage is similar to standard commandButton by default commandButton submits its enclosing form with ajax 95 PrimeFaces User s Guide Reset Buttons Reset buttons do not submit the form just resets the form contents Push Buttons Push buttons are used to execute custom javascript without causing an ajax non ajax request To create a push button set type as button AJAX and Non AJAX CommandButton has built in ajax capabilities ajax submit is enabled by default and configured using ajax attribute When ajax attribute is set to false form is submitted with a regular full page refresh The update attribute is used to partially update other component s after the ajax response is received Update attribute takes a comma or white space separate
236. nent Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean Getting Started with Row See datatable grouping section for more information about how row is used 334 PrimeFaces User s Guide 3 85 RowEditor RowEditor is a helper component for datatable Info Component Class org primefaces component roweditor RowEditor Component Type org primefaces component RowEditor Component Family org primefaces component Renderer Type org primefaces component RowEditorRenderer Renderer Class org primefaces component roweditor RowEditorRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean Getting Started with RowEditor See inline editing section in datatable documentation for more information about usage 335 PrimeFaces User s Guide 3 86 RowExpansion RowExpansion is a helper component of datatable used to implement expandable rows Info Tag rowExpansion Component Class org primefaces component rowexpansion RowExpansion Component Type org primefaces component RowExpansion Component Family org primefaces component
237. ng Languae code of the resource designated by the link rel null String Relationship from the current document to the anchor specified by the link values are provided by a space separated list of link types rev null String A reverse link from the anchor specified by this link to the current document values are provided by a space separated list of link types shape null String Shape of hot spot on the screen valid values are default rect circle and poly tabindex null Integer Position of the button element in the tabbing order target null String Name of a frame where the resource targeted by this link will be O ite Advisory tooltip information tooltip information Getting Started with CommandLink CommandLink is used just like the standard h commandLink difference is form is submitted with ajax by default Skinning CommandLink renders an html anchor element that style and styleClass attributes apply 100 PrimeFaces User s Guide 3 20 ConfirmDialog ConfirmDialog is a replacement to the legacy javascript confirmation box Skinning customization and avoiding popup blockers are notable advantages over classic javascript confirmation A Are you sure about destroying the world Not Yet Yes Sure Info Tag confirmDialog Component Class org primefaces component confirmdialog ConfirmDialog Component Type org primefaces component ConfirmDialog Component Family org primefaces component Renderer Type org
238. nning AccordionPanel resides in a main container element which style and styleClass options apply Following is the list of structural style classes As skinning style classes are global see the main Skinning section for more information 17 PrimeFaces User s Guide 3 2 AjaxBehavior AjaxBehavior is an extension to standard f ajax Info Tag Behavior Id org primefaces component AjaxBehavior Behavior Class org primefaces component behavior ajax AjaxBehavior Attributes MethodExpr Method to process in partial request Boolean value that determines the phaseld when true actions are processed at apply request values when false at invoke_application phase oa global to false will not trigger ajaxStatus Disables ajax behavior o ajax behavior Getting Started with AjaxBehavior AjaxBehavior is attached to the component to ajaxify 18 PrimeFaces User s Guide In the example above each time the input changes an ajax request is sent to the server When the response is received output text with id out is updated with value of the input Listener In case you need to execute a method on a backing bean define a listener lt h inputText id counter gt lt p ajax update out Listener counterBean increment gt lt h inputText gt lt h outputText id out value counterBean count gt public class CounterBean private int count public int getCount return count
239. nput element onmouseout null String Client side callback to execute when a pointer button is moved away from input element 25 o a PrimeFaces User s Guide onmouseover null String Client side callback to execute when a pointer button is moved onto input element onmouseup null String Client side callback to execute when a pointer button is released over input element onselect null String Client side callback to execute when text within input element is selected by user readonly FALSE Boolean Flag indicating that this component will prevent changes by the user size null Integer Number of characters used to determine the width of the input element styleClass Style class of the input element order Getting Started with AutoComplete Suggestions are loaded by calling a server side completeMethod that takes a single string parameter which is the text entered Since autoComplete is an input component it requires a value as usual lt p autoComplete value bean text completeMethod bean compLete gt public class Bean private String text public List lt String gt completeCString query List lt String gt results new ArrayList lt String gt Q for Cint i 0 i lt 10 i results addCquery i return results getter setter 26 PrimeFaces User s Guide Pojo Support Most of the time instead of simple strings you would need work with your domain objects aut
240. nput not select Update input components that are disabled update C input disabled PFS can be used with regular component referencing as well update compId form compId C input 446 PrimeFaces User s Guide PFS provides an alternative flexible grouping based approach to reference components to partially process and update There is less CPU server load compared to regular referencing because JSF component tree is not traversed on server side to find a component and figure out the client id as PFS is implemented on client side by looking at dom tree Another advantage is avoiding naming container limitations just remember the times you ve faced with cannot find component exception since the component you are looking for is in a different naming container like a form or a datatable PFS can help you out in tricky situations by following jQuery s write less do more style For full reference of jQuery selector api see 447 PrimeFaces User s Guide 5 PrimeFaces Mobile PrimeFaces Mobile is a separate project with it s own release cycle and documentation Please consult Mobile User s Guide for more information 448 PrimeFaces User s Guide 6 PrimeFaces Push PrimePush enables implementing push based use cases powered by WebSockets PushServer and JSF application are two different applications Pushed data from JSF app is send to the push server which is then pushed to all connected cl
241. nse is received with error e complete When everything finishes lt p ajaxStatus gt lt f facet name prestart gt lt h outputText value Starting gt lt f facet gt lt f facet name error gt lt h outputText value Error gt lt f facet gt lt f facet name Success gt lt h outputText value Success lt f facet gt lt f facet name default gt lt h outputText value Idle gt lt f facet gt lt f facet name start gt lt h outputText value Sending lt f facet gt lt f facet name complete gt lt h outputText value Done gt lt f facet gt lt p ajaxStatus gt 21 PrimeFaces User s Guide Custom Events Facets are the declarative way to use if you d like to implement advanced cases with scripting you can take advantage of on callbacks which are the event handler counterparts of the facets A comman usage of programmatic approach is to implement a custom status dialog Client Side API Widget PrimeFaces widget AjaxStatus bindFacet eventName facetId eventName Name of Binds a facet to an event status event facetId Element id of facet container bindCallback eventName fn eventName Name of Binds a function to an status event event fn function to bind Skinning AjaxStatus is equipped with style and styleClass Styling directly applies to a container element which contains the facets Tips e Avoid updating ajaxStatus itself to
242. nt is double clicked onfocus null String Client side callback to execute when input element receives focus onkeydown null String Client side callback to execute when a key is pressed down over input element onkeypress null String Client side callback to execute when a key is pressed and released over input element onkeyup null String Client side callback to execute when a key is released over input element onmousedown null String Client side callback to execute when a pointer button is pressed down over input element onmousemove null String Client side callback to execute when a pointer button is moved within input element onmouseout null String Client side callback to execute when a pointer button is moved away from input element onmouseover null String Client side callback to execute when a pointer button is moved onto input element onmouseup null String Client side callback to execute when a pointer button is released over input element onselect null String Client side callback to execute when text within input element is selected by user readonly FALSE Boolean Flag indicating that this component will prevent changes by the user size null Integer Number of characters used to determine the width of the ne el element style Inline Inline style of the input element of the input element PrimeFaces User s Guide Getting Started with Keyboard Keyboard is used just like a simple inputText by default when th
243. nuRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean widgetVar Name of the client side widget Id of the component to attach to style Style of the main container element styleClass Style class of the main container element model Menu model instance to create menu programmatically nodeType Specific type of tree nodes to attach to event null String Event to bind contextMenu display default is contextmenu aka right click 104 PrimeFaces User s Guide Getting started with ContextMenu ContextMenu is created with submenus and menuitems Optional for attribute defines which component the contextMenu is attached to When for is not defined contextMenu is attached to the page meaning right click on anywhere on page will display the menu lt p contextMenu gt lt p menuitem value Save actionListener bean save update msg gt lt p menuitem value Delete actionListener bean delete ajax false gt lt p menuitem value Go Home url www primefaces org target _blank gt lt p contextMenu ContextMenu example above is attached to the whole page and consists of three different menuitems with different use cases First menuitem triggers an ajax action second one triggers a non ajax action and third one is u
244. null String Client side callback to execute when a key is pressed and released over input element onkeyup null String Client side callback to execute when a key is released over input element onmousedown null String Client side callback to execute when a pointer button is pressed down over input element onmousemove null String Client side callback to execute when a pointer button is moved within input element onmouseout null String Client side callback to execute when a pointer button is moved away from input element 232 PrimeFaces User s Guide onmouseover null String Client side callback to execute when a pointer button is moved onto input element onmouseup null String Client side callback to execute when a pointer button is released over input element onselect null String Client side callback to execute when text within input element is selected by user readonly FALSE Boolean Flag indicating that this component will prevent changes by the user size null Integer Number of characters used to determine the width of the input element Getting Started with InputText InputText usage is same as standard inputText Skinning style and styleClass options apply to the input element As skinning style classes are global see the main Skinning section for more information 233 PrimeFaces User s Guide 3 51 InputTextarea InputTextarea is an extension to standard inputTextara with skinning capabilities and au
245. o Tu We Th Fr Sa Ba 4 S 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 Popup Icon Only es i July 2010 Su Mo Tu We Th Fr Sa als 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 Paging Calendar can also be rendered in multiple pages where each page corresponds to one month This feature is tuned with the pages attribute o July 2010 August 2010 September 2010 o Su Mo Tu We Th Fr Sa Su Mo Tu We Th Fr Sa Su Mo Tu We Th Fr Sa Bete HEESE Ez ILAR 8 4 5 6 7 9 10 8 9 10 11 12 13 14 5 6 7 8 9 10 11 11 12 23 14 15 16 17 15 16 17 18 19 20 21 12 13 14 15 16 17 18 18 19 20 21 22 23 24 22 23 24 25 26 27 28 19 20 21 22 23 24 25 25 26 27 28 29 30 31 29 30 31 26 27 28 29 30 PrimeFaces User s Guide Localization By default locale information is retrieved from the view s locale and can be overridden by the locale attribute Locale attribute can take a locale key as a String or a java util Locale instance Default language of labels are English and you need to add the necessary translations to your page manually as PrimeFaces does not include language translations PrimeFaces Wiki Page for PrimeFacesLocales is a community driven page where you may find the translations you need Please contribute to this wiki with your own translations Translation is a simple javascript ob
246. o send in ajax request onstart Javascript callback to process before sending the ajax request return false to cancel the request onsuccess data status xhr args Javascript callback to process when ajax request returns with success code Takes four arguments xml response status code xmlhttprequest and optional arguments provided by RequestContent API onerror xhr status exception Javascript callback to process when ajax request fails Takes three arguments xmlhttprequest status string and exception thrown if any oncomplete xhr status args Javascript callback to process when ajax request completes Takes three arguments xmlhttprequest status string and optional arguments provided by RequestContext API 454 PrimeFaces User s Guide Examples Suppose you have a JSF page called createUser with a simple form and some input components lt h form id userForm gt lt h inputText id username value userBean user name gt More components lt h form gt You can post all the information in form with ajax using PrimeFaces ajax AjaxRequest formId userForm source userForm process userForm rOl More complex example with additional options PrimeFaces ajax AjaxRequest formId userForm source userForm process userForm update msgs params param_name1 valuel param_name2 value2 oncompLl
247. oComplete supports this common use case with the use of a converter and data iterator Following example loads a list of players itemLabel is the label displayed as a suggestion and item Value is the submitted value Note that when working with pojos you need to plug in your own converter lt p autoComplete value playerBean selectedPlayer compLeteMethod pLayerBean completePLayer var pLlayer itemLabel pLayer name itemValue pLayer converter pLayerConverter gt public class PlayerBean private Player selectedPlayer public Player getSelectedPlayerQ return selectedPlayer public void setSelectedPlayer Player selectedPlayer this selectedPlayer selectedPlayer public List lt Player gt complete String query List lt Player gt players readPlayersFromDatasource query return players public class Player private String name getter setter Limiting the Results Number of results shown can be limited by default there is no limit lt p autoComplete value bean text comp LeteMethod bean compLlete maxResuLts 5 gt 27 PrimeFaces User s Guide 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 This behavior is tuned using the minQueryLength attribute lt p autoComplete value bean text completeMethod bean complete minQueryLength 3 gt With
248. oLumnGroup gt lt p dataTable gt 134 PrimeFaces User s Guide public class CarBean private List lt Manufacturer gt sales public CarBeand sales create a list of BrandSale objects public List lt ManufacturerSale gt getSales return this sales Sales Manufacturer Sales Count Profit Last Year This Year Last Year This Year Mercedes 90 8 28031 25102 BMW 14 91 18640 28023 Volvo 82 24 130 77724 Audi 7 40 2272S 33672 Renault 10 54 98115 40664 Opel 63 28 10549 93746 Volkswagen 67 38 38242 19063 Chrysler 40 63 10146 76975 Ferrari 26 70 40384 62298 Ford 14 94 96052 42233 Totals 342561 430222 Scrolling Scrolling is a way to display data with fixed header amp footer in order to enable scrolling set scrollable option to true define a fixed height and or width in pixels and set a fixed width to each column It is important to use width attribute of column instead of style attribute for scrollable case lt p dataTable var car value bean data scrollable true scrol LHeight 150 gt lt p coLumn width 100 gt columns lt p dataTable gt Model Year Manufacturer Color 069794d7 1991 Volvo Silver 0 4aeeec6c 1993 Ford Green O9cbc0Se 1983 Chrysler Maroon 2d374a04 1964 Ferrari Red 9c09bc54 1987 Volkswagen Blue 25d45a08 1993 Opel White Model Year Year Year 135 PrimeFaces User s Guide Simple scrolling renders all data to cli
249. oard is backed by a DashboardModel and consists of panel components 107 PrimeFaces User s Guide lt p dashboard model bean mode1l gt lt p panel id Ssports gt Sports Content lt p panel gt lt p panel id finance gt Finance Content lt p panel gt more panels like lifestyle weather politics lt p dashboard gt Dashboard model simply defines the number of columns and the widgets to be placed in each column See the end of this section for the detailed Dashboard API public class Bean private DashboardModel model public Bean model new DefaultDashboardModel DashboardColumn columni new DefaultDashboardColumn DashboardCoLlumn column2 new DefaultDashboardCoLlumn DashboardColumn column3 new DefaultDashboardColumn coLumn1 addWidgetC sports coLumn1 addWidgetC finance coLumn2 addWidgetC Lifestyle coLumn2 addWidgetC weather coLumn3 addWidgetC politics model addCoLumnCcoLumn1 model addCoLumnCcoLumn2 model addCoLumnCcoLumn3 State Dashboard is a stateful component whenever a widget is reordered dashboard model will be updated by persisting the user changes so you can easily create a stateful dashboard Ajax Behavior Events reorder is the one and only ajax behavior event provided by dashboard this event is fired when dashboard panels are reordered A defined listener will be invoked by passing an org primefaces event DashboardR
250. of structural style classes Style Class Applies ui carousel header Header container ui carousel header title Header content 59 PrimeFaces User s Guide As skinning style classes are global see the main Skinning section for more information Tips e Carousel is a NamingContainer make sure you reference components outside of carousel properly following conventions 60 PrimeFaces User s Guide 3 11 CellEditor CellEditor is a helper component of datatable used for incell editing Info Tag cellEditor Component Class org primefaces component celleditor CellEditor Component Type org primefaces component CellKditor Component Family org primefaces component Renderer Type org primefaces component CellEditorRenderer Renderer Class org primefaces component celleditor CellEditorRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean Getting Started with CellEditor See inline editing section in datatable documentation for more information about usage 61 PrimeFaces User s Guide 3 12 Charts Charts are used to display graphical data There re various chart types like pie bar line and more 3 12 1 Pie Chart Pie chart displays category data pairs in a pie graphic Info Tag pieChart
251. ommandLinkRenderer org primefaces component commandlink CommandLinkRenderer i rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean action null MethodExpr String A method expression or a String outcome that d be processed when link is clicked MethodExpr An actionlistener that d be processed when link is clicked immediate FALSE Boolean When set to true ajax requests are not queued process null String Component s to process partially instead of whole view Boolean Boolean value that determines the phaseld when true actions are processed at apply_request_values when false at invoke_application phase String Component s to be updated with ajax ajax TRUE Boolean Specifies the submit mode when set to true default submit would be made with Ajax onstart null String Client side callback to execute before ajax request is begins PrimeFaces User s Guide oncomplete null String Client side callback to execute when ajax request is completed onsuccess null String Client side callback to execute when ajax request succeeds onerror Client side callback to execute when ajax request fails partially processed components only onblur null String Client side callback to execute when link loses focus onclick null String Client side
252. omponent instance in a backing bean onstart null String Client side callback to execute after ajax requests start oncomplete null String Client side callback to execute after ajax requests complete onprestart null Client side callback to execute before ajax requests start onerror null String Client side callback to execute when an ajax request fails style null Inline style of the component styleClass null Style class of the component widgetVar null Name of the client side widget 20 onsuccess null String Client side callback to execute after ajax requests completed succesfully PrimeFaces User s Guide Getting Started with AjaxStatus AjaxStatus uses facets to represent the request status Most common used facets are start and complete Start facet will be visible once ajax request begins and stay visible until it s completed Once the ajax response is received start facet becomes hidden and complete facet shows up lt p ajaxStatus gt lt f facet name start gt lt p graphicImage value ajaxloading gif gt lt f facet gt lt f facet name complete gt lt h outputText value Done gt lt f facet gt lt p ajaxStatus gt Events Here is the full list of available event names e default Initially visible when page is loaded e prestart Before ajax request is sent e start After ajax request begins e success When ajax response is received without error e error When ajax respo
253. on 163 PrimeFaces User s Guide Custom Toolbar Toolbar of editor is easy to customize using controls option Here is the full list of all available controls bold gt justify italic e undo underline redo strikethrough rule subscript image superscript link font unlink size cut style copy color paste highlight pastetext bullets print numbering source alignleft outdent center indent alignright removeFormat Client Side API Widget PrimeFaces widget Editor init void Initializes a lazy editor subsequent calls do not reinit the editor saveHTML Pf void Saves html text in iframe back to the textarea clear P void Clears the text in editor 164 PrimeFaces User s Guide enable a o a Enables editing disable O p void Disables editing Skinning Following is the list of structural style classes Editor is not integrated with ThemeRoller as there is only one icon set for the controls 165 PrimeFaces User s Guide 3 32 Effect Effect component is based on the jQuery UI effects library Info Tag Class org primefaces component effect EffectTag Component Class org primefaces component effect Effect Component Type org primefaces component Effect Component Family org primefaces component Renderer Type org primefaces component EffectRenderer Renderer Class org primefaces component effect EffectRenderer Attributes rendered TRUE Boolean Boolean value to specif
254. on e prev Button to move calendar back one month week day e next Button to move calendar forward one month week day e prevYear Button to move calendar back one year e nextYear Button to move calendar forward one year e today Button to move calendar to current month week day e viewName Button to change the view type based on the view type These controls can be placed at three locations on header which are defined with leftHeaderTemplate rightHeaderTemplate and centerTemplate attributes lt p schedule value scheduleBean modelL LeftHeaderTemplate today rightHeaderTemplate prev next centerTempLate month agendaWeek agendaDay lt p schedule gt month j oo Sun Mon Tue Wed Thu Fri Sat 343 PrimeFaces User s Guide Views 5 different views are supported these are month agendaWeek agendaDay basic Week and basicDay agendaWeek gt today Jan 31 Feb 6 2010 month day Sun 1 31 Mon 2 1 Tue 2 2 Wed 2 3 Thu 2 4 Fri2 5 Sat 2 6 aday Brak 12am 1am 2am 3am 4am agendaDay Ce ety Sunday Jan 31 2010 month week EA Sunday 1 31 Pi ay Par alday CED 6am basicWeek 344 PrimeFaces User s Guide gt today Jan 31 Feb 62010 month week day Suni ai_ _Mona t__ _Twea a__ _Weda a_ _ Thna a Fria s Sat 2 6 a basicDay a ey Sunday Jan 31 2010 month week day Sunday 1 31 Locale Support By default locale information is ret
255. on Effect duration of animation maxWidth Maximum width boundary in pixels maxHeight Maximum height boundary in pixels minWidth Minimum width boundary in pixels minHeight Maximum height boundary in pixels 327 PrimeFaces User s Guide FALSE Sets resizable boundaries as the parents size Client side callback to execute when resizing begins Client side callback to execute during resizing Client side callback to execute after resizing end Getting started with Resizable Resizable is used by setting for option as the identifier of the target lt p graphicImage id img value campnou jpg gt lt p resizable for img gt Another example is the input fields if users need more space for a textarea make it resizable by lt h inputTextarea id area value Resize me if you need more space gt lt p resizable for area gt 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 lt h inputTextarea id area value Resize me if you need more space gt lt p resizable for area minWidth 20 minHeight 40 maxWidth 50 maxHeight 100 gt Handles Resize handles to display are customize using handles attribute with a combination of n e s w ne se sw and nw as the value Default value is
256. onent SelectOneMenuRenderer org primefaces component selectonemenu SelectOneMenuRenderer rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean converter null Converter An el expression or a literal text that defines a String 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 immediate Boolean When set true process validations logic is executed at apply request values phase for this component FALSE Marks component as required 364 PrimeFaces User s Guide validator null MethodExpr A method expression that refers to a method validationg the input valueChangeListener null MethodExpr A method expression that refers to a method for handling a valuechangeevent requiredMessage null String Message to be displayed when required field validation fails Message to be displayed when conversion fails validatorMessage Message to be displayed when validation fields onkeyup Client side callback to execute on keyup Getting started with SelectOneMenu Basic SelectOneMenu usage is same as the standard one Effects An animation is executed to show and hide the overlay menu default effect is blind and following options are ava
257. onent like a commandButton or commandLink The value of the FileDownload must be an org primefaces model StreamedContent instance We suggest using the built in DefaultStreamedContent implementation First parameter of the constructor is the binary stream second is the mimeType and the third parameter is the name of the file This streamed content should be bound to the value of the fileDownload 174 PrimeFaces User s Guide lt h commandButton value DownLload gt lt p fileDownload value fileBean file gt lt h commandButton gt Similarly a more graphical presentation would be to use a commandlink with an image lt h commandLink value Download gt lt p fileDownload value fileBean file gt lt h graphicImage value pdficon gif gt lt h commandLink gt If you d like to use PrimeFaces commandButton and commandLink disable ajax option as fileDownload requires a full page refresh to present the file lt p commandButton value Download ajax false gt lt p fileDownload value fileBean file gt lt p commandButton gt lt p commandLink value Download ajax false gt lt p fileDownload value fileBean file gt lt h graphicImage value pdficon gif gt lt p commandLink gt ContentDisposition By default content is displayed as an attachment with a download dialog box another alternative is the inline mode in this case browser will try to open the file internally
258. opEvent event Car car Car ddEvent getDataQ droppedCars add car availableCars remove car 157 PrimeFaces User s Guide lt h form id carForm gt lt p fieldset Legend AvailableCars gt lt p dataGrid id availableCars var car value tableBean availableCars columns 3 gt lt p coLumn gt lt p panel id pnl header car model style text align center gt lt p graphicImage value images cars car manufacturer jpg gt lt p panel gt lt p draggable for pnl revert true h andle ui panel titlebar stack ui panel gt lt p coLumn gt lt p dataGrid gt lt p fieldset gt lt p fieldset id selectedCars lLegend Selected Cars style margin top 2 px gt lt p outputPanel id dropArea gt lt h outputText value Drop here rendered empty tableBean droppedCars style font size 24px gt lt p dataTable var car value tableBean droppedCars rendered not empty tableBean droppedCars gt lt p coLumn headerText Model gt lt h outputText value car model gt lt p coLumn gt lt p coLumn headerText Year gt lt h outputText value car year gt lt p coLumn gt lt p column headerText Manufacturer gt lt h outputText value 4 car manufacturer gt lt p coLumn gt lt p column headerText Color gt lt h outputText value car color gt lt p coLumn gt lt p dataTable gt lt p outputPanel gt lt p fieldset gt
259. or the sliding is defined using minValue and max Value attributes Following slider can slide between 100 and 100 381 PrimeFaces User s Guide Client Side Callbacks Slider provides three callbacks to hook in your custom javascript onSlideStart onSlide and onSlideEnd All of these callbacks receive two parameters slide event and the ui object containing information about the event lt h inputText id number value sliderBean number gt lt p slider for number onSlideEnd handleSlideEnd Cevent ui gt function handleSlideEnd Cevent ui ui helper Handle element of slider ui value Current value of slider Ajax Behavior Events Slider provides one ajax behavior event called slideEnd that is fired when the slide completes If you have a listener defined it will be called by passing org primefaces event SlideEndEvent instance Example below adds a message and displays it using growl component when slide ends lt h inputText id number value sliderBean number gt lt p slider for number gt lt p ajax event slideEnd listener sliderBean onSLideEnd update msgs gt lt p Slider gt lt p messages id msgs gt public class SliderBean private int number public int getNumber return number public void setNumberCint number this number number public void onSlideEnd SlideEndEvent event int value event getValueQ add faces message 382
260. org primefaces component DataTableRenderer Renderer Class org primefaces component datatable DataTableRenderer Attributes String Unique identifier of the component rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean refer each data 125 PrimeFaces User s Guide boolean Enables pagination String Template of the paginator String Template of the rowsPerPage dropdown f paginatorPosition both String Template of the currentPageReport UI Integer Maximum number of page links to display String Position of the paginator paginatorAlwaysVisible TRUE scrollable FALSE scrollHeight null scrollWidth null emptyMessage No records found onExpandStart null Boolean Defines if paginator should be hidden if total data count is less than number of rows per page Boolean Makes data scrollable with fixed header Integer Scroll viewport height Integer Scroll viewport width String Enables row selection valid values are single and multiple Object Reference to the selection data String Name of iterator to refer each row index String Text to display when there is no data to display String Client side callback to execute before expansion Boolean Enables column resizing Object Property to be used for default
261. ork since the markup to update on page does not exist OutputPanel is useful in this case 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 page submit The problem is although partial output is generated the markup on page cannot be updated since it doesn t exist 287 PrimeFaces User s Guide Solution is to use the outputPanel as a placeHolder Note that you won t need an outputPanel if commandButton has no update attribute specified in this case parent form will be updated partially implicitly making an outputPanel use obselete Layout OutputPanel has two layout modes e inline default Renders a span e block Renders a div AutoUpdate When auto update is enabled outputPanel component is updated with each ajax request automatically Skinning OutputPanel style and styleClass attributes are used to skin the outputPanel 288 PrimeFaces User s Guide 3 69 OverlayPanel OverlayPanel is a generic panel component that can be displayed on top of other content Dynamic Pi 2 Js i4 05 een Model Year Manufacturer Color b31614b8 1993 Opel Black fdd666a0 1981 BMW Brown 6cOb2fb5 1973 Ford Green 64ef609a 1964 BMW Brown e8dd6461 2006 Audi Black fb94fcf8 2004 Volkswagen White 6bb8711b 2002 Mercedes Green fded 11b 1979 Chrysler Black 68a5511a 1986 Ferrari White 17cdac11 1996 BMW G
262. ortlet and we ve tested the bridge from portletfaces project A kickstart example is available at PrimeFaces examples repository http primefaces googlecode com svn exampLes trunk prime portlet 10 1 Dependencies Only necessary dependency compared to a regular PrimeFaces application is the JSF bridge 2 0 1 is the latest version of portletfaces at the time of writing Here s maven dependencies configuration from portlet sample lt dependencies gt lt dependency gt lt groupId gt javax faces lt grouplId gt lt artifactId gt jsf api lt artifactId gt lt version gt 2 Q lt version gt lt dependency gt lt dependency gt lt groupId gt com sun faces lt groupId gt lt artifactId gt jsf impl lt artifactId gt lt version gt 2 Q 4 b0 9 lt version gt lt dependency gt lt dependency gt lt groupld gt org primefaces lt grouplId gt lt artifactId gt primefaces lt artifactId gt lt version gt 2 2 lt version gt lt dependency gt lt dependency gt lt groupId gt javax portlet lt groupId gt lt artifactId gt portlet api lt artifactId gt lt version gt 2 Q lt version gt lt scope gt provided lt scope gt lt dependency gt lt dependency gt lt groupld gt org portletfaces lt grouplId gt lt artifactId gt portletfaces bridge lt arti factId gt lt version gt 2 Q 1 lt version gt lt dependency gt lt dependencies gt 466 PrimeFaces User s Guide 10 2 Configuration portlet x
263. orts Content lt p panel gt lt p dashboard gt 109 PrimeFaces User s Guide New Widgets Draggable component is used to add new widgets to the dashboard This way you can add new panels from outside of the dashboard Skinning Dashboard resides in a container element which style and styleClass options apply Following is the list of structural style classes As skinning style classes are global see the main Skinning section for more information Here is an example based on a different theme Finance Finance Content Lifestyle Content Sports Content Politics Weather Politics Content Weather Content Tips e Provide a column width using ui dashboard column style class otherwise empty columns might not receive new widgets 110 PrimeFaces User s Guide Dashboard Model API org primefaces model DashboardModel org primefaces model map DefaultDashboardModel is the default implementation void addColumn DashboardColumn column Adds a column to the dashboard List lt DashboardColumn gt getColumns Returns all columns in dashboard int getColumnCount Returns the number of columns in dashboard DashboardColumn getColumn int index Returns the dashboard column at given index void transferWidget DashboardColumn from Relocates the widget identifed with widget id to the DashboardColumn to String widgetId int index given index of the new column from old column org primefaces model DashboardCol
264. our application and then define primefaces THEME context parameter at your deployment descriptor web xml with the theme name as the value Download Each theme is available for manual download at PrimeFaces Theme Gallery If you are a maven user define theme artifact as artifactId is the name of the theme as defined at Theme Gallery page Configure Once you ve downloaded the theme configure PrimeFaces to use it That s it you don t need to manually add any css to your pages or anything else PrimeFaces will handle everything for you In case you d like to make the theme dynamic define an EL expression as the param value 457 PrimeFaces User s Guide 8 2 Creating a New Theme If you d like to create your own theme instead of using the pre defined ones that is easy as well because ThemeRoller provides a powerful and easy to use online visual tool ThemeRoller ep Roll Your Own Galley _ Help Applying your own custom theme is same as applying a pre built theme however you need to migrate the downloaded theme files from ThemeRoller to PrimeFaces Theme Infrastructure PrimeFaces Theme convention is the integrated way of applying your custom themes to your project this approach requires you to create a jar file and add it to the classpath of your application Jar file must have the following folder structure You can have one or more themes in same jar jar META INF resources primefaces yourthem
265. ovides a partial rendering and view processing feature based on standard JSF 2 APIs to enable choosing what to process in JSF lifecyle and what to render in the end with ajax 4 1 Partial Rendering In addition to components like autoComplete datatable slider with built in ajax capabilities PrimeFaces also provides a generic PPR Partial Page Rendering mechanism to update JSF components with ajax Several components are equipped with the common PPR attributes e g update process onstart oncomplete 4 1 1 Infrastructure PrimeFaces Ajax Framework is based on standard server side APIs of JSF 2 There are no additional artfacts like custom AjaxViewRoot AjaxStateManager AjaxViewHandler Servlet Filters HtmlParsers PhaseListeners and so on PrimeFaces aims to keep it clean fast and lightweight On client side rather than using client side API implementations of JSF implementations like Mojarra and MyFaces PrimeFaces scripts are based on the most popular javascript library jQuery which is far more tested stable regarding ajax dom handling dom tree traversing than a JSF implementations scripts 4 1 2 Using IDs Getting Started When using PPR you need to specify which component s to update with ajax If the component that triggers PPR request is at the same namingcontainer eg form with the component s it renders you can use the server ids directly In this section although we ll be using commandButton same applies to ever
266. panel gt lt h form gt When this page initially opens input text with id firstname will receive focus as it is the first input component Validation Aware Another useful feature of focus is that when validations fail first invalid component will receive a focus So in previous example if firstname field is valid but surname field has no input a validation error will be raised for surname in this case focus will be set on surname field implicitly Note that for this feature to work on ajax requests you need to update p focus component as well Explicit Focus Additionally using for attribute focus can be set explicitly on an input component which is useful when using a dialog lt p focus for text gt lt h inputText id text value bean vaLlue gt 184 PrimeFaces User s Guide 3 38 Galleria Galleria is used to display a set of images m ES ee ee Info Tag galleria Component Class org primefaces component galleria Galleria Component Type org primefaces component Galleria Component Family org primefaces component Renderer Type org primefaces component GalleriaRenderer Renderer Class org primefaces component galleria GalleriaRenderer Attributes rendered TRUE boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side Cer E instance in a backing bean widgetVar N
267. pe as the second 201 PrimeFaces User s Guide In a real life application you can create the inputstream after reading the image from the database For example java sql ResultsSet API has the getBinaryStream method to read blob files stored in database Displaying Charts with JFreeChart StreamedContent is a powerful API that can display images created on the fly as well Here s an example that generates a chart with JFreeChart and displays it with p graphicImage lt p graphicImage value chartBean chart gt public class ChartBean private StreamedContent chart public BackingBeanQ try JFreeChart jfreechart ChartFactory createPieChart Turkish Cities createDataset true true false File chartFile new FileC dynamichart ChartUtilities saveChartAsPNGCchartFile jfreechart 375 300 chart new DefaultStreamedContent new FileInputStreamCchartFile image png catch Exception e e printStackTrace private PieDataset createDataset DefaultPieDataset dataset new DefauLtPieDatasetQ dataset setValueC Istanbul new Double 45 0 dataset setValueC Ankara new Double 15 dataset setValueC Izmir new Double 25 2 dataset setValueC Antalya new Double 14 8 return dataset public StreamedContent getChartQ return this chart Basically p graphicImage makes any JSF chart component using JFreechart obsolete and lets you to avoid wrappers e g JSF Char
268. pe org primefaces component Column Component Family org primefaces component Attributes d String Unique identifier of the component rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered UIComponent instance in a backing bean sortFunction String MethodExpr selectionMode String Enables selection mode 89 PrimeFaces User s Guide disabledSelection FALSE Disables row selection filterMaxLength Maximum number of characters for an input filter resizable TRUE Boolean Specifies resizable feature at column level Datatable s resizableColumns must be enabled to use this option Note As column is a reused component not all attributes of column are implemented by the components that use column for example filterBy is only used by datatable whereas sortBy is used by datatable and sheet Getting Started with Column As column is a reused component see documentation of components that use a column 90 PrimeFaces User s Guide 3 16 Columns Columns is used by datatable to create columns programmatically Info Tag columns Component Class org primefaces component column Columns Component Type org primefaces component Columns Component Family org primefaces component Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding n
269. pecify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side ae al instance in a backing bean syle Inline Inline style of the container element of the container element styleClass Style class of the container element Getting Started with the Toolbar Toolbar has two placeholders left and right that are defined with toolbarGroup component 414 PrimeFaces User s Guide Any number of components can be placed inside toolbarGroups Additionally p separator component can be used to separate items in toolbar Here is an example lt p tooLbar gt lt p toolbarGroup align left gt lt p commandButton type push value New image ui icon document gt lt p commandButton type push value Open image ui icon folder open gt lt p separator gt lt p commandButton type push title Save image ui icon disk gt lt p commandButton type push title Delete image ui icon trash gt lt p commandButton type push title Print image ui icon print gt lt p toolbarGroup gt lt p divider gt lt p toolbarGroup align right gt lt p menuButton value Navigate gt lt p menuitem value Home url gt lt p menuitem value Logout url gt lt p menuButton gt lt p toolbarGroup gt lt p tooLbar gt Skinning Toolbar resides in a container element which style and styleClass options
270. play itself according to the logical number of rows to display 138 PrimeFaces User s Guide SummaryRow Summary is a helper component to display a summary for the grouping which is defined by the sortBy option lt p dataTable var car value tabLeBean cars sortBy car manufacturer sortOrder descending gt lt p column headerText Model sortBy car model gt car model1 lt p coLumn gt lt p column headerText Year sortBy car year gt car year lt p coLumn gt lt p column headerText Manufacturer sortBy car manufacturer gt car manufacturer lt p coLumn gt lt p column headerText Color sortBy car color gt car color lt p coLumn gt lt p summaryRow gt lt p column colspan 3 style text align right gt Total lt p coLumn gt lt p coLumn gt tablLeBean randomPrice lt p coLumn gt lt p summaryRow gt lt p dataTable gt 30d423cl1 1995 Volvo Orange caa74a90 2005 Volvo White 2295d17b 1996 Volvo Blue d9548573 1990 Volvo Black 3f2fddb1 1979 Volvo Blue c9cb10af 2007 Volvo Maroon d69007fb 1998 Volvo Black Total 40272 986742ea 1966 Volkswagen Orange f5045e9a 2006 Volkswagen Red 3498c563 1994 Volkswagen Red Total 61413 139 PrimeFaces User s Guide SubTable SubTable is a helper component to display nested collections Example below displays a collection of players and a subtable for the stats collection of each player lt p
271. plex pojos rather than simple types like String This use case is no different except the addition of a converter Following pickList displays a list of players name age 307 PrimeFaces User s Guide public class PickListBean private DualListModel lt Player gt players public PickListBean Q Players List lt PLayer gt source new ArrayList lt Player gt List lt PLlayer gt target new ArrayList lt Player gt source addCnew PlayerC Messi 10 more players players new DualListModel lt Player gt Csource target public DualListModel lt Player gt getPlayersQ return players public void setPlayers DualListModel lt Player gt players this players players lt p pickList value pickListBean players var player itemLabel player name itemValue player converter player gt PlayerConverter in this case should implement javax faces convert Converter contract and implement getAsString getAsObject methods Note that a converter is always necessary for primitive types like long integer boolean as well Custom content instead of simple strings can be displayed by using columns lt p pickList value pickListBean players var player iconOnly true effect bounce itemValue player converter player showSourceControls true showTargetControls true gt lt p column style width 25 gt lt p graphicImage value images barca player photo gt lt p
272. ply Following is the list of structural style classes Style Class Applies ui outputlabel Label element ui state error Label element when input is invalid ui outputlabel rfi Required field indicator 286 PrimeFaces User s Guide 3 68 OutputPanel OutputPanel is a panel component with the ability to auto update Info Component Class org primefaces component outputpanel OutputPanel Component Type org primefaces component OutputPanel Component Family org primefaces component Renderer Type org primefaces component OutputPanelRenderer Renderer Class org primefaces component output OutputPanelRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side a aa instance in a backing bean ae ee of the html container element styleClass StyleClass of the html container element of the html container element layout inline String Layout of the panel valid values are inline span or ae autoUpdate FALSE Enables auto Enables auto update mode if set true mode if set true AjaxRendered Due to the nature of ajax it is much simpler to update an existing element on page rather than inserting a new element to the dom When a JSF component is not rendered no markup is rendered so for components with conditional rendering regular PPR mechanism may not w
273. ponent EditorRenderer Renderer Class org primefaces component editor EditorRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component binding null Object An el expression that maps to a server side UIComponent instance in a backing bean value null Object Value of the component than can be either an EL expression of a literal text converter null Converter An el expression or a literal text that defines String 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 162 PrimeFaces User s Guide immediate When set true process validations logic is executed at apply request values phase for this component FALSE Marks component as required validator null MethodExpr A method expression that refers to a method validationg the input valueChangeListener null MethodExpr A method expression that refers to a method for handling a valuchangeevent requiredMessage null String Message to be displayed when required field validation fails converterMessage null String Message to be displayed when conversion fails validatorMessage Message to be displayed when validation fails onchange null String Client side callback to execute when editor data changes Getting started with the Editor Rich Text entered using the Editor is passed to the server using value expressi
274. ponent selectmanymenu SelectManyMenu org primefaces component SelectManyMenu org primefaces component org primefaces component SelectManyMenuRenderer org primefaces component selectmanymenu SelectManyMenuRenderer rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side e ae instance in a backing bean vae Value of the component Value of the component referring to a List to a List converter null Converter An el expression or a literal text that defines a String 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 immediate Boolean When set true process validations logic is executed at apply request values phase for this component FALSE Marks component as required validator null MethodExpr A method expression that refers to a method validationg the input 358 required o PrimeFaces User s Guide valueChangeListener null MethodExpr A method expression that refers to a method for handling a valuechangeevent requiredMessage null String Message to be displayed when required field validation fails converterMessage Message to be displayed when conversion fails validatorMessage Message to be displayed when validation fields widgetVar Name of the client side widge
275. ponents to change their style For example Panel component s header section has the wi panel titlebar structural class to change the color of a panel header you don t need to about this class as ui widget header also that defines the panel colors also applies to the panel header 459 PrimeFaces User s Guide 8 4 Theming Tips e Default font size of themes might be bigger than expected to change the font size of PrimeFaces components globally use the ui widget style class An example of smaller fonts ui widget ui widget ui widget font size 90 important e When creating your own theme with themeroller tool select one of the pre designed themes that is close to the color scheme you want and customize that to save time e If you are using Apache Trinidad or JBoss RichFaces PrimeFaces Theme Gallery includes Trinidad s Casablanca and RichFaces s BlueSky theme You can use these themes to make PrimeFaces look like Trinidad or RichFaces components during migration e To change the style of a particular component instead of all components of same type use namespacing example below demonstrates how to change header of all panels Ui panel titLlebar CSS J ui paneltitlebar ui widget header CSS To apply css on a particular panel lt p panel styleClass custom gt lt p panel gt custom ui panel titlebar CSS e Set primefaces THEME FORMS context parameter to
276. pression it s resolved to a converter instance In case it s a static text it must refer to a converter id immediate Boolean When set true process validations logic is executed at apply request values phase for this component FALSE Marks component as required validator null MethodExpr A method expression that refers to a method validationg the input valueChangeListener null MethodExpr A method expression that refers to a method for handling a valuechangeevent requiredMessage null String Message to be displayed when required field validation fails 368 required PrimeFaces User s Guide lineDirection Layout of the checkboxes valid values are lineDirection horizontal and pageDirection vertical styleClass Style class of the container Getting started with SelectOneRadio SelectOneRadio usage is same as the standard one Custom Layout Standard selectOneRadio component only supports horizontal and vertical rendering of the radio buttons with a strict table markup PrimeFaces SelectOneRadio on the other hand provides a flexible layout option so that radio buttons can be located anywhere on the page This is implemented by setting layout option to custom and with standalone radioButton components Note that in custom mode selectOneRadio itself does not render any output lt p selectOneRadio id customRadio value formBean option Layout custom gt lt f selectItem itemLabel Optio
277. prire USER S GUIDE 3 3 Author Optimus Prime PrimeFaces User s Guide About the Author 10 1 Introduction 11 1 1 What is PrimeFaces 11 1 2 Prime Teknoloji 11 2 Setup 12 2 1 Download 12 2 2 Dependencies 13 2 3 Configuration 13 2 4 Hello World 13 3 Component Suite 14 3 1 AccordionPanel 14 3 2 AjaxBehavior 18 3 3 AjaxStatus 20 3 4 AutoComplete 23 3 5 BlockUl 33 3 6 BreadCrumb 36 3 7 Button 38 3 8 Calendar 41 3 9 Captcha 52 3 10 Carousel 55 3 11 CellEditor 61 3 12 Charts 62 3 12 1 Pie Chart 62 3 12 2 Line Chart 65 3 12 3 Bar Chart 68 3 12 4 Donut Chart 3 12 5 Bubble Chart 3 12 6 Ohlc Chart 3 12 7 MeterGauge Chart 3 12 8 Skinning Charts 3 12 9 Ajax Behavior Events 3 12 10 Charting Tips 3 13 Collector 3 14 Color Picker 3 15 Column 3 16 Columns 3 17 ColumnGroup 3 18 CommandButton 3 19 CommandLink 3 20 ConfirmDialog 3 21 ContextMenu 3 22 Dashboard 3 23 DataExporter 3 24 DataGrid 3 25 DataList 3 26 DataTable 3 27 DefaultCommand 3 28 Dialog 3 29 Drag amp Drop 3 29 1 Draggable 3 29 2 Droppable PrimeFaces User s Guide 71 74 77 79 81 82 83 84 85 89 91 92 93 98 101 104 107 112 115 121 125 144 146 151 151 155 3 30 Dock 3 31 Editor 3 32 Effect 3 33 FeedReader 3 34 Fieldset 3 35 FileDownload 3 36 FileUpload 3 37 Focus 3 38 Galleria 3 39 GMap 3 40 GMapInfoWindow 3 41 Graphiclmage 3 42 Growl 3 43 HotKey 3 44 IdleMonitor 3 45 ImageCompare
278. ption is the key for a menuitem if it is defined it will work as a simple link If you d like to use menuitem to execute command with or without ajax do not define the url option 37 PrimeFaces User s Guide 3 7 Button Button is an extension to the standard h button component with skinning capabilities Jy Bookmark Jy With Icon w Info Component Class org primefaces component button Button Component Type org primefaces component Button Component Family org primefaces component Renderer Type org primefaces component ButtonRenderer Renderer Class org primefaces component button ButtonRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component binding null Object An el expression that maps to a server side UIComponent instance in a backing bean value null Object Value of the component than can be either an EL expression of a literal text dir null String Direction indication for text that does not inherit directionality Valid values are LTR and RTL Style class for the button icon deprecated use icon 38 PrimeFaces User s Guide lang null String Code describing the language used in the generated markup for this component onblur Client side callback to execute when button loses focus onchange null String Client side callback to execute when button loses focus and its value has been modified since ae focus onclick Foul String Client side call
279. put element onmouseover null String Client side callback to execute when a pointer button is moved onto input element onmouseup null String Client side callback to execute when a pointer button is released over input element onselect null String Client side callback to execute when text within input element is selected by user readonly FALSE Boolean Flag indicating that this component will prevent changes by the user size null Integer Number of characters used to determine the width of the input element a file Advisory tooltip informaton tooltip informaton beforeShowDay null String Client side callback to execute before displaying a date used to customize date display 44 PrimeFaces User s Guide Getting Started with Calendar Value of the calendar should be a java util Date Display Modes Calendar has two main display modes popup default and inline Inline oO July 2010 o Su Mo Tu We Th Fr Sa 2 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 Popup 0 July 2010 o Su Mo Tu We Th Fr Sa 18 19 20 21 22 23 24 25 26 27 28 29 30 31 PrimeFaces User s Guide showOn option defines the client side event to display the calendar Valid values are e focus When input field receives focus button When popup button is clicked both Both focus and button cases Popup Button i lt July 2010 Oo Su M
280. r A method expression that refers to a method for handling a valuechangeevent requiredMessage null String Message to be displayed when required field validation fails converterMessage Message to be displayed when conversion fails validatorMessage Message to be displayed when validation fields widgetVar Name of the client side widget disabled Disables the component label User presentable name onchange Callback to execute on value change style Inline style of the component styleClass Style class of the container Getting started with SelectOneListbox SelectOneListbox usage is same as the standard one Skinning SelectOneListbox resides in a main container which style and styleClass attributes apply As skinning style classes are global see the main Skinning section for more information Following is the list of structural style classes Style Class Applies ui selectonelistbox Main container element ui selectlistbox item Each item in list 363 PrimeFaces User s Guide 3 98 SelectOneMenu SelectOneMenu is an extended version of the standard SelectOneMenu with theme integration Info Tag Component Class Component Type Component Family Renderer Type Renderer Class Attributes Select One x Select One Option 1 Option 2 Option 3 selectOneMenu org primefaces component selectonemenu SelectOneMenu org primefaces component SelectOneMenu org primefaces component org primefaces comp
281. r always requires the image path to be context relative So to accomplish this simply just add slash path to image png and imagecropper will recognize it at WEBAPP ROOT path to image png Action url relative local images are not supported Initial Coordinates By default user action is necessary to initiate the cropper area on an image you can specify an initial area to display on page load using initialCoords option in x y w h format Boundaries minSize and maxSize attributes are control to limit the size of the area to crop 218 PrimeFaces User s Guide Saving Images Below is an example to save the cropped image to file system lt p imageCropper value cropper croppedImage image campnou jpg gt lt p commandButton value Crop actionListener myBean crop gt public class Cropper private CroppedImage croppedImage getter and setter public String cropQ ServletContext servletContext CServletContext FacesContext getCurrentInstance getExternalContext getContextQ String newFileName servletContext getRealPath File separator ui File separator barca File separator croppedImage getOriginalFileName cropped jpg FileImageOutputStream imageOutput try imageOutput new FileImageOutputStreamCnew FileCnewFileName imageOutput writeCcroppedImage getBytes croppedImage getBytes length imageOutput closed catch Exception e e printSt
282. re are more samples based on different masks 229 PrimeFaces User s Guide Skinning style and styleClass options apply to the displayed input element As skinning style classes are global see the main Skinning section for more information 230 PrimeFaces User s Guide 3 50 InputText InputText is an extension to standard inputText with skinning capabilities PrimeFaces Info Tag inputText Component Class org primefaces component inputtext InputText Component Type org primefaces component InputText Component Family org primefaces component Renderer Type org primefaces component InputTextRenderer Renderer Class org primefaces component inputtext InputTextRender Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean value null Object Value of the component than can be either an EL expression of a literal text converter null Convert An el expression or a literal text that defines a converter er String 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 immediate FALSE Boolean When set true process validations logic is executed at apply request values phase for this component required FALSE Marks component
283. re listened by ajaxStatus component setting global to false will not trigger ajaxStatus partialSubmit TRUE Boolean Enables serialization of values belonging to the partially processed components only autoStart TRUE Boolean In autoStart mode polling starts automatically on page load to start a on demand set to false 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 Note that poll must be nested inside a form lt h outputText id txt_count value counterBean count gt lt p poll Listener counterBean increment update txt_count gt public class CounterBean private int count public void increment count 5 public int getCountQ return this count public void setCountCint count this count count Tuning timing By default the periodic interval is 2 seconds this is changed with the interval attribute Following poll works every 5 seconds lt h outputText id txt_count value counterBean count gt lt p poll Listener counterBean increment update txt_count interval 5 gt 312 PrimeFaces User s Guide Start and Stop Poll can be started and stopped using client side api Or bind a boolean variable to the stop attribute and set it to false at any arbitrary time 313 PrimeFaces User s Guide 3 76 Printer Printer allows send
284. re selected from the dialog lt p fileUpload fileUploadListener 4 fiLeBean handleFileUpload aquto true gt Partial Page Update After the fileUpload process completes you can use the PrimeFaces PPR to update any component on the page FileUpload is equipped with the update attribute for this purpose Following example displays a File Uploaded message using the growl component after file upload lt p fileUpload fileUploadListener fileBean handleFileUpload update msg gt lt p growl id msg gt public class FileBean public void handleFileUpLoad FileUploadEvent event add facesmessage to display with growl application code 180 PrimeFaces User s Guide File Filters Users can be restricted to only select the file types you ve configured example below demonstrates how to accept images only Size Limit Most of the time you might need to restrict the file upload size this is as simple as setting the sizeLimit configuration Following fileUpload limits the size to 1000 bytes for each file Skinning FileUpload FileUpload resides in a container element which style and styleClass options apply Following is the list of structural style classes Applies As skinning style classes are global see the main Skinning section for more information Browser Compatibility Rich upload functionality like dragdrop from filesystem multi uploads progress tracking requires browsers that implement
285. red from one list to another A localized user presentable name Specified if an item can be picked or not 306 PrimeFaces User s Guide Getting started with PickList You need to create custom model called org primefaces model DualListModel to use PickList As the name suggests it consists of two lists one is the source list and the other is the target As the first example we ll create a DualListModel that contains basic Strings public class PickListBean private DualListModel lt String gt cities public PickListBean d List lt String gt source new ArrayList lt String gt Q List lt String gt target new ArrayList lt String gt Q citiesSource addC Istanbul citiesSource addC Ankara citiesSource addC Izmir citiesSource addC Antalya citiesSource addC Bursa more cities cities new DualListModel lt String gt CcitiesSource citiesTarget public DualListModel lt String gt getCitiesQ return cities public void setCitiesCDualListModel lt String gt cities this cities cities And bind the cities dual list to the picklist lt p pickList value pickListBean cities var city itemLabel city itemVaLue city gt When the enclosed form is submitted the dual list reference is populated with the new values and you can access these values with DualListModel getSource and DualListModel getTarget api POJOs Most of the time you would deal with com
286. reen uBHpH Opnir r Info Tag overlayPanel Component Class org primefaces component overlaypanel OverlayPanelRenderer Component Type org primefaces component OverlayPanel Component Family org primefaces component Renderer Type org primefaces component OverlayPanelRenderer Renderer Class org primefaces component overlaypanel OverlayPanelRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered UIComponent instance in a backing bean 289 PrimeFaces User s Guide Ce ee sowaar FALSE Defines content loading mode Getting started with OverlayPanel OverlayPanel needs a component as a target in addition to the content to display Example below demonstrates an overlayPanel attached to a button to show a chart in a popup Events Default event on target to show and hide the panel is mousedown These are customized using showEvent and hideEvent options Effects blind bounce clip drop explode fold highlight puff pulsate scale shake size slide are available values for showEffect and hideEffect options if you d like display animations 290 PrimeFaces User s Guide Positioning By default left top corner of panel is aligned to left bottom corner of the target if there is enough space in window viewport if not the position is flipped on the fly to find the best location to display In order to customize t
287. relative to the trigger Default is false meaning static positioning triggerEvent click String Event name of trigger that will show the dynamic positioned menu Getting started with the TieredMenu TieredMenu consists of submenus and menuitems submenus can be nested and each nested submenu will be displayed in an overlay lt p tieredMenu gt lt p submenu label Ajax Menuitems icon ui icon refresh gt lt p menuitem vaLlue Save actionListener buttonBean save update messages icon ui icon disk gt lt p menuitem value Update actionListener buttonBean update update messages icon ui icon arrowrefresh 1 w gt lt p Submenu gt lt p submenu Label Non Ajax Menuitem icon ui icon newwin gt lt p menuitem vaLlue Delete actionListener buttonBean delete update messages ajax false icon ui icon close gt lt p submenu gt lt p separator gt lt p submenu Label Navigations icon ui icon extLink gt lt p submenu label Prime Links gt lt p menuitem value Prime url http www prime com tr gt lt p menuitem value PrimeFaces url http ww primefaces org gt lt p Submenu gt lt p menuitem value Mobile url mobile gt lt p submenu gt lt p tieredMenu gt AutoDisplay By default submenus are displayed when mouse is over root menuitems set autoDisplay to false to require a click on root menuitems to enable autoDisplay mode lt p tieredMenu autoDisplay
288. rer Renderer Class org primefaces component fieldset FieldsetRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean 170 PrimeFaces User s Guide Getting started with Fieldset Fieldset is used as a container component for its children lt p fieldset Legend Simple Fieldset gt lt h panelGrid column 2 gt lt p graphicImage value images godfather 1 jpg gt lt h outputText value The story begins as Don Vito Corleone gt lt h panelGrid gt lt p fieldset gt Legend Legend can be defined in two ways with legend attribute as in example above or using legend facet Use facet way if you need to place custom html other than simple text lt p fieldset gt lt f facet name Legend gt lt f facet gt content lt p fieldset gt When both legend attribute and legend facet are present facet is chosen Toggleable Content Clicking on fieldset legend can toggle contents this is handy to use space efficiently in a layout Set toggleable to true to enable this feature lt p fieldset Legend Toggleable Fieldset toggleable true gt lt h panelGrid column 2 gt lt p graphicImage value images godfather 2 jpg gt lt h outputText value Francis Ford Coppolas legendary gt
289. rieved from the view s locale and can be overridden by the locale attribute Locale attribute can take a locale key as a String or a java util Locale instance Default language of labels are English and you need to add the necessary translations to your page manually as PrimeFaces does not include language translations PrimeFaces Wiki Page for PrimeFacesLocales is a community driven page where you may find the translations you need Please contribute to this wiki with your own translations Translation is a simple javascript object we suggest adding the code to a javascript file and include in your application Following is a Turkish calendar Skinning Schedule resides in a main container which style and styleClass attributes apply As skinning style classes are global see the main skinning section for more information 345 PrimeFaces User s Guide 3 89 ScrollPanel ScrollPanel is used to display overflowed content with theme aware scrollbars instead of native browsers scrollbars Info Tag Component Class Component Type Component Family Renderer Type Renderer Class Attributes bdc429c9 bd4763f2 bdc429c9 bd4763f2 Audi Chrysler 1993 1977 Silver Silver 34c0cfa5 6766abe0 2 34c0cfa5 6766abe0 Ford Opel v 4 ll a scrollPanel org primefaces component scrollpanel ScrollPanel org primefaces component ScrollPanel org primefaces component org primefaces component ScrollPanelRenderer org primefaces componen
290. rimefaces component Renderer Type org primefaces component PushRenderer Renderer Class org primefaces component push PushRenderer Attributes ae ee Unique identifier of the component o identifier of the component rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean channel null Object Unique channel name of the connection between subscriber and eer ae server Client side callback to execute when data is Client side callback to execute when data is pushed Client side callback to execute when connection is closed TRUE Connects to channel on page load when enabled Getting Started with the Push See chapter 6 PrimeFaces Push for detailed information Client Side API of PrimeFaces widget PrimeWebSocket void send data Sends data in json format to push server void connect Connects to the channel void close Disconnects from channel 319 PrimeFaces User s Guide 3 79 RadioButton RadioButton is a helper component of SelectOneRadio to implement custom layouts Info Tag radioButton Component Class org primefaces component radiobutton RadioButton Component Type org primefaces component RadioButton Component Family org primefaces component Renderer Type org primefaces component RadioButtonRenderer Renderer C
291. rols Note that this section applies to dataGrid dataList and dataTable e FirstPageLink e LastPageLink e PreviousPageLink e NextPageLink e PageLinks e CurrentPageReport e RowsPerPageDropdown Note that RowsPerPageDropdown has it s own template options to display is provided via rowsPerPageTemplate attribute e g rowsPerPageTemplate 9 12 15 Also CurrentPageReport has it s own template defined with currentPageReportTemplate option You can use currentPage totalPages totalRecords startRecord endRecord keyword within currentPageReportTemplate Default is currentPage of totalPages Default UI is which corresponds to the following template FirstPageLink PreviousPageLink PageLinks NextPageLink LastPageLink Here are more examples based on different templates CurrentPageReport FirstPageLink PreviousPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown 1 of 5 80008 oo x PreviousPageLink CurrentPageReport NextPageLink 2 of 5 118 PrimeFaces User s Guide Paginator Position Paginator can be positoned using paginatorPosition attribute in three different locations top bottom or both default Selecting Data Selection of data displayed in datagrid is very similar to row selection in datatable you can access the current data using the var reference Important point is to place datagrid contents in a p column which is a child o
292. rted document e g add logo caption PreProcessors are executed before the data is exported and PostProcessors are processed after data is included in the document Processors are simple java methods taking the document as a parameter Change Excel Table Header First example of processors changes the background color of the exported excel s headers lt h commandButton value Export as XLS gt lt p dataExporter type xls target tableId fileName cars postProcessor bean postProcessXLS gt lt h commandButton gt public void postProcessXLSCObject document HSSFWorkbook wb CHSSFWorkbook document HSSFSheet sheet wb getSheetAt HSSFRow header sheet getRow Q HSSFCelLStyle cellStyle wb createCellStyleQ cellStyle setFillForegroundColorCHSSFColor GREEN index cellStyle setFillLPatternCHSSFCelL1LStyle SOLID_FOREGROUND for int i 0 i lt header getPhysicalNumberOfCells i header getCel1 Ci setCellLStyleCcellStyle Add Logo to PDF This example adds a logo to the PDF before exporting begins lt h commandButton value Export as PDF gt lt p dataExporter type xls target tableId fileName cars preProcessor bean preProcessPDF gt lt h commandButton gt public void preProcessPDF Object document throws IOException BadELementException DocumentException Document pdf Document document ServletContext servletContext CServletContext FacesContext getCurren
293. rver side a instance in a backing bean converter null Converter An el expression or a literal text that defines a String 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 immediate Boolean When set true process validations logic is executed at apply request values phase for this component 85 PrimeFaces User s Guide required FALSE Marks component as required validator null MethodExpr A method expression that refers to a method for validation the input valueChangeListener null ValueChange A method binding expression that refers to a Listener method for handling a valuchangeevent requiredMessage null String Message to be displayed when required field validation fails converterMessage Message to be displayed when conversion fails validatorMessage Message to be displayed when validation fields widgetVar Name of the client side widget mode popup String Display mode valid values are popup and inline style Inline style of the component styleClass Style class of the component Getting started with ColorPicker ColorPicker s value should be a hex string public class Bean private String color public String getColorO return this color public void setColor String color this color color lt p colorPicker value bean color gt Display Mo
294. s in case you need to display html via growl set escape option to true lt p growl escape true gt 207 PrimeFaces User s Guide Skinning Following is the list of structural style classes As skinning style classes are global see the main Skinning section for more information 208 PrimeFaces User s Guide 3 43 HotKey HotKey is a generic key binding component that can bind any formation of keys to javascript event handlers or ajax calls Info Tag hotkey Component Class org primefaces component hotkey HotKey Component Type org primefaces component HotKey Component Family org primefaces component Renderer Type org primefaces component HotKeyRenderer Renderer Class org primefaces component hotkey HotKeyRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side instance in a backing bean handler null String Javascript event handler to be executed when the key binding is pressed action null MethodExpr A method expression that d be processed in the partial request caused by uiajax actionListener null MethodExpr An actionlistener that d be processed in the partial request caused by uiajax immediate Boolean Boolean value that determines the phaseId when true actions are processed at apply request values when false at invoke_applicatio
295. 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 immediate Boolean When set true process validations logic is executed at apply request values phase for this component FALSE Marks component as required validator null MethodExpr A method expression that refers to a method validationg the input valueChangeListener null MethodExpr A method expression that refers to a method for handling a valuechangeevent 360 PrimeFaces User s Guide requiredMessage Message to be displayed when required field validation fails converterMessage Message to be displayed when conversion fails validatorMessage Message to be displayed when validation fields widgetVar Name of the client side widget disabled Disables the component label User presentable name onchange Callback to execute on value change style Inline style of the component styleClass Style class of the container Getting started with SelectOneButton SelectOneButton usage is same as selectOneRadio component buttons just replace the radios Skinning SelectOneButton resides in a main container which style and styleClass attributes apply As skinning style classes are global see the main Skinning section for more information Following is the list of structural style classes Style Class Applies ui selectonebutton Main container element 361 PrimeFaces User s Guide 3 97 S
296. s focus onkeydown null String Client side callback to execute when a key is pressed down over input element onkeypress null String Client side callback to execute when a key is pressed and released over input element onkeyup null String Client side callback to execute when a key is released over input element onmousedown null String Client side callback to execute when a pointer button is pressed down over input element onmousemove null String Client side callback to execute when a pointer button is moved within input element onmouseout null String Client side callback to execute when a pointer button is moved away from input element onmouseover null String Client side callback to execute when a pointer button is moved onto input element onmouseup null String Client side callback to execute when a pointer button is released over input element onselect null String Client side callback to execute when text within input element is selected by user readonly FALSE Boolean Flag indicating that this component will prevent changes by the user size null Integer Number of characters used to determine the width of the input element style Inline style of the input element styleClass Style class of the input element tabindex Position of the input element in the tabbing order title Advisory tooltip informaton Getting Started with InputMask InputMask below enforces input to be in 99 99 9999 date format Mask Samples He
297. s org primefaces component collector Collector Attributes Getting started with Collector Collector requires a collection and a value to work with It s important to override equals and hashCode methods of the value object to make collector work public class BookBean private Book book new Book private List lt Book gt books public CreateBookBean books new ArrayList lt Book gt Q public String createNewO book new Book reset form return null getters and setters lt p commandButton value Add action bookBean createNew gt lt p collector value bookBean book addTo bookBean books gt lt p commandButton gt lt p commandLink value Remove gt lt p value book removeFrom createBookBean books gt lt p commandLink gt 84 PrimeFaces User s Guide 3 14 Color Picker ColorPicker is an input component with a color palette Info Tag Component Class Component Type Component Family Renderer Type Renderer Class Attributes colorPicker org primefaces component colorpicker ColorPicker org primefaces component ColorPicker org primefaces component org primefaces component C olorPickerRenderer org primefaces component colorpicker ColorPickerRenderer rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a se
298. sed for navigation Attachment ContextMenu can be attached to any JSF component this means right clicking on the attached component will display the contextMenu Following example demonstrates an integration between contextMenu and imageSwitcher contextMenu here is used to navigate between images lt p imageSwitch id images widgetVar gallery slideshowAuto false gt lt p graphicImage value images naturel jpg gt lt p graphicImage value images nature2 jpg gt lt p graphicImage value images nature3 jpg gt lt p graphicImage value images nature4 jpg gt lt p imageSwitch gt lt p contextMenu for images gt lt p menuitem value Previous url onclick gallery previous gt lt p menuitem value Next url onclick gallery nextQ gt lt p contextMenu gt Now right clicking anywhere on an image will display the contextMenu like Previous Next Remove All 105 PrimeFaces User s Guide Data Components Data components like datatable tree and treeTable has special integration with context menu see the documentation of these component for more information Dynamic Menus ContextMenus can be created programmatically as well see the dynamic menus part in menu component section for more information and an example Skinning ContextMenu resides in a main container which style and styleClass attributes apply Following is the list of structural style classes Style Class
299. splayed when display element is toggled Basic Input Edit Me Basic Input Edit Me Info Tag inplace Component Class org primefaces component inplace Inplace Component Type org primefaces component Inplace Component Family org primefaces component Renderer Type org primefaces component InplaceRenderer Renderer Class org primefaces component inplace InplaceRenderer Attributes Unique identifier of the component rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean emptyLabel Label to be shown in display mode when value is empty 223 PrimeFaces User s Guide saveLabel Tooltip text of save buttin in editor mode cancelLabel Tooltip text of cancel buttin in editor mode event click String Name of the client side event to display inline content toggleable TRUE Defines if inplace is toggleable or not Getting Started with Inplace The inline component needs to be a child of inplace Custom Labels By default inplace displays it s first child s value as the label you can customize it via the label attribute Select One Cities Select One Effects Default effect is fade and other possible effect is slide also effect speed can be tuned with values slow normal and fast 224 PrimeFaces User s Gui
300. ss to apply when an acceptable draggable is being dragged onDrop null String Client side callback to execute when a draggable is dropped 155 PrimeFaces User s Guide Getting Started with Droppable Usage of droppable is very similar to draggable droppable behavior can be added to any component specified with the for attribute lt p outputPanel id slot styleClass slot gt lt p droppable for slot gt slot styleClass represents a small rectangle lt style type text css gt slot background FF99 Q width 64px height 96px display block k lt style gt If for attribute is omitted parent component becomes droppable lt p outputPanel id slot styleClass slot gt lt p droppable gt lt p outputPanel gt Ajax Behavior Events drop is the only and default ajax behavior event provided by droppable that is processed when a valid draggable is dropped In case you define a listener it ll be executed by passing an org primefaces event DragDrop event instance parameter holding information about the dragged and dropped components Following example shows how to enable draggable images to be dropped on droppables lt p graphicImage id messi value barca messi_thumb jpg gt lt p draggable for messi gt lt p outputPanel id zone styleClass slot gt lt p droppable for zone gt lt p ajax listener ddController onDrop gt lt p droppable gt 156 Pr
301. ssion or a literal text that defines a String 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 immediate FALSE Boolean When set true process validations logic is executed at a request values phase for this component required FALSE Marks component as Marks component as required validator null MethodExpr A method expression that refers to a method validationg the input valueChangeListener null MethodExpr A method expression that refers to a method for handling a valuechangeevent requiredMessage Message to be displayed when required field validation fails PrimeFaces User s Guide Getting started with SelectBooleanCheckbox SelectBooleanCheckbox usage is same as the standard one Client Side API Widget PrimeFaces widget SelectBooleanCheckbox Skinning SelectBooleanCheckbox resides in a main container which style and styleClass attributes apply As skinning style classes are global see the main Skinning section for more information Following is the list of structural style classes Style Class Applies ui chkbox box Container of checkbox icon ui chkbox icon Checkbox icon ui chkbox icon Checkbox label 351 PrimeFaces User s Guide 3 92 SelectChecboxMenu SelectCheckboxMenu is a multi select component that displays options in an overlay Info Tag Component Class
302. stomfunction a remote call will be made actionListener is processed and output text is updated Note that remoteCommand must be nested inside a form Passing Parameters Remote command can send dynamic parameters in the following way Run on Load If you d like to run the command on page load set autoRun to true 326 PrimeFaces User s Guide 3 82 Resizable Resizable component is used to make another JSF component resizable Info Component Class org primefaces component resizable Resizable Component Type org primefaces component Resizable Component Family org primefaces component Renderer Type org primefaces component ResizableRenderer Renderer Class org primefaces component resizable ResizableRenderer Attributes i Unique identifier of the component rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean widgetVar Name of the client side widget for Identifier of the target component to make resizable aspectRatio FALSE Defines if aspectRatio should be kept or not proxy FALSE Displays proxy element instead of actual element handles Specifies the resize handles ghost In ghost mode resize helper is displayed as the original element with less opacity animate Enables animation effect Effect to use in animation effectDurati
303. t Getting started with the Menu A menu is composed of submenus and menuitems Gmail Hotmail Yahoo Mail Youtube Break 261 PrimeFaces User s Guide Submenus are used to group menuitems Gmail Hotmail Yahoo Mail Videos Youtube Break Social Networks Overlay Menu Menu can be positioned on a page in two ways static and dynamic By default it s static meaning the menu is in normal page flow In contrast dynamic menus is not on the normal flow of the page allowing them to overlay other elements A dynamic menu is created by setting overlay option to true and defining a trigger to show the menu Location of menu on page will be relative to the trigger and defined by my and at options that take combination of four values e left e right bottom e top 262 PrimeFaces User s Guide For example clicking the button below will display the menu whose top left corner is aligned with bottom left corner of button lt p menu overlay true trigger btn my Left top at bottom left gt Submenus and menuitems lt p menu gt lt p commandButton id btn value Show Menu type button gt Ajax and Non Ajax Actions As menu uses menuitems it is easy to invoke actions with or without ajax as well as navigation See menuitem documentation for more information about the capabilities lt p menu gt lt p submenu lLabel Options gt
304. t disabled Disables the component label User presentable name onchange Callback to execute on value change style Inline style of the component styleClass Style class of the container Getting started with SelectManyMenu SelectManyMenu usage is same as the standard one Skinning SelectManyMenu resides in a container that style and styleClass attributes apply As skinning style classes are global see the main Skinning section for more information Following is the list of structural style classes Style Class Applies ui selectlistbox item Each item in list 359 PrimeFaces User s Guide 3 96 SelectOneButton SelectOneButton is an input component to do a single select Info Tag Component Class Component Type Component Family Renderer Type Renderer Class Attributes Option 1 Option 3 selectOneButton org primefaces component selectonebutton SelectOneButton org primefaces component SelectOneButton org primefaces component org primefaces component SelectOneButtonRenderer org primefaces component selectonebutton SelectOneButtonRenderer rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean converter null Converter An el expression or a literal text that defines a String converter for the component When it
305. t be rendered binding null Object An el expression that maps to a server side ae ee a instance in a backing bean value o Value of the component Value of the component referring to a List to a List converter null Converter An el expression or a literal text that defines a String 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 immediate Boolean When set true process validations logic is executed at apply request values phase for this component FALSE Marks component as required validator null MethodExpr A method expression that refers to a method validationg the input valueChangeListener null MethodExpr A method expression that refers to a method for handling a valuechangeevent required 354 PrimeFaces User s Guide requiredMessage Message to be displayed when required field validation fails converterMessage Message to be displayed when conversion fails validatorMessage Message to be displayed when validation fields widgetVar Name of the client side widget disabled Disables the component label User presentable name onchange Callback to execute on value change style Inline style of the component styleClass Style class of the container Getting started with SelectManyButton SelectManyButton usage is same as selectManyCheckbox buttons just replace checkboxes Skinning S
306. t section for more information and an example Skinning MegaMenu resides in a main container which style and styleClass attributes apply Following is the list of structural style classes ui ui ui menuitem text Text element in an item As skinning style classes are global see the main Skinning section for more information 259 PrimeFaces User s Guide 3 59 Menu Menu is a navigation component with various customized modes like multi tiers ipod style sliding and overlays Ajax Menultems A Save Update Non Ajax Menulitem x Delete Navigations fi Home TouchFaces Component Class org primefaces component menu Menu Component Type org primefaces component Menu Component Family org primefaces component Renderer Type org primefaces component MenuRenderer Renderer Class org primefaces component menu MenuRenderer Attributes ea ee Unique identifier of the component identifier of the component rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a a E bean MenuModel A menu model instance to create menu een wis 260 PrimeFaces User s Guide trigger null String Id of component whose click event will show the dynamic positioned menu y Corner of menu to align with trigger element Corner of trigger to align with menu elemen
307. t interval for ajax progress bar meaning every 3 seconds progress value will be recalculated In order to set a different value use the interval attribute lt p progressBar interval 5000 gt Ajax Behavior Events ProgressBar provides complete as the default and only ajax behavior event that is fired when the progress is completed Example below demonstrates how to use this event public class ProgressBean private int progress public void handleComplete Add a faces message getter setter lt p progressBar value progressBean progress ajax true gt lt p ajax event complete listener progressBean handleComplete update messages gt lt p progressBar gt lt p growl id messages gt Client Side API Widget PrimeFaces widget ProgressBar 317 PrimeFaces User s Guide Skinning ProgressBar resides in a main container which style and styleClass attributes apply Following is the list of structural style classes Style Class Applies ui progressbar value Value of the progressbar ui progressbar label Progress label As skinning style classes are global see the main Skinning section for more information 318 PrimeFaces User s Guide 3 78 Push Push component is an agent that creates a channel between the server and the client Info a Component Class org primefaces component push Push Component Type org primefaces component Push Component Family org p
308. t not tested 2 3 Configuration PrimeFaces does not require any mandatory configuration 2 4 Hello World Once you have added the downloaded jar to your classpath you need to add the PrimeFaces namespace to your page to begin using the components Here is a simple page When you run this page you should see a rich text editor 13 PrimeFaces User s Guide 3 Component Suite 3 1 AccordionPanel AccordionPanel is a container component that displays content in stacked format v Godfather Part I The story begins as Don Vito Corleone the head of a New York Mafia family oversees his daughter s wedding His beloved son Michael has just come home from the war but does not intend to become part of his father s business T hrough Michael s life the nature of the family business becomes clear The business of the family is just like the head of the family kind and benevolent to those who give respect but given to ruthless violence whenever anything stands against the good of the family gt Godfather Part Il gt Godfather Part Ill Info Attributes rendered TRUE boolean Boolean value to specify the rendering of the component binding null Object An EL expression that maps to a server side UIComponent instance in a backing bean 14 PrimeFaces User s Guide activeIndex String Index of the active tab or a comma separated string of indexes when multiple mode is on styleClass Style class of t
309. t scrollpanel ScrollPanelRenderer rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean style Inline style of the container element styleClass Style class of the container element mode default String Scrollbar display mode valid values are default and native 346 PrimeFaces User s Guide Getting started with ScrollPanel ScrollPanel is used a container component width and height must be defined Native ScrollBars By default scrollPanel displays theme aware scrollbars setting mode option to native displays browser scrollbars Skinning ScrollPanel resides in a main container which style and styleClass attributes apply As skinning style classes are global see the main Skinning section for more information Following is the list of structural style classes Style Class Applies ui scrollpanel hbar Horizontal scrollbar ui scrollpanel vbar Vertical scrollbar ui scrollpanel handle Handle of a scrollbar 347 PrimeFaces User s Guide 3 90 SelectBooleanButton SelectBooleanButton is used to select a binary decision with a toggle button accept terms and conditions No Subscribe me to newsletter v Yes Info Tag selectBooleanButton Component Class org primefaces component selectbooleanbutton SelectBoo
310. t web app xmlns http java sun com xml ns jZ2ee xmLns xsi http www w3 org 2QQ01 XMLSchema instance xsi schemaLocation http java sun com xml ns jZee http java sun com xml ns 12ee web app_2_5 xsd version 2 5 gt lt servlet gt lt servlet name gt Faces Servlet lt servlet name gt lt servlet class gt javax faces webapp FacesServlet lt servlet class gt lt Load on startup gt 1 lt lLoad on startup gt lt servLet gt lt web app gt 467 PrimeFaces User s Guide faces config xml An empty faces config xml seems to be necessary otherwise bridge is giving an error lt xml version 1 encoding UTF 8 gt lt faces config xmLns http java sun com xmlL ns javaee xmLns xsi http www w3 org 2001 XMLSchema instance xsi schemaLocation http java sun com xml ns javaee http java sun com xml ns javaee web facesconfig_2_Q xsd version 2 Q gt lt faces config gt liferay portlet xml Liferay portlet configuration file is an extension to standard portlet configuration file lt xml version 1 Q gt lt liferay portlet app gt lt portlet gt lt portLet name gt 1 lt portlet name gt lt instanceable gt true lt instanceable gt lt ajaxable gt false lt ajaxable gt lt portlet gt lt liferay portlet app gt liferay display xml Display configuration is used to define the location of your portlet in liferay menu lt xml version 1 0 gt lt DOCTYPE display PUBLI
311. t will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean showSummary FALSE Boolean Specifies if the summary of the FacesMessages should be displayed showDetail TRUE Boolean Specifies if the detail of the FacesMessages should be displayed globalOnly FALSE String When true only facesmessages with no clientIds are displayed 275 PrimeFaces User s Guide Name ame Default Tye O o Desripion Description redisplay TRUE Defines if already rendered messages should be ee autoUpdate FALSE Enables auto Enables auto update mode if set true mode if set true null String Name of associated key takes precedence when used with globalOnly escape TRUE Defines whether html would be escaped or not Comma separated list of severities to display only Getting started with Messages Message usage is exactly same as standard messages AutoUpdate When auto update is enabled messages component is updated with each ajax request automatically Targetable Messages There may be times where you need to target one or more messages to a specific message component for example suppose you have growl and messages on same page and you need to display some messages on growl and some on messages Use for attribute to associate messages with specific components In sample above messages will display first and second message and growl will only display the
312. tCreator project which we ve created in the past to take full advantage of JFreechart API 202 PrimeFaces User s Guide Turkish Cities Antalya 14 8 __ 4 Istanbul 45 izmir 25 2 K Ankara 15 e Istanbul 45 Ankara 15 lzmir 25 2 Antalya 14 8 Displaying a Barcode Similar to the chart example a barcode can be generated as well This sample uses barbecue project for the barcode API lt p graphicImage value backingBean barcode gt public class BarcodeBean private StreamedContent barcode public BackingBeanQ try File barcodeFile new FileC dynamicbarcode BarcodeImageHandler saveJPEGC BarcodeFactory createCode128C PRIMEFACES barcodeFile barcode new DefaultStreamedContent new FileInputStream barcodeFile image jpeg catch Exception e e printStackTraceQ public BarcodeBean getBarcode return this barcode 203 PrimeFaces User s Guide Displaying Regular Images As GraphicImage extends standard graphiclmage component it can also display regular non dynamic images How It Works Dynamic image display works as follows Dynamic image puts its value expression string to the http session with a unique key e Unique session key is appended to the image url that points to JSF resource handler e Custom PrimeFaces ResourceHandler get the key from the url retrieves the expression string like bean streamedContent
313. tDetailC Visibility visibility FacesContext getCurrentInstance addMessage null msg Client Side API Widget PrimeFaces widget Fieldset Skinning style and styleClass options apply to the fieldset Following is the list of structural style classes Style Class Applies ui fieldset toggleable Main container when fieldset is toggleable ui fieldset ui fieldset legend Legend of fieldset 172 PrimeFaces User s Guide Style Class Applies ui fieldset toggleable ui fieldset legend Legend of fieldset when fieldset is toggleable ui fieldset ui fieldset toggler Toggle icon on fieldset As skinning style classes are global see the main Skinning section for more information Tips e A collapsed fieldset will remain collapsed after a postback since fieldset keeps its toggle state internally you don t need to manage this using toggleListener and collapsed option 173 PrimeFaces User s Guide 3 35 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 FileDownload presents an easier way to do the same Info ActionListener Class org primefaces component filedownload FileDownloadActionListener Attributes StreamedContent A streamed content instance Getting started with FileDownload A user command action is required to trigger the filedownload process FileDownload can be attached to any command comp
314. tInstance getExternalContext getContextQ String logo servletContext getRealPath File separator images File separator prime_logo png pdf addCImage getInstance logo 114 PrimeFaces User s Guide 3 24 DataGrid DataGrid displays a collection of data in a grid layout 1 of 5 2 345 wz a Ea 1965 1960 2009 Q Q Q E 1975 2006 1961 Q Q Q C onzes OO 9 1977 1991 1994 Q Q Q ness cans WW o 1990 1977 1995 Q Q Q 1 of 5 B2 345 3 Info Component Class org primefaces component datagrid DataGrid Component Type org primefaces component DataGrid Component Family org primefaces component Renderer Type org primefaces component DataGridRenderer Renderer Class org primefaces component datagrid DataGridRenderer Attributes rendered TRUE boolean Boolean value to specify the rendering of the component when set to false component will not be rendered 115 PrimeFaces User s Guide UIComponent instance in a backing bean Name of the request scoped variable used to refer each data ee CO Gee oreo oteo Name of the client side widget pageLinks Maximum number of page links to display paginatorAlwaysVisible TRUE Boolean Defines if paginator should be hidden if total data count is less than number of rows per page styleClass Style class of the datagrid Name of the iterator to refer each row index Getting started with the DataGrid A list of cars will
315. taExporter type xls target tableId fileName cars gt lt p commandButton gt PDF export lt p commandButton value Export as PDF ajax false gt lt p dataExporter type pdf target tableId fileName cars gt lt p commandButton gt CSV export lt p commandButton value Export as CSV ajax false gt lt p dataExporter type csv target tableId fileName cars gt lt p commandButton gt XML export lt p commandButton value Export as XML ajax false gt lt p dataExporter type xml target tableId fileName cars gt lt p commandLink gt PageOnly By default dataExporter works on whole dataset if you d like export only the data displayed on current page set pageOnly to true lt p dataExporter type pdf target tableId fileName cars pageOnly true gt Excluding Columns In case you need one or more columns to be ignored use exludeColumns option Exporter below ignores first column to exclude more than one column define the indexes as a comma separated string excludeColumns 0 2 6 lt p dataExporter type pdf target tableId excLudeColumns Q0 gt Monitor Status DataExport is a non ajax process so ajaxStatus component cannot apply See FileDownload Monitor Status section to find out how monitor export process Same solution applies to data export as well 113 PrimeFaces User s Guide Pre and Post Processors Processors are handy to customize the expo
316. ted with reCaptcha First thing to do is to sign up to reCaptcha to get public amp private keys Once you have the keys for your domain add them to web xml as follows That is it now you can use captcha as follows 53 PrimeFaces User s Guide Themes Captcha features following built in themes for look and feel customization e red default e white e blackglass e clean Themes are applied via the theme attribute it homoey Type the two words qu CaN stop spam 2 read books Languages Text instructions displayed on captcha is customized with the language attribute Below is a captcha with Turkish text Overriding Validation Messages By default captcha displays it s own validation messages this can be easily overridden by the JSF message bundle mechanism Corresponding keys are primefaces captcha IN VALID primefaces captcha INVALID detail Tips e Use label option to provide readable error messages in case validation fails e Enable secure option to support https otherwise browsers will give warnings e See http www google com recaptcha learnmore to learn more about how reCaptcha works 54 PrimeFaces User s Guide 3 10 Carousel Carousel is a multi purpose component to display a set of data or general content with slide effects A EAD Model 67bb58ac Model 8b8a68f1 Model 8cb43373 Year 1983 Year 1962 Year 1974 Color Maroon Color Silver Color Blu
317. tent of left side of header today conterHeaderTemplate Content Content of center of header center of header rightHeaderTemplate month Content of right side of header agendaWeek agendaDay in Ee or ramendaDay views slotMinutes slotMinutes 3o J imteger Interval in minutes in an hour to create a slot in minutes in an hour to create a slot m CS Gprs axisFormat null String Determines the time text that will be displayed on the vertical axis of the agenda views timeFormat null String Determines the time text that will be displayed on each event timeZone null Object String or a java util TimeZone instance to specify the timezone used for date conversion 339 PrimeFaces User s Guide Getting started with Schedule Schedule needs to be backed by an org primefaces model ScheduleModel instance a schedule model consists of org primefaces model ScheduleEvent instances DefaultScheduleEvent is the default implementation of ScheduleEvent interface Mandatory properties required to create a new event are the title start date and end date Other properties such as allDay get sensible default values Table below describes each property in detail T omeno resene OOOO Ajax Behavior Events Schedule provides various ajax behavior events to respond user actions org primefaces event DateSelectEvent When a date is selected org primefaces event ScheduleEntrySelectEvent 340 PrimeFaces User s Guide
318. terms of three distinct numeric values Info Tag bubbleChart Component Class org primefaces component chart bubble BubbleChart Component Type org primefaces component chart BubbleChart Component Family org primefaces component Renderer Type org primefaces component chart BubbleChartRenderer Renderer Class org primefaces component chart bubble BubbleChartRenderer Attributes d null String Unique identifier of the component rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean widgetVar String Name of the client side widget value ChartModel Datasource to be displayed on the chart style String Inline style of the chart hukbleGrdien 7e 4 7 PrimeFaces User s Guide xaxisAngle Angle of the x axis ticks yaxisAngle Angle of the y axis ticks legendCols Column count of legend legendRows Row count of legend Getting started with BubbleChart PieChart is created with an org primefaces model chart BubbleChartModel instance public class Bean private BubbleChartModel model public Bean bubbleModel new BubbleChartModel bubbleModel addBubbleCnew BubbleChartSeriesC Acura 70 183 55 bubbleModel addBubbleCnew BubbleChartSeriesC ALfa Romeo 45 92 36 bubbleModel addBubbleCnew BubbleChartSeriesC AM General 2
319. tion 389 PrimeFaces User s Guide 3 106 SplitButton SplitButton displays a command by default and additional ones in an overlay Save v Update x Delete 2 Homepage Info Tag splitButton Component Class org primefaces component splitbutton SplitButton Component Type org primefaces component SplitButton Component Family org primefaces component Renderer Type org primefaces component SplitButtonRenderer Renderer Class org primefaces component splitbutton SplitButtonRenderer Attributes i rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean action null MethodExpr A method expression or a String outcome that d be String processed when button is clicked actionListener null MethodExpr An actionlistener that d be processed when button is clicked immediate Boolean Boolean value that determines the phaseld when true actions are processed at apply request values when false at invoke_application phase ajax TRUE Boolean Specifies the submit mode when set to true default submit would be made with Ajax 390 PrimeFaces User s Guide process Component s to process partially instead of whole view update Component s to be updated with ajax onstart null String Client side callback to execute before ajax req
320. tles a record four UEFA Cup Winners Cups a record three Inter Cities Fairs Cups the forerunner to the UEFA Europa League three UEFA Super Cups and one FIFA Club World Cup The club is also the only European side to have played continental football in every season since its inception in 1955 Info wo p Component Class org primefaces component panel Panel Component Type org primefaces component Panel Component Family org primefaces component Renderer Type org primefaces component PanelRenderer Renderer Class org primefaces component panel PanelRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean Type toggleable FALSE Makes panel toggleable aara 292 PrimeFaces User s Guide closable FALSE Make panel closable closeSpeed 1000 Speed of closing effect in milliseconds Getting started with Panel Panel encapsulates other components Header and Footer Header and Footer texts can be provided by header and footer attributes or the corresponding facets When same attribute and facet name are used facet will be used Ajax Behavior Events Panel provides custom ajax behavior events for toggling and closing features org primefaces event ToggleEvent When panel is expanded or collapsed org primefaces
321. to growing PrimeFaces Info Tag inputTextarea Component Class org primefaces component inputtextarea InputTextarea Component Type org primefaces component InputTextarea Component Family org primefaces component Renderer Type org primefaces component InputTextareaRenderer Renderer Class org primefaces component inputtextarea InputTextareaRender Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean value null Object Value of the component than can be either an EL expression of a literal text converter null Converter An el expression or a literal text that defines a String 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 immediate FALSE Boolean When set true process validations logic is executed at ae request values phase for this component required FALSE Marks component as Marks component as required 234 PrimeFaces User s Guide validator null MethodExpr A method binding expression that refers to a method validationg the input valueChangeListener null MethodExpr A method binding expression that refers to a method for handling a valuchangeevent requiredMessage null String Message to
322. ton are defined via css and icon attribute if you use title instead of value only icon will be displayed and title text will be displayed as tooltip on mouseover You can also use icons from PrimeFaces themes Skinning Button renders a button tag which style and styleClass applies Following is the list of structural Style Class Applies style classes ui button text only Button element when icon is not used ui button text Label of button As skinning style classes are global see the main Skinning section for more information 40 PrimeFaces User s Guide 3 8 Calendar Calendar is an input component used to select a date featuring display modes paging localization ajax selection and more Su Mo Tu We Th Fr Sa 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 Info Component Class org primefaces component calendar Calendar Component Type org primefaces component Calendar Component Family org primefaces component Renderer Type org primefaces component CalendarRenderer Renderer Class org primefaces component calendar CalendarRenderer Attributes Unique identifier of the component rendered TRUE Boolean Boolean value to specify the rendering of the component binding null Object An el expression that maps to a server side a instance in a backing bean vale Value of the Value of the component converter null Converter An el expression or a l
323. tp java sun com jsf core xmlins p http primefaces prime com tr ui template templates ui xhtml gt lt ui define name content gt lt p accordionPanel gt lt piaccordionPanell activeindex animate binding hover hoverDelay id multiple rendered speed style lt ui define gt lt ui composition gt 472 Index of the active tab use a comma seperated list for multiple tabs PrimeFaces User s Guide 13 Project Resources Documentation This guide is the main resource for documentation for additional documentation like apidocs taglib docs wiki and more please visit Support Forum PrimeFaces discussions take place at the support forum Forum is public to everyone and registration is required to do a post Source Code PrimeFaces source is at google code subversion repository Issue Tracker PrimeFaces issue tracker uses google code s issue management system Please use the forum before creating an issue instead WIKI PrimeFaces Wiki is a community driven additional documentation resource Social Networks You can follow PrimeFaces on twitter using primefaces and join the Facebook group 473 PrimeFaces User s Guide 14 FAQ 1 Who develops PrimeFaces PrimeFaces is developed and maintained by Prime Teknoloji a Turkish software development company specialized in Agile Software Development JSF and Java EE
324. tputText value After a break of gt lt h panelGrid gt lt p tab gt lt p carousel gt 58 PrimeFaces User s Guide Item Selection When selecting an item from a carousel with a command component p column is necessary to process selection properly Following example displays selected car contents within a dialog lt h form id form gt lt p carousel value carBean cars var car itemStyle width 20Qpx gt lt p coLumn gt lt p graphicImage value images cars car manufacturer jpg gt lt p commandLink update form detail oncomplete dlg show gt lt h outputText value Model car model gt lt f setPropertyActionListener value car target carBean selected gt lt p commandLink gt lt p coLumn gt lt p carousel gt lt p dialog widgetVar dlg gt lt h outputText id detail value carBean selected gt lt p dialog gt lt h form gt public class CarBean private List lt Car gt cars private Car selected getters and setters Header and Footer Header and Footer of carousel can be defined in two ways either using headerText and footerText options that take simple strings as labels or by header and footer facets that can take any custom content Skinning Carousel resides in a container element which style and styleClass options apply itemStyle and itemStyleClass attributes apply to each item displayed by carousel Following is the list
325. tting started with IlmageCompare ImageCompare is created with two images with same height and width It is required to set width and height of the images as well Skinning Both images are placed inside a div container element style and styleClass attributes apply to this element 215 PrimeFaces User s Guide 3 46 ImageCropper ImageCropper allows cropping a certain region of an image A new image is created containing the cropped area and assigned to a CroppedImage instanced on the server side Info imageCropper Component Class org primefaces component imagecropper ImageCropper Component Type org primefaces component ImageCropper Component Family org primefaces component Renderer Type org primefaces component ImageCropperRenderer Renderer Class org primefaces component imagecropper mageCropperRenderer Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean value null Object Value of the component than can be either an EL expression of a literal text converter null Converter An el expression or a literal text that defines a String 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 216 PrimeFaces User s Guide
326. ue of the component than can be either an EL expression of a literal text converter null Converter An el expression or a literal text that defines a String 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 immediate FALSE Boolean When set true process validations logic is executed at a request values phase for this component required FALSE Marks component as Marks component as required validator null MethodExpr A method expression that refers to a method validationg the input 177 PrimeFaces User s Guide valueChangeListener null MethodExpr A method expression that refers to a method for handling a valuchangeevent requiredMessage null String Message to be displayed when required field validation fails Message to be displayed when conversion fails Message to be displayed when validation fails Name of the client side widget 178 PrimeFaces User s Guide Getting started with FileUpload First thing to do is to configure the fileupload filter which parses the multipart request FileUpload filter should map to Faces Servlet lt filter gt lt filter name gt PrimeFaces FileUpload Filter lt filter name gt lt filter class gt org primefaces webapp filter FileUploadFilter lt filter class gt lt filter gt lt filter mapping gt lt filter name gt PrimeFaces FileUpload Filter lt
327. uest is begins oncomplete null String Client side callback to execute when ajax request is completed onsuccess null String Client side callback to execute when ajax request succeeds onetror Client side callback to execute when ajax request fails global TRUE Defines whether to trigger ajaxStatus or not partialSubmit Enables serialization of values belonging to the partially processed components only style Inline style of the button element styleClass StyleClass of the button element onblur Client side callback to execute when button loses focus onchange null String Client side callback to execute when button loses focus and its value has been modified since Ce TS focus Client side callback to execute when button is clicked side callback to execute when button is clicked ondblclick null String Client side callback to execute when button is double clicked onfocus null String Client side callback to execute when button receives focus onkeydown null String Client side callback to execute when a key is pressed down over button onkeypress null String Client side callback to execute when a key is pressed and released over button onkeyup null String Client side callback to execute when a key is released over button onmousedown null String Client side callback to execute when a pointer button is pressed down over button onmousemove null String Client side callback to execute when a pointer button is moved withi
328. ull Object An el expression that maps to a server side p p UIComponent instance in a backing bean Getting Started with Columns See dynamic columns section in datatable documentation for detailed information 91 PrimeFaces User s Guide 3 17 ColumnGroup ColumnGroup is used by datatable for column grouping Info C Component Class org primefaces component columngroup ColumnGroup omponent Type org primefaces component ColumnGroup Component Family org primefaces component Attributes rendered TRUE Boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean Type of group valid values are header and footer Getting Started with ColumnGroup See grouping section in datatable documentation for detailed information 92 PrimeFaces User s Guide 3 18 CommandButton CommandButton is an extended version of standard commandButton with ajax and theming Ajax Submit Non Ajax Submit 8 With Icon i Info Tag commandButton Component Class org primefaces component commandbutton CommandButton Component Type org primefaces component CommandButton Renderer Type org primefaces component CommandButtonRenderer Renderer Class org primefaces component commandbutton CommandButtonRenderer Component org primefaces component Family Attributes
329. umn org primefaces model map DefaultDashboardModel is the default implementation String getWidget int index od aiding widget void addWidget int index String widgetld void reorderWidget int index String widgetld 111 PrimeFaces User s Guide 3 23 DataExporter DataExporter is handy for exporting data listed using a Primefaces Datatable to various formats such as excel pdf csv and xml Info Tag Class org primefaces component export DataExporterTag ActionListener Class org primefaces component export DataExporter Attributes target Id of the datatable whose data to Id of the datatable whose data to export fileName null String Filename of the generated export file defaults to a id HpageOnly Exports Exports only current page instead of whole dataset current page instead of whole dataset indexes to be excluded from ae preProcessor PreProcessor for the PreProcessor for the exported document document selectionOnly FALSE When enabled only selection would be exported Getting Started with DataExporter DataExporter is nested in a UICommand component such as commandButton or commandLink For pdf exporting itext and for xls exporting poi libraries are required in the classpath Target must point to a PrimeFaces Datatable Assume the table to be exported is defined as 112 PrimeFaces User s Guide Excel export lt p commandButton value Export as Excel ajax false gt lt p da
330. umns 2 gt lt h outputLabel for title value Title gt lt h inputText id title value bean event titlLe required true gt lt h outputLabel for from value From gt lt p inputMask id from value bean event startDate mask 99 99 9999 gt lt f convertDateTime pattern dd MM yyyy gt lt p inputMask gt lt h outputLabel for to value To gt lt p inputMask id to value bean event endDate mask 99 99 9999 gt lt f convertDateTime pattern dd MM yyyy gt lt p inputMask gt lt h outputLabel for allDay value All Day gt lt h selectBooleanCheckbox id allDay value bean event allDay gt lt p commandButton type reset value Reset gt lt p commandButton value Save actionListener bean addEvent oncomplLete myschedule update eventDialog hideQ gt lt h panelGrid gt lt p dialog gt lt h form gt 341 PrimeFaces User s Guide public class ScheduleBean private ScheduleModel lt ScheduleEvent gt model private ScheduleEventImpl event new DefaultScheduleEventQ public ScheduleBean eventModel new ScheduleModel lt ScheduleEvent gt public ScheduleModel lt ScheduleEvent gt getModel return model public ScheduleEventImpl getEvent Q return event public void setEvent ScheduleEventImpl event this event event public void addEvent ifCevent getIdQ null eventModel addEvent event else
331. user data Personal Details Address Details and Contact Details Note that last tab contains read only data for confirmation and the submit button 435 PrimeFaces User s Guide lt h form gt lt p wizard gt lt p tab id personal gt lt p panel header Personal Details gt lt h messages errorClass error gt lt h panelGrid columns 2 gt lt h outputText value Firstname gt lt h inputText value userWizard user firstname required true gt lt h outputText value Lastname gt lt h inputText value userWizard user Lastname required true gt lt h outputText value Age gt lt h inputText value userWizard user age gt lt h panelLGrid gt lt p panel gt lt p tab gt lt p tab id address gt lt p panel header Adress Details gt lt h messages errorClass error gt lt h panelGrid columns 2 columnClasses Label value gt lt h outputText value Street gt lt h inputText value userWizard user street gt lt h outputText value Postal Code gt lt h inputText value userWizard user postalCode gt lt h outputText value City gt lt h inputText value userWizard user city gt lt h panelGrid gt lt p panel gt lt p tab gt lt p tab id contact gt lt p panel header Contact Information gt lt h messages errorClass error gt lt h panelGrid columns 2 gt lt h outputText value Email gt lt
332. vate String color public class CarBean private List lt Car gt cars public CarListControllerO cars new ArrayList lt Car gt cars addCnew CarC myModel 2005 ManufacturerX blue add more cars getter setter 56 PrimeFaces User s Guide Carousel iterates through the cars collection and renders it s children for each car note that you also need to define a width for each item Limiting Visible Items Bu default carousel lists it s items in pages with size 3 This is customizable with the rows attribute coro page EDP Model 089d3ef8 amp Year 1988 Color Green Effects Paging happens with a slider effect by default and following easing options are supported backBoth backIn backOut e bounceBoth bounceln bounceOut easeBoth easeBothStrong easeIn easeInStrong easeNone easeOut easeOutStrong elasticBoth elasticIn elasticOut 57 PrimeFaces User s Guide Note Easing names are case sensitive and incorrect usage may result in javascript errors SlideShow Carousel can display the contents in a slideshow for this purpose autoPlaylnterval and circular attributes are used Following carousel displays a collection of images as a slideshow lt p carousel autoPlayInterval 2000 rows 1 effect easeInStrong circular true itemStyle width 2Q px gt lt p graphicImage value images nature1 jpg gt lt p graphicImage value images nature2
333. without a prompt Note that content disposition is not part of the http standard although it is widely implemented Monitor Status As fileDownload process is non ajax ajaxStatus cannot apply Still PrimeFaces provides a feature to monitor file downloads via client side monitorDownload startFunction endFunction method Example below displays a modal dialog when dowload begins and hides it on complete lt script type text javascript gt function showStatus statusDialog show function hideStatus statusDialog hided lt script gt 175 PrimeFaces User s Guide 176 PrimeFaces User s Guide 3 36 FileUpload FileUpload goes beyond the browser input type file functionality and features an html5 powered rich solution with graceful degradation for legacy browsers Choose 3 Upload Cancel 2 Orange gif 2 65 KB i Info Tag fileUpload Component Class org primefaces component fileupload FileUpload Component Type org primefaces component FileUpload Component Family org primefaces component Renderer Type org primefaces component FileUploadRenderer Renderer Class org primefaces component fileupload FileUploadRenderer Attributes rendered TRUE boolean Boolean value to specify the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean value null Object Val
334. xecute when a key is released over input element onmousedown null String Client side callback to execute when a pointer button is pressed down over input element onmouseout null String Client side callback to execute when a pointer button is moved away from input element onmouseover null String Client side callback to execute when a pointer button is moved onto input element onmouseup null String Client side callback to execute when a pointer button is released over input element onmousemove null String Client side callback to execute when a pointer button is moved within input element onselect null String Client side callback to execute when text within input element is selected by user readonly FALSE Boolean Flag indicating that this component will prevent changes by the user size null Integer Number of characters used to determine the width of the input element Getting Started with InputTextarea InputTextarea usage is same as standard inputTextarea AutoResize When textarea is being typed if content height exceeds the allocated space textarea can grow automatically Use autoResize option to turn on off this feature 236 PrimeFaces User s Guide Remaining Characters InputTextarea can limit the maximum allowed characters with maxLength option and display the remaining characters count as well Skinning style and styleClass options apply to the textarea element along with the default wi inputtextar
335. y component that s capable of PPR such as commandLink poll remoteCommand and etc Prependid Setting prependId setting of a form has no effect on how PPR is used 440 PrimeFaces User s Guide lt h form prependId false gt lt p commandButton update display gt lt h outputText id display value bean value gt lt h form gt Clientid It is also possible to define the client id of the component to update lt h form id myform gt lt p commandButton update myform display gt lt h outputText id display value bean value gt lt h form gt Different NamingContainers If your page has different naming containers e g two forms you also need to add the container id to search expression so that PPR can handle requests that are triggered inside a namingcontainer that updates another namingcontainer Following is the suggested way using separator char as a prefix note that this uses same search algorithm as standard JSF 2 implementation lt h form id form1 gt lt p commandButton update form2 display gt lt h form gt lt h form id form2 gt lt h outputText id display value bean value gt lt h form gt Please read findComponent algorithm described in link below used by both JSF core and PrimeFaces to fully understand how component referencing works http docs oracle com javaee 6 api javax faces component UIComponent htmL JSF h form dat
336. y the rendering of the component when set to false component will not be rendered binding null Object An el expression that maps to a server side UIComponent instance in a backing bean event null String Dom event to attach the event that executes the animation Getting started with Effect Effect component needs a trigger and target which is effect s parent by default In example below clicking outputText trigger will run the pulsate effect on outputText target itself 166 PrimeFaces User s Guide Effect Target There may be cases where you want to display an effect on another target on the same page while keeping the parent as the trigger Use for option to specify a target With this setting outputLink becomes the trigger for the effect on graphicImage When the link is clicked initially hidden graphicImage comes up with a fade effect 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 List of Effects Following is the list of effects supported by PrimeFaces e blind e clip e drop explode fold e puff e slide scale bounce highlight e pulsate e shake size e transfer 167 PrimeFaces User s Guide Effect Configuration Each effect has different parameters for animation like colors duration and more In order to change the
337. z s 910 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 Time 00 00 Hour Minute Advanced Customization Now Done Use beforeShowDay javascript callback to customize the look of each date The function returns an array with two values first one is flag to indicate if date would be displayed as enabled and second parameter is the optional style class to add to date cell Following example disabled tuesdays and 49 PrimeFaces User s Guide Client Side API Widget PrimeFaces widget Calendar setDate date date Date to display Sets display date enable Enables calendar Skinning Calendar resides in a container element which style and stvleClass options apply Following is the list of structural style classes ui datepicker other month ui datepicker buttonpane 50 PrimeFaces User s Guide Style Class Applies ui datepicker current Today button ui datepicker close Close button As skinning style classes are global see the main Skinning section for more information 51 PrimeFaces User s Guide 3 9 Captcha Captcha is a form validation component based on Recaptcha API Moral Nantes m O AG 2 Info Tag captcha Component Class org primefaces component captcha Captcha Component Type org primefaces component Captcha Component Family org primefaces component Renderer Type org primefaces component CaptchaRenderer Renderer Class org primefaces component c

USER'S GUIDE 3.3

Contents

Download Pdf Manuals

Related Search

Related Contents