core3.com Blog

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)

Vladimir Olexa at CNET has written an iPhone UI that mimics Joe Hewitt’s iUI framework.  It’s called CiUI and provides an iPhone look and feel. Read Vladimer’s CNET post for more.

***

According to the CNET post, CiUI can be downloaded from CNETs client side javascript library page. I went to the page, scrolled around and found a CiUI checkbox.  Checking this and clicking Download displayed a prompt asking if I wanted to open or save a file called “clientsite-trunk-350.compressed.js”

***

***

I’ve never run across compressed javascript so I saved it locally and then opened it in Textpad. It was one continuous line of code; e.g no line breaks. I played around with this for a bit but couldn’t get it into a useable source code format.

 *** 

So, I went back to Vladimir’s main CNET posting and followed the “view source code link” which led to me to Google’s CNET source code management site.  Not knowing how to work the site, I ended up downloading several modules including a css, js, htm, and php module. Also, an images subdirectory held three png’s and a gif which got downloaded.

 ***

***

Not sure why, but all the source code was a single line with no line break formatting. I started to manually insert line breaks, but got tired and quit and just used the demo code as downloaded. The result can be seen at the link below.  Use your iPhone.

http://www.core3.com/icore/CiUI/ 

The page kind-of works, but it’s got problems, like there’s no Back button and no horizontal scrolling.  I’ll need to look into these issues.  I probably need to download the library again, only this time use the correct download procedure.

A page on Apple’s iPhone developer site describes how to set a style for drop down menu’s. Apple’s on-line CSS documentation mostly uses in-line style definitions. I’m accustomed to styles defined within a STYLE tag, so I took Apple’s recommendations for the iPhone and placed then into a style called iDD (short for “iPhone Drop Down”)

***

In the snippet below, iDD is defined and then it’s used as the class attribute of the select tag.

***

<style TYPE=”text/css”>
.iDD { background:brown;    border: 1px dashed purple;    -webkit-border-radius:10px; }
</style>
…
<select name=”city” class=’iDD’>
   <option>choose</option>
   <option>Seattle, Wa.</option>
   <option>Washington, Dc.</option>
   <option>Dallas, Tx.</option>
   <option>Chicago, Il.</option>
   <option>New York, Ny.</option>
   <option>Miami, Fl.</option>
   <option>Baltimore, Md.</option>
</select> 

***

webkit-border-radius produces a drop down that displays with rounded corners on the iPhone.

***

To see iDD in action, visit the Metro Brunch page. It’s not much, but it does show brunch locations in a couple of major cities using Google Maps as the source. Below is the brunch page after selecting the rounded drop down list box.  As with any drop down, iPhone displays it’s own drop down widget which is optmized for the iPhone  Safari web interface.

***

***

For some reason, a search of brunch sites in New York city produces results that differ between the iPhone map and a desktop browser Google map.  Only New York behaves this way. Other cities produces pretty much the same results regardless of browser type.

***

Searching for “brunch” in Dallas Tx. produces a map like this.

*** 

For testing purposes, the brunch page has been loaded with the following cities: Seattle, Washington, Dallas, Chicago, New York, Miami, Portland, Baltimore, Los Angeles, San Fransisco,  Oakland,  Cupertino, Memphis, Paris, London.

***

The page uses a Google search parameter mrt=kmlkmz which includes User-Contributed ‘Community’ content collected from the GeoWeb

***

April 17th, 2008 – Not sure why, but searching for “brunch” finds fewer locations when the search is run on an iPhone vs running on a desktop browser.  It may have something to do with user contributed content handling.  Here’s a link to another version which searches on “fine+dining”.  It seems to to a better job than the brunch search.

Fine Dining Search

This simple technique for application developers uses php, css, and html to enhance a site’s search function by highlighting words that match the search keyword.

***

First, define a style with a yellow background color. The stylename in the example is “normhigh”.

<style TYPE=”text/css”>
.normhigh {font-family: “trebuchet MS”; font-size: 45px; color: #000000; background-color: yellow;}
</style>

***

A couple of lines of PHP do the rest of the work. The command, preg_replace(), is used as shown below to wrap a style tag around keywords. $post_content contains the text which is being searched. $highlightstring has the keyword which was entered into a field on the search page.  When preg_replace() finds a match, it uses back reference $0 to wrap the class definition ”normhigh” around the matched word.

$skey = $highlightstring;
$pattern = ‘/’ . $skey . ‘/i’;
$post_content = preg_replace($pattern, ‘<span class=normhigh>$0′, $post_content);

The links below show the text highlighter at work:

• Search for ’phone’ 
• Search for ‘car’
• Search for ‘apple’
• Search for ‘WordPress’
• Search for ‘blog’

From php.net, the syntax for preg_replace is:

mixed preg_replace ( $pattern , $replacement , $subject [, int $limit [, int &$count ]] )