Getting Started: Module Development
How to Implement the Framework
The first step in developing a module with the UCLA Mobile Web Framework is implementing the Framework in your application. By implementing the framework in your application, you will have access to all of the CSS styles and Javascript assets that are responsible for delivering a device agnostic mobile presentation.
To implement the Framework in your application you simply include two tags in the <head> section of your page:
<link rel="stylesheet" href="http://{MOBILE_DOMAIN}/assets/css.php" type="text/css">
<script type="text/javascript" src="http://{MOBILE_DOMAIN}/assets/js.php"></script>
These two tags will include a stylesheet and a javascript file that comprise the UCLA MWF in it's entirety, and once included, you have successfully implemented the Framework in your application. Although these are the only two tags the framework requires for inclusion, it is highly recommended that the following <meta> tag be included as well for uniform screen scaling across mobile devices:
<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
The framework does not require any application-side code to leverage as a content provider.
Building A Mobile User Interface
The UCLA Mobile Web Framework, in essence, is focused on content presentation, and as such is not in any way responsible for or cognizant of any content generation or data management in a given application. Because of this, it is up to the developer how they architect the backend system of the application. The only thing the framework requires is that a core set of HTML entities be used, allowing the framework to handle presentation.
As such, developing a module with the UCLA Mobile Web Framework comes down to simply building an HTML interface that uses the correct classes, and the Mobile Web Framework will handle the rest.
A key concept in building a mobile UI is simplicity. When users view a mobile application, they are generally presented with a minimal data set and as simplistic of an interface as possible. If you are porting an existing web application to a mobile module, it is recommended that you first think about what data is absolutely vital for the user, and what data may be superfluous when viewed on a mobile device. By streamlining your module and making it easy to navigate, you will present mobile users with the best possible application-like experience.
Key Entities
There are a few key entities you will likely want to use in your application, such as a header/footer, menu, and content area. You can find detailed information about each of these entities by clicking on these links, which will take you to the documentation page for each entity.
Header
To create a header, simply make a new <h1> entity and give it an id="header". You can place an image and a link in the header for a logo that takes the user to the front page of your application (or another location), and you can add header text with a <span> element.
This example is the default for UCLA Mobile:
<h1 id="header">
<a href="http://m.ucla.edu">
<img src="http://m.ucla.edu/assets/img/ucla-logo.png" alt="UCLA" width="75" height="35">
</a>
<span>{MODULETITLE}</span>
</h1>
The exact prototype for the header may vary in the a and img link between content providers, and thus it is recommended that you follow the proscribed form by your institution's framework service provider. However, the markup style is roughly the same between deployments.
Footer
To create a footer, create a <div> entity and give it an id of #footer. This will place all contained text in a centered full-width area at the bottom of the page, and can be used for copyright notices and bottom navigation links.
This example is the default for UCLA Mobile:
<div id="footer">
<p>University of California © 2010 UC Regents<br />
<a href="http://{MOBILE_HELP_PAGE}">Help</a> | <a href="http://{DESKTOP_URL}">View Full Site</a></p>
</div>
Again, the exact values of the a tags vary from institution to institution, but, as with the header, the general prototype is the same between deployments.
Menus
To create a menu, simply create a div entity and give it class="menu-full. Within the div.menu-full entity, you can specify a menu header with an <h1> entity and build your menu with an ordered list (<ol>).
By default, the div.menu-full entity will give a full-width menu with large, centered items. Additionally, you can use the the menu-padded and menu-detailed classes for more styling. The menu-padded class will add some padding around the menu, and give it rounded corners on devices that support it. The menu-detailed class will make the menu items left aligned and give them a slightly smaller font. This is useful for more detailed menus where each item may have additional associated text.
See below for some example menus.
<div class="menu-full menu-padded">
<h1 class="light menu-first">{MENU_TITLE}</h1>
<ol>
<li>
<a href="{LINK_URL_1}">
{LINK_TITLE_1}
</a></li>
<li>
<a href="{LINK_URL_2}">
{LINK_TITLE_2}
</a></li>
<li class="menu-last">
<a href="{LINK_URL_3}">
{LINK_TITLE_3}
</a></li>
</ol>
</div>
The preceding code is a simple padded menu that has three centered link items. This is a good solution for a simple broad navigation where each link item is a single phrase such as "Home" or "Contact Info". Especially noteworthy is the use of the menu-first and menu-last classes to delineate the first and last child entities of the menu. While not necessary for most devices, the use of these styles is highly recommended for backwards compatibility of devices that do not support the :first-child and :last-child CSS 2.1 pseudo-selectors.
<div class="menu-full menu-detailed menu-padded">
<h1 class="light menu-first">{MENU_TITLE}</h1>
<ol>
<li>
<a href="{LINK_URL_1}">
{LINK_TITLE_1}
<br /><span class="smallprint">{LINK1_EXTRA_TEXT}></span></a>
</li>
<li>
<a href="{LINK_URL_2}">
{LINK_TITLE_2}
<br /><span class="smallprint">{LINK2_EXTRA_TEXT}></span></a>
</li>
<li class="menu-last">
<a href="{LINK_URL_3}">
{LINK_TITLE_3}
<br /><span class="smallprint">{LINK3_EXTRA_TEXT}></span></a>
</li>
</ol>
</div>
The preceding code shows an example of a more detailed menu using a menu with the .menu-detailed class as well as span elements with the smallprint class within the <a> tags of the list items to specify more content within each link. This can be used to give short descriptions of menu items used for articles or content links.
Content
To create a content area, simply create a <div> entity and give it class="content-full. By default, this will create a standalone content box entity that will be styled to display appropriately on various devices.
As with the menu, there is a content-padded class available for further styling, and the use of content-first and content-last classes is highly encouraged for graceful degradation.
Within a div.content-full entity, <h1> and <p> elements will be treated as block level elements. If you have multiple paragraphs in the same block of content, it is recommended that you place the correlating <p> elements within a <div> so the paragraphs themselves are not treated as separate content blocks.
The content-button class can be applied to <div> elements for links (it is recommended that the contents of the <div> be wrapped in an <a> element), and <div.label> elements can be used within <div> elements to specify labels for content.
See below for an example of a content area.
<div class="content-full content-padded">
<h1 class="content-first light">{CONTENT_TITLE}</h1>
<div>{CONTENT_BLOCK}</div>
<p>{CONTENT_TEXT_BLOCK_1}</p>
<div class="content-last">
<p>{CONTENT_TEXT_BLOCK_2_PARAGRAPH_1}</p>
<p>{CONTENT_TEXT_BLOCK_2_PARAGRAPH_1}</p>
</div>
</div>