In this chapter, we will cover:
- Creating a toolbar
- Modifying the default status bar
- Creating a footer
- Creating a back button
- Creating a button for the toolbar
- Building a breadcrumb menu
- Building the duo navigation buttons
- Building the lists for items
- Building menus using lists
- Creating the toggle buttons
- Creating a modal box with buttons
- Building a search dialog
- Building the information fields
- Building forms with checkboxes, radio buttons, select fields, and text fields
- Creating and customizing a notification box
- Building a chat-style interface
- Creating a date picker
- Using different tabs
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 chapter, we find out how to build the main widgets for our iPhone applications using the main HTML/CSS/JavaScript frameworks mentioned in the previous chapter. Let's start building a toolbar.