Introduction
The graphical user interface, also knows as the GUI, is one of the most important components of modern software applications. It allows users to interact with the software through visual elements called widgets. Desktop and web applications use common elements such as buttons, labels, text inputs, checkboxes, and menus. However, the applications designed to run on mobile devices require a special and different GUI. The main reason is that it runs on a machine, which is different from a desktop computer or a laptop.
The iPhone introduced a new GUI designed specifically for this device. It’s an exclusive interface that uses its own look and feel. In fact, this is the most distinctive feature of the operating system of this device. Although it’s possible to use the native widgets through the Objective-C programming language, we’ll see how to do it in an alternative way. Actually, we’re going to use HTML, CSS, and some JavaScript code.
If you’re not familiarized with the iPhone interface, it is a good idea to take a look at the built-in applications on the device. It gives you a clear idea what we’re talking about. The same consideration will be taken for the iPad.
As you’re building a graphical interface for your iPhone applications, you’ll need to keep in mind some recommendations and concepts for getting an application with a native look and feel. Remember, your target device is not a desktop computer or a laptop. We can summarize these recommendations and concepts as follows:
► The iPhone viewport is a rectangular area that determines how the content of your application is displayed on the device. In fact, this area defines the layout of the application. The viewport can be managed through the specific HTML meta tag used by Safari Mobile.
► Users will interact with the application through gestures such as tap, double tap, drag, and flick. They aren’t using a mouse or a keyboard.
► The iPhone always has a visible statusbar. This is a small area on the top displaying information about your carrier, the status of the battery, and the current time.
► The applications should contain a toolbar with a title at least. Usually, this will be the place to set navigation buttons such as the common back button. Also, the action button should be displayed in this area of the screen.
► Take care about colors. The iPhone uses specific colors for its graphical interface. In order to build applications with a native look, you should try to use the same.
► A view is an individual page with content displayed on the screen of the device. Therefore, an iPhone application can contain many views. Navigation between them must be defined using different widgets.
► Including back buttons is a good practice. You don’t want your user to feel lost. Users should be able to come back to the previous view.
► Navigation is important. Don’t forget to include some navigation widgets such as menus or breadcrumbs.
In this topic, we find out how to build the main widgets for our iPhone applications using the main HTML/CSS/JavaScript frameworks mentioned in the previous topic. Let’s start building a toolbar.
This recipe shows how to create a main toolbar for our application. The main toolbar is located at the top of the graphical interface and is the place to put the main navigation buttons and icons. Usually, this toolbar is the basic widget for iPhone applications.
Getting ready
In order to create our toolbar, we’re going to use the iWebKit framework. A text editor will be used for creating and editing the main required HTML file. You can use the editor and the operating system of your choice for creating and editing the file. TextMate, Emacs, Vim, and Ultraedit are examples of advanced editors used by many developers for this task. These editors offer useful features such as syntax highlighting, auto-completion, and automatic indenting, making the development easier.
How to do it…
1. The first step will be to ensure that the iWebKit framework is installed on our computer, and then we’ll create a new HTML file adding the following lines to load the main files of the framework:
2. In order to create our main toolbar, we’ll use two simple HTML div elements:
3. After loading your HTML file on the iPhone, you can see a screen similar to the next screenshot:
How it works…
iWebKit offers a predefined div element with two CSS classes to build a main toolbar for applications. We only need to create a standard HTML page, adding the references to the HTML and CSS files of the framework, and including the referred div. The id attribute of the div element is used to create the toolbar.
A toolbar should display a label. Usually, this information will be a simple title. For this information we’re using a new div element with a specific id, which is defined in the main CSS file of the iWebKit framework.
You can test your new page through a WebKit browser such as Google Chrome or Safari, using the iPhone Simulator on your Mac or directly on your iPhone device. For the moment, we’re not using any server-side code so you can load your page from the filesystem or from your web server. In the first case, you’ll need to use the file protocol instead of the common HTML. For instance, if you have installed the iWebKit framework under the control of your web server, you can load your page using the URL http: //localhost/toolbar.html. Otherwise, you need to use the path to your file using the file protocol: file:///home/user/toolbar.html.
The iWebKit main files are loaded from the iwebkit directory, which is located outside of our main HTML file. Remember, we installed the frameworks in a directory under the main DocumentRoot of the web server.
One of the main advantages of using web technologies for developing iPhone applications is the independence of the operating system. Remember, we need a Mac OS X system to build native applications. However, we recommend testing our applications on the iPhone Simulator because the result is closer to the real iPhone device. Windows users can use Safari or Google Chrome on their local machines. Meanwhile, Linux users should use Google Chrome, although it is possible to use Safari under Wine (http://www.winehq.org).
There’s more…
The color of the main toolbar is blue by default, but the iWebKit allows changing it using a black or transparent color. You only need to add a new CSS class to the main div element. This class is defined in the style.css file of the framework. The names of these classes are black and transparent. For example, to change the background of the main toolbar to black, we’ll use the following line of code:
If we reload our page, we can observe how the background color has changed, as shown in the following screenshot:
See also
► Installing the iWebKit framework recipe in topic 1, Frameworks Make Life Easier
