You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 5 Next »

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">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <tiles:insert attribute="utilityBox"/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <tiles:insert attribute="legend" ignore="true"/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <div id="nav2">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <h1><tiles:insert attribute="pageTitle"/></h1>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <tiles:insert attribute="messages"/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <tiles:insert attribute="body-content">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <tiles:put name="pageName" beanName="pageName"/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <tiles:put name="pageTitle" beanName="pageTitle"/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <logic:present name="pageAction">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <tiles:put name="pageAction" beanName="pageAction"/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </logic:present>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <logic:present name="backAction">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <tiles:put name="backAction" beanName="backAction"/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </logic:present>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <tiles:put name="helpPage" beanName="helpPage"/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </tiles:insert>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </html-el:form><\!-\- /form -->
&nbsp;&nbsp;&nbsp; </div><\!-\- End mid -->

&nbsp;&nbsp;&nbsp; <div id="lo2">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <tiles:insert attribute="footer"/>
&nbsp;&nbsp;&nbsp; </div><\!-\- End lo2 -->
&nbsp; </div></body>
</html:html>

<% log.debug("OUT"); %>
&nbsp;






  • No labels