The iPhone provides a specific way to display dialog boxes for searching. This kind of dialog is different than the modal box that we explained in the previous recipe. Actually, the search dialog box is displayed as a pop up at the top of the current page. Meanwhile, the rest of the same page is grayed out instead of using the black color as the modal box. The search dialog box should contain two different action buttons. One of them will be used for cancelling the search and the other one will launch this search. Let’s explore how to build a standard search dialog for our iPhone applications.
Getting ready
The iUI framework uses a simple and efficient way for building our required dialog. Check the installation of this framework on your computer before continuing.
How to do it
To create the mentioned dialog, the iUI framework uses a standard HTML form with two buttons, one label and one text input field. The code for this form is the following:
The form will be hidden until the user clicks on the Search button of the main toolbar, but we’ll need a specific value for the href attribute of the anchor element for this button, as shown in the next line of code:
The next screenshot shows the initial state of the application, where the dialog box is not visible:
After clicking on the Search button, we’ll see our dialog box:
How it works
The dialog is a predefined CSS class for showing a dialog box using regular HTML form. Obviously, this form will need a value for the attribute action to get the value typed for the user in the text field. Usually, it will be a reference to a server-side component such as a PHP page or a CGI script. The links inside the form help us to create two different buttons, one for cancelling our search and other one for submitting the content of the form to the server. leftButton and blueButton are CSS classes defined to allow us to place the buttons on the left and the right side.
One HTML label is used to set a title for the dialog box and the text field is a standard input for HTML forms. No predefined CSS classes are required for these elements.
In order to launch our dialog box, we’re using the id of the form as the value for the attribute href of our button. Observe that the value is preceded by the # character to indicate that the reference is in the same page.
There’s more
In topic 6, Exchanging Data: AJAX, we’ll learn how to improve our search dialog box using AJAX to search a database located in the server-side of the application.
See also
► Installing the UiUIKit framework recipe in topic 1, Frameworks Make Life Easier
► Searching with AJAX recipe in topic 6, Exchanging Data: AJAX
