Overview
This document is intended to describe the standard layout and design for an MIT web application. It is based on the design currently used by InsideMIT java/struts applications, but it should be adaptable to any MVC style environment. The presentation layer is built from a set of templates described below. This make this documentation framework and language neutral, variables are signified with a "$" character, and included files are encloded in brackets, i.e. [ includeFile ]
Layout
There are two templates uses for page layout:
weblayout_form
weblayout
Each layout template serves as a container for all the components of a given web page, including the doctype declaration, html header, and body sections. Both layouts contain an html form declaration. The weblayout template has a default form action, while the form action in the weblayout_form template is set via javascript.
Weblayout_form Template
<\!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
[ head.template ]
</head>
<body>
<div class="portlet-font"><!-- This is placed in a separate block from body so the IE hack for small font sizes can be placed on body -->
<div id="hi1">
[ header.template ]
</div><!-- End hi1 -->
<div id="mid"><!-- THIS LAYOUT IS ONLY FOR PAGES THAT CAN HAVE A DEFAULT FORM ACTION -->
<form id="PageForm" action="$pageAction" method="post">
<button onclick="map.form.formAction('PageForm','$pageAction')" style="display:none">
This button just enables the enter key to perform the default form action
</button>
<div id="nav1">
[ utilityBox.template ]
[ legend.template ]
</div>
<div id="nav2">
<h1>$pageTitle</h1>
[ messages ]
</div>
[ bodyContent.template ]
</form>
</div><!-- End mid -->
<div id="lo2" >
[ footer.template ]
</div><!-- End lo2 -->
</div><!-- end class portlet-font -->
</body>
</html>