Principiul care stă la baza conceptului Model-View-Controller este împărţirea responsabilităţilor.
“Model” reprezintă partea logica a aplicaţiei, aici are loc procesarea datelor.
Partea de “View“, este preocupată doar cu crearea interfeţei utilizator în funcţie de datele şi mai ales a schimbărilor stărilor acesteia, recepţionate de la “Model“. Pentru ea nu contează logica aplicaţiei sau cum are loc procesul de “input”, ci doar reprezentarea cât mai corectă a stării curente a modelului.
“Controller“-ul se ocupă cum translatarea acţiunilor prestate de utilizator în “update”-uri către “Model“, nefiind important la ce va folosi “Modelul” aceste “update”-uri.
Creăm proiectul
Deschidem Xcode, când va fi încărcat, veţi vedea ecranul de bun venit.
În această fereastra, faceţi clic pe “Create a new Xcode project”.
Se va deschide fereastra ce conține template-urile.
Selectăm “Emthy Application“.
Pagina următoare vă va permite să definiţi numele proiectului şi identificatorul. Identificator este numele aplicaţiei. Îl puteţi vedea ca un nume de domeniu scris inversat. Dacă domenul site-ului dvs. este mycompany.com, identificatorul dvs. ar fi com.mycompany.APPLICATIONNAME.
Nu uitam sa deselectam “Use Core Data” si “Include Unit Test“.
În baza locaţiei pe care o selectaţi și a numelui proiectului, va fi creat un dosar cu acel nume şi fişierele proiectului nostru vor fi fixate acolo. Imediat după salvarea template-ului, vei observa cum iți este organizată fereastra de lucru.
Cream fisierele “Controller” si “View”
Din meniul din stânga selectăm “Project navigator“, pe dosarul “HelloWord” facem click cu butonul din dreapta a mouse-ului și selectăm “New File“.
Din fereastra cu template-uri, care se va deschide, selectăm “Cocoa Touch” >”UIViewContoller subclass” și facem click pe “Next”
In urmatoarea fereastră indicam numele clasei noastre “ViewController”, dacă nu este selectată optiunea “With XIB for user interface” atunci o selectăm, asa cum aplicatia noastră este doar pentru dispozitive din familia “iPhone” atunci nu vom avea nevoie de a selecta optiunea “Targeted for iPad“.
La pasul urmator indicam locatia unde vor fi create și salvate fișierele pentru această clasa
Observam ca sau creat 3 noi fișiere
- ViewController.h – fișierul “header” al clasei “ViewController”
- ViewController.m – fișierul de implimentare al clasei “ViewController”
- ViewController.xib – fișierul de interfată “ViewController”
Lucram un pic cu codul
Deschidem fisierul “ViewController.h”, declarăm o variabilă noua “helloWorldLabel” si o metodă/functie “displayHelloWordOnTheLabel”, pentru afisarea textului “Salut Lume”.
//
// ViewController.h
// HelloWorld
//
// Created by XCode.md on 11/22/11.
// Copyright (c) 2011 XCode.md. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController {
UILabel *helloWorldLabel;
}
@property (nonatomic, retain) IBOutlet UILabel *helloWorldLabel;
- (IBAction)displayHelloWordOnTheLabel;
@end
Din motivul ca vom avea nevoie să accesăm si să modificăm variabila/obiectul “helloWordLabel” cu ajutorul comenzii @property (si desigur @synthesize in fisierul nostru de implimentare, dar asta un pic mai tarziu) am indicat compilatorului sa creeze automat setters si getters.
Pentru ca variabila noastra sa poată fi untilizată in Interface Builder, inainte the tipul variabilei/obiectului am indicat tipul IBOutlet. Astfel aceast obiect va putea fi folosit pentru a face legatură cu alt obiect din interfata utilizatorului.
O methodă poate fi utilizată in Interface Builder daca la aceasta metoda se indică, ca tip pe care il returnă, tipul “IBAction“.
In fisierul de implimentare “ViewController.m” primul lucru care-l facem e de a adăuga “@synthesize helloWorldLabel = _helloWorldLabel;” pentru ca Xcode sa creeze setters si getters pentru obiectul nostru. Nu uitam să eliminăm variabila cand aplicatia noastră va termina delucrat. Pentru aceasta adaugam in metoda “- (void)viewDidUnload“ un nou rand “self.helloWorldLabel = nil;”
După aceasta definim metoda “- (IBAction)displayHelloWordOnTheLabel”
Fisierul “ViewController.m” ar trebui sa arate asa
//
// ViewController.m
// HelloWorld
//
// Created by XCode.md on 11/22/11.
// Copyright (c) 2011 XCode.md. All rights reserved.
//
#import "ViewController.h"
@implementation ViewController
@synthesize helloWorldLabel = _helloWorldLabel;
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
// Custom initialization
}
return self;
}
- (void)didReceiveMemoryWarning
{
// Releases the view if it doesn't have a superview.
[super didReceiveMemoryWarning];
// Release any cached data, images, etc that aren't in use.
}
#pragma mark - View lifecycle
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
}
- (void)viewDidUnload
{
[super viewDidUnload];
self.helloWorldLabel = nil;
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;
}
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
// Return YES for supported orientations
return (interfaceOrientation == UIInterfaceOrientationPortrait);
}
- (IBAction)displayHelloWordOnTheLabel
{
[self.helloWorldLabel setText:@"Salut Lume!"];
}
@end
Deschidem fișierul “AppDelegate.h” și adaugam cateva randuri noi. Acest fișier ar trebui să contină codul de mai jos
// // AppDelegate.h // HelloWorld // // Created by XCode.md on 11/22/11. // Copyright (c) 2011 XCode.md. All rights reserved. // #import <UIKit/UIKit.h> @class ViewController; @interface AppDelegate : UIResponder <UIApplicationDelegate> @property (strong, nonatomic) UIWindow *window; @property (strong, nonatomic) ViewController *viewController; @end
In acest fisier am declarat o nouă variabilă ”viewController” de care este de tipul “ViewController”
Deschidem fișierul “AppDelegate.m”
Acest fișier ar trebui să conțină următorul cod
//
// AppDelegate.m
// HelloWorld
//
// Created by XCode.md on 11/22/11.
// Copyright (c) 2011 XCode.md. All rights reserved.
//
#import "AppDelegate.h"
//adaugam classa ViewContoller
#import "ViewController.h"
@implementation AppDelegate
@synthesize window = _window;
//pentru a genera "setters" si "getters" pentru obiectul nostru viewController
@synthesize viewController = _viewController;
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
// Override point for customization after application launch.
//Alocam obiectul nostru viewController de classa "ViewController" si il initializam cu fisierul de interfata cu acelasi nume "ViewController"
self.viewController = [[ViewController alloc] initWithNibName:@"ViewController" bundle:nil];
//Pentru ca obiectul nostru "viewController" sa fie vizibil e nevoie de al atribui ferestrei noastre principale.
self.window.rootViewController = self.viewController;
[self.window makeKeyAndVisible];
return YES;
}
- (void)applicationWillResignActive:(UIApplication *)application
{
/*
Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state.
Use this method to pause ongoing tasks, disable timers, and throttle down OpenGL ES frame rates. Games should use this method to pause the game.
*/
}
- (void)applicationDidEnterBackground:(UIApplication *)application
{
/*
Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later.
If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits.
*/
}
- (void)applicationWillEnterForeground:(UIApplication *)application
{
/*
Called as part of the transition from the background to the inactive state; here you can undo many of the changes made on entering the background.
*/
}
- (void)applicationDidBecomeActive:(UIApplication *)application
{
/*
Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.
*/
}
- (void)applicationWillTerminate:(UIApplication *)application
{
/*
Called when the application is about to terminate.
Save data if appropriate.
See also applicationDidEnterBackground:.
*/
}
@end
Lucrăm cu interfața utilizatorului
Facem click pe fisierul “ViewController.xib”
In meniul din dreapta avem o listă cu elemente de interfață predefinite numită “Object Library“. În caz că nu vedem aceste elemente ne ducem la “View” > “Utilities” > “Show Object Library“. Această bibliotecă cu elemente de interfață este utilizată, în primul rând, pentru a alege elementele interfeței utilizatorului pe care dorim să le includem în aplicaţia noastră.
Din biblioteca de obiecte selectăm elementul “UILabel” și-l tragem în fereastra aplicatiei
Pentru ca textul “Salut Lume” sa incapa in obiectul “Label” e nevoie de al lărgi un pic chenarul obiectului. Pentru a arăta un pic mai frumos am aliniat textul in centru.
Alinierea poate fi facută activand din meniul din drepta sus optiunea “Show the Attributes inspector”
Acum trebuie sa conectăm totul impreuna. Facem click dreptul pe “File’s Owner“, găsim obiectul nostru “helloWordLabel“, in grupa “Outlets“. Facem click pe cerculetul din partea dreapta care apare langă numele obiectului nostru, din ViewController, și-l tragem pe obiectul nostru din interfată.
Acum avem nevoie de un buton care va modifica textul din “Label” in “Salut Lume!” . Pentru aceasta din biblioteca de obiecte selectăm elementul “UIButton” și-l tragem în fereastra aplicatiei noastre
Modificăm textul care apare pe buton, pentru aceasta facem click pe butonul nostru pentru a-l selecta si in meniul din dreapta sus activăm optiunea “Show the Attributes inspector” . In campul “title” indicăm textul care va aparea pe buton, in cazul nostru “Click”.
O alta optiune mai rapidă de adăugare/editare a textul care apare pe buton este de a face dublu click pe el
Acum facem click drept pe butonul nostru si din meniul care va apărea, tragem cerculetul din partea dreaptă a evenimentului “Touch Up Inside” către obiectul “File’s Owner”
dupa ce dăm drumul la cursor, vor apărea metodele din “ViewController” care au ca tip “IBAction“, in cazul nostru va apărea metoda “displayHelloWordOnTheLabel”
Facem click pe aceasta metoda si vom observa că s-a facut legătura intre evenimentul butonului “Touch Up Inside” si metoda “displayHelloWordOnTheLabel” din clasa “ViewController”
Acum efectuăm un “test drive”. Apăsam butonul “Run”
Xcode va lansa acum Simulatorul iOS cu aplicaţia noastră în ea.
Pentru cei ce doresc sa descarce acest proiect am pus la dispozitie codul sursa
