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">
<tiles:insert attribute="header" />
</div><!- End hi1 ->
<div id="mid"><!- THIS LAYOUT IS ONLY FOR PAGES THAT CAN HAVE A DEFAULT FORM ACTION ->
<html-el:form styleId="PageForm" action="$
" method="post">
<input type="hidden" name="IDDforward" id="IDDforward" value="" />
<%- this won't work anymore -%>
<logic:present name="pageAction">
<bean:define id="pageActionDo"><%= pageAction.toString().substring(1) %>.do</bean:define>
<button onclick="dojo.mit.formAction('PageForm','<bean:write name="pageActionDo"/>')" style="display:none">This button just enables the enter key to perform the default form action</button>
</logic:present>
<input type="hidden" name="pageName" id="pageName" value="<tiles:insert attribute="pageName"/>" />
<input type="hidden" name="IDDforward" id="IDDforward" value="" />
<div id="nav1">
<tiles:insert attribute="utilityBox"/>
<tiles:insert attribute="legend" ignore="true"/>
</div>
<div id="nav2">
<h1><tiles:insert attribute="pageTitle"/></h1>
<tiles:insert attribute="messages"/>
</div>
<tiles:insert attribute="body-content">
<tiles:put name="pageName" beanName="pageName"/>
<tiles:put name="pageTitle" beanName="pageTitle"/>
<logic:present name="pageAction">
<tiles:put name="pageAction" beanName="pageAction"/>
</logic:present>
<logic:present name="backAction">
<tiles:put name="backAction" beanName="backAction"/>
</logic:present>
<tiles:put name="helpPage" beanName="helpPage"/>
</tiles:insert>
</html-el:form><!- /form ->
</div><!- End mid ->
<div id="lo2">
<tiles:insert attribute="footer"/>
</div><!- End lo2 ->
</div></body>
</html:html>
<% log.debug("OUT"); %>