Adding the DetailController and Configuring the View

Create the DetailController.xib.

The detail controller view displays information about a single customer in the client database. The source files you added from the SUP_iOS_Custom_Dev_Tutorial_code.zip file contain the DetailController.h, DetailController.m, and DetailController.xib files that create the customer detail view. This file also supports creating a new customer or deleting an existing customer. To create these files manually in Xcode, you would create a new file using the UIViewController subclass template, then indicate it is a subclass of UIViewController. Be sure to indicate With XIB for user interface.

Although the provided XIB file is already configured, you can walk through the steps to see how to create the interface.

  1. Click the DetailController.xib file to open Interface Builder.
  2. Select View > Utilities > Object Library.
  3. In the Object Library panel, select the Text Field item, drag it onto the view three times to create three text fields aligned vertically to the right of the screen.
    You can resize the text fields using the resize handles and position the button by dragging it to the desired location.
  4. In the Object Library panel, select the Label item, drag it onto the view three times to create three labels to the left of and aligned with the three text fields. Replace the default Label text with:
    • First Name
    • Last Name
    • Phone
  5. In the Object Library panel, select the Round Rect Button item, drag it onto the view, and rename it to Submit. Also add a Delete button in the same way.
    To make connections to the user interface from the view controller, the DetailController.h file contains the outlets, property declarations for the instance variables, and a declaration for the action method.
    #import <UIKit/UIKit.h>
    #import "SUP101Customer.h"
    #import "SUPCallbackHandler.h"
    #import "CallbackHandler.h"
    
    
    
    @interface DetailController : UIViewController {
        BOOL deleteRecord;
    }
    
    @property (nonatomic, retain) IBOutlet UITextField *fname;
    @property (nonatomic, retain) IBOutlet UITextField *lname;
    @property (nonatomic, retain) IBOutlet UITextField *phone;
    @property (nonatomic, retain) SUP101Customer *originalObj;
    @property (nonatomic, retain) IBOutlet UIButton *submitButton;
    @property (nonatomic, retain) IBOutlet UIButton *deleteButton;
    @property (nonatomic, retain) IBOutlet UILabel *label;
    @property (nonatomic, retain) CallbackHandler *callbackHandler;
    
    
    -(IBAction)buttonPressed:(id)sender; 
    -(IBAction) keyBoardOff : (id) sender;
    -(void)keyBoardOff;
    -(void)cleanForm;
    
    
    @end
  6. View the DetailController.m file.

    This class displays detailed information about a single customer in the client database. The information can be edited. If the data is changed and the Submit button is pressed, the buttonPressed method uses Object API calls to save the changes in the client database, send the changes to the server, and disable the Submit button.

    If the server accepts the changes, the callback handler posts an ON_REPLAY_SUCCESS notification, which causes the onReplaySuccess notification handler to run. The cached UI data is refreshed from the database and the Submit button is re-enabled.

    This class also registers for the ON_REPLAY_FAILURE notification to handle the case where the server rejects the changes, or an error occurs on the server side.

    If you press the Delete button, the buttonPressed method uses the Object API calls to delete the record and then initiates a synchronize to send the delete request to the server. If the server accepts the changes, the callback handler posts an ON_REPLAY_SUCCESS notification and the list page is shown.

    If the Create option is selected from the menu list, the DetailController is loaded with an empty form. The Submit button is called Create. If you fill out the form and press the Create button, a new record is created in the local database and a synchronization call is initiated. If the server accepts the new record, an ON_REPLAY_SUCCESS notification will be posted.

  7. Click the DetailController.xib file to open it in Interface Builder, click the First Name text field, and select View > Utilities > Attributes Inspector.
  8. In the Attributes Inspector panel , scroll to the View section and enter 1 in the Tag field.
  9. Set the tags for the Last Name and Phone text fields to 2 and 3 respectively.
  10. Control-drag from the File's Owner icon in the middle pane to each of the text fields and select the fname, lname, and phone outlets, respectively, to create connections between the text fields and the outlets defined in the DetailController.m file.
  11. Select View > Utilities > Connections Inspector to confirm that the outlets have been correctly configured:

    Connections Inspector - outlet configurations
  12. Control-drag from the File's Owner icon in the middle pane to the Submit button and select submitButton.
  13. Repeat the same steps for the Delete button as for the Submit button.
Related tasks
Viewing the SubscribeController View Controller
Creating the MenuListController
Creating the CustomerListController