SummaryStart TimeEnd TimeDescription
Yoga, Level 17/31/10 6:50 AM7/31/10 8:00 AMInstructor: Ivan Doe
Fee: $40
Power Yoga, Level 17/31/10 10:50 AM7/31/10 12:00 PMInstructor: Gregory House
Fee: $30
Yoga, Level 27/31/10 1:00 PM7/31/10 2:55 PMInstructor: Melany Scott
Fee: $25
Intro to Yoga7/31/10 3:30 PM7/31/10 5:30 PMInstructor: Tony Bricks
Fee: Free
Gentle Yoga, Level 17/31/10 5:55 PM7/31/10 7:25 PMInstructor: Alex West
Fee: $30
Meditation7/31/10 9:40 PM7/31/10 11:30 PMInstructor: Gregory House
Fee: $20
Yoga, Level 17/30/10 7:00 AM7/30/10 8:20 AMInstructor: Ivan Doe
Fee: $40
Meditation7/30/10 9:00 AM7/30/10 11:30 AMInstructor: Tony Bricks
Fee: $20
Yoga, Level 37/30/10 1:00 PM7/30/10 2:55 PMInstructor: Melany Scott
Fee: $25
Gentle Yoga For Those with Special Considerations7/30/10 7:55 PM7/30/10 7:25 PMInstructor: Alex West
Fee: $25
Meditation8/1/10 8:30 AM8/1/10 11:30 AMInstructor: Tony Bricks
Fee: $20
Yoga, Level 2/38/1/10 1:00 PM8/1/10 2:30 PMInstructor: Ivan Doe
Fee: $40
Yoga and Meditation, Level 2/38/1/10 4:00 PM8/1/10 5:55 PMInstructor: Melany Scott
Fee: $45
Gentle Yoga and Meditation8/1/10 8:30 PM8/1/10 10:00 PMInstructor: Matt Hunt
Fee: $55
tasks.jsp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j" %>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://openfaces.org/" prefix="o" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Tasks</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen,projection"/>
    <link rel="stylesheet" href="css/navigation.css" type="text/css" media="screen,projection"/>
    <link rel="stylesheet" href="css/sidebar.css" type="text/css" media="screen,projection"/>
    <link rel="stylesheet" href="css/content.css" type="text/css" media="screen,projection"/>

    <link rel="stylesheet" href="css/print.css" type="text/css" media="print"/>
    <link rel="stylesheet" href="css/handheld.css" type="text/css" media="handheld"/>

    <link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon"/>
    <link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon"/>
    <link rel="stylesheet" href="css/mail.css" type="text/css" media="screen,projection"/>
    <script type="text/javascript">
        function requestsSelectionChanged() {
            var cancelChangesBtn = O$('form:cancelChangesLink');
            var inEditingState = cancelChangesBtn != null;

            if (inEditingState) {
                O$('form:cancelChangesLink').onclick();
            }
        }
    </script>
