HTML layout of JSP pages

This document describes the HTML layout for JSP pages of the OSB web applications.

It provides useful information how to customize the HTML pages:
one CSS stylesheet defines the format the elements via their class attribute.

In general one page of a OSB web application consists of 2 frames:

The narrow frame on the left side provides an overview of the available objects.
One variant uses a tree to display hierarchical objects,
the other flavour provides the objects a list.
The main frame provides the details of one object.

There is only one style sheet, osbwepapp.css that must be included in every JSP page.
Its defaults are designed for the main page (minimum usage of the attribute class).

Object tree (left frame)

The prototype for this frame is frame_nw.jsp.

<%-- html page **************************************************** --%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <link rel="stylesheet" type="text/css"
        href="<%=rootPath%><%=comResBdl.getString("osbwebapp.css")%>">
  ...
</head>

The body starts with the inclusion of the global application header:

<body>
  <!-- page header -->
  <jsp:include page="/common/frame_header.jsp" flush="true"/>

Below is the table with the object tree. The header row provides the title, the 2nd row contains the tree itself.

<table class="tree">

  <!-- title -->
  <tr>
    <th class="treehead">
      <a class="treehead" href="nw_list.jsp" title="<%=naResBdl.getString("view.nw.all")%>">
          <%=naResBdl.getString("view.nw.all")%>
      </a>
    </th>
  </tr>

  <!-- list of networks -->
  <tr>
    <td class="treecontent">
      <script type="text/javascript">
      <!--
        var tree = new WebFXTree('<%=naResBdl.getString("global.nw.s")%>', '');
        ... construct the tree
        document.write(tree);
      -->
      </script>
    </td>
  </tr>
</table>

Object list (left frame)

The prototype for this frame is frame_tr.jsp.

<%-- html page **************************************************** --%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
  <link rel="stylesheet" type="text/css"
        href="<%=rootPath%><%=comResBdl.getString("osbwebapp.css")%>">
  ...
</head>

Again the body starts with the inclusion of the global application header:

<body>
  <!-- page header -->
  <jsp:include page="/common/frame_header.jsp" flush="true"/>

The table that contains the objects consists of the header row that provides the title ...

<table class="tree">
  <!-- title -->
  <tr>
    <th class="treehead">
      <a class="treehead" href="tr_list.jsp" target="mainFrame"
         title="<%=naResBdl.getString("view.tr.all")%>">
         <%=naResBdl.getString("view.tr.all")%>
      </a>
    </th>
  </tr>

... and a row for each object. Note the way we show the user that there are no objects or the current object.

  <!-- content -->
  <%
    if (size == 0) {
  %>
  <tr>
    <td class="treenocontent">
      <%=naResBdl.getString("info.no")%> <%=naResBdl.getString("global.tr")%>
    </td>
  </tr>
  <%
    }
    else {
      // JSP code to iterate the objects
      for (int i = 0; i < size; i++) {
  %>
  <tr>
    <%
        if (id == trId) {
    %>
      <td class="treecurcontent" title="<%=title%>">
        <a href="tr_view.jsp?trId=<%=id%>" target="mainFrame"><%=rn%></a>
      </td>
    <%
        } else {
    %>
      <td class="treecontent" title="<%=title%>">
        <a href="tr_view.jsp?trId=<%=id%>" target="mainFrame"><%=rn%></a>
      </td>
    <%
        }
    %>
    </tr>
  <%
      } // end `for'
    }   // end `if-else' - no data
  %>

Object details (main frame)

The prototype for this frame is nw_view.jsp.

<%-- html page **************************************************** --%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
  <link rel="stylesheet" type="text/css"
        href="<%=rootPath%><%=comResBdl.getString("osbwebapp.css")%>">
  ...
</head>

The body loads all images and then includes the application header:

<body onLoad="MM_preloadImages('<%=rootPath%><%=comResBdl.getString("img.bb.delete")%>',
                               '<%=rootPath%><%=comResBdl.getString("img.bb.configure")%>',
                               '<%=rootPath%><%=comResBdl.getString("img.bb.edit")%>');">

  <%-- navigation --%>
  <jsp:include page="na_nav.jsp" flush="true"/>

