Multi-Panel User Interfaces

There are several reasons for implementing multi-panel user interfaces. These include multiple functional areas, such as areas for stock tickers, clocks, menus, and general work areas. The main issue addressed here is providing a relatively small area for navigation menus and a larger area for multiple work panels.

There are several ways for implementing HTML pages that include multiple areas or panels. The approach described here uses framesets and frames. Numerous tutorials are available for learning how to use these resources. A good starting point is the W3C's tutorial on Frames.

A key notion is that the basic underlying page, which is not visible describes a Frameset that includes multiple panels or Frames. The individual Frames are usually named, and a link can specify that the data referenced by the URL in the link is to be displayed within that area of the screen.

Below is an example of a simple two panel/frame display:

The overall page for this display is referred to as framesetHome.jsp. The core html to create it is shown below:

<frameset cols="160,*">
    <frame src="/<%= projectName %>/view/struts/homeNavigate.jsp" marginheight="0" marginwidth="10"
    name="framesetHomeLeft" scrolling="no" resize>
    <frame src="/<%= projectName %>/view/struts/mystoreHome.jsp" margainheight="0"
    margainwidth="0" name="framesetHomeRight" scrolling="auto" resize>
    <noframes>
    <body>
    </body>
    </noframes>
</frameset>

Note that the frameset includes two individual frames. One is named framesetHomeLeft and the other framesetHomeRight.

The initial content for framesetHomeLeft is the JSP, homeNavigate.jsp. It includes a set of links that include in their definition a target that is one of the named frames defined in the encompassing frameset. An example of such a link is shown below:

<a href='/<%= projectName %>/actionUserUpdate.do?userAction=loadUser' target="framesetHomeRight">
	<b>Update personal information</b></a>

Whenever a user selects the Update personal information link the page that is fetched from the server will be displayed witin the frame specified by the target parameter, namely framesetHomeRight in this example.

Note, there are several built-in targets that are useful. One in particular is the _parent target. It specifies that the encompassing frameset is to be used. If there is not higher level frameset, the display will revert to a single all inclusive page. such an option may be desirable for the result of a logout operation.