Behavior

There are two kinds of behaviors:

<f:ajax/> send an ajax request
<tc:event/> do a full page reload

Tag Library Documentation: <f:ajax/> | <tc:event/>

Basic example

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

Change the event

It's possible to change the event name. For example if you want a double click event, change the event name to dblclick.

<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>

Counter0

tc:event as a paranet component

<tc:event> can contain <f:ajax> or <tc:operation> tags.

This is helpfull if the parent component cannot handle operations by itself, for example <tc:row/>. In this case, the event attribute of <f:ajax/> will be ignored.

<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

<f:ajax/> and <tc:event/> can be used side by side. A click on the button fires the AJAX event, a double click do a full page reload.

<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}"/>

Output:

DOM events

The <tc:event/> tag allows some control over DOM events.

stopPropagation

The stopPropagation attribute prevents further propagation of the current event (see stopPropagation). This is useful for example for a sortable sheet with a component inside the bar-facet.

In the following example the input field for filter by names can be clicked without execute the sorting.

<tc:sheet ...>
  <tc:column label="Name" sortable="true">
    <f:facet name="bar">
      <tc:panel>
        <tc:style customClass="d-inline-block"/>
        <tc:event stopPropagation="true" omit="true">
          <tc:in value="#{sheetFilterController.name}">
            <f:ajax execute=":::sheet" render=":::sheet" listener="#{sheetFilterController.filter}"/>
          </tc:in>
        </tc:event>
      </tc:panel>
    </f:facet>
    <tc:out value="#{object.name}" plain="true"/>
  </tc:column>
  ...
</tc:sheet>

Name	Orbit	Distance	Period
Sun	-	0	0.0
Mercury	Sun	57910	87.97
Venus	Sun	108200	224.7
Earth	Sun	149600	365.26

Rows 1 to 4 of 88

Page 1 of 22

Custom event

If the customEventName attribute is set, a custom event is fired by the given name.

<tc:button label="Fire event">
  <tc:event omit="true" customEventName="my-event"/>
</tc:button>
<tc:panel>
  <tc:style customClass="custom-event-result"/>
</tc:panel>

document.addEventListener("DOMContentLoaded", function (event) {
  document.querySelector("body").addEventListener("my-event", () =>
    document.querySelector(".custom-event-result").textContent = "my-event fired at " + new Date());
});

Menu