Taking iOS MVC concept into iOS app Project creation

(USING XIB --- See Example Event Handling for doing in StoryBoard directly)

View = AppNameViewController.xib ("nib" file)

• contains "objects"/GUI elements --create with Interface Builder, setup first STEP 1
  

Controller = AppNameViewController.h and .m

• AppNameViewController class generated for you with new project and is a child of UIViewController class.
  
  
• STEP 2: you must declare in .h file outlets (IBOutlets) that is a "pointer" to an object in the view (xib file)  
  
  
• STEP 3: GUI View Updating: Controller tells View to Update: use InterfaceBuilder to connect outlet and View object so that Controller can alter view
  
  
• STEP 4: GUI View EVENT HANDLING: View tells Controller to Run an IBAction method: use Interface Builder to say when there is an event on a View object, have it trigger an IBAction method in the Controller

Model = class variables inside the Controller (whatever data structures or classes or data types you want)     

• STEP 2: you must create class variables inside the Controller to represent the data in the program that corresponds to the Views.

Step 1: Create GUI (VIEW) -- AppNameViewController.xib

• create (dummy at this point) GUI through InterfaceBuilder in your AppNameViewController.xib

• This is graphical drag and drop

• To see list of GUI elements do a View->Utilities->Show Object Library

• After you drag and drop a GUI view you can alter properties

• Note: you can view the corresponding Controller class that "owns"/associated with this view = AppNameViewController.h file (the UIViewController associated with this View) by bringing up the Assistant Editor will show code on the right. The red square shows button to toggle on/off assistant editor
  

Step 2&3: Create Data (primitive types, objects) to represent data in app (MODEL) and tile them through an IBOutlet--all done in the Controller class

Uses XCode 4+ (older XCode is different)

• Step 2.1 = setup data to represent data in model (see example)

• Step 2.2 = setup IBOutlet associated with Views you want to control using some simple Drag feature in XCode's Interface Builder

  Step 2.2.1: bring up AppNameViewController.xib in Interface Builder (IB)

  Step 2.2.2: bring up the Assistant Editor (View->Assistant Editor->Show Assistant) to show at same time the AppNameViewController.h code (in right hand side of IB)

  Step 2.2.3: Select GUI element you want to connect to and HOLD Cntrl KEY and drag to the AppNameViewController.h displayed code in Assistant Editor

  Step 2.2.4: Say you want to create an Outlet in Connection,

  • Name= some descriptive name corresponding to underlying View and data associated with it,

  • Type = should be filled in as the View UI class type you selected in step 2.2.3,

  • Storage= leave for now at default.

    result of step 2.2. will be in the AppNameViewController.h the addition of @property (nonatomic, strong) IBOutlet View_type *nameofView

    NOTE: When you now in your AppNameViewController.m code change the value of nameofView variable it will change the coresponding display of informaiton associated with this View (like the text in a Label)
    

• Step 2.3 = create setter/getter methods for your data only (see example)

• Step 2.4= add methods to manipulate your data in other ways (see example)

• AN Example (for XCode 4+) -- RESULTS of AppNameViewController.h after previous steps
  

  @interface AppNameViewController : UIViewController {
       //other class variables as you need
  
  }
  
  //step 2.1 & 2.3  add variables for model/data
  @property (nonatomic, retain) NSTimer *clock;
  
  //step 2.2   IBOutlet generated through XCode InterfaceBuilder to Code association
  
  @property (nonatomic, strong) UIBOutlet UILabel *clockLabel;
  
  
  //step 2.4 Add (optional) methods to manipulate model data as necessary
  
  -(void) showClock;
  -(void) showActivity;
  
  @end
              

   

  AppNameViewController.h with method to alter clockLabel which will update the associated View

  @impelmentation AppNameViewController
    //other code *****
                                             
  - (void) changeClockLabel {
    // clockLabel is instance of UILabel class that has the variable text which is text displayed
    clockLabel.text = [NSString string:@"The New Clock Label"]; //this is short hand for setter method for text variable of UILabel class
    //or could write as  [clockLabel setText:@"The New Clock Label"];
    // another short cut as is a string would be  clockLabel.text = @"The New Clock Label";   
  }                                                            

