Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Corrected links that should have been relative instead of absolute.

Overview

Wiki Markup
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:

...

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 

Code Block

<\!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>

Header Template

...

The templates used for a standard web page are listed below. The indentation shows which child templates are included in a parent template.

Weblayout_form Template
    Head Template
    Header Template
    UtilityBox Template
    Legend Template
    Messages Template
    BodyContent Template
    Footer Template
Image Added