| <?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"> |
| |
| <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"/> |
| <tc:selectItem itemValue="4" itemLabel="on dblclick 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="Name"> |
| <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:row id="sample4" rendered="#{sheetController.columnEventSample == 4}"> |
| <f:ajax render=":::detail" listener="#{sheetController.selectSolarObject}" id="columnEventAjax" |
| event="dblclick"/> |
| </tc:row> |
| |
| </tc:sheet> |
| </tc:box> |
| |
| <tc:box id="detail" label="Details" rendered="#{sheetController.columnEventSample ne 3}"> |
| <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> |