Table View and Picker

6.1  Dealing with Table Views

         Table views are the essential object for the iPhone application development. Table views can be used for display set of data and can also be used for developing iPhone applications with iPhone standards and so on. Table views having set of delegates which can be used to access the data in table view.

         The best way to understand how to use a Table view in your application is to create a new View- based Application project and then manually add a Table view to the View window and wire it to a View Controller. That way, you understand the various building blocks of the Table view.

         In the header file, first add UITableViewDelegate and UITableViewDataSource. Then create one outlet for UITableView and one array to store the values that is going to display in the table view. The header file will be look as follows,

        

         Now come back to implementation section, we have to use two data source  function required to display the data in table view.  Following are two major data source functions of table view to display the relevant data.

-  (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;

-  (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;

         In the first function, we have to define the total number of rows that we are going to append in the table view. We can manually set integer value or we can set the count value of array that we are going to use in our application.

         In the second function, we have to define the cell. We can create our own cell as per project requirement. Implementation section coding will be as follows,

        

        

         Array values are defined in ViewDidLoad Function. Now In the xib file, connect the outlets and tableView delegates as shown in following figure,

         In addition to above two datasource functions, we have following optional functions to enhance the property of Table View datasource.

         Finally build and run the application,  we will get output as follows,

        

         Till now we didn't use any delegate functions for table view. For that we have to Implement following modifications in our application. When the user  click particular row in the table view, it should navigate to next view and show the row element name in the next view. For that first we have to declare and define the navigationController in app-delegate. The app-delegate.h and app-delegate.m files are changed as follows,

         fig : app-delegate.h

        

         fig: app-delegate.m

        

         Now we have to add one more UIViewController in our project, for that right click on the project and add new UIViewController file, name it as subview. In subview.h file , add one method to get the string value. This method will get the string value for the selected row in the table view.

Also declare object for label and finally subview.h file look as follows,

        

         Now in subview.m file,  we have to define the method. Finally connect the outlet for label in subview.xib file.

        

          Now come to our tableView header file and import subview.h file . Now come to implementation section and add one delegate function in the code as follows,

        

         Finally build and run the application, the output will be as follows

4.2  UIPicker and it's Functions

            UIPicker is another one object used in iPhone development for displaying the data inside a picker. iPhone allow us to use two kinds of picker, namely DataPicker and Picker. Date picker is used to display the date, time or both . User can select desire one as per his requirement.

         Following example shows the date picker example. First we have to create a view based application and in the header section of View controller file, add UIDatePicker object  and one IBAction to invoke date picker function. In the implementation section, define the function .

         Fig: Header File

         Fig: Implementation File

Finally connect the outlets and IBAction in xib interface. Choose Value changed as action  as shown below,

         Build and run the application. You will get the desire output. Developers can change the properties for picker via attribute window. They can change the type, values, selector style etc, through attribute window.

         Now we shall see a picker with example. In picker, we can customize the data as per our requirements. UIPicker having data sources and delegates similar to UITableView. First we have to import the picker delegate and data source in the header file. And create an object for picker . In this application, we are going to implement two components, i.e. We are splitting a picker in to two parts loaded with different data. To store the data, we are going to declare two array in header section. To get the current index value for each section, we are going to declare two integer values in header. Finally we will get the header file as,

         Now we have to set data source and delegate action for picker using data source and delegate functions. Initialize the arrays with objects in viewDidLoad function.

         Above three data source functions are used to set data in the picker. First function defines the number of rows in each component, second one is for set number of components in the picker and third one is to set data for each component.

         Following are the delegates function used to perform any action in picker,

         here, we are getting the index path for each components. By using this index path, we can get the component's index path globally and can use that in anywhere of the program page. Finally define the alert action by using index paths as follows,

         Now we can connect the actions and outlets in the xib file and build and run the application, the output will be as follows,

KeyBoard, ScrollView,Scroll Offset,Validation

5.1  How to customize key board as per the requirement

        

            We can customize key pad as per the user requirements. The key pad type may be Number type,  URL ,Phone pad, Email- Address. If the user wants to enter e-mail id in particular text field, then the developer can set E-mail address type as key board. Following example shows key board type settings in iPhone application.

           

         Developer's can set the key pad via coding as well as attribute window. “setKeyboardType”

is the key to set key board type for particular text field. The following figure shows the key board type changing via attribute window,

         Also we can use textField Delegates method to handle the events in textField. We have to use UITextFieldDelegate in the header section to use the textField delegates in our application. Also connect the delegate's of TextField in to file's owner or set the delegate file for particular textField via coding as follows, [textField setDelegate:self]. Following are the list of textField delegates available in iPhone application development,

 - (BOOL)textFieldShouldBeginEditing:(UITextField *)textField;      // return NO to disallow editing.

 - (void)textFieldDidBeginEditing:(UITextField *)textField;              // became first responder

 - (BOOL)textFieldShouldEndEditing:(UITextField *)textField;       // return YES to allow editing to  stop and to resign first responder status. NO to disallow the editing session to end

 - (void)textFieldDidEndEditing:(UITextField *)textField;                // may be called if forced even if shouldEndEditing returns NO (e.g. view removed from window) or endEditing:YES called

 - (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string;                                           // return NO to not change text

 - (BOOL)textFieldShouldClear:(UITextField *)textField;               // called when clear button pressed. return NO to ignore (no notifications)

 - (BOOL)textFieldShouldReturn:(UITextField *)textField;              // called when 'return' key pressed. return NO to ignore.

5.2  Implementation of scrollview with example

         ScrollView is an object which is used in iPhone application to show more amount of data in a single view on the basis of scrolling. If the developer need to present more information in a single view, then he can make use of scroll view in his application.

         Now, we shall see a view-based application to implement scrollView. As usual, starts with Xcode and create a view based application. In the header file, add UIScrollView object and one UIView object. After adding those objects, the header file will be looking like as follows.

         In the implementation section, we have to write coding in ViewDidLoad function. Before that, first we have to connect the outlets in xib files. Set UIView size as 320*650 and come back to implementation section. Now, set the scrollView content size as view size and add the view as sub view for the scroll view via coding in viewDidLoad function. Implementation file coding will be as follows,

        

         Now come again to xib file and you can set properties to scroll view in it's attribute window.

Add some text fields in the view and build and run the application, output will be as follows,

        

        

4.3  Text view and its delegates

         If the developer wants to use multi lined text field, then he should use Text view for that purpose. Text view can be used to display or get a certain amount of text data. Text view it self having its own scroll and edit functionality. We can also customize own text view by changing its attribute values in attribute window.

         Similar to text field, text view also having it's own delegate functions. To use the text view delegate , we have to add UITextViewDelegate in the header file. Resigning key pad coding is not similar to text field, we have to write our own coding for resigning a key pad in text view delegates.

        

         Now we shall see an example for text view and its delegate. First create a view based application in Xcode and come to its header file. Add text view delegate and object in the header section, the code will be look as follows,

         Now we have to come back in the implementation section. To resign the kay board, write the codings in the delegate file such as,

-      (BOOL)textView:(UITextView *)textView shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text

         Now we have to connect the outlet and delegate of text view in the xib file. First drag and drop UITextView  from the object pane and connect its delegate in the files owner.  Build and run the application, finally we will get the output as follows,

         Apart from this delegate, text view also having delegates such as,

        

4.4  A simple Login Validation

         Now we shall see a simple Login validation program for iPhone. We can use a view based application for this program.

         In this application, we are going to validate user name, password and confirm password and email id. First you have to start with Xcode and create a view based application. Come to header file and Add textfield delegate and UITextField outlets for user name, email id and passwords.

The header file will be look as follows,

        

        

         isValidate is the method used for validation purpose and  “done” is used to call the validation function. IsValidateEmail is used for email validation purpose.

         Now we have to write codes in the implementation section. We have define the functions in implementation file. First we have to define isValidateEmail and it will be like as follows,

         Just use the above code as standard validation for email-id. After that we have to define isValidate function. IsValidate function will be as follows,

         In this function, first we have to define two variables namely error and message for easy access and efficiency. After that we have to check whether  all the fields are entered and make sure that none of the fields are empty, for that purpose we check all the fields are filled or not. If  any field is empty, alert with error message is pop upped.

         Once the fields are filled, we have to check whether passwords are matched or not, finally we have to check whether the email id is valid or not. For that purpose, call isValidEmail function by using [self  isValidEmail:tfEmail.text] command.

         Finally define the done action to call the validate function and the done action coding is look as follows,

         Thats all we have to do in the coding section. Now come to xib file and connect the outlets and actions. Set password and confirm password  text field as secure one by enable the secure property in TextField attribute window.

         In attribute window for Text Fields, set place holder for each text field in the xib and finally build and run the application, the output will be as follows,