brandonballentine.com

I’m going to assume that if you’re reading this tutorial, you already have a copy of Expression Engine running on a server. I’m also going to assume that you already have at least one blog created for your installation.

Head over to http://code.google.com/p/iui/ to download a copy of iUI. The download contains a collection of images, CSS, and Javascript files that allow you to mimic the style and functionality of Apple’s native iPhone applications. The folder also contains some nice sample pages that should help you get a handle on the framework. The page we will create in this tutorial is based on the Digg sample.

Login to your control panel in EE and do the following:

Create an iphone template group with three templates inside it:  index, article, and a stylesheet called iui. The index page will contain a list of the ten latest blog entries along with the number of comments on each post. Clicking the title will load (through AJAX) the contents of that post from the article template. Don’t worry, iUI handles all of the hard stuff! Finally, you’ll need the iUI stylesheet and Javascript files to make everything work correctly. While I like to load my CSS files into EE, I usually prefer to simply link to javascript files. However, feel free to do whichever you prefer.

Let’s start with the article template. Open the article.html file from the tutorial download and copy the code to the newly created article template in your EE site. The example code above is extremely simplified and shows only the Title and Body fields from a post in the weblog named blog. If’ you’re using something besides the default weblog fields or the default weblog name, you’ll want to change these to match your field names. I’ve also added a limit-”1″ to make sure the template only shows 1 entry at a time. Go ahead and save the template when you’re finished.

Note that we’re using an HTML fragment for this templete. Because the index page will load the content of each individual post through AJAX, we don’t need to use complete HTML.

Next, copy the contents of the iui.css file from the tutorial folder and paste it in the the iui CSS template in EE. I’ve already gone through the standard iui.css file and added a {site_url} tag before each of the image URLs. This makes it easy to use the stylesheet in EE even if you change the address of your site.

Now it’s time to create the index template, which will show a list of the 10 most recent blog posts. To keep this tutorial simple, I’ve just modified the index page of the Digg sample in the iui folder you downloaded earlier and replaced the static content with a dynamic list of blog posts. Once you’ve become familiar with iUI, I recommend that you go back and try creating the page from scratch. For now, open the index file from the tutorial download, copy all of the code, and paste it into your EE template.

Make sure to change the page title to something appropriate for your site. You’ll also want to make sure that the URLs for the CSS and Javascript files in the header are correct for your site.

Most of the code is fairly self-evident, however, there are a few things worth mentioning about the template:

The viewport set in the header makes the web page fit the iPhone’s screen. This eleminates the need for the user to zoom and pan to see all of the content and makes the page feel more like a standard application.

The .toolbar class is a standard class defined in iUI and creates the standard iPhone list navigation.

There’s no need to enter anything in the H1 tag with the pageTitle ID – this wil be done automatically.

The rest of the code is mostly standard EE tags used to show the comment count of each post and create a hyperlink each article’s content. iUI automaticaly loads the content through AJAX, so we don’t have to worry about doing anything special there.

When you’re finished, save and close the template.

You’re almost there! All that we need to do now is upload the images and the Javascript file from the iUI download to your Expression Engine site. You’ll recall that our CSS template looks for the images files in /images/iui/, so create that folder and upload the files. The address of the Javascript file is included in the heading of your index template, so make sure that you upload it to the address you specified.

Once you’ve uploaded everything, it’s time to grab your iPhone or iPod touch and test the page out! Post a comment below if you have any questions or if you’d like to share a site you’ve created.

TIP: here’s a bit of javascript to redirect iPhone users to the appropriate templates:

<script language="javascript">if (navigator.userAgent.indexOf('iPhone') != -1 ||navigator.userAgent.indexOf('iPod') != -1) {window.location = "http://XXXX"}</script>