I write journals and would recommend journal writing to anyone who wishes to pursue a writing career. You learn a lot. You also remember a lot... and memory is important. - Judy Collins
This is Part 4 of my development of the iPhone Journal application. In Part 1 I discussed the state of iPhone development and the Aptana development environment. In Part 2 I discussed JavaScript libraries that can assist with iPhone development. This week I’ll look at the AOL Journals API. In Part 3 I explored the API Journals API.
Creating an iPhone User Interface
As I discussed in Part 2, a key to optimizing the iPhone Journal web application, is the familiar iPhone user interface. iUI is a JavaScript and CSS (Cascading Style Sheets) bundle developed by Joe Hewitt, the creator of the Firebug (a web Firefox web development plug-in that provides access to web development tools within Firefox). The iUI library provides an easy way for developers to create standard iPhone navigational menus for web applications. iUI functionality is provided to a web application by simply including the iUI CSS and JavaScript files in the page header – this is done for every page in the web application:
<!-- include the iui style sheet and javascript --> <style type="text/css" media="screen">@import "lib/iui/iui.css";</style> <script type="application/x-javascript" src="lib/iui/iui.js"></script>
iUI does all of the heavy lifting for developers. iUI breaks down the user interface into simple unordered HTML lists. Each menu item is an item of the unordered list. To provide the hierarchical menu effect, an item is linked to another unordered list on the same page, or another page.
The iPhone Journal User Interface
As shown in Figure 1, the iPhone Journal User Interface looks like a standard iPhone application. A user can perform the following operations:
- Authentication – Login using AOL OpenAuth.
- Manage Blogs – Create, edit, and delete blogs.
- Posts – Create, edit, delete and retrieve posts.
- Comments - Create, edit, delete and retrieve comments.
Figure 1 - The iPhone Journal Main Menu
The HTML that creates the primary user interface is shown in Listing 1. Note the primary menu is simply an unordered list. List items that contain a link display the arrow on the right of the menu item. At this point the links point back to the main page.
Listing 1 – The iPhone Journal main menu.
The HTML that creates the primary user interface is shown in Listing 1. Note the primary menu is simply an unordered list. List items that contain a link display the arrow on the right of the menu item. At this point the links point back to the main page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- set the iPhone viewport -->
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<!-- include the iui style sheet and javascript -->
<style type="text/css" media="screen">@import "lib/iui/iui.css";</style>
<script type="application/x-javascript" src="lib/iui/iui.js"></script>
<title>iPhone Journals</title>
</head>
<body>
<!-- create the primary toolbar -->
<div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
</div>
<!-- create the main menu -->
<ul id="home" title="iPhone Journals" selected="true">
<li class="group">Authentication</li>
<li><a href="login.php">Login</a></li>
<li class="group">Manage Blogs</li>
<li><a href="#">Create</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Delete</a></li>
<li class="group">Manage Posts</li>
<li><a href="#">Create</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Delete</a></li>
<li><a href="#">Retrieve</a></li>
<li class="group">Manage Comments</li>
<li><a href="#">Create</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Delete</a></li>
<li><a href="#">Retrieve</a></li>
<li class="group">About</li>
<li><a href="about.php">About</a></li>
</ul>
</body>
</html>
What’s Next?
In the next installments of the iPhone Journal we will begin to implement the functions to manage authentication, blogs, posts, and comments, until we’ve create a complete application to manage an AOL Journal.