Step 4: GUI View EVENT HANDLING: View tells Controller to Run an IBAction method:

• use Interface Builder to say when there is an event on a View object, have it trigger an IBAction method in the Controller

  • Step 4.1: bring up AppNameViewController.xib in Interface Builder (IB)

    Step 4.2: bring up the Assistant Editor (View->Assistant Editor->Show Assistant) to show at same time the AppNameViewController.h code (in right hand side of IB)

    Step 4.3: Select GUI element you want to connect to and HOLD Cntrl KEY and and drag to the AppNameViewController.h displayed code in Assistant Editor
    
    Step 4.4: Say you want to create an Action in Connection,

    • Type = filled in as the View UI class type,

    • Event= event for this View you want to handle (this determines the method you will call--prespecified callback method names for each different event --read API),

    • Arguments = what you want to send (see below for 3 choices: nothing, sender, sender &event)

  Step 4.5: create code in the AppNameViewController.m file of the action method signature setup from step 4.4.

  (NOTE: if you want to add a new View and tie it to already existing (IBAction) method) simply do steps 4.1, 4.2 and 4.3 --but, in 4.3 drag to the existing IBAction method you have)
  
  
  

• STEP 4.5 ADD THE ACTION METHODS --- EVENT HANDLING CODE --- -- in AppNameViewController.m you must implment these methods

• INSIDE note the methods of return type IBAction AppNameViewController.h HAVE BEEN created via steps 4.1-4.4 -

  RESULT OF STEPS 4.1-4.4 -- GENERICALLY
  
  @interface AppNameViewController: UIViewController {
        //class variables **********see above example code!!!!!
  }
  
  //properties ---see above ***********
  //methods ---see above **********
  
  //action methods that will be triggered by GUI events from "registered Views"
  - (IBAction) doSomething: (id) sender;   
  
  - (IBAction) doSomething2; //this has no data passed
  
  - (IBAction) doSomething3: (id) sender
                              forEvent: (UIEvent *) event;
  
  @end

Further our example --add a UIButton that has an IBAction associated for buttonPressed (when button hit)

     WHen the button is hit make the UILabel "clockLabel" say "the button **buttonText** says time is **currentTime**"

         where **buttonText** =  the text of the added button in its untapped state (this code always the same regarldess of state)

               **currentTime** =  the current time using NSDATE

AppNameViewController.h

@interface AppNameViewController : UIViewController {
      //other class variables as you need  }

 //step 2.1 & 2.3  add variables for model/data
 @property (nonatomic, retain) NSTimer *clock;

 //step 2.2   IBOutlet generated through XCode InterfaceBuilder to Code association
 @property (nonatomic, strong) UIBOutlet UILabel *clockLabel;
 
 //step 2.4 Add (optional) methods to manipulate model data as necessary
  -(void) showClock;
 -(void) showActivity;


//RESULTS of step 4.1-4.4: creation of IBAction method
- (IBAction) buttonPressed: (id)sender;

@end

 

AppNameViewController.m

#import "AppNameViewController.h"

@implementation AppNameViewController 

@synthisze clock, clockLabel;   //generates the setters and getters for the @property declarations in .h file

 //***various methods---showClock, showActivity *********
 
 //RESULT of step 4.5: implementation of created IBAction method in .h file
 - (IBAction) buttonPressed: (UIButton *)sender {
     NSString *title = [sender titleForState:UIControlStateNormal]; //get the title  of the button which is the sender in its untapped state
     NSDate *now = [NSDate date];  //get todays date using the "class" method date on NSDate
     clockLabel.text = [NSString stringWithFormat:@"Button %@ says time is %@", title, now];  //set text of UILablel to new NSString
  }

@end