Behavior

Type a text into the input field. After leaving the input field, the given text is shown in the output field.

f:ajax

<tc:in label="Ajax Input" value="#{behaviorController.ajax}"> <f:ajax render="outAjax"/> </tc:in> Ajax Input Ajax Output

tc:event

<tc:in label="Event Input" value="#{behaviorController.event}"> <tc:event/> </tc:in> Event Input Event Output

It's possible to change the event name. For example if you want a double click event, change the event name to dblclick. This is done for the following two buttons.

<tc:button label="Ajax Double Click"> <f:ajax event="dblclick" render="outCounter" listener="..."/> </tc:button> <tc:button label="Event Double Click"> <tc:event event="dblclick" actionListener="..."/> </tc:button> Ajax Double Click Event Double Click Counter0

<tc:event> may contain <f:ajax> and <tc:operation> tags.

This is helpfull if the parent component cannot handle operations by itself.

Important The event attribute of the ajax children will be ignored.

Example

An example can be found for <tc:row> Option: 'open popup on click with AJAX'.

<tc:row> <tc:event> <f:ajax execute=":::popup" render=":::popup" listener="..."/> <tc:operation name="show" for=":::popup"/> </tc:event> </tc:row>

f:ajax and tc:event

This is an example to show how <f:ajax/> and <tc:event/> can be used together. The ajax event is called with a click and the event with a double click.

<tc:button id="btnAjaxEvent" label="Submit" type="submit"> <f:ajax event="click" render="out" listener="#{behaviorController.eventOutput}"/> <tc:event event="dblclick" actionListener="#{behaviorController.eventOutput}"/> </tc:button> <tc:out id="out" label="Output:" value="#{behaviorController.output}"/> Submit Output: