IPhone Cafe

Earlier posts on iPhone Cafe described CSS styles to create Rounded Corners on Form Input Fields and iPhone Drop Down Menus with Apple’s iPhone Safari look and feel.  Another post described using window.scrollTo(0, 1) to hide the Safari toolbar. These one-off tips come from Apple’s Safari Web Content Guide for iPhone; a good resource for programmers.

***

Here’s another good programmer resource. To see a complete framework for building Applie iPhone web applications, check out the post by Vladimir Olexa which presents client-side Javascript and CSS that simplies many of the tasks related to iPhone web application development.

About CiUI (CNET iPhone User Interface)

The link below is an example of CiUI’s framework supporting an iPhone interface for iPhone Cafe’s weblog. Use Safari or Firefox.  The example application needs work. The first option, “iPhone Cafe Home” displays a welcome message.  The second option “Recent Posts” displays a list of recent posts.  Titles are queried from the Wordpress database. Clicking a title displays the content of the post.

Sample Application (Iphone Cafe)

Justin Barkhuff has developed an IPhone front end for his Wordpress blog using the iUI framework developed by Joe Hewitt. To see Justin’s site at work, point your IPhone to  http://www.barkhuff.com .  According to Justin’s comment, he didn’t have an IPhone to test his work so I went there myself. It’s pretty neat. If you are into IPhone web development you should check out Justin’s site.  Joe Hewitt cautions against over using the iUI framework in his IUI Monotony page.

IPhone browser real estate is scarce.  Once a page is displayed, create additional space by hiding the Safari tool bar. 

Use  window.scrollTo(0, 1); to hide the Safari toolbar. 

The scrollTo command can be placed into in-line javascript located near the bottom of the page…….

<script type=”text/javascript”>
window.scrollTo(0, 1);
</script> 

Or, scrollTo can be part of a page onLoad event……

<script type=”text/javascript”>
function onloadHandler()
{
window.scrollTo(0, 1);
}
</script>

Either approach seems to work okay.

***

To see a page using this technique, point your IPhone browser towards IPhone Cafe which should display all posts and then hide the toolbar.

 ***

For more on this and other IPhone web development tips, a good resource is Estelle Weyl’s Web Development for the Iphone .