None
Blog / 2010 / February / 18

IUI for iPhone Web Development

February 18, 2010

There are various frameworks available for developing web applications that adopt the iphone look and feel. These can be made seamless, running from the iphone homepage by adding them as a bookmark.

Frameworks

Look and feel frameworks available for supporting web development on the iphone include:

I think this last one is just skins for JSF apps. I decided to go with IUI, as it seemed to be used by several high profile projects.

IUI Links

Presentation

Login Examples

This code presents a simple login screen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Login</title>
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
  <link rel="stylesheet" href="/iui/iui.css" type="text/css"/>
  <link rel="stylesheet" href="/iui/t/default/default-theme.css" type="text/css" />
  <script type="application/x-javascript" src="/iui/iui.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
  <div class="toolbar">
    <h1 id="pageTitle">Login</h1>
    <a id="backButton" class="button" href="#"></a>
  </div>
    <form selected="true" title="Login" class="panel" method="post" action="." target="_self" id="login_form">
      <fieldset>
        <div class="row">
           <label>Username</label>
           <input type="text" id="username_field" name="username" value=""/>
        </div>
        <div class="row">
           <label>Password</label>
           <input type="password" id="password_field" name="password" value=""/>
        </div>
      </fieldset>
      <a class="whiteButton" type="submit" id="submit_button">Login</a>
    </form>

Main Page with Links Example

This example shows a main page with links, and each of those links drills to a separate div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Home</title>
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
  <link rel="stylesheet" href="/iui/iui.css" type="text/css"/>
  <link rel="stylesheet" href="/iui/t/default/default-theme.css" type="text/css" />
  <script type="application/x-javascript" src="/iui/iui.js"></script>
</head>
<body>
  <div class="toolbar">
    <h1 id="pageTitle"></h1>
    <a id="backButton" class="button" href="#"></a>
  </div>
  <ul id="home" title="KPI" selected="true">
    <li><a href="#GraphCount">Graph Count</a></li>
    <li><a href="#InstanceCount">Instance Count</a></li>
    <li><a href="#UserCount">User Count</a></li>
  </ul>
  <div id="GraphCount" title="Graph Count">
    <ul>
      <li>Graph Count 0 10.00</li>
    </ul>
  </div>
  <div id="InstanceCount" title="Instance Count">
    <ul>
      <li>Instance Count 150 65.00</li>
    </ul>
  </div>
  <div id="UserCount" title="User Count">
    <ul>
      <li>User Count 10 50.00</li>
    </ul>
  </div>
</body>
</html>

Notice the use of selected=true on the top ul. This indicates which bit of the page is displayed first.

See Also

Tags: iphone iui html