Writing an mUI Application

An mUI application is essentially just a web page with some CSS and Javascript that make it look more like an application.

You can use any back-end programming tool that you prefer, such as PHP, Ruby on Rails, Perl, C, etc.

This is an overview of creating a new application using the mUI framework.

Base Document

Start with this base XHTML 1.0 document.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd">
<html>
 
<head>
 
</head>
 
<body>
 
 
 
</body>
 
</html>

Include the mUI

Next, link the mUI stylesheet and javascript. Put the following in the head section of your document.

<!-- Include the mUI Stylesheet -->
<link href="../mUI/mUI.css" rel="stylesheet" type="text/css">
 
<!-- Include the mUI script -->
<script src="../mUI/mUI.js"></script>

iPhone Viewport

In order for the app to scale correctly on the iPhone, include the following code at the top of the head section.

<!-- Set the viewport for iPhone -->
<meta name="viewport" content="width=320px; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

Add a Form

If you want to wrap a form around the document, add a form tag.

Add a Toolbar

You can add a toolbar with a couple buttons.

<code html> <div id=“toolbar”><h1>Your Title Here</h1></div> <div id=“btn_left”><input type=“submit” value=“Back” /></div> <div id=“btn_right”><input type=“submit” value=“Save” /></div> <div id=“window”> </html>

Scroll the Url

If you want the URL field to scroll off the top of the iPhone, add onload='scrollUrl();' to the body element of your document.

<body onload='scrollUrl();'>

Table of Contents