index.xhtml
4.26 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!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>