PrimeFaces
★コンポーネント一覧 PrimeFaces 5.1.7 2014/12/23
Ajax Core
• Basic
<p:commandButton value="Submit" update="xxxId" />
• Event
<p:ajax event="keyup" update="xxxId" />
• Listener
<p:ajax event="keyup" update="xxxId" listener="#{xxxBean.xxxMethod}" />
• Counter
<p:commandButton value="Count" actionListener="#{xxxBean.increment}" update="xxxId" />
• Process
<p:commandButton value="Submit" process="@all" update="xxxId" actionListener="#{xxxBean.xxxMethod}" />
※process: @all, @form, @this, @none, @parent, "@this,xxxId"
• Validation
<f:validateLength minimum="2" />
<p:ajax event="keyup" update="xxxId" />
• Dropdown
<p:selectOneMenu id="country" value="#{xxxBean.country}">
<p:ajax listener="#{xxxBean.onCountryChange}" update="city" />
<f:selectItem itemLabel="Select Country" itemValue="" noSelectionOption="true" />
<f:selectItems value="#{xxxBean.countries}" />
</p:selectOneMenu>
• PartialSubmit
<p:commandButton value="Submit" partialSubmit="true" process="xxxId" />
• Selector
<p:commandButton update="@(form)" value="Submit" />
<p:commandButton process="@(.ui-panel :input)" update="@(.ui-panel)" value="Inputs of Panel" />
<p:commandButton process="@(.ui-panel :input:not(select))" update="@(.ui-panel)" value="Inputs Except Select" />
• Search
<p:commandButton process="@parent:@parent" update="@form" value="Submit" />
<p:commandButton process="@form:@child(1):txt1" update="@form" value="Submit" />
• Poll
<p:poll interval="3" listener="#{xxxBean.increment}" update="xxxId" />
• Fragment
<p:fragment autoUpdate="true">
...
<p:commandButton value="Submit"/>
...
</p:fragment>
• Status
• RemoteCommand
<p:remoteCommand name="rc" update="xxxId" actionListener="#{xxxBean.xxxMethod}" />
<p:commandButton type="button" onclick="rc()" value="Submit" />
Input
• AutoComplete
• InputTextarea
• BooleanButton
• BooleanCheckbox
• Calendar
• CheckboxMenu
• OneMenu
• Editor
• InputText
• InputMask
• Listbox
• ManyButton
• ManyMenu
• ManyCheckbox
• MultiSelectListbox
• OneButton
• OneRadio
• Spinner
• Slider
• Switch
• Password
• Keyboard
• Rating
• ColorPicker
• Inplace
Button
• Button
• CommandButton
• CommandLink
• Link
• SplitButton
Data
• Carousel
• DataGrid
• DataList
• DataScroller
• DataTable
• PickList
• OrderList
• GMap
• DataExporter
• Mindmap
• Ring
• Schedule
• TagCloud
• Tree
• TreeTable
• HorizontalTree
Panel
• Accordion
• Dashboard
• Fieldset
• Grid CSS
• Layout
• NotificationBar
• OutputPanel
• Panel
• PanelGrid
• Ribbon
• ScrollPanel
• TabView
• Toolbar
• Wizard
Overlay
• ConfirmDialog
• Dialog
• LightBox
• OverlayPanel
• Tooltip
Menu
• Breadcrumb
• ContextMenu
• Dock
• MegaMenu
• Menu
• Menubar
• MenuButton
• PanelMenu
• SlideMenu
• Stack
• Steps
• TabMenu
• TieredMenu
Charts
• Area
• Bar
• Bubble
• Donut
• Line
• Pie
• MeterGauge
• OHLC
• Animate
• Export
• Interactive
• Live
• Static
• Zoom
• Combined
• MultiAxis
• Date
Messages
• Growl
• Messages
Multimedia
• Barcode
• Compare
• ContentFlow
• Cropper
• Galleria
• GraphicImage
• Media
• PhotoCam
• Switch
File
• Upload
• Download
DragDrop
• Draggable
• DataGrid
• DataTable
• Custom
Client Side Validation
• Basic
• Bean
• Custom
• Event
Dialog Framework
• Basic
• Data
• Message
Misc
• BlockUI
• Cache
• Captcha
• Clock
• Collector
• DefaultCommand
• Effect
• ExceptionHandler
• FontAwesome
• FeedReader
• Focus
• Hotkey
• IdleMonitor
• Log
• OutputLabel
• Printer
• ProgressBar
• RequestContext
• ResetInput
• Resizable
• Separator
• Spacer
• Spotlight
• Sticky
• Terminal
• ThemeSwitcher
• Watermark
★PrimeFaces Selector & jQuery Selector
jQuery Selector
http://api.jquery.com/category/selectors/
all forms
update="@(form)"
first form
update="@(form:first)"
all components that has “mystyle” style class
update="@(.mystyle)"
all inputs
update="@(:input)" process="@(:input)"
all datatables
update="@(.ui-datatable)"
input components inside panel
process="@(.ui-panel :input)" update="@(.ui-panel)"
input components but not select
process="@(:input:not(select)))"
input components that are disabled
process="@(:input:disabled)"
update="compId :form:compId @(:input)"
<h:form>
<p:inputText id="foo" value="#{bean.foo}" required="true" />
<p:message id="foo_m" for="foo" />
<p:inputText id="bar" value="#{bean.bar}" required="true" />
<p:message id="bar_m" for="bar" />
<p:commandButton action="#{bean.action}" update="foo_m bar_m" />
↓同様
<p:commandButton action="#{bean.action}" update="@(.ui-message)" />
</h:form>
※IDs of <p:message> are necessary
<h:form id="formId">
<h:outputText id="output1" styleClass="myclass" />
<h:outputText styleClass="myclass" />
<h:outputText id="output3" styleClass="myclass" />
<p:commandButton update="@(.myclass)" />
↓同様
<p:commandButton update=":formId:output1 :formId:output3" />
</h:form>
★process & update
Process attribute is server side and can only affect UIComponents implementing EditableValueHolder (input fields) or ActionSource (command fields).
<p:inputText id="foo" value="#{bean.foo}" />
<p:commandButton process="@this foo" action="#{bean.action}" />
↓同様
<p:panel>
<p:inputText id="foo" value="#{bean.foo}" />
<p:commandButton process="@parent" action="#{bean.action}" />
</p:panel>
↓同様
<h:form>
<p:inputText id="foo" value="#{bean.foo}" />
<p:commandButton process="@form" action="#{bean.action}" />
</h:form>
<p:commandXxx process> defaults to @form
<p:ajax process> and <f:ajax execute> defaults to @this
Update attribute is client side and can affect the HTML representation of all UIComponents.
Both update and render defaults to @none
<h:form>
<p:inputText id="txtRequiredInput" required="true"
value="#{xxxBean.inputRequiredValue}" />
<p:inputText id="txtInput"
value="#{xxxBean.inputValue}" />
<p:commandButton id="btnCancel" value="Cancel"
actionListener="#{xxxBean.cancel}"
update="@form"
immediate="true" required="true"をチェックしない
process="@this" /> cancel処理を実行
</h:form>
★AutoUpdate
<h:form>
<p:messages id="msgs" showDetail="true" />
<p:commandButton value="Button1" actionListener="#{xxxBean.addMsg1}" update="msgs"/>
<p:commandButton value="Button2" actionListener="#{xxxBean.addMsg2}" update="msgs"/>
</h:form>
↓同様
<h:form>
<p:messages showDetail="true" autoUpdate="true"/>
<p:commandButton value="Button1" actionListener="#{xxxBean.addMsg1}"/>
<p:commandButton value="Button2" actionListener="#{xxxBean.addMsg2}"/>
</h:form>