Include Files

Use

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, see IViewTrayColor .

               <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>

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/ Information published on non-SAP site ).

               .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;
}

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/ Information published on non-SAP site ).

               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/, '');
        }
    }
});