Web Kit Web Views

Web views on iOS and Android OS work very similarly; this is because they both use a WebKit implementation. Try to think of the web view as more of a window on the page. It lets you see any given portion of the page at any moment, while blocking your view of the rest of the page. The WebKit browser engine renders the entire HTML page and places it behind this window. The window stays static while moving the page beneath it. You slide the page up and down beneath this window like a film reel. Understanding how the web view works is important because it makes some CSS implementations a little more difficult. For instance, both Android and iOS browsers do not handle the 'Display: Fixed;' CSS property correctly. This CSS property normally is used to position something statically on the page and allow other content to move behind it, such as a bottom toolbar on a web page. Both browsers will treat this property correctly at first, but then when you move the page beneath the window, the object will move with the page becoming unfixed to its original location. In the case of the bottom toolbar, the toolbar will end up moving up with the page and if your page is long enough, out of the window entirely.

Creating Lists

Lists are an integral part of mobile operating systems. Lists are the primary conduits through which information is segmented. They also allow for hierarchal-based navigation.

When displaying list elements, mobile web UI will typically use an unordered list (<ul>) and list items (<li>), then use CSS to add styling. Listing 10-9 shows how to create a list with disclosure indicators. See Figure 10-22 for how it looks when the HTML is rendered. Note that this approach will work on iOS, Android, and Windows Mobile (although this specific code has not been compatibility-tested across all of the mobile web browsers). With BlackBerry, it is often easiest to implement table-based layout.

Listing 10-9. Implementation of List with Disclosure Indicators

<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

<title>HTML LIST</title> <style type="text/css">

margin: 0;

border-top: 1px solid #ccc;

list-style-type: none; }

display: block; text-decoration: color: #000; font-size: 20px; height: 100%; width: 100%; background-color

background-color: #cce; border-bottom: 1px solid #fff; border-top: 1px solid #ccc;

ul.simple_disclosure_list li { border-bottom: 1px solid #ccc; border-top: 1px solid #fff;

ul.simple_disclosure_list li a {

background-image: url(arrow.png); background-repeat: no-repeat; background-position: center right;

ul.simple_disclosure_list li a span.title { margin-left: 30px; font-weight: bold; float: left; position: relative; top: 40%;

<div class="list">

<ul class="simple_disclosure_list"> <li>

<span class="title">Title 1</span>

<span class="title">Title 2</span>


<span class="title">Title 3</span>

Figure 10-22. Implementation of progressive disclosure

Building a Navigation Bar

Navigation bars can be found on iOS, Android, and Windows Mobile devices. On iOS and Windows Mobile, a bar is represented by a bar that sits on the top of the page. On Android, a navigation bar is more like a button bar that sits on the bottom of the page. Android's version of a navigation bar is a little more difficult to construct. Earlier, we explained how a web view works on Android and iOS. This is especially important in this case because it will make it a lot more difficult to construct a proper navigation bar on Android. As we explained earlier, the display fixed property doesn't work for attaching the bottom bar to the page. How do you get around this? There are a couple of options and none of them are preferable. Firstly, you could wait for the Android development team to release an update to address this issue. Secondly, you could create a floating toolbar that works similarly to Android's but moves with the page. Neither of these options are ideal. Some developers have created their own scrolling implementation to work around this issue. In particular, the iScroll library from Cubiq (http://cubiq.org/iscroll) provides the capability to allow scrolling and position a toolbar or other widgets at the bottom of the screen.

Listing 10-10 and Figure 10-23 has an implementation of a very basic navigation bar; however, this can be modeled into a replica of the iOS implementation of its navigation bar, if given the proper resources and CSS3 attributes.

Listing 10-10. Simple Implementation of the iOS Navigation Bar

<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

<title>Navigation Bar</title> <style type="text/css"> body {

margin: 0;

div#navbar {

height: 40px;



div#navbar div {

margin: 0 10px 0 10px;

div#navbar div a {

text-decoration:none; color:black;

div#navbar div#navLeft { float: left;

div#navbar div#navRight { float:right;

div#navbar div#navTitle { width: 100%; height: inherit; position: absolute; text-align:center; margin: 0;

<div id="navLeft"><a href="#">Back</a></div> <div id="navTitle">Nav Bar</div> <div id="navRight"><a href="#">Home</a></div> </div> </body> </html>

Back Nav Bar Home

Figure 10-23. Simple implementation of the iOS navigation bar

Listing 10-11 is a simple replica of an Android-like button bar. In this case, we use a table so that when buttons are added or removed, the table takes care of the sizing of its elements. The result is shown in Figure 10-24.

Listing 10-11. Simple Implementation of the Android Button Bar.

<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

<title>Navigation Bar</title> <style type="text/css">

margin: 0;

div#navbar {

height: 40px; width: 100%; line-height:40px; background-color:gray;

display: table;

div#navbar div {

display: table-cell; text-align:center; border: 1px solid blue;

div#navbar div.row { display: table-row; margin:0; padding: 0;

div#navbar div a {

text-decoration:none; color:black;

<div id= <div id= <div id= </div> </div> </body> </html>

'navLeft"><a href="#">Back</a></div> 'navTitle">Nav Bar</div> 'navRight"><a href="#">Home</a></div>


Nav Bar


Figure 10-24. Simple Android button bar

Chapter iWebKit

The iWebKit framework allows you to create HTML that matches the look and feel of native iPhone applications. As the name implies, iWebKit is customized for browsers based on the open source WebKit engine, specifically iPhone's mobile Safari browser. The iWebKit framework was developed in accordance with the Apple Human Interface Guidelines, outlining application look and feel on the popular iPhone OS.

iWebKit was originally developed to optimize web sites for viewing on a mobile device.1 However, in mobile applications that use HTML in a web browser control (WebUI view) for some or all of its application interface, it is practical to utilize toolkits originally developed for web UI, including iWebKit. iWebKit can be easily integrated into iPhone applications developed in Objective-C, as well as the iPhone versions of applications developed using the Rhodes and PhoneGap frameworks.

As discussed previously, all of these platforms allow you to produce native iPhone applications that can be distributed through the iTunes App Store. However, WebUIView-based applications do not match the look and feel of native iPhone interfaces. iWebKit provides a quick and easy way to apply styles designed to match native interface design to your user interface.

iWebKit is easy to use: anyone familiar with HTML and CSS can use the framework to quickly create forms, hierarchical lists, and more, all integrated into a light and fast application. iWebKit takes advantage of properties new in CSS3 supported in the mobile Safari browser, such as background gradients, forms, and border properties-including rounded corners that don't require the clunky use of image files.

This chapter provides an overview of the features available in iWebKit and concludes with several examples that illustrate how to integrate iWebKit in each of the cross-platform development environments discussed in this book.

Was this article helpful?

0 0
App Gangster

App Gangster

Get All The Support And Guidance You Need To Be A Success At Dominating Apps. This Book Is One Of The Most Valuable Resources In The World When It Comes To Becoming The Godfather Of Smart Phone Apps.

Get My Free Ebook

Post a comment