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