example/test/src/main/webapp/tc/popup/z-index.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!--
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
-->


<f:view
    xmlns:jsp="http://java.sun.com/JSP/Page"
    xmlns:tc="http://myfaces.apache.org/tobago/component"
    xmlns:tx="http://myfaces.apache.org/tobago/extension"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core">

  <tc:page width="800px" height="600px" id="page">
    <tc:box label="Page (z-index = 1 (TODO))">
      <f:facet name="layout">
        <tc:gridLayout rows="60px;fixed;*;fixed"/>
      </f:facet>
      <tc:out
          value="This page is to check, if the layered presentation is corret. It will be usually defined by setting
           the z-index in CSS or by the order of rendering in the document. The footer and header of the sheet
           also have the z-index set in the common renderer."/>
      <tx:date label="Date">
        <f:convertDateTime pattern="dd/MM/yyyy"/>
      </tx:date>
      <tc:sheet var="v1" columns="*;*;*" showRowRange="left" showPageRange="right" showDirectLinks="center">
        <tc:column label="Column 1"/>
        <tc:column label="Column 2"/>
        <tc:column label="Column 3"/>
      </tc:sheet>
      <tc:panel>
        <f:facet name="layout">
          <tc:gridLayout columns="3*;*"/>
        </f:facet>
        <tc:cell/>
        <tc:button label="Open Popup">
          <f:facet name="popup">
            <tc:popup width="600px" height="470px" left="100px" top="100px" id="popup-2">
              <tc:box label="Popup (z-index = 2 (TODO))" id="box-2">
                <f:facet name="layout">
                  <tc:gridLayout rows="fixed;1*;fixed"/>
                </f:facet>
                <tx:date label="Date">
                  <f:convertDateTime pattern="dd/MM/yyyy"/>
                </tx:date>
                <tc:sheet var="v1" columns="*;*;*" showRowRange="left" showPageRange="right" showDirectLinks="center">
                  <tc:column label="Column 1"/>
                  <tc:column label="Column 2"/>
                  <tc:column label="Column 3"/>
                </tc:sheet>
                <tc:panel>
                  <f:facet name="layout">
                    <tc:gridLayout columns="*;*;*;*"/>
                  </f:facet>
                  <tc:button label="Open Sub Popup">
                    <f:facet name="popup">
                      <tc:popup width="400px" height="500px" left="200px" top="50px" id="popup-3">
                        <tc:box label="Popup (z-index = 3 (TODO))" id="box-3">
                          <f:facet name="layout">
                            <tc:gridLayout rows="fixed;1*;fixed"/>
                          </f:facet>
                          <tx:date label="Date">
                            <f:convertDateTime pattern="dd/MM/yyyy"/>
                          </tx:date>
                          <tc:sheet var="v1" columns="*;*;*" showRowRange="left" showPageRange="right"
                                    showDirectLinks="center">
                            <tc:column label="Column 1"/>
                            <tc:column label="Column 2"/>
                            <tc:column label="Column 3"/>
                          </tc:sheet>
                          <tc:panel>
                            <f:facet name="layout">
                              <tc:gridLayout columns="1*;1*;1*"/>
                            </f:facet>
                            <tc:button label="Cancel">
                              <tc:attribute name="popupClose" value="immediate"/>
                            </tc:button>
                            <tc:button label="Redisplay">
                              <tc:attribute name="renderedPartially" value="box-3"/>
                            </tc:button>
                            <tc:button label="Ok">
                              <tc:attribute name="popupClose" value="afterSubmit"/>
                            </tc:button>
                          </tc:panel>
                        </tc:box>
                      </tc:popup>
                    </f:facet>
                  </tc:button>
                  <tc:button label="Cancel">
                    <tc:attribute name="popupClose" value="immediate"/>
                  </tc:button>
                  <tc:button label="Redisplay">
                    <tc:attribute name="renderedPartially" value="box-2"/>
                  </tc:button>
                  <tc:button label="Ok">
                    <tc:attribute name="popupClose" value="afterSubmit"/>
                  </tc:button>
                </tc:panel>
              </tc:box>
            </tc:popup>
          </f:facet>
        </tc:button>
      </tc:panel>
    </tc:box>
  </tc:page>
</f:view>