One of the most used widgets in the graphical user interface for iPhone applications is the list. This one shows different items separated by a horizontal thin gray line. The lists can be useful for showing sorted information to the user. For instance, a list is ideal for listing a set of records from a database. Usually, each item of the list is a small text. On the other hand, the items inside the list can contain an image or a comment next to the mentioned text.
Obviously there exists different kinds of lists, the most basic and simple is a set of items containing text with one or two words. All the items of this simple list appear to be separated only by a thin line. Other lists are rounded and allow a blank space between other widgets. It is even possible to build lists such as a navigation menu using links, as we’ll see in the recipe called Building menus using lists, which is explained later in this topic.
In this recipe, we’re going to explain how to build simple lists with text, comments, and images.
Getting ready
Instead of the iWebKit framework used in the previous recipes, we’ll use the UiUIKit for this recipe. The reason is because this framework offers a simple way for building this kind of li: with minimum code and effort.
To refresh your memory, take a look at the previous topic to find out how to install and configure the UiUIKit.
How to do it
As we’re going to use the UiUIKit, we’ll need to add the reference to the required file of this framework to our HTML file:
The process for building our simple list is very intuitive. As in regular HTML files, you only need to create an unordered list using the ul tag and then add as many li elements as items for the lists you need to create. The following is the required code for creating the simple list:
When you’re ready, you can load your new HTML page on the device for viewing a page, as shown in the following screenshot:
How it works
In order to get our first simple list running, we’ll need to use the UiUIKit framework, which allows creating a toolbar and other areas to put inside different widgets for the graphical user interface. This framework only uses a CSS file to create the required layout for our iPhone applications. We’re using a standard XHTML page with a reference to the specific CSS file of the framework. The body element of the page requires a specific id with the normal value. This id is defined in the mentioned CSS file of the framework. Inside this element, we’ll to put a special div element to create the main toolbar. This div element needs to use other styles defined in the stylesheet file called header. The h1 element is used for the title of this toolbar. After this initial div element, we can put other widget elements as our first simple list. In the previous screenshot, we can observe a toolbar with the title Simple list. The code for this toolbar is given next:
The simple list can be modified to insert text on the right side of the item. This one can be useful to show complementary information. For instance, when you access the Settings application installed on your iPhone, you can view a navigation list with different options. If you click on the General option, a new list appears. The About items takes you to a new screen showing a simple list with information about the number of songs, the capacity of the device, the number of installed applications, and other similar information. This data shows how to use a simple list with different items, where each of them is built using a description on the left side and other text in different format on the right side. To imitate this behavior, we can use a simple list provided by the UiUIKit. The required code is as follows:
The following screenshot shows the original list of the Settings application of the iPhone Simulator:
And our similar list that we built with the help of the UiUIKit framework:
There’s more
The UiUIKit framework allows the use of links for each item of the simple list. If we put an HTML link inside each li element of the list, we’ll get a link to other pages.
On the other hand, this framework offers the option to add icons to the items of our simple list. You only need to add an img HTML tag inside each li tag of the simple list. This new HTML element requires a specific CSS class called ico. Take a look at the following code to learn how to do that:
This new list with icons is shown in the following screenshot:
See also
► Installing the UiUIKit framework recipe in topic 1, Frameworks Make Life Easier
► Building menus using lists recipe
