How We Did It - DZone Available On Your iPhone

The iPhone has been all the rage lately, from complaints to praise it has all been heard. Whether you hate it or love it, the fact remains, as a developer you cannot ignore it. And here at DZone we could not ignore the chance to provide even more means by which you can access your development links. In this article I will share with you how we went about recreating DZone for the iPhone.

First things first, get your development environment set-up. I chose to go with an old favorite, Aptana Studio. After you have downloaded Aptana go ahead and install the iPhone development tools which you will find available from the studio's welcome page. After all of the components have been downloaded, select install all and restart your workbench. You are now all set to start building your first iPhone app.

Next, click on File > New Project and then select the iPhone project. Give your project a name and you will next be presented with an option screen to import some JavaScript libraries. For theDZone project we decided to go with iUI but feel free to choose which ever libraries you feel comfortable with. When you click finish you will see that Aptana starts to create your project. Once completed you will be presented with a base HTML page that contains some CSS and JavaScript. This is a good starting point and will give you a feel for the new tools. You will also notice that at the bottom of the screen where you used to have source, Firefox and IE, you now have a new tab entitled iPhone. With the HTML page still open, click on the iPhone tab to see an emulation of how your page will look once viewed on the iPhone.

You will also notice that when you click on any of the black empty areas around the iPhone the phone will rotate and your layout will also dynamically change. This layout change is not automatic but is made possible by a small script that was added to the page automatically byAptana, it looks as follows:

addEventListener("load", function(){
    setTimeout(updateLayout, 0);
}, false);

var currentWidth = 0;

function updateLayout(){
    if (window.innerWidth != currentWidth) {
        currentWidth = window.innerWidth;
       
        var orient = currentWidth == 320 ? "profile" : "landscape";
        document.body.setAttribute("orient", orient);
        setTimeout(function(){
            window.scrollTo(0, 1);
        }, 100);
    }
}

setInterval(updateLayout, 1400);
console.info('iPhone logging initialized');

After I completed playing around with the new tools and seeing how the emulator works I decided the
first thing I want to do is to separate the structure from the style and the presentation, I would
certainly suggest you do the same, it just makes for a much more maintainable application in the long
run. My first step was to move the CSS embedded in the page out into it's own file. I created a new
folder called, you guessed it CSS, and created a new CSS file and called it screen.css. I next copied all
of the CSS from the HTML page and pasted it into the CSS file. The last step here was to include the
CSS file in the HTML page. So you need to add the following tag to the HTML page.

<style type="text/css" media="screen">@import "/css/iphone.css";</style>

Next, leave the following line on the page:

<script type="text/javascript" src="lib/firebug/firebug.js"></script>

But then, create a new folder called js and a new JavaScript file entitled updateLayout.js. Next go ahead and copy the script and save. Back on the HTML page, you need to add a tag to include this new JavaScript file we just created. Add the following:

<script type="text/javascript" src="js/updateLayout.js"></script>

To make sure that everything still works as before, click on the iPhone tab. Everything should still look and work the same, Now that we have the stage set, let's get started putting this iPhone version of DZone together. There are a few sites that has been the choice of so many is because it makes it much simpler to create webapps for the iPhone that feels a lot more • Create Navigational Menus and iPhone interfaces from standard HTML

• Use or knowledge of JavaScript is not required to create basic iPhone pages
• Ability to handle phone orientation changes
• Provide a more "iPhone-like" experience to Web apps (on or off the iPhone)

To enable us to start using iUI we need to include two files in the head section of our document. So go ahead and add the following:

<style type="text/css" media="screen">@import "lib/iUI/iui.css";</style>
<script type="application/x-javascript" src="lib/iUI/iui.js"></script>

With that added we are ready to start building our interface. Before we start coding our interface, let's add one more thing to our head section:

<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

The iUI library uses a couple of naming conventions that makes the scripting and style rules kick in. The first we will look at is the toolbar. Inside the body tag add the following:

<div class="toolbar"></div>

If you now click on the iphone tab within Aptana you will see a bar added to the top of the emulator screen:

That is the default styling provided by the iUI library for the the toolbar CSS class. That was not exactly what we were after so we had to over rule that style rule inside our own iphone.css file. With this said, it now becomes important that the order of the included style sheets are correct. As we know the cascade of CSS works from top to bottom, external to inline so, it is important that you include the style sheets as follows:

<style type="text/css" media="screen">@import "lib/iUI/iui.css";</style>
<style type="text/css" media="screen">@import "css/iphone.css";</style>

That way, any style rule by the same name will override what was defined in iui.css. To get the feel we were after we changed the styling of toolbar as follows:

body > .toolbar 
{
    background-color:#3366aa;
    background-image:none;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    border-bottom:1px solid #fff;
    border-top:1px solid #000;
    padding:10px;
    height:25px;
}

After you added this style rule to the CSS file go ahead and revisit the iphone tab. You should now see the following:

Now we need to add some items to out toolbar. Let's add the DZone logo onto the toolbar. To do this we added the following line inside the toolbar div:

<div class="toolbar">
    <a href="/iphone"><h1 id="pageTitle"></h1></a>	
<div>

To the H1 we added an id called pageTitle and applied the following style rule:

#pageTitle
{
    background:transparent url('../media/DZone-iphone-137x30.png') top left no-repeat;
    margin:0;
    padding:0;
    background-position:0 0;
    height:30px;
}

Now if you click on the iphone tab in Aptana you will find no difference. Why is this? Unfortunately I have no idea other then that the emulator does not do the best job and I needed to find an alternative approach.
Being on Windows I did not have the option of installing the iPhone SDK from Apple as this is currently only available on Mac so, short of installing VirtualBox and running the Mac operating system inside it,
I had to find another alternative. As Safari is the browser that runs on the iPhone and with Safari now being available on Windows, I switched to using the Safari browser for further testing.

However, I need to see what the layout looked like in the same aspect ratio of the iPhone screen size so I searched for a web based iPhone emulator. I found iPhoneTester.com and for the most part it worked
rather well but, I could not really be sure that what this emulator showed me was accurate. Luckily a fellow developer working with me on this project had a Mac and installed the iPhone SDK. The situation was not
ideal though as we were working remotely so I had to send him a zip of the work I have done and he had to send me screen shots and feedback on what he was seeing.

With Safari on Windows, at this point I have to rant a little bit and ask Why oh Why Apple, do we not have an iPhone SDK for Windows. With my rant aside, this is the route we followed from here on. I would preview the app in Safari on Windows and send him the code to verify whether what I was seeing was what users would see using an iPhone. But we have another problem, simply viewing the app in Safari is not enough as the viewport size of a browser on the desktop and the viewport on the actual iPhone differs greately.

The kind folks at Manning Publishing has given us a chapter to offer to readers of this article for free. The chapter is from the yet unpublished book iPhone in Action to be published December 2008. Download SDK Programming for Web Developers