<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich" xmlns:coordinatesGrid="http://richfaces.org/sandbox/coordinatesGrid" xmlns:notify="http://richfaces.org/sandbox/notify"> <head> <title>CoordinatesGrid sample</title> <style type="text/css"> .rf-cg td.enabled { background-color: #aaa; } .rf-cg td.disabled { background-color: inherit; } .booker td.enabled { background-color: #dfd; } .booker td.disabled { background-color: #ddd; } .rf-cg td.highlight { background-color: #{a4jSkin.headerBackgroundColor}; } </style> <script type="text/javascript"> function selectHandler(startX, startY, endX, endY) { jQuery("#status").html(startX + ";" + startY + ";" + endX + ";" + endY); } function clickHandler(x, y) { jQuery("#status").html("click:" + x + ";" + y); } </script> </head> <body class="rich-container"> <ui:include src="menu.xhtml"/> <p> </p> <notify:notifyMessages ajaxRendered="true"/> <h:panelGrid columns="3"> <h:panelGroup> <h:form> <h:panelGrid columns="2"> <h:outputLabel value="rows" for="rows"/> <h:inputText value="#{seatSelector.rows}" id="rows"/> <h:outputLabel value="cols" for="cols"/> <h:inputText value="#{seatSelector.cols}" id="cols"/> </h:panelGrid> <h:commandButton value="Submit"/> </h:form> </h:panelGroup> </h:panelGrid> <h:form> <h:panelGrid columns="2"> <coordinatesGrid:coordinatesGrid selectable="true" value="#{seatSelector.dataModel}" var="seat" rows="#{seatSelector.rows}" cols="#{seatSelector.cols}" onselect="selectHandler(startX,startY,endX,endY);" onclick="clickHandler(x,y);" selectionListener="#{seatSelector.itemsSelected}" rowIndexVar="rowIndex" rowHeaderText="#{rowIndex+1}" rowHeaderPosition="both" colIndexVar="colIndex" colHeaderText="#{colIndex+1}" colHeaderPosition="both" reRender="booker" > <coordinatesGrid:coordinatesGridItem x="#{seat.seatNr}" y="#{seat.row}" text="#{seat.row}x#{seat.seatNr}" styleClass="enabled"/> </coordinatesGrid:coordinatesGrid> <coordinatesGrid:coordinatesGrid id="booker" styleClass="booker" value="#{seatSelector.dataModel}" var="seat" rows="#{seatSelector.rows}" cols="#{seatSelector.cols}" onselect="selectHandler(startX,startY,endX,endY);" onclick="clickHandler(x,y);" selectionListener="#{seatSelector.itemsReserved}" rowIndexVar="rowIndex" rowHeaderText="#{rowIndex+1}" rowHeaderPosition="both" colIndexVar="colIndex" colHeaderText="#{colIndex+1}" colHeaderPosition="both" > <coordinatesGrid:coordinatesGridItem x="#{seat.seatNr}" y="#{seat.row}" text="#{seat.row}x#{seat.seatNr}" styleClass="#{seat.enabled ? 'enabled' : 'disabled'}"/> </coordinatesGrid:coordinatesGrid> </h:panelGrid> </h:form> <div id="status"></div> <rich:insert src="/index.xhtml" highlight="xhtml" rendered="#{showSource!=false}"/> </body> </html>