Phonebook

Phonebook application tutorial

1.Creating the project

In this project we will create a Simple phonebook. Given a list of people from an xml file that we create the application presents it to the user using a UITableView. We will also implement “add” and “delete” contact actions, but since writing to a file would be beyond the scope of this tutorial, the changes will not be saved.

First we need to add the phonebook.xml to the project’s recourses folder (which is src/main/artwork).

The next step is to change the Emulated environment theme to “Bright theme” (Plugins→ Set Theme). This changes the look and feel on the Android and Desktop Versions to iOS 5 equivalent.

2.Starting to Code

Below is all the procedure you follow in order to construct your the phonebook project step by step. We are going to use NetBeans IDE as we did previously.

First of all you need to add a new class and name it Person. Person will be the class that will hold the information of each contact. Class person has three properties (name, surname, phone) and also the getters/setters for each property.

Feel free to add more properties for each person if you want but be sure that you implement their equivalent methods in the other classes. Person’s code is the following:

Next we are going to create a class to handle xml parsing. This class uses the xml file with the contacts and matches them to List Person.

First of all we need to get the path of our xml. To do so we declare NSBundle.mainBundle().pathForResource(“phonebook”, “xml”) in the constructor. This method points to the file in the recourses. (Note that the NSBundle resources are read-only). The code you are going to create is the following:

As you can see we create an NSData Object and pass the contents of file and we initialize an NSXMLParser Object with that data.

Create a ParserDelegate class that will implement the delegate that will handle the parsing and set it as the NSXMLParser’s Object delegate.

After that, we create three methods:

parceXML() method calls the parser and takes the phonebook from the delegate and returns it.

addContact() that adds a person to the phonebook

removeContact that removes a contact from our list.

Next we create the ParserDelegate class that extends NSXMLParserDelegate and implements didStartElenent() method. This method is called when the parser finds the start-tag of an element, since we use empty-element tags with attributes, that is the only method we need.

We check if the element’s tag is “person”, we create a new Person with the element’s attributes.

Finally, we add that person to the phonebook List. We also add a method to the delegate that returns the phonebook. Below is our ParserDelegate class code:

3.Creating the UITableViewCell

First we are going to create a class Cell that extends UITableViewCell and will implement the contents of each cell.

We add a constructor that takes a phonebook as parameter, initializes the cell to the Default Style and passes the phonebook to a field. Next we add an update() method that takes the cell’s index as parameter and fills the cell with its contents.

The second parameter of the super Constructor sets “Cell” as the Cell’s unique identifier.

For the needs of this example we set the cell’s textLabel with the name and surname of each contact and an invisible button that pushes a ViewControler containing the contact’s info (we’ll get to that later). In order to access the navigation Controller from within the cell, which is not on the UINavigationController’s stack of views, we take it from

UIApplication.sharedApplication().keyWindow().rootViewController() , which we cast to UINavigationController.

In the loadView method we first take the phonebook from the xml and then we set the table’s data source by implementing the anonymous class UITableViewDataSource. We implement two methods, the

numberOfRowsInSection(UITableView table, int section) method that returns the number of rows the table will have (in this case the phonebook’s size)
and the UITableViewCell cellForRowAtIndexPath(final UITableView table, final NSIndexPath idx) method that adds a cell in each row.

To do that we first check if there is a cell insance that can be recycled with the “Cell” unique identifier by calling

Cell cell =(Cell) table.dequeueReusableCellWithIdentifier("Cell");

If there aren’t any (dequeueReusableCellWithIdentifier() return null) we create a cell.

Finaly we call update with the cells index as parameter to fill its contents and we return that cell.

The last View Controller is the AddPersonController. This controller is very similar to the previous one, the only difference is that we replace the dynamic labels with textfields. Two with return key types next and one with done. To make the next and done keys work we add delegates to each textfield and we implement the textFieldShouldReturn(UITextField textField) method in each delegate. This method is called when the return key is pressed. The first responder is the textfield that has the keyboards attention, so for the first two textfields we resign them as first responder when the return key is pressed (it will appear as next key on the keyboard) and we assign the next textfield as first responder, while at the last textfield we just resign it from first responder to make the keyboard disappear. Notice that you are allways able to change textfields by selecting them on the screen. And below is the code of our class:

Next we are going to add to each class a button and also a title on the navigation bar.

Go to the ViewController and implement the viewDidAppear method that calls reloadData() for the table to make sure that every time the app returns from another view the table will reload the changes.

Also implement the viewDidLoad() method. In the viewDidLoad method we access the UIControllView’s navigationItem property to set the views title to “Phonebook” and add a button, initialized as the system item add (which is the plus sign “+”), that will push a new AddPersonController.

Go to The AddPersonController class and implement the viewDidLoad method to make the name textfield the first responder so the keyboard appears when the view loads, set the view’s title to Add Contact and add a button “Add”.

When clicked we need to call XMLParser class’s method addContact(), to do that we take the ViewController’s intstace from the stack with ((ViewController) navigationController().viewControllers().get(0) (since the ViewController is the first added on the stack, it is at index 0 on the list) and we call the addContact() method with the xml object with a new person as parameter.

Go to the PersonController class and create the viewDidLoad method. Set the title to the persons name and add a delete button to the navigation bar.

In UIBarButtoItem’s action lamda create a UIAllertController with the title “warning”, the message “Are u sure?” and Alert style, so that when the user presses delete a confirmation message will appear.

We want our alert to have two actions, one that confirms the contacts deletion and one that prevents it. We add the first action to the alert with title “delete”, style destructive, and a

new BlockInput() to implement what the action does. There we call remove contact from ViewController and we pop the ViewController.

The second button is the back button which is initialized with title “Back”, style Cancel and null as action so that the alert will disappear and go back to the PersonController.

To make the alert appear call presentModalViewController(alert, true); in the clicked method.