A <tc:sheet/> can contain a <tc:row/> tag with a containing <tc:event/> tag. The event type can be set by the event attribute. Possible values are 'click' and 'dblclick'.
<tc:sheet/>
<tc:row/>
<tc:event/>
event
Select an object from the SolarObjects list.
<?xml version="1.0" encoding="UTF-8"?> <!-- * Licensed to the Apache Software Foundation (ASF) under one or more * contributor license agreements. See the NOTICE file distributed with * this work for additional information regarding copyright ownership. * The ASF licenses this file to You under the Apache License, Version 2.0 * (the "License"); you may not use this file except in compliance with * the License. You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. --> <ui:composition template="/main.xhtml" xmlns="http://www.w3.org/1999/xhtml" xmlns:tc="http://myfaces.apache.org/tobago/component" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core"> <ui:param name="title" value="#{demoBundle.sheet_event} <tc:row>"/> <p>A <code class="language-markup"><tc:sheet/></code> can contain a <code class="language-markup"><tc:row/></code> tag with a containing <code class="language-markup"><tc:event/></code> tag. The event type can be set by the <code>event</code> attribute. Possible values are 'click' and 'dblclick'. </p> <tc:section label="Example"> Here are different examples: <tc:selectOneRadio id="changeExample" value="#{sheetController.columnEventSample}"> <tc:selectItem itemValue="0" itemLabel="on click with AJAX"/> <tc:selectItem itemValue="1" itemLabel="on click with full request"/> <tc:selectItem itemValue="2" itemLabel="on double click with full request"/> <tc:selectItem itemValue="3" itemLabel="open popup on click with AJAX"/> <f:ajax render="example"/> </tc:selectOneRadio> <p>Select an object from the SolarObjects list.</p> <tc:segmentLayout id="example" medium="5seg 7seg"> <tc:box label="Solar Objects"> <tc:sheet id="s1" value="#{sheetController.solarList}" var="object" columns="1fr" markup="small"> <tc:style maxHeight="486px"/> <tc:column label="#{demoBundle.solarArrayName}"> <tc:out value="#{object.name}" id="t_name" labelLayout="skip"/> </tc:column> <tc:row id="sample0" rendered="#{sheetController.columnEventSample == 0}"> <f:ajax render=":::detail" listener="#{sheetController.selectSolarObject}" id="columnEventAjax"/> </tc:row> <tc:row id="sample1" rendered="#{sheetController.columnEventSample == 1}"> <tc:event actionListener="#{sheetController.selectSolarObject}" immediate="true" id="columnEventClick" event="click"> <tc:resetInputActionListener/> </tc:event> </tc:row> <tc:row id="sample2" rendered="#{sheetController.columnEventSample == 2}"> <tc:event actionListener="#{sheetController.selectSolarObject}" immediate="true" id="columnEventDblClick" event="dblclick"> <tc:resetInputActionListener/> </tc:event> </tc:row> <tc:row id="sample3" rendered="#{sheetController.columnEventSample == 3}"> <tc:event> <f:ajax id="columnEventPopup" execute=":::popup" render=":::popup" listener="#{sheetController.selectSolarObject}"/> <tc:operation name="show" for=":::popup"/> </tc:event> </tc:row> </tc:sheet> </tc:box> <tc:box id="detail" label="Details" rendered="#{sheetController.columnEventSample le 2}"> <tc:panel rendered="#{sheetController.selectedSolarObject != null}"> <tc:in id="name" label="Name" value="#{sheetController.selectedSolarObject.name}" required="true"/> <tc:in label="Number" value="#{sheetController.selectedSolarObject.number}"/> <tc:in label="Orbit" value="#{sheetController.selectedSolarObject.orbit}"/> <tc:in label="Distance" value="#{sheetController.selectedSolarObject.distance}"/> <tc:in label="Period" value="#{sheetController.selectedSolarObject.period}"/> <tc:in label="Obliquity" value="#{sheetController.selectedSolarObject.incl}"/> <tc:in label="Eccentricity" value="#{sheetController.selectedSolarObject.eccen}"/> <tc:in label="Discoverer" value="#{sheetController.selectedSolarObject.discoverer}"/> <tc:in label="Discover Year" value="#{sheetController.selectedSolarObject.discoverYear}"/> </tc:panel> <tc:panel rendered="#{sheetController.selectedSolarObject == null}"> <tc:out value="Please select a solar object on the left side to show its details."/> </tc:panel> </tc:box> </tc:segmentLayout> <tc:panel id="reloadable"> <tc:popup id="popup"> <tc:box label="Details"> <tc:in id="popupName" label="Name" value="#{sheetController.selectedSolarObject.name}" required="true"/> <tc:in label="Number" value="#{sheetController.selectedSolarObject.number}"/> <tc:in label="Orbit" value="#{sheetController.selectedSolarObject.orbit}"/> <tc:in label="Distance" value="#{sheetController.selectedSolarObject.distance}"/> <tc:in label="Period" value="#{sheetController.selectedSolarObject.period}"/> <tc:in label="Obliquity" value="#{sheetController.selectedSolarObject.incl}"/> <tc:in label="Eccentricity" value="#{sheetController.selectedSolarObject.eccen}"/> <tc:in label="Discoverer" value="#{sheetController.selectedSolarObject.discoverer}"/> <tc:in label="Discover Year" value="#{sheetController.selectedSolarObject.discoverYear}"/> <tc:buttons> <tc:button id="submit" label="Submit" action="#{popupController.closePopup1}"> <f:ajax execute="popup" render=":::example"/> <tc:operation name="hide" for="popup"/> </tc:button> <tc:button id="cancel" label="Cancel" omit="true"> <tc:operation name="hide" for="popup"/> </tc:button> </tc:buttons> </tc:box> </tc:popup> </tc:panel> </tc:section> </ui:composition>