This shows you the differences between two versions of the page.
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();'> | ||
+ | |||
+ | |||