How We Did It - DZone Available On Your iPhone

To overcome this, I again loaded up iPhoneTester.com and resized my Safari browser to be the same size as the emulator screen real estate.

 

Ok, so now we have a home grown iPhone SDK on Windows that might not be 100% accurate but gives us a basic idea of what to expect and hopefully less round robin with my fellow developer that has the real SDK installed. With our environment set-up let's add two more elements to our toolbar. Next we add a login link to our toolbar that will launch a dialog where users can log in. So inside your toolbar div add:

<a class="login" href="login.html">Login</a>

After adding the CSS below to you stylesheet refresh Safari to see our new login link added:

.login
{
    position:absolute;
    top:0;
    right:5px;
    -webkit-border-radius:0;
    border-width:0 5px 0 5px;
    padding:6px 10px;
    height:28px;
    line-height:28px;
    font-size:14px;
    font-weight:bold;
    color:#fff;
    text-shadow:rgba(0, 0, 0, 0.6) 0px -1px 0;
    text-decoration:none;
    background:none;
}

Go ahead and click on the login link. You should be presented with this:

Wow! Now here you see some of the magic of iUI, a really nice iPhone style dialog popping up. One thing you might be thinking is, where does the form come from. Well, you need to create and link to it.
If you look back at the line we added for the login link you will see it links to a page called login.html. Here it is:

<form id="loginForm" class="dialog" method="post" action="/login">
    <fieldset>
        <h1>Login</h1>
        <label class="inside" id="username-label" for="username">
            Username...
        </label>
        <input type="text" id="username" name="side-username" />
        <label class="inside" id="password-label" for="password">
            Password...
        </label>
        <input type="password" id="password" name="side-password" /><input class="submitButton" type="submit" value="Login" /><input type="hidden" name="processlogin" value="1" /><input type="hidden" name="returnpage" value="/iphone" />
    </fieldset>
</form>

One important point. The login.html page contains exactly what is presented above, nothing more, nothing less. When you click into the username or password fields you will see that the background text stays right there. No worries, we will take of that a little later. For now, let's move on and add another item to the toolbar. As there is various categories/tags that links are posted as we want the user to be able to narrow their view to the only items categories they are interested in. So next we add the category link to the toolbar. To this we add one more line to our toolbar div to end up with:

<div class="toolbar">
  <a href="/iphone"><h1 id="pageTitle"></h1></a>
  <a class="showPage login" href="login.html">Login</a>
  <a class="showPage tags" href="categories.html">Tags</a>
<div>

Here we add a class called tags to position our new link where we want it. To do this add the following to you CSS file:

.toolbar .tags {
    position: absolute;
    top: 0;
    right:65px;
    -webkit-border-radius: 0;
    border-width: 0 5px 0 5px;
    padding: 6px 10px;
    height: 28px;
    line-height: 28px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0;
    text-decoration: none;
    background: none;
}

Go ahead and refresh Safari but, before you click on the link create a HTML page called categories.html and add the following code to it:

<form id="categoryForm" class="dialog" method="get" action="/iphone">
    <fieldset>
        <h1>Tags</h1>
        <select id="topic" name="topic">
            <option value="all" selected="selected">All Stories</option>
            <option value="technology">Technology</option>
            <option value="apple">Apple</option>
            <option value="design">Design</option>
            <option value="gadgets">Gadgets</option>
            <option value="hardware">Hardware</option>
            <option value="tech_news">Tech Industry News</option>
            <option value="linux_unix">Linux/Unix</option>
            <option value="microsoft">Microsoft</option>
            <option value="mods">Mods</option>
            <option value="programming">Programming</option>
            <option value="security">Security</option>            
        </select>
        <input class="submitButton" type="submit" value="Go" />
    </fieldset>
</form>

Of course this is all hard coded and you might want to hook this up to your back-end solution to have the options dynamically generated. Now go ahead and click on the 'Tags' link. As with the login form you see a dialog launch:

By the way, if you are new to this you may wonder, now how do I get rid of the dialog? Easy, clicking on any part of the dark area outside the dialog will take you out of dialog mode. So now that we have out toolbar complete we need to start working on the content area of the app. We basically want to display the list of links in the popular queue you would see when you go to dzone.com with your desktop browser. Because of screen size we have to however limit the amount of links per page and instead of the 'endless scrolling' used on DZone we needed to implement pagination between each set of links.

To start building our content add the following to your index.html file after the closing div of our toolbar:

<ul id="stories" selected="true">
    <li>
       <a href="#6983724" class="zone-count">141</a>
       <a href="#6983724" class="link">Redefining Anti-Virus Software</a>
    </li>
</ul>

After adding this go ahead and refresh the browser. You should see the following:

This is the basic styling that the iUI toolkit applies to unordered lists. As mentioned before this reflects the native look and feel of other apps on the iPhone. The basics of this is fine but we needed to fine tune this a bit for our needs. First stop is to override the style applied by iUI for links inside an list item. Add the following to your iphone.css file:

body > ul > li > a 
{
    display: block;
    margin: -8px 0 -8px -10px;
    padding: 8px 32px 8px 15px;
    text-decoration: none;
    color: inherit;
    font-size:70%;
    background: url(../lib/iUI/listArrow.png) no-repeat right center;
    height:30px;
}

That changes our link text size to a more manageable size and allows us to add more links per page as we would have been able to with the larger text size. Next we need to add the style rules for our zone-count class:

li .zone-count
{
    background:transparent url('http://dzone.com//links/themes/iphone/media/vwidget2_bkgd_on.gif') top left no-repeat;
    color:#000;
    float:left;
    margin-right:3px;
    padding-top:7px;
    text-align:center;
    font-size:70%;    
    font-weight: bold;
    text-decoration: none;
    width:29px;
    height:40px;
}

NOTE: If you are following this article using the iPhone SDK on Mac, you may need to adjust the pixel dimensions slightly as Safari on the desktop does not render the items exactly the same as Safari on the iPhone. This was one of the headaches we had to cope with as I was doing the front end on Windows and did not have access to the SDK.

Next let's fix up the link text so that it lines up better with our zone counter block. Change the style rule for links in list items to the following:

body > ul > li > a 
{
    display: block;    
    padding: 15px 32px 8px 15px;
    text-decoration: none;
    color: inherit;
    font-size:70%;
    background: url(../lib/iUI/listArrow.png) no-repeat right center;
    height:23px;
}

Also go ahead and inside your HTML file create around five copies of the current list item. Go ahead and refresh your browser, you should see the following: