ios course part 2. build your todo app with objective c and xcode 6.

1. Todo app
www.ofunwebservices.com

2. Todo App
come dovrebbe venire

3. Todo App
auto layout
• Seleziona la view madre della textfield nello
storyboard
• Premi cmd+drag fino alla textfield
• Dal menu a tendina che compare scegli
– Centra orizzontalmente nel container
• Questi vincoli specificano che la distanza tra I
bordi della superview non devono cambiare al
cambiare dell’orientamento del dispositivo.
• La textfield cresce automaticamente per
soddisfare questi vincoli.

4. Todo App
table view
• Seleziona il main storyboard
• View->utilities->show object library per
mostrare le librerie degli oggetti
• Posiziona una table view controller
• La tableview controller dev’essere la view
iniziale

5. Todo App
contenuti statici - table view
• Seleziona la table view
• Apri l’attribute inspector
• Seleziona static cells
• Seleziona la top cell
• Style = basic
• Modifica le label (crea tanti oggetti da avere
uno scroll)

6. Todo App
aggiungi una segue
• Seleziona table view
• Scegli editor -> embed in -> navigation controller
• La view per I contenuti mostrati nella navigation
bar sono la tableview.
• La scena iniziale è settata dal navigation
controller perchè detiene I contenuti che saranno
mostrati nell’app
– È il contenitore sia per il todo-list che per add-to-do-
item scene.

7. Todo App
navigation bar
• Seleziona navigation item sotto table view controller.
• Le Navigation bars prendono il loro titolo dalla view controller attualmente
mostrata dalla navigation controller
• Non hanno un titolo di default. Devi settarlo usando il navigation item
della tua to-do list invece di settarlo direttamente nella navigation bar.
• Nell’attributes inspector, scrivi il titolo nel Title field.
• Se necessario, apri la Object library.
• Trascina una bar button item dalla lista sulla destra della navigation bar
nella table view.
• Un bottone che contiene il testo “Item” appare dove hai draggato il bar
button item.
• Seleziona il bar button item.
• Nell’ Attributes inspector, trova l’identifier option nel Bar Button Item
section chiamata Style. Scegli Add dal menu.

8. Todo App
add button
• Seleziona l’add button
• Control-drag dal bottone al view controller della
textfield
• Dal menu che compare selezionare show
• Comparirà un warning dovuto alla navigation bar
che sballa i vincoli iniziali
– Per risolvere
• Editor -> Resolve Auto Layout Issues -> Update Constraints
• Provare con diverse opzioni per la segue action

9. Todo App
cancel & done buttons
• Seleziona il view controller della textfield
• Editor -> embed in -> navigation controller
• Seleziona Navigation Item sotto View Controller. Se necessario, apri
Attributes inspector .
• Nell’ Attributes inspector, scrivi Aggiungi cosa da fare nel Title field.
• Trascina un Bar Button Item dall’ Object library nella destra del
navigation bar.
• Nell’ Attributes inspector, scegli Done dal pop-up menu. Il testo
cambialo in “Fatto”
• Trascina un altro Bar Button Item nella Object library nella sinistra
della navigation bar.
• Nell’ Attributes inspector, scegli Cancel dal pop-up menu. Cambia il
testo in “Cancella”

10. Todo App
custom view controller
• Scegli File > New > File (o premi Cmd-N).
• Crea Custom View Controllers
• Seleziona Cocoa Touch template sotto iOS.
• Seleziona Cocoa Touch Class, e click Next.
• Nella Class field, scrivi AddToDoItem
• Scegli UIViewController nel menu “Subclass of”.
• Xcode aiuta chiarendo il fatto che si sta creando una sotto classe
viewcontroller lasciando ViewController come suffisso del nome
della classe.
• Assicurati che anche “Also create XIB file” è non selezionato.
• Click Next.
• Click Create.

11. Todo App
custom view controller (2)
• Seleziona lo storyboard.
• Seleziona view controller dell’add to do item.
• Con il view controller selezionato, apri
l’Identity inspector.
• Nell’ Identity inspector, apri il pop-up menu
nella Class option.
– Cambia in AddToDoViewController

12. Todo App
custom table view controller
• Facciamo la stessa cosa che abbiamo fatto per
il view controller
• Chiamiamo la nuova tableview controller
“ToDoTableViewController”

13. Todo App
srotolare la segue navigation
• unwind segue
• Questo tipo di segue permette gli utenti di
andare da una data scena indietro alla scena
precedente e permette di aggiungere codice
personalizzato per essere eseguito quando un
utente naviga tra queste due scene.
• Puoi usare un unwind segue per navigare
indietro da AddToDoItemViewController a
XYZToDoListTableViewController.

14. Todo App
unwind segue navigation
• Apri ToDoTableViewController.h.
• Aggiungi sotto la linea @interface:
– (IBAction)unwindToList:(UIStoryboardSegue *)segue;
• Apri ToDoTableViewController.m.
• Aggiungi sotto la linea @implementation :
– (IBAction)unwindToList:(UIStoryboardSegue *)segue { }
• Quindi andiamo nello storyboard e associamo il tasto cancel alla funzione
appena creata trascinandolo nella exit
• Facciamo la stessa cosa per il bottone Done
• Run
• Perché i dati non compaiono?
– Apriamo la ToDoListTableViewController.m
– Abbiamo bisogno di implementare i metodi
• numberOfSectionsInTableView:
• tableView:numberOfRowsInSection:
• tableView:cellForRowAtIndexPath:

15. Todo App
Mvc
• Ora vediamo l’aspetto Model
• Il data model della tua app è composto dalla
struttura dei tuoi dati e (opzionalmente) è
necessario introdurre una logica di business
necessaria per mantenere I dati in uno stato
consistente.
• Non vorresti mai configurare il tuo data model
in totale isolamento dall’user interface della
tua app.

16. Todo App
disegnare il data model
• Che tipo di dati hai bisogno di memorizzare?
– Sia che tu stia memorizzando testi, documenti, immagini o
altri tipi di informazioni, disegna il tuo data model per
manipolare quel particolare tipo di contentuo
appropriatamente.
• Che struttura di dati posso usare?
– Determinare dove puoi usare delle classi del framework e
dove devi definirle per customizzare le sue funzionalità.
• Come fornirai I dati alla user interface?
– Il tuo model non dovrebbe comunicare direttamente con
la tua interfaccia.
– Per gestire l’interazione tra il model e l’interfaccia, avrai
bisogno di aggiungere logica ai tuoi controllers.

17. Todo App
delegation
• Un oggetto nell’app agisce in nome di un altro
oggetto
– L’oggetto delegante, mantiene una reference
all’oggetto delegato ed ad un appropriato tempo, invia
un messaggio che l’oggetto delegato deve manipolare
e gestire restituendo lo stato aggiornato
– Esempio
• un uso comune utilizza la delegation come mezzo per
permettere una childview di comunicare alcuni valori
(tipicamente quando un utente inserisce un valore) alla sua
view genitore.

18. Todo App
foundation framework
• Servizi di base per tutte le app
• NSString
• NSMutableString
• NSData
• NSMutableData
• NSArray
– + (id)arrayWithObject:(id)anObject;
– + (id)arrayWithObjects:(id)firstObject, ...;
– - (id)initWithObjects:(id)firstObject, ...;
• NSDate
• NSNumber
• NSValue

19. Todo App
NSArray
• id firstObject = @"someString";
• id secondObject = nil;
• id thirdObject = @"anotherString";
• NSArray *someArray = [NSArray arrayWithObjects:firstObject,
secondObject, thirdObject, nil];
• NSArray *someArray = @[firstObject, secondObject, thirdObject];
• Querying array objects
– NSInteger numberOfItems = [someArray count];
– if ([someArray containsObject:someString]) { ... }
– [someArray objectAtIndex:0]
• Sorting array objects
– NSArray *unsortedStrings = @[@"gammaString", @"alphaString",
@"betaString"];
– NSArray *sortedStrings = [unsortedStrings
sortedArrayUsingSelector:@selector(compare:)];

20. Todo App
NSMutableArray
• NSMutableString *mutableString = [NSMutableString
stringWithString:@"Hello"];
• NSArray *immutableArray = @[mutableString];
• if ([immutableArray count] > 0) {
– id string = immutableArray[0];
• if ([string isKindOfClass:[NSMutableString class]]) { [string appendString:@" World!"];
– }
• }
• NSMutableArray *mutableArray = [NSMutableArray array];
• [mutableArray addObject:@"gamma"];
• [mutableArray addObject:@"alpha"];
• [mutableArray addObject:@"beta"];
• [mutableArray replaceObjectAtIndex:0 withObject:@"epsilon"];
• [mutableArray sortUsingSelector:@selector(caseInsensitiveCompare:)];

21. Todo App
Sets
• NSSet *simpleSet = [NSSet
setWithObjects:@"Hello, World!", @42,
aValue, anObject, nil];
• NSNumber *number = @42;
• NSSet *numberSet = [NSSet
setWithObjects:number, number, number,
number, nil];
• // numberSet only contains one object

22. Todo App
Dictionaries
• NSDictionary *dictionary = [NSDictionary
dictionaryWithObjectsAndKeys: someObject, @"anObject",
@"Hello, World!", @"helloString", @42, @"magicNumber",
someValue, @"aValue", nil];
• NSDictionary *dictionary = @{ @"anObject" : someObject,
@"helloString" : @"Hello, World!", @"magicNumber" : @42,
@"aValue" : someValue };
• Querying dictionaries
– NSNumber *storedNumber = [dictionary
objectForKey:@"magicNumber"];
– NSNumber *storedNumber = dictionary[@"magicNumber"];
• Mutability
– [dictionary setObject:@"another string" forKey:@"secondString"];
– [dictionary removeObjectForKey:@"anObject"];

23. Todo App
Data Class
• Torniamo alla todo app
• Nuovo file sottotipo di NSObject di nome
ToDoItem
• Tutti I target
• Create
• E poi modificate il file .h
– @interface ToDoItem : NSObject
• @property NSString *itemName;
• @property BOOL completed;
• @property (readonly) NSDate *creationDate;
– @end

24. Todo App
caricare i dati
• Selezionare ToDoListTableViewController.m
– #import ”ToDoItem.h”
– - (void)viewDidLoad {
– [super viewDidLoad];
– self.toDoItems = [[NSMutableArray alloc] init];
– [self loadInitialData];
– }
• Aggiungere all’interfaccia (.h)
– @interface ToDoTableViewController
– @property NSMutableArray *toDoItems;
– @end
• Inserire nel .m
• - (void)loadInitialData {
– ToDoItem *item1 = [[ToDoItem alloc] init];
– item1.itemName = @"Buy milk";
– [self.toDoItems addObject:item1];
– ToDoItem *item2 = [[ToDoItem alloc] init];
– item2.itemName = @"Buy eggs";
– [self.toDoItems addObject:item2];
– ToDoItem *item3 = [[ToDoItem alloc] init];
– item3.itemName = @"Read a book";
– [self.toDoItems addObject:item3];

25. Todo App
visualizzare i dati
• Selezionare ToDoListTableViewController.m
• Implementare i metodi della classe TableViewController
– - (NSInteger)numberOfSectionsInTableView:(UITableView
*)tableView {
– // Return the number of sections.
– return 1;
– }
– - (NSInteger)tableView:(UITableView *)tableView
numberOfRowsInSection:(NSInteger)section {
– // Return the number of rows in the section.
– return [self.toDoItems count];
– }

26. Todo App
configurare la tableview
• Apri lo storyboard
• Seleziona la table view
• Nell’attributes inspector cambia il contenuto della
table view da Static Cells a Dynamic prototypes
• Seleziona la prima cella nella tua tableview
• Nell’attributes inspector scrivi nell’ identifier field
ListPrototypeCell.
• Nell’ Attributes inspector, scegli None nel
Selection field and choose None.

27. Todo App
mostrare le celle nella tabella
• Dobbiamo implementare le funzioni della superclass TableView
• - (UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath {
– UITableViewCell *cell = [tableView
dequeueReusableCellWithIdentifier:@"ListPrototypeCell"
forIndexPath:indexPath];
– ToDoItem *toDoItem = [self.toDoItems objectAtIndex:indexPath.row];
– cell.textLabel.text = toDoItem.itemName;
– if (toDoItem.completed) {
• cell.accessoryType = UITableViewCellAccessoryCheckmark;
– } else {
• cell.accessoryType = UITableViewCellAccessoryNone;
– }
– return cell;
• }

28. Todo App
marca i todo completati
• Seleziona ToDoListTableViewController.m
• - (void)tableView:(UITableView *)tableView
didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
– [tableView deselectRowAtIndexPath:indexPath
animated:NO];
– ToDoItem *tappedItem = [self.toDoItems
objectAtIndex:indexPath.row];
– tappedItem.completed = !tappedItem.completed;
– [tableView reloadRowsAtIndexPaths: indexPath
withRowAnimation:UITableViewRowAnimationNone];
• }

29. Todo App
aggiungi nuovi todo
• Seleziona AddToDoItemViewController.h
• #import ”ToDoItem.h”
• Aggiungiamo la property nell’interfaccia
• @property (nonatomic,retain)ToDoItem
*toDoItem;
• Colleghiamo la textfield nella nostra interfaccia
tramite l’assistant editor
• Chiamamola textField
• Facciamo la stessa cosa con il bottone Fatto
chiamandolo doneButton

30. Todo App
aggiungi nuovi todo

31. Todo App
creare un todo
• Nel AddToDoViewController.m implementiamo il
metodo corrispondente
• - (void) prepareForSegue:(UIStoryboardSegue
*)segue sender:(id)sender {
– if (sender != self.doneButton) return;
– if (self.textField.text.length > 0) {
• self.toDoItem = [[ToDoItem alloc] init];
self.toDoItem.itemName = self.textField.text;
self.toDoItem.completed = NO;
– }
• }

32. Todo App
mostrare il nuovo elemento
• Nel ToDoTableViewController.m importiamo #import
”AddToDoItemViewController.h"
• Modifichiamo il metodo unwindToList
– - (IBAction)unwindToList:(UIStoryboardSegue *)segue {
• AddToDoItemViewController *source = [segue
sourceViewController];
• ToDoItem *item = source.toDoItem;
• if (item != nil) {
– [self.toDoItems addObject:item];
– [self.tableView reloadData];
• }
– }

33. Todo App
extra : TabBar
• Con la ToDo app abbiamo finito
• Ci sono altri elementi del iOS sdk tra cui la TabBar
– Creare un nuovo progetto selezionando Tabbed Application
– Modifichiamo il metodo AppDelegate.m didFinishLaunchingWithOptions come
segue
• - (BOOL)application:(UIApplication
*)application:didFinishLaunchingWithOptions:(NSDictionary *) launchOptions{
– self.window=[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
– // Override point for customization after application launch.
– UIViewController * viewController1=
– [[FirstViewController alloc] initWithNibName:@“FirstViewController” bundle :nil];
– UIViewController * viewController2=[[SecondViewController alloc]
initWithNibName:@“SecondViewController" bundle: nil];
– self.tabBarController= [[UITabBarControlleralloc] init];
– self.tabBarController.viewControllers=@[viewController1,viewController2];
– self.window.rootViewController=self.tabBarController;
– [self.window makeKeyAndVisible];
– return YES;
• }