Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
writing_an_mui_application [2008/09/09 17:11]
Joel Dare
writing_an_mui_application [2020/06/01 22:53] (current)
Line 1: Line 1:
 +====== 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.
 +
 +<code html>
 +<​!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>​
 +</​code>​
 +
 +===== Include the mUI =====
 +
 +Next, link the mUI stylesheet and javascript. ​ Put the following in the head section of your document.
 +
 +<code html>
 +<!-- Include the mUI Stylesheet -->
 +<link href="​../​mUI/​mUI.css"​ rel="​stylesheet"​ type="​text/​css">​
 +
 +<!-- Include the mUI script -->
 +<script src="​../​mUI/​mUI.js"></​script>​
 +</​code>​
 +
 +===== iPhone Viewport =====
 +
 +In order for the app to scale correctly on the iPhone, include the following code at the top of the head section.
 +
 +<code html>
 +<!-- Set the viewport for iPhone -->
 +<meta name="​viewport"​ content="​width=320px;​ initial-scale=1.0;​ maximum-scale=1.0;​ user-scalable=0;">​
 +</​code>​
 +
 +===== 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();'>​
 +
 +
  
comments powered by Disqus