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>