The content of the page is enclosed by a form, a center tag and a div that defines the width of the content:

  <form  method="post" name="form1" action="<%=rootPath%>/servlet/naMod">
    <input type="hidden" name="nwId" value="<%=nwId_%>">

    <center>
    <div class="mainpage">

The main content of the page consists of:

the title table that only contains a header row:
(A table is needed because a paragraph <p> or heading <h1> yields a different width in IE.)

<!-- page header -->
<table class="maintitle">
  <tr>
    <th class="maintitle">
      <%=naResBdl.getString("global.nw")%>
    </th>
  </tr>
</table>

the details of the object with the following standard widths:

item	width
attribute name	25%
attribute value	75%
radio in 1st column	5%
object id	8%
object name	30% or unspecified

<!-- network info: 2 columns -->
<table class="content">
  <colgroup>
    <col width="25%">
    <col width="75%">
  </colgroup>

  <tr class="odd">
    <td class="attrname">
      <%=naResBdl.getString("id.nw")%>
    </td>
    <td>
      <%=nwId_%>
    </td>
  </tr>

  <tr class="even">
    <td class="attrname">
       <%=naResBdl.getString("global.name")%>
     </td>
     <td>
       <%=name%>
     </td>
  </tr>

for logical groups an intermediate title can be used
(avoidance of doubt: the class for the next row continues from the last regular row):

  <tr class="grouptitle">
    <td colspan="2">
      <%=naResBdl.getString("global.nw.addr.info")%>
    </td>
  </tr>

  <tr class="odd">
    <td class="attrname">
      <%=naResBdl.getString("global.cc")%>
    </td>
    <td>
      ...
    </td>
  </tr>

  <tr class="even">
    ...
  </tr>

and finally the row with the push buttons:

  <!-- push buttons -->
  <tr>
    <td class="pb" colspan="2">
      ...
    </td>
  </tr>
</table>

directly related dependent objects are provided in optional sections,
each with two tables; one for the heading and one for the listing of the child objects:

<!-- network elements -->
<table class="header">
  <tr>
    <th class="subtitle">
      <%=naResBdl.getString("global.nwe.s")%>
    </th>
  </tr>
</table>

<table class="content">
  <colgroup>
    <col width="5%">
    <col width="8%">
    <col width="30%">
    <col>
  </colgroup>

  <!-- header row -->
  <tr>
    <th>
    </th>
    <th>
      <%=naResBdl.getString("global.id")%>
    </th>
    <th>
      <%=naResBdl.getString("global.name")%>
    </th>
    <th>
      <%=naResBdl.getString("global.desc")%>
    </th>
  </tr>

  <!-- network elements -->
  <%
    if (size == 0) {
  %>
  <tr class="odd">
    <td class="infoText" colspan="4">
      <%=naResBdl.getString("info.no")%> <%=naResBdl.getString("global.nwe")%>!
    </td>
  </tr>
  <%
    }
    else {
        NetworkElement nwe = null;
        ...
        for (int i=0; i < size; i++) {
            if (i%2 == 0) {
  %>
  <tr class="odd">
  <%
            }
            else {
  %>
  <tr class="even">
  <%
            }
  %>
    <td>
      <input type="radio" name="nweId" value="<%=nweId%>">
    </td>
      <td align="right">
          <%=nweId%>
      </td>
      <td>
          <a href="nwe_view.jsp?nwId=<%=nwId_%>&nweId=<%=nweId%>"><%=nweName%></a>
      </td>
      <td>
          <%=nweDesc%>
      </td>
    </tr>
  <%
        } // for - all network elements
    }     // if - not empty network elements
  %>

  <!-- push buttons -->
  <tr>
    <td class="pb" colspan="4">
       ...
    </td>
  </tr>
</table>

The end of the page includes the general footer and synchronises the tree/list on the left with the current object.

  </div>
  </center>
  </form>

  <%-- footer page --%>
  <jsp:include page="/common/footer.jsp" flush="true"/>

  <script type="text/javascript">
  <!--
    parent.listFrame.location.href = "frame_nw.jsp?nwId=<%=nwId_%>";
  -->
  </script>
</body>
</html>