</head>
<body>
<f:view>
    <h:form id="form">

        <o:ajaxSettings onajaxend="refreshButtons();"/>

        <div id="Navigation" class="NavigationSelected-Tasks">
            <div class="NavigationPanel" id="Navigation-Email">
                <h1>Email</h1>
                <a href="mail.jsf" class="label">
                    <img src="images/titles/navigation-email.png" alt="Email"/>
                </a>
            </div>

            <div class="NavigationPanel" id="Navigation-Calendar">
                <h1>Calendar</h1>
                <a href="calendar.jsf" class="label">
                    <img src="images/titles/navigation-calendar.png" alt="Calendar"/>
                </a>
            </div>

            <div class="NavigationPanel" id="Navigation-Tasks">
                <h1>Tasks</h1>

                <h:panelGroup id="operations">
                    <h:panelGroup id="saveChangesPanelId" rendered="#{DayTableBean.editingRequest}"
                                  styleClass="NavigationControls">
                        <h:commandLink id="saveChangesLink"
                                       styleClass="NavigationControls-tasks-save"
                                       onclick="O$.ajax.request(this, event, {render: 'form:tasks form:operations', listener: 'DayTableBean.saveChanges'}); return false;">
                            <h:outputText id="saveChanges" value="Save Changes"/>
                        </h:commandLink>
                        <h:commandLink id="cancelChangesLink"
                                       styleClass="CancelChanges"
                                       onclick="O$.ajax.request(this, event, {render: 'form:tasks form:operations', listener: 'DayTableBean.cancelEditing'}); return false;">
                            <h:outputText id="cancelChanges" value="Cancel"/>
                        </h:commandLink>
                    </h:panelGroup>
                    <h:panelGroup id="editingRequestPanelId" rendered="#{!DayTableBean.editingRequest}"
                                  styleClass="NavigationControls">
                        <h:commandLink id="addTaskLink"
                                       styleClass="NavigationControls-tasks-new"
                                       onclick="O$.ajax.request(this, event, {render: 'form:tasks form:operations', listener: 'DayTableBean.addNewTask'}); return false;">
                            <h:outputText id="addTask" value="New Task"/>
                        </h:commandLink>
                        <h:commandLink id="editTaskLink"
                                       styleClass="NavigationControls-tasks-edit"
                                       onclick="O$.ajax.request(this, event, {render: 'form:tasks form:operations', listener: 'DayTableBean.editTask'}); return false;">
                            <h:outputText id="editTask" value="Edit Task"/>
                        </h:commandLink>
                        <h:commandLink id="deleteTaskLink"
                                       styleClass="NavigationControls-tasks-delete"
                                       onclick="O$.ajax.request(this, event, {render: 'form:tasks', listener: 'DayTableBean.deleteTask'}); return false;">
                            <h:outputText id="deleteTask" value="Delete Task"/>
                        </h:commandLink>
                        <img src="images/icons/navigation-tasks-separator.png" alt="" style="float:left; margin:5px;"/>
                        <rich:dropDownMenu id="richMenu"
                                           value="Columns"
                                           submitMode="ajax"
                                           direction="bottom-right" styleClass="NavigationControls-tasks-columns">
                            <rich:menuGroup value="Hide" direction="right">
                                <rich:menuItem value="Summary" action="#{DayTableBean.hideSummaryColumn}"
                                               reRender="form:tasks, form:richMenu"
                                               disabled="#{!DayTableBean.summaryColumnRendered}"/>
                                <rich:menuItem value="Start Time" action="#{DayTableBean.hideStartTimeColumn}"
                                               reRender="form:tasks, form:richMenu"
                                               disabled="#{!DayTableBean.startTimeColumnRendered}"/>
                                <rich:menuItem value="End Time" action="#{DayTableBean.hideEndTimeColumn}"
                                               reRender="form:tasks, form:richMenu"
                                               disabled="#{!DayTableBean.endTimeColumnRendered}"/>
                                <rich:menuItem value="Description" action="#{DayTableBean.hideDescriptionColumn}"
                                               reRender="form:tasks, form:richMenu"
                                               disabled="#{!DayTableBean.descriptionColumnRendered}"/>
                            </rich:menuGroup>
                            <rich:menuGroup value="Show" direction="right">
                                <rich:menuItem value="Summary" action="#{DayTableBean.showSummaryColumn}"
                                               reRender="form:tasks, form:richMenu"
                                               disabled="#{DayTableBean.summaryColumnRendered}"/>
                                <rich:menuItem value="Start Time" action="#{DayTableBean.showStartTimeColumn}"
                                               reRender="form:tasks, form:richMenu"
                                               disabled="#{DayTableBean.startTimeColumnRendered}"/>
                                <rich:menuItem value="End Time" action="#{DayTableBean.showEndTimeColumn}"
                                               reRender="form:tasks, form:richMenu"
                                               disabled="#{DayTableBean.endTimeColumnRendered}"/>
                                <rich:menuItem value="Description" action="#{DayTableBean.showDescriptionColumn}"
                                               reRender="form:tasks, form:richMenu"
                                               disabled="#{DayTableBean.descriptionColumnRendered}"/>
                            </rich:menuGroup>
                        </rich:dropDownMenu>
                    </h:panelGroup>
                </h:panelGroup>

            </div>
        </div>

        <div id="Sidebar" class="Sidebar">
            <div class="Sidebar-content">

            </div>

            <div class="SidebarFooter">
                <a class="ButtonPageSource" onclick="O$('form:pageSource').showCentered(); return false;">
                    <span>View page source</span>
                </a>

                <div class="Copyright">
                    <p>&copy;&nbsp;TeamDev Ltd. | OpenFaces.org</p>
                </div>
            </div>
        </div>

        <div id="Content" class="Content" style="overflow-y: hidden">
            <o:dataTable id="tasks" var="task"
                         value="#{DayTableBean.tasks}"
                         headerRowClass="TableHeader"
                         sortedColumnHeaderStyle="background: url('images/treetable/header_selected.gif') repeat-x;"
                         sortedColumnClass="SortedColumn"
                         bodyRowStyle="height: 40px;"
                         bodyOddRowStyle="background: #f4f4f4; height: 40px;"
                         style="width: 100%; height: 100%;">
                <o:scrolling/>
                <o:singleRowSelection onchange="requestsSelectionChanged();"
                                      rowData="#{DayTableBean.selectedTask}"/>
                <o:row condition="#{DayTableBean.editingThisRow}" styleClass="EditableRow">
                    <o:cell>
                        <h:inputText value="#{task.name}" style="width: 90%" autocomplete="off"/>
                    </o:cell>
                    <o:cell>
                        <rich:calendar value="#{task.startDate}"
                                       popup="true"
                                       datePattern="d/M/yy HH:mm"
                                       locale="#{DayTableBean.locale}"/>
                    </o:cell>
                    <o:cell>
                        <rich:calendar value="#{task.endDate}"
                                       popup="true"
                                       datePattern="d/M/yy HH:mm"
                                       locale="#{DayTableBean.locale}"/>
                    </o:cell>
                    <o:cell>
                        <h:inputText value="#{task.description}" style="width: 90%" autocomplete="off"/>
                    </o:cell>
                </o:row>
                <o:column id="summaryColumn"
                          sortingExpression="#{task.name}"
                          rendered="#{DayTableBean.summaryColumnRendered}"
                          style="padding-left: 15px;">
                    <f:facet name="header">
                        <h:outputText value="Summary" id="summaryColumnHeader" style="width:100%;"/>
                    </f:facet>
                    <h:outputText value="#{task.name}"/>
                </o:column>
                <o:column sortingExpression="#{task.startDate}" id="startTimeColumn"
                          rendered="#{DayTableBean.startTimeColumnRendered}">
                    <f:facet name="header">
                        <h:outputText value="Start Time" id="startTimeColumnHeader"/>
                    </f:facet>
                    <h:outputText value="#{task.startDate}"
                                  converter="#{DayTableBean.taskDateConverter}"/>
                </o:column>
                <o:column id="endTimeColumn"
                          sortingExpression="#{task.endDate}"
                          rendered="#{DayTableBean.endTimeColumnRendered}">
                    <f:facet name="header">
                        <h:outputText value="End Time" id="endTimeColumnHeader"/>
                    </f:facet>
                    <h:outputText value="#{task.endDate}"
                                  converter="#{DayTableBean.taskDateConverter}"/>
                </o:column>
                <o:column id="descriptionColumn"
                          sortingExpression="#{task.description}"
                          rendered="#{DayTableBean.descriptionColumnRendered}">
                    <f:facet name="header">
                        <h:outputText value="Description" id="descriptionColumnHeader"/>
                    </f:facet>
                    <h:outputText value="#{task.description}" escape="false"/>
                </o:column>
            </o:dataTable>


        </div>

        <o:window id="pageSource" width="70%" height="70%"
                  styleClass="SourceView"
                  modal="true"
                  modalLayerClass="SourceViewModalLayer">
            <f:facet name="caption"><h:outputText value="tasks.jsp"/></f:facet>
            <rich:insert src="/tasks.jsp" highlight="xhtml"/>
        </o:window>
    </h:form>
</f:view>
</body>
</html>