iWebkit for the iPhone Developer: Adding Menus, List Items and Text Boxes
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 AppWe'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:
<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.
<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.