Blame view

samples/coordinatesGrid-sample/src/main/webapp/index.xhtml 4.26 KB
bernard authored
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>