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

Compare with Current View Page History

« Previous Version 7 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">
				[ 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


<%-\- TODO: Most of this stuff is boilerplate and probably should be in a different file that doesn't get edited app to app \--%>


&nbsp;&nbsp;&nbsp; <title>Oas Skeleton Demo</title>
&nbsp;&nbsp;&nbsp; <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
&nbsp;&nbsp;&nbsp; <meta http-equiv="Content-Style-Type" content="text/css" />
&nbsp;&nbsp;&nbsp; <meta http-equiv="pragma" content="no-cache" />
&nbsp;&nbsp;&nbsp; <link href="/dhtml/css/suit_layout.css" type="text/css" rel="stylesheet" />
&nbsp;&nbsp;&nbsp; <link href="/dhtml/css/insidemit.css" type="text/css" rel="stylesheet" />
&nbsp;&nbsp;&nbsp; <link href="css/app_layout.css" type="text/css" rel="stylesheet" />

&nbsp;&nbsp;&nbsp;
&nbsp; <\!--\[if lt IE 8\]>
&nbsp;&nbsp;&nbsp; <link href="/dhtml/css/suit_IEfix.css" type="text/css" rel="stylesheet" />
&nbsp; <\!\[endif\]-->

&nbsp;&nbsp;&nbsp; <script src="/dhtml/js/dojo.js" type="text/javascript"></script>
&nbsp;&nbsp;&nbsp; <script src="/dhtml/js/src/mit/methods.js" type="text/javascript"></script>
&nbsp;&nbsp;&nbsp; <script src="/dhtml/js/src/mit/insidemit.js" type="text/javascript"></script>
&nbsp;&nbsp;&nbsp; <script src="js/app_specific.js" type="text/javascript"></script>

&nbsp;&nbsp;&nbsp; <script type="text/javascript">
&nbsp;&nbsp;&nbsp; &nbsp; function viewHelper() {
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var currentPage = document.getElementById("pageName").value;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; switch (currentPage) {
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; case "booey":
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; settingsInit();
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; default:
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; break;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp; &nbsp; }&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; </script>

&nbsp;&nbsp;&nbsp; <script type="text/javascript">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("dojo.mit.*");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("dojo.event.*");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("dojo.io.*");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.addOnLoad(viewHelper);
&nbsp;&nbsp;&nbsp; </script>
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; <script src="js/gotoView.js" type="text/javascript"></script>
&nbsp;&nbsp;&nbsp; <script src="js/setValues.js" type="text/javascript"></script>

&nbsp;

 

  • No labels