In our last article we told you about iWebkit, and showed you what you can do with this powerful JavaScript, HTML and CSS framework. In this article we’ll continue with the construction of an iPhone-ready HTMLGoodies website, and show you how to use list items, menus, text boxes and create splash screens and icons for your iOS device-ready web app.
To use iWebkit effectively, you will have to delve down into the HTML contained in the Framework, as well as some of the demos that are provided. To create your own custom iPhone or iPad web app, you can utilize many of the thumbnail images (which are 32 x 32 pixels, btw) that iWebkit provides for use with menu items, along with some of the other images. To be honest, you will definitely need to be prepared to create some of your own images for spashscreens, desktop icons and menu icons.
Previously, we used iWebkit to create a basic iPhone web app (which is still essentially a website) which features a link to the home page, menu items which link to other areas on the site, and a couple off-site links. This time we’ve upped the anty and have finished the app, creating iPhone-ready pages with other links from HTMLGoodies’s main menu. We have left one normal link in the menu (Web Developer News) which links to a normal HTML page so you can check out the difference in the way that the page loads and appears.
Our HTMLGoodies iPhone Web App
We’ve updated the main sections in our HTMLGoodies web app, along with links to the latest threads in the discussion forum, and a link that shows all the latest articles on the site. Those two were created using RSS feeds, which iWebkit automatically formats to fit the iPhone using a simple PHP script that is also included in iWebkit. Then I threw in a link to a video which shows how to use iWebkit to create a web app…already formatted to fit the iPhone. Here’s what it looks like now:
The first thing we did was learn to use Titles and Textboxes. When you are using iWebkit, you simply need to include them within the “content” div, and further within the “pageitem” div, like this:
<ul class=”pageitem”>
<li class=”textbox”><span class=”header”>Beginnings</span><p>
content goes here
</li>
</ul>
That allowed us to create the nice looking display we used to show our About HTMLGoodies page, which you can see live on your iPhone here. We simply added the content within the textbox tag area.
To create our Mobile, HTML, JavaScript and CSS sections, we used the technology.html page from the Framework demo pages–which are included with iWebkit–as a template, and simply changed the links and content. Here is the code that is used to create the nicely formatted links within those pages. Note that you will have to add the following to your body tag in order to use list items like we have used them in those sections, and it will appear like this, along with a <ul> (unordered list) tag below the content tag:
<body class=”list”><div id=”content”>
<ul>
<li><a href=”page.html”><span class=”name”>name</span><span
class=”arrow”></span></a></li>
</ul>
</div>
You are also able to use an image along with the link, as well as a short comment, by including the following classes within span tags:
<li class=”withimage”><a href=”page.html”><img alt=”description” src=”thumbs/htmlgoodies.png” /><span class=”name”>Text or name</span><span class=”comment”>A
comment</span><span class=”arrow”></span></a></li>
The images for these list items can be any size, however they will be stretched to fit the element, but 90 x 90 pixels is the optimum size for this image.
There are many more aspects of iWebkit that you can use to create your web app, such as custom forms, the ability to autodetect a user’s phone number, the ability to send SMS messages from the web app, add custom maps using Google maps, and many others. In our next installment we’ll show you how to display the RSS feeds using the PHP script that is provided with iWebkit.
