Show TOC

Background documentationInclude Files Locate this document in the navigation structure

 

This section contains the following include files used in the JSP file that defines the layout JSP Page:

  • JSP include commonTrayDesign.jsp

  • CSS include layout.css

  • JavaScript layout.js

JSP Include commonTrayDesign.jsp

This include file defines the tray design for all iViews. It uses a number of icon images that are rendered into the HTML: ivuToggleClose.png for closing the iView, ivuToggleOpen.png for opening it, and <IViewFamily>.png for each iView family that triggers the dropdown Options menu.

The background color of the tray depends on the iView’s family that has been set up for the iView by the administrator. For more information, seeIViewTrayColor.

Syntax Syntax

  1. <lyt:IfShowTray>
      <div class="ivuTray"
        style="background-color:<lyt:IViewTrayColor/>">
        <ul class="ivuHeader">
          <li class="ivuOptions">
            <img src="<%=mimePath%>/images/<lyt:IViewFamily/>.png" />
            <ul>
              <lyt:IViewExpandAvailable>
                <li>
                  <lyt:IViewExpand>
                    <lyt:IViewExpandTitle/>
                  </lyt:IViewExpand>
                </li>
              </lyt:IViewExpandAvailable>
              <lyt:IViewRefreshAvailable>
                <li>
                  <lyt:IViewRefresh>
                    <lyt:IViewRefreshTitle/>
                  </lyt:IViewRefresh>
                </li>
              </lyt:IViewRefreshAvailable>
              <lyt:IViewPersonalizeAvailable>
                <li>
                  <lyt:IViewPersonalize>
                    <lyt:IViewPersonalizeTitle/>
                  </lyt:IViewPersonalize>
                </li>
              </lyt:IViewPersonalizeAvailable>
              <lyt:IViewRemoveAvailable>
                <li>
                  <lyt:IViewRemove>
                    <lyt:IViewRemoveTitle/>
                  </lyt:IViewRemove>
                </li>
              </lyt:IViewRemoveAvailable>
              <lyt:IViewHelpAvailable>
                <li>
                  <lyt:IViewHelp>
                    <lyt:IViewHelpTitle/>
                  </lyt:IViewHelp>
                </li>
              </lyt:IViewAboutAvailable>
              <lyt:IViewAboutAvailable>
                <li>
                  <lyt:IViewAbout>
                    <lyt:IViewAboutTitle/>
                  </lyt:IViewAbout>
                </li>
              </lyt:IViewAboutAvailable>
            </ul>
          </li>
          <lyt:IfIViewTitleAvailable>
            <li class="ivuTitle">
              <lyt:IViewTitle/>
            </li>
          </lyt:IfIViewTitleAvailable>
          <lyt:IfIViewToggleAvailable>
            <li class="ivuToggle">
              <lyt:IViewToggleOpen>
                <img src="<%=mimePath%>/images/ivuToggleOpen.png" />
              </lyt:IViewToggleOpen>
              <lyt:IViewToggleClose>
                <img src="<%=mimePath%>/images/ivuToggleClose.png" />
              </lyt:IViewToggleClose>
            </li>
          </lyt:IfIViewToggleAvailable>
        </ul>
        <div class="ivuContent">
          <lyt:IViewContent/>
        </div>
      </div>
    </lyt:IfShowTray>
    
    <lyt:IfNotShowTray>
      <lyt:IViewContent/>
    </lyt:IfNotShowTray>
    
End of the code.
CSS Include layout.css

This CSS file defines the styles used by the layout both for the container columns and the single trays at runtime. Part of the selectors use of an CSS dropdown menu technique called “Suckerfish Dropdowns” (see http://htmldog.com/articles/suckerfish/dropdowns/).

Syntax Syntax

  1. .contLeft {
        float: left;
        width: 50%;
    }
    .contRight {
        float: right;
        width: 50%;
    }
    .contBottom {
        clear: both;
        width: 100%;
    }
    .ivuTray {
        border: 1px solid #666;
        margin: 0 0 10px 10px;
    }
    .ivuHeader,
    .ivuHeader li,
    .ivuOptions ul,
    .ivuTitle h3 {
        padding: 0; /* reset */
        margin: 0; /* reset */
    }
    .ivuHeader li {
        list-style: none; /* reset */
    }
    .ivuOptions {
        float: left;
        display: block;
    }
    .ivuToggle {
        float: right;
        display: block;
    }
    .ivuHeader img {
        display: block;
        width: 24px;
        height: 24px;
        border: 0;
    }
    .ivuHeader li ul {
        position: absolute; /* suckerfish menu */
        top: -9999px; /* suckerfish menu */
        width: 200px;
        background: #ddd;
        border: 1px solid #999;
    }
    .ivuHeader li:hover ul,
    .ivuHeader li.hover ul {
        top: auto; /* suckerfish menu */
    }
    .ivuOptions a {
        display: block;
        width: 100%;
        text-decoration: none;
        color: #333;
        line-height: 24px;
        text-indent: 5px;
    }
    .ivuOptions a:hover {
        background: #333;
        color: #ccc;
    }
    .ivuTitle {
        float: left;
        line-height: 24px;
        text-indent: 5px;
    }
    .ivuContent {
        clear: both; /* reset floats used in ivuHeader */
        background: #fff;
    }
    
End of the code.
JavaScript layout.js

This Javascript file defines a script that complements a missing feature of Microsoft Internet Explorer (see http://htmldog.com/articles/suckerfish/dropdowns/).

Syntax Syntax

  1. if (window.attachEvent) window.attachEvent('onload', function() {
        var li = document.getElementsByTagName('LI');
        for (var i = 0, l = li.length; i < l; i++) {
            if (li[i].className != 'ivuOptions') continue;
            li[i].onmouseover = function() {
                this.className += ' hover';
            }
            li[i].onmouseout = function() {
                this.className = this.className.replace(/ hover\b/, '');
            }
        }
    });
    
End of the code.