Create il vostro progetto e aggiungere il framwork MediaPlayer. Non dimenticate di inserire anche

1

#import <MediaPlayer/MediaPlayer.h>

in testa alla classe che ospiterà i nostri video.

Io per questo esempio ho creato una piccola funzione

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

- (IBAction)playMovie:(NSString *)moviename movietype:(NSString*)movietype verticalplayer:(BOOL)vertical
{
	NSURL *url = [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:moviename ofType:movietype]isDirectory:NO];
 
	MPMoviePlayerController *mp;
	mp = [[MPMoviePlayerController alloc] initWithContentURL: url];
 
	[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(moviePlayBackDidFinish:) name:MPMoviePlayerPlaybackDidFinishNotification object:mp];
 
	[mp play];
 
	if (vertical) {
		[mp setOrientation: UIDeviceOrientationPortrait animated:NO];
	}
}

Questa funzione accetta come parametri il nome del file video, la sua estensione e un boolean che indica se vogliamo visualizzare il video in orizzontale o verticale.

Aggiungete al vostro progetto un file video (io ho usato un file che si chiama 0009.m4v) e create un semplice pulsante che esegua questa funzione:

1
2
3
4

- (IBAction)buttonPressed:(id)sender
{
	[self playMovie:@"0009" movietype:@"m4v" verticalplayer:TRUE];
}

A questo punto potreste già eseguire il programma e godervi il video in verticale.

Questo è un piccolo spezzone di codice, io ho aggiunto al mio progetto alcune funzionalità di cui ancora non abbiamo parlato, ma chi è curioso può scaricare l’intero sorgente da qui.

Un ringraziamento a Gianpaolo Fragale per aver, a sua insaputa , fornito il video usato in questo esempio.

Ed eccoci ad un nuovo appuntamento con la programmazione per iphone. Oggi vedremo di imparare qualcosa sulla programmazione dei nostri amati melafonini sviluppando un semplice giochino che chiameremo GuessTheColor.

Come funziona GuessTheColor?

Il gioco è molto semplice, viene mostrata al giocatore una view colorata per un paio di secondi, dopo di ciò l’utente dovrà ricreare il colore che ha visto agendo su 3 slider che regolano la quantità di rosso, di verde e di blu. Semplice, no?

Il progetto

Questa volta partiamo subito in quarta e apriamo Xcode, scegliamo di creare un progetto di tipo “view-based application” e lo chiamiamo guessTheColor.

Ci vogliamo semplificare la vita, quindi utilizzeremo una sola classe, nello specifico utilizzeremo la classe guessTheColorViewController.h

Che cosa ci servirà in questa classe? Sicuramente i tre UISlider per selezionare il colore, poi ci servirà una UIView dove visualizzare il colore da indovinare (quella che verrà nascosta dopo 1 o 2 secondi), ed infine ci serviranno tre valori di tipo float (float sono valori con la virgola) per memorizzare le componenti RGB del colore che dobbiamo indovinare.

COS’è RGB?

Questa piccola digressione è d’obbligo, sentitevi liberi di andare avanti se sapete già di cosa stiamo parlando.

RGB sono le iniziali di Red (rosso), Green (verde) e Blue (blu) e, che ci crediate o no, tutti colori che state in questo momento guardando sul vostro schermo sono realizzati dosando opportunamente le percentuali di questi tre colori.

A differenza di quello che avviene quando si mescolano i colori a tempera, con i quali se mescolassimo rosso verde (in realtà il giallo ) e blu in egual misura otterremmo una sorta di marrone scuro, quello che avviene con gli schermi è che otteniamo invece il bianco. Questa è quella che viene chiamata sintesi additiva.

Esempio di sintesi additiva con RGB

Per specificare un colore, quindi, possiamo semplicemente elencarne le percentuali di rosso, verde e blu.

Storicamente queste percentuali vengono specificate con un intero che va da 0 (0%) a 255 (100%) ma l’sdk di apple prevede che questi valori vengano forniti come un float che va da 0 (0%) a 1 (100%). Ovviamente non cambia nulla, è solo un problema di proporzioni e di scalatura.

Considerando che in molti sono abituati a pensare ai colori in termini di valori 0-255 alcuni programmatori usano fornire questi valori usando questa notazione: 127/255. Questo ovviamente da come risultato un float compreso tra 0 e 1 ed ha il vantaggio di essere più chiaro per chi è abituato alla notazione in 255-esimi.

Una piccola nota, puo’ sembrare strano affermare che il bianco è fatto da 100% rosso, 100% verde e 100% blu, ma quello che questa notazione vuol dire è che nel bianco abbiamo la massima quantità di questi tre colori, così come il colore (100%,100%,50%) ha metà blu rispetto alla sua quantità massima.

TORNIAMO ALLA CREAZIONE DEL NOSTRO GIOCO PER IPHONE

Stavamo modificando guessTheColorViewController.h, aggiungiamo quindi gli Outlet e le property in questo modo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#import <UIKit/UIKit.h>
 
@interface guessTheColorViewController : UIViewController {
	UIView *secretColorView;
	UISlider *sliderred;
	UISlider *slidergreen;
	UISlider *sliderblue;
	UILabel *tentativi;
	float red;
	float green;
	float blue;
}
@property (nonatomic, retain) IBOutlet UISlider *sliderred;
@property (nonatomic, retain) IBOutlet UISlider *slidergreen;
@property (nonatomic, retain) IBOutlet UISlider *sliderblue;
@property (nonatomic, retain) IBOutlet UIView	*secretColorView;
@end

Non dimentichiamoci di aggiungere al file “guessTheColorViewController.m” la relativa voce “@synthesize”

1

@synthesize sliderred,slidergreen,sliderblue,secretColorView;

A questo punto possiamo creare l’interfaccia con Interface Builder, trasciniamo i 3 UISlider e colleghiamoli alla nostra classe cliccando con il tasto destro sull’icona “file’s owner” della documentwindows e trascinando sopra gli slider.

Questa è il mio progetto:

Scriviamo ora la funzione che imposti un colore random per la view “secretColorView”, questo è il codice:

1
2
3
4
5
6
7
8

- (IBACTION)showNextColor
{
	red = ((float)rand()/ RAND_MAX);
	green = ((float)rand()/ RAND_MAX);
	blue = ((float)rand()/ RAND_MAX);
	[secretColorView setBackgroundColor:[UIColor colorWithRed:red green:green blue:blue alpha:1]];
	[self performSelector:@selector(resetView) withObject:nil afterDelay:1.5];
}

Questa funzione si occupa di generare tre valori random utilizzando la funzione rand() ma poichè questi valori non sarebbero compresi nell’intervallo [0,1] bisogna dividere per la costante RAND_MAX.

Impostiamo poi il colore di fondo della view “secretColorView” tramite il metodo “colorWithRed: green: blue: alpha” della classe UIColor.

Questo metodo prende in input tre float che corrispondono alle percentuali dei colori RGB e un altro float per il parametro ALPHA che regola la trasparenza. Con Alpha=0 la view è completamente trasparente, con Alpha=1 è completamente opaca.

L’ultima riga di questa funzione utilizza il metodo “performSelector”, gia incontrato nell’applicazione multithread, in questo caso quello che succede è che viene invocato il metodo “resetView” dopo un ritardo di 1.5 secondi.

Questo è un buon sistema quando si vogliono eseguire delle operazioni “ritardate” senza voler mettere in ballo NSTimer e altre classi più complesse.

Ma cosa fa la funzione resetView? semplicemente toglie il colore visualizzato nella view e lo sostituisce con un anonimo grigio medio.

il codice è questo:

1
2
3
4

- (IBAction)resetView
{
	[secretColorView setBackgroundColor:[UIColor colorWithRed:0.5 green:0.5 blue:0.5 alpha:1]];
}

non ci resta che richiamare la funzione “showNextColor” all’avvio dell’applicazione, magari dentro il metodo viewdidload.

1
2
3
4

- (void)viewDidLoad {
    [super viewDidLoad];
	[self showNextColor];
}

Se proviamo ad eseguire l’applicazione notiamo una cosa fastidiosa, ad ogni avvio viene visualizzato sempre lo stesso colore.
Questo è dovuto alla funzione rand() un generatore di numeri pseudo-random che per funzionare bene necessia che ad ogni avvio venga generato un nuovo seme.

Questa generazione si fa aggiungendo al file main.m, (all’interno del metodo main) questa riga di codice prima di ogni altra istruzione:

1

srand(time(NULL))

Proviamo ad indovinare:

Questa che abbiamo appena realizzato è la prima parte dell’applicazione, ora dobbiamo realizzare la seconda.vogliamo che scorrendo con gli slide vari in colore della view, quando pensiamo di aver indovinato il colore che abbiamo visto per un secondo clicchiamo sul pulsante GUESS e verremo informati di quanto siamo stati bravi nel ricordare il colore.

Abbiamo bisogno quindi di un metodo:

1
2
3
4

- (IBAction)slideChanged:(id)sender
{
	[secretColorView setBackgroundColor:[UIColor colorWithRed:[sliderred value] green:[slidergreen value] blue:[sliderblue value] alpha=1]];
}

Questo metodo non fa altro che impostare il colore della view “secretColorView” con il valore presente nei tre slider.

Da interface builder adesso potremo associare all’evento “value changed” degli slider proprio questo metodo.
Proviamo ad eseguirlo e vediamo come il cambia il colore della view.

Non ci resta che implementare il metodo per la verifica, vogliamo vedere se l’utente è riuscito a ricordare il colore segreto, per fare questo scriviamo questo metodo e lo associamo all’evento click sul pulsante “guess”:

1
2
3
4
5
6
7
8
9
10
11
12

- (IBAction)guessColor:(id)sender
{
	float errorerosso = fabs(sliderred.value - red);
	float erroregreen = fabs(slidergreen.value - green);
	float erroreblue = fabs(sliderblue.value - blue);
	NSString *msg =[NSString stringWithFormat: @"ERRORE\nRED: %d%%\nGREEN: %d%%\nBLUE: %d%%",(int)(errorerosso * 100),
					(int)(erroregreen * 100),
					(int)(erroreblue * 100)];
	UIAlertView *alert  = [[UIAlertView alloc] initWithTitle:@"GUESS" message:msg delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];
	[alert show];
	[alert release];
}

Calcoliamo per prima cosa quanto i valori che abbiamo selezionato si discostano dai valori che erano stati scelti random, poi creiamo una alertView che ci informi di quanto abbiamo sbagliato.

Con questo la nostra applicazione è terminata, spero che la lettura sia stata utile e piacevole. Attendo i vostri commenti.

Applicazione guessthecolor per devapp

PS:Ho effettuato alcune modifiche dell’ultima ora, ho aggiunto un pulsante per richiedere un nuovo colore, il cui metodo da richiamare è semplicemente “showNextColor”. e poi ho creato un pulsate “mi arrendo” che visualizza qual’era la corretta posizione degli slide il codice è questo:

1
2
3
4
5
6
7

- (IBAction)imaloser:(id)sender
{
	[sliderred setValue:red animated:YES];
	[slidergreen setValue:green animated:YES];
	[sliderblue setValue:blue animated:YES];
	[secretColorView setBackgroundColor:[UIColor colorWithRed:red green:green blue:blue alpha:1]];
}

Ed ora un breve video del programma in azione.

L’idea è quella di realizzare un’unica schermata con quattro pulsanti, due per navigare avanti e indietro nell’elenco delle foto, un pulsante per salvare la foto su nostro telefono, e un pulsante per avviare il download del file xml da internet.

Aggiungeremo inoltre: una label per visualizzare alcune informazioni, un controllo UIActivityview da visualizzare durante le attese, un controllo UIImageView per visualizzare l’immagine, un array dove memorizzare gli URL delle foto e un intero che memorizzi l’indice della foto che stiamo visualizzando.

Un bel po’ di roba, no?

Apriamo quindi il nostro caro vecchio progetto, e modifichiamo il file devFlickrViewController.h inserendo queste dichiarazioni:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

@interface devFlickrViewController : UIViewController {
	UILabel		*currentPhotoNum;
	UIImageView	*imageView;
	NSArray		*urlArray;
	int			currentphoto;
	UIActivityIndicatorView *act;
}
@property (nonatomic,retain) IBOutlet UILabel		*currentPhotoNum;
@property (nonatomic,retain) IBOutlet UIImageView	*imageView;
@property (nonatomic,retain) IBOutlet UIActivityIndicatorView	*act;
- (IBAction)nextPhoto;
- (IBAction)prevPhoto;
- (IBAction)savePhoto;
- (IBAction)refreshPhotoList;

Creiamo l’interfaccia tramite Interface Builder, quello che vedete in questa foto è il massimo che il mio estro artistico sia riuscito a partorire:

Creazione dell inerfaccia con inteface builder

Non dimenticate di collegare correttamente gli IBOutlet e di scivere i @syntetize nel file .m (commentate se ci sono difficoltà con questa parte!)

Passiamo ora a scrivere il codice delle funzioni che abbiamo dichiarato, iniziamo da refreshPhotoList

1
2
3
4
5
6
7
8
9
10
11
12
13
14

- (IBAction)refreshPhotoList
{
	[act startAnimating];
	interestingness *inter = [[interestingness alloc] initWithApiKey:@"MY_APY_KEY_IS_PRIVATE"];
	[inter downloadXML];
	URLbuilder *urlBuilder = [[URLbuilder alloc] initWithXMLdata:[inter getinterestingnessXML]];
	[urlBuilder startParsing];
	urlArray = [[NSArray arrayWithArray:[urlBuilder getURLarray]] retain];
 
	[inter release];
	[urlBuilder release];
	[act stopAnimating];
 
}

Esaminiamo questo codice: per prima cosa visualizziamo la “rotellina”, poi istanziamo un oggetto di tipo interestigness e invochiamo su di esso il metodo downloadXML per far si che l’oggetto recuperi l’intero file xml dal sito di flickr.

Successivamente istanziamo un oggetto di tipo urlBuilder passando come parametro proprio il file xml appena scaricato e invochiamo su di esso il metodo startParsing.

Ricordiamo che l’oggetto urlBuilder ha un metdo getURLarray che restituisce l’array con gli URL delle foto, invochiamo quindi tale metodo e memorizziamo questo array nella variabilie urlArray.

A questo punto possiamo effettuare il release degli oggetti inter e urlBuilder. (nessun tifo calcistico )

Eseguendo l’applicazione notiamo una cosa poco gradita, cliccando sul pulsante che avvia questo metodo l’interfaccia si blocca per qualche secondo durante la fase di download del file xml che come abbiamo visto nella puntata precedente è una chiamata sincrona, inoltre l’activityview (la rotellina) non viene proprio visualizzata.

Risolveremo questo problema alla fine di questo tutorial, per il momento lasciamolo così.

Dopo aver cliccato sul pulsante refresh ci si aspetta che venga visualizzata la prima foto, creiamo quindi un metodo che chiameremo viewPhotoAtIndex:

1
2
3
4
5
6
7
8
9
10

- (IBAction)viewPhotoAtIndex:(int)position
{
	NSURL *url = [NSURL URLWithString:	[urlArray objectAtIndex:position]];
	NSData *data = [NSData dataWithContentsOfURL:url];
	UIImage *img = [[UIImage alloc] initWithData:data];
	[imageView setImage:img];
	currentphoto = position;
	currentPhotoNum.text = [NSString stringWithFormat:@"Foto %d su %d",position+1,[urlArray count]];
	[img release];
}

Il lavoro svolto da questo medoto dovrebbe essere chiaro, il metodo accetta un intero come parametro, preleva dall’array degli URL quello in tale posizione, utilizza il metodo dataWithContentsOfURL per effettuare il download della foto, e la visualizza.

Aggiorniamo il valore di currentphoto e visualizziamo nella label il testo “foto x su y”.

Ho utilizzato position+1 perchè all’utente il fatto che gli array siano indicizzati da 0 non interessa, e non sarebbe carino vedere la scritta “foto 0 su 100″ per la prima foto e “foto 99 su 100″ per l’ultima.

Aggiungiamo quindi al metodo precedente (refreshPhotoList), giusto prima della chiusura, la riga

1

[self viewPhotoAtIndex:0];

in modo da visualizare la prima foto.

Fatto questo implementare i due metodi nextPhoto e prevPhoto è molto semplice perchè sarà sufficiente scrivere:

1
2
3
4
5
6
7
8
9
10
11
12
13

- (IBAction)nextPhoto
{
if (currentphoto + 1  < [urlArray count]) {
            [self viewPhotoAtIndex:currentphoto + 1];
}
}
 
 - (IBAction)prevPhoto {
if (currentphoto - 1 >= 0 )
{
    [self viewPhotoAtIndex:--currentphoto];
}
}

Un semplice controllo ci impedisce di andare “out of range” sul nostro array.

Non ci resta che implementare la funzione per salvare l’immagine su nostro cellulare:

Il comando sarebbe semplice, perché basterebbe questo codice:

1
2
3
4

- (IBAction)savePhoto {
	UIImage *img = [imageView image];
	UIImageWriteToSavedPhotosAlbum( img, self ,nil, nil );
}

Però in questo caso non potremmo verificare se il salvataggio è andato o meno a buon fine, allora sfruttiamo il terzo parametro di questa funzione è un selector, ovvero è il nome di un’altra funzione che verrà automaticamente invocata quando il metodo avrà finito di salvare l’immagine.

Questo avviene perchè il salvataggio è ASINCRONO ovvero parte quando invochiamo questo metodo, ma poi lavora “per conto suo”, invocherà il metodo specificato nel selector per informarci dell’esito dell’operazione.

Secondo le indicazioni delle apple il metodo deve essere di questa forma.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

- (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo
{
	NSString *message;
	NSString *title;
	if (!error)
	{
		title = @"Ok";
		message = @"foto salvata";
 
	}
	else
	{
		title = @"Error";
		message = [error description];
 
	}
	UIAlertView *alert = [[UIAlertView alloc]
						  initWithTitle:title
						  message:message
						  delegate:self
						  cancelButtonTitle:@"OK"
						  otherButtonTitles:nil];
	[alert show];
	[alert release];
 
}

a questo punto la funzione per il salvataggio delle foto diventa:

1
2
3
4

- (IBAction)savePhoto {
	UIImage *img = [imageView image];
	UIImageWriteToSavedPhotosAlbum( img, self, @selector(image:didFinishSavingWithError:contextInfo:), nil );
}

A questo punto il programma sarebbe pure finito, cerchiamo quindi di capire bene il problema del blocco in fase di download del file xml.

Il problema è che il download del file xml è quella che si chiama in gergo una “chiamata bloccante” ovvero una funzione o un metodo che impedisce la normale esecuzione del programma fin quando non è terminato.

Per evitare che queste funzioni blocchino quindi tutto il programma bisogna farle eseguire in una sorta di “sotto-programma”.

Questi sotto-programmi si chiamano thread e il foundation framework mette a disposizione degli oggetti per crearli e manipolarli comodamente.

Qui ci starebbe la frase di rito: “non me ne vogliano i più esperti per questa eccessiva esemplificazione”, frase scritta perlopiù non per scusarsi ma per non dar l’impressione di essere degli inesperti del settore.

La sintassi per eseguire una funzione bloccante su un thread separato è questa:

1

[NSThread detachNewThreadSelector:@selector(NOME_FUNZIONE) toTarget:self withObject:nil];

Sostituiamo quindi il metodo refreshPhotoList con questi tre metodi:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

- (IBAction)refreshPhotoList
{
	[act startAnimating];
	[NSThread detachNewThreadSelector:@selector(getXML) toTarget:self withObject:nil];
}
 
- (void)getXML
{
	NSAutoreleasePool *pool = [[NSAutoreleasePool alloc] init];
	interestingness *inter = [[interestingness alloc] initWithApiKey:@"bd4890c606144764897cd145bd880d95"];
	[inter downloadXML];
	URLbuilder *urlBuilder = [[URLbuilder alloc] initWithXMLdata:[inter getinterestingnessXML]];
	[urlBuilder startParsing];
	urlArray = [[NSArray arrayWithArray:[urlBuilder getURLarray]] retain];
 
	[inter release];
	[urlBuilder release];
 
	[self performSelectorOnMainThread:@selector(getXMLterminated) withObject:nil waitUntilDone:NO];
	[pool drain];
 
}
- (void)getXMLterminated
{
	[self viewPhotoAtIndex:0];
	[act stopAnimating];
}

Analizziamoli insieme. Nel primo metodo, refreshPhotoList, adesso ci limitiamo a creare un thread separato in cui verrà eseguito il metodo getXML.

Il metodo getXML una volta invocato verrà eseguito su un thread separato quindi è necessario istanziare un nuovo oggetto di tipo NSAutoreleasePool che si occuperà della gestione della memoria.

Potete leggere questo articolo a tal proposito.

Però vogliamo essere avvisati quando il thread ha finito il suo compito, se non altro perchè dobbiamo far smettere di girare la rotellina!

utilizziamo quindi la funzione:

1

[self performSelectorOnMainThread:@selector(getXMLterminated) withObject:nil waitUntilDone:NO];

per eseguire il metodo getXMLterminated nel threadprincipale.

Quando questo metodo quando viene invocato è sintomo che il threadsecondario ha terminato il suo lavoro, quindi possiamo invocare i metodi necessari per visualizzare l’immagine.

Per chi vuole, può scaricare la mia versione del programma da qui in cui ho modificato anche le funzioni prevPhoto e nextPhoto per essere eseguite su thread separati.

Spero che questi tutorial siano stati utili, attendo i vostri commenti e le vostre critiche.

1
2
3
4
5

@interface URLbuilder : NSObject {
	NSMutableArray	*URLarray;
	NSData			*XMLdata;
}
@end

e creiamo i metodi getter e setter come abbiamo visto nella lezione precedente. (prometto che farò un tutorial sull’uso di property..)

Per i più svogliati ecco il codice:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

- (void) setURLarray:(NSMutableArray *)anArray
{
	URLarray = anArray;
}
 
- (NSMutableArray *)getURLarray
{
	return URLarray;
}
 
- (void) setXMLdata:(NSData *)data
{
	XMLdata = data;
}
 
- (NSData *) getXMLdata
{
	return XMLdata;
}

Direi di creare anche un metodo initWithXMLData che ci permetterà, quando utilizzeremo questa classe di inizializzarla e impostare il valore di XMLData in una sola istruzione.
ecco il codice:

1
2
3
4
5
6
7
8

- (id)initWithXMLdata:(NSData *)data
{
	if (self = [super init])
    {
		[self setXMLdata:data];
    }
    return self;
}

Restano da dichiarare i metodi veri e propri per il parsing del file xml, vi consiglio di leggere (se non l’avete ancora fatto) i tutorial a tal proposito che trovate su questo stesso sito,io darò per scontato che l’abbiate fatto, quindi vediamo e commentiamo subito il codice:

1
2
3
4
5
6
7

- (NSMutableArray *) startParsing
{
	NSXMLParser *feedParser = [[NSXMLParser alloc] initWithData:[self getXMLdata]];
	[feedParser setDelegate:self];
	[feedParser parse];
	[feedParser release];
}

Questo è il metodo che dobbiamo invocare per avviare il parsing, istanziamo quindi un oggetto di tipo NSXMLParser inizializzandolo con il contentuto del file XML, impostiamo a SELF il delegate e lo avviamo. Infine rilasciamo l’oggetto per evitare memory leak.
Forse è il caso di specificare che cosa significhi impostare il delegate, perché è un concetto fondamentale della programmazione MVC (model view controller) e quindi della programmazione per iphone.
Abbiamo già parlato di delegate nell’articolo relativo all’UIPickerView, e anche se parliamo di oggetti diversi la logica che ci sta dietro è identica.
In particolare l’oggetto NSXMLParser è un parser asincrono, il che significa che una volta lanciata la procedura di parsing il codice non sta “fermo” ad aspettare che la procedura termini, sarà il parser stesso ad inviare al proprio delegate specifici messaggi per informarlo di come procede il suo lavoro. Non si può dire lo stesso per esempio del metodo

[NSData dataWithContentsOfURL:[NSURL URLWithString:fullAddress]];

che abbiamo utilizzato la scorsa lezione, questo metodo “blocca” l’esecuzione del codice fin quando non ha finito.
Questa sarà una informazione da tenere bene a mente nella creazione dell’interfaccia grafica, e lo vedremo bene nella prossima lezione.
In pratica impostare il delegate per l’NSXMLParser significa “delegare” una classe a rispondere ai messaggi inviati da questo oggetto. Questo si traduce nell’implementare alcuni metodi che trovate specificati nella NSXMLParserDelegate Protocol Reference, alcuni sono facoltativi, mentre altri sono obbligatori.
Questo potrebbe essere chiamato “binding dinamico”, ovvero la possibilità di associare ad un evento (in questo caso il messaggio ricevuto dalla classe NSXMLParser) ad una diversa risposta a seconda di chi quale sia in quel momento il delegate.

Vediamo quindi quali sono i metodi che abbiamo deciso di implementare nel nostro delegate (il che significa anche “a quali messaggi del parser intendiamo rispondere”)

1
2
3
4
5
6

//INIZIA IL PROCESSO DI PARSING
- (void) parserDidStartDocument:(NSXMLParser *)parser
{
	NSLog(@"PARSING STARTED\n");
	[self setURLarray:[NSMutableArray arrayWithCapacity:100]];
}

Questo metodo viene invocato quando viene avviato il processo di parsing.
Inizializziamo in questo momento l’array che conterrà gli URL, poiché per impostazione predefinita Flickr manda un file XML contenente le informazioni per recuperare 100 fotografie settiamo la dimensione del nostro array proprio a 100.

1
2
3
4
5
6
7

- (void) parserDidEndDocument:(NSXMLParser *)parser
{
	NSLog(@"PARSING TERMINATO\n");
	if ([[self getURLarray] count] == 0) {
		NSLog(@"ERRORE");
	}
}

Questo metodo viene invocato quando il parser termina il suo lavoro.
Utilizzo un paio di NSLog per verificare se il parsing è andato a buon fine.
Se l’array con i link contiene zero elementi questo significa che c’è stato un errore.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//INIZIA IL RICONOSCIMENTO DI UN ELEMENTO
- (void) parser:(NSXMLParser *)parser
didStartElement:(NSString *)elementName
   namespaceURI:(NSString *)namespaceURI
  qualifiedName:(NSString *)qName
	 attributes:(NSDictionary *)attributeDict
{
	if ([elementName isEqualToString:@"photo"]) {
		[[self getURLarray] addObject:[NSMutableString stringWithFormat:@"http://farm%@.static.flickr.com/%@/%@_%@_m.jpg",
						  [attributeDict objectForKey:@"farm"],
						  [attributeDict objectForKey:@"server"],
						  [attributeDict objectForKey:@"id"],
						  [attributeDict objectForKey:@"secret"]]];
	}
}

Questo forse è il metodo più importante, viene invocato quando il parser riconosce l’inizio di un nuovo tag.

File xml inviato da Flickr

Come possiamo vedere da questa immagine, il file XML fornito da Flickr è costituito da un tag “RSP” che contiene l’esito della risposta, poi un tag “PHOTOS” che fornisce alcune indicazioni riguardo al numero di foto e di pagine (ricordo che c’è la possibilità ri richiedere una specifica pagina o un numero specifico di foto anzichè i valori di defaut) e poi un certo numero di tag “PHOTO” con tutti i dati delle fotografie.
Noi siamo interessati solo a quest’ultimo tag, ecco perché nel codice ho scritto

if ([elementName isEqualToString:@"photo"])

A questo punto possiamo costruire finalmente l’URL della foto, per fare questo costruiamo una stringa secondo le istruzioni fornite da flickr a questa pagina: http://www.flickr.com/services/api/misc.urls.html

Nel codice che ho scritto ho aggiunto “_m” perché voglio ottenere l’url della versione a grandezza media della foto.
Creato quindi l’url non resta che aggiungerlo all’array URLarray per scopi futuri.

Come al solito chiediamo un pò di gratificazione dopo tutto questo lavoro, vogliamo quantomeno vedere che cosa abbiamo ottenuto..
modifichiamo quindi il file devFlickrViewController.m e modifichiamo il metodo ViewDidLoad in questo modo:

1
2
3
4
5
6
7
8
9

- (void)viewDidLoad {
    [super viewDidLoad];
	interestingness *inter = [[interestingness alloc] initWithApiKey:@"MY_API_KEY_IS_PRIVATE"];
	NSData *tmp;
	tmp = [inter downloadXML];
	URLbuilder *urlBuilder = [[URLbuilder alloc] initWithXMLdata:tmp];
	[urlBuilder startParsing];
	NSLog(@"%@",[[urlBuilder getURLarray] description]);
}

Eseguendo l’applicazione ed esaminando la console vedremo finalmente gli url delle foto.

Utilizzeremo questo array nella prossima lezione per visualizzare le foto nella nostra applicazione, questo ci permetterà di affrontare il problema dei thread, quindi NON MANCATE!

Chi volesse può scaricare il file del progetto con le modifiche fin’ ora apportate da qui

Mettete in una stanza per una notte 4 pazzi con il pallino per la programmazione, 26 ipod e un server linux e  quello che ne otterrete potrebbe essere sorprendente.

Quello che vedete in questo video è un orologio binario (http://it.wikipedia.org/wiki/Orologio_binario) in notazione BCD realizzato da me (IgnazioC) e da Gall0ws, antò e valepert 3 miei carissimi amici nonché folli compagni d’avventura.

Il tutto è stato realizzato utilizzando 26 ipod e un server linux e sfrutta la comunicazione wifi per la sincronizzazione.

Chiedo scusa per la qualità del video, purtroppo l’idea di questa realizzazione è arrivata in un momento in cui non avevamo altro che la cam del mio mac e un cellulare.

Se qualcuno fosse interessato ad una realizzazione simile.. consideri che questo rappresenta solo un prototipo, le realizzazioni possibili sono pressocchè infinite, pensate ad un mega schermo fatto di iPod su cui gira ad esempio un video.. basta solo avere un numero sufficientemente grande di dispositivi. Per ogni curiosità non esitate a contattarci.

Ed eccocci alla seconda parte di questo tutorial, oggi inizieremo finalmente a scrivere un pò di codice.

Facciamo il punto della situazione, nella prima parte di questa guida abbiamo imparato che per ottenere il file xml contente tutte le info riguardanti le foto che vogliamo scaricare bisogna fare una chiamata http verso un particolare indirizzo. Una volta ottenuto questo file xml bisognerà poi analizzarlo per recuperare tutte le info necessarie per scaricare e visualizzare le fotografie nel nostro programma.

Vedremo via via come inserire queste funzionalità all’interno della nostra applicazione, ma prima di partire dovremmo avere almeno uno stralcio di piano.

Il buon senso del programmatore insegna che è sempre bene tenere distinte le funzionalità di un programma, al fine di renderlo più facile da mantenere, correggere e riutilizzare.

In questo nostro programma si notano almeno tre “parti” distinte..abbiamo la parte che si occupa di scaricare il file xml, la parte che si occupa di eseguire il parsing  e di generare gli url delle fotografie e la parte che le visualizza sullo schermo, tenteremo per quanto ci è possibile di tenere separate queste funzionalità.

Forti di questo piano creiamo un nuovo progetto con Xcode, consiglio di utilizzare View-based application come tipologia di progetto, e di chiamarlo devFlickr.

Ovviamente il nome non ha nessuna importanza ma se utilizzate lo stesso nome che ho usato io avrete meno difficoltà a seguire gli esempi.

La prima cosa che vogliamo fare è costruire una classe il cui compito è quello di scaricare il file xml dal sito di flickr.

Per far questo creiamo una nuova classe cliccando sul menù “file” e successivamente su “new file”. Dalla finestra che appare selezioniamo “objective-c class” dalla categoria “Cocoa Touch Class” avendo cura che nel menù a tendina in basso alla voce “subclass of” sia selezionato “NSObject”.

Chiamiamo la nostra classe “interestingness.m” e assicuriamoci che sia spuntata la casella “also create .h file”

NOTA: Questa che abbiamo appena eseguito è la procedura standard per la creazione di una nuova classe che eredita direttamente da NSObject, negli esempi a seguire quando ci capiterà di crearne altre, potrete fare riferimento a questo testo.

Questa classe avrà bisogno di almeno due membri, uno conterrà il file XML scaricato dal sito di flick e sarà di tipo NSData, l’altro lo utilizzeremo per memorizzare la chiave API ed è di tipo NSString.

NOTA: Una precisazione, mi capiterà di utilizzare i termini “membro”, “variabile”, “proprietà”…in realtà questi tre termini avrebbero significati diversi, ma per i nostri scopi questi termini indicano tutti il concetto di variabile interna di una classe.

Ricordiamo che questa classe eseguirà il download del file xml da un url costruito appositamente secondo le specifiche di flickr, però la prima parte di questo url è fissa, possiamo quindi, per rendere più leggibile il codice, inserirla in un costrutto #define.

A questo punto il file interestingness.h sarà questo:

1
2
3
4
5
6
7
8

#import <Foundation/Foundation.h>
#define INTERESTIGNESS_BASE_URL @"http://api.flickr.com/services/rest/?method=flickr.interestingness.getList"
 
@interface interestingness : NSObject {
	NSData		*interestingnessXML;
	NSString	*apikey;
}
@end

Per chi non avesse mai incontrato il costrutto #define chiariamo che molto semplicemente durante la fase di compliazione tutte le occorrenze nel nostro codice del termine INTERESTIGNESS_BASE_URL vengono sostituite con la stringa

@"http://api.flickr.com/services/rest/?method=flickr.interestingness.getList"

Passiamo ora al file interestingness.m, ovvero all’implementazione della nostra classe.

Avrete notato che non ho dichiarato come @property i membri della classe, inoltre non ho utilizzato neanche @syntetize, questo perchè ho notato che questi costrutti, che nascono per semplificare la vita al programmatore, in realtà confondono chi è alle prime armi.

Provvediamo quindi a creare (alla vecchia maniera) i medoti getter e setter per i membri che abbiamo definito, non sono altro che i metodi che dovremo invocare per leggere e scrivere i valori delle due variabili.

aggiungiamo quindi nel file questi metodi:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

- (NSData *)getinterestingnessXML
{
	return interestingnessXML;
}
 
- (void) setinterestignessXML:(NSData *)anXML
{
	interestingnessXML = anXML;
}
 
- (NSString *)getapikey
{
	return apikey;
}
 
- (void) setapikey:(NSString *)anApiKey
{
	apikey = anApiKey;
}

Poichè chi utilizzerà questa nostra classe dovrà necessariamente, dopo averla istanziata, settare il valore di apikey, potrebbe essere carino fornire un metodo per fare entrambe le cose insieme.

creiamo quindi un nostro metodo initWithApiKey in questo modo:

1
2
3
4
5
6
7
8

- (id)initWithApiKey:(NSString *)anApiKey
{
	if (self = [super init])
    {
		[self setapikey:anApiKey];
    }
    return self;
}

Cosa fa questo frammento di codice? Serve per inizializzare l’oggetto, ovvero ad assegnare a tutte le variabili all’interno dell’oggetto i valori appropriati.

Ma il nostro oggetto eredita da NSObject quindi durante l’inizializzazione dobbiamo per prima cosa invocare il metodo init di NSObject (la nostra super-classe) in modo che l’oggetto stesso venga inizializzato. Viceversa se non avessimo scritto [super init] l’oggetto non sarebbe stato inizializzato ed il tentare di impostare [self setapikey] avrebbe generato chiaramente un errore.

Vediamo ora il metodo per effettuare il vero e proprio download del file.

Il codice è il seguente:

1
2
3
4
5
6
7

- (NSData *)downloadXML
{
 
	NSString *fullAddress = [NSString stringWithFormat:@"%@&api_key=%@",FLICKR_INTERESTIGNESS_GETLIST_URL,[self getapikey]];
	NSData *tmp = [NSData dataWithContentsOfURL:[NSURL URLWithString:fullAddress]];
	[self setinterestignessXML:tmp];
}

per prima cosa costruiamo l’indirizzo vero e proprio, poi utilizziamo il metodo dataWithContentsOfURL per effettuare il download del file xml, infine utilizziamo il metodo setter per assegnare alla variabile interestignessXML il valore corretto.

Con questo la nostra prima classe è quasi terminata.

Per completezza dovremmo inserire le dichiarazioni dei metodi all’interno del file .h per evitare warning in fase di compilazione e per aiutare Xcode con l’autocompletamento.

A questo punto potreste avere la smania di vedere all’opera questa classe…ancora non è il momento, ma se proprio non state nella pelle fate così:

editate il file devFlickrViewController.m aggiungendo in alto la stringa

#import “interestingness.h”

inoltre aggiungiamo questo metodo:

1
2
3
4
5
6

- (void)viewDidLoad {
    [super viewDidLoad];
	interestingness *inter = [[interestingness alloc] initWithApiKey:@"TUA_API_KEY"];
	[inter downloadXML];
	printf("FILE XML:\n %s",(char *)[[inter getinterestingnessXML] bytes]);
}

Cosa stiamo facendo?

Dichiariamo un oggetto di tipo “interestigness“, lo allochiamo e lo inizializziamo con il metodo “initWithApiKey“. Poi invochiamo il metodo “downloadXML” dell’oggetto appena dichiarato e infine accediamo alla sua proprietà “interestighessXML” attraverso il metodo “getInterestignessXML“.

Non fate caso al cast (char *)…serve in questo momento solo per far visualizzare il tutto sulla console.

Provate ad eseguire il tutto, dovreste vedere sul simulatore una semplice schermata grigia, mentre sulla console dovreste riuscire a vedere l’intero file XML appena scaricato.

Chi volesse può scaricare il file di Xcode con le modifiche apportate fino a questo punto da questo indirizzo: devFlickr Source Code

Come sempre cercherò di costruire l’applicazione per approssimazioni successive, ponendo l’accento su quelli che possono essere gli errori più comuni nello sviluppo di un app completa.

In questa prima parte non ci occuperemo della parte di sviluppo su iphone, ma sarà una introduzione generale all’utilizzo delle API di Flickr ed al protocollo REST in genere.

Il progetto:

L’applicazione che vogliamo realizzare è un semplice cient per Flickr, quello che vogliamo fare è riuscire a scaricare e visulizzare le foto che flickr marca come “interessanti”. Questo elenco viene aggiornato quotidianamente quindi ogni giorno l’applicazione fornirà foto diverse.

Suppongo che tutti i lettori conoscano il servizio offerto da Flickr (in caso contrario vi esorto a visitare il sito flickr.com), ma magari non tutti sanno che flickr offre un ottimo e documentatissimo seti di API (Application Programming Interface) per accedere al suo database.

Ma come si fa ad usare queste API? Flickr mette a disposizione ben tre sistemi diversi, SOAP, XML-RPC e REST. Per la sua semplicità e versatilità noi utilizzeremo proprio quest’ultimo. Accedere alle API flickr tramite REST significa, in breve, costruire un particolare URL secondo le istruzioni fornite da flickr stesso, effettuare una chiamata HTTP su questo URL e analizzare il contenuto della risposta del server. Più facile a farsi che a dirsi, sarà tutto più chiaro proseguendo nella lettura.

Iniziamo

:

La prima cosa da fare è quella di registrarsi su Flickr e richiedere una propria API_KEY, una stringa alfanumerica che servirà per identificare le nostre applicazioni.

La pagina da visistare è questa:

http://www.flickr.com/services/api/

Una volta registrati potremo cliccare sul link “api keys” per richiedere la nostra key personale.

Ottenuta la nostra chiave, diamo uno sguardo alla pagina http://www.flickr.com/services/api/, da questa pagina è possibile accedere a tutta la documentazione che flickr fornisce per le sue api.

Cliccando su “request formats – REST” prendiamo nota che gl indirizzi URL da realizzare sono nella forma:

1

http://api.flickr.com/services/rest/?method=flickr.test.echo&name=value

In questo caso stiamo chiamando la funzione “flickr.test.echo” passando “value” come argomento per il parametro “name”.

Ottenute queste informazioni generali, possiamo vedere nello specifico la funzione flickr.interestingness.getList a questa pagina:

http://www.flickr.com/services/api/flickr.interestingness.getList.html

questa funzione restituisce la lista delle foto interessanti del giorno stesso e della data specificata, e richiede come unico parametro non opzionale la propria api key

L’url quindi da interrogare sarà questo:

1

http://api.flickr.com/services/rest/?method=flickr.interestingness.getList&api_key=aa9999a999999999999aa999aa999a99

(ovviamente al posto di “aa9999a999999999999aa999aa999a99” dovete inserire la vostra apikey)

Possiamo fare già una prima prova, apriamo il nostro browser e copiamo nella barra dell’indirizzo l’url che abbiamo costruito e premiamo invio. quello che vedremo sarà un file XML contentente tutte le informazioni necessarie per recuperare e visualizzare le  immagini.

(con alcuni browser, tra cui Chrome e Safari, viene visualizzata una pagina bianca, in quel caso bisogna semplicemente visualizzare il sorgente della pagina per esaminare il file XML).

La risposta di flickr ha questa struttura:

1
2
3
4
5
6
7

<rsp stat="ok">
<photos page="1" pages="5" perpage="100" total="500">
<photo id="4615393244" owner="9049132@N04" secret="e2e21720d6" server="3360" farm="4" title="my good boy &amp; my new toy" ispublic="1" isfriend="0" isfamily="0" />
<photo id="4614986043" owner="41049110@N02" secret="3222884afd" server="4051" farm="5" title="Mountain Hare Rolling in Snow" ispublic="1" isfriend="0" isfamily="0" />
<photo id="4615636115" owner="32131681@N00" secret="a38974b053" server="4066" farm="5" title="Cully" ispublic="1" isfriend="0" isfamily="0" />
</photos>
</rsp>

Resta da capire come ottenere, a partire da questo file xml l’immagine in questione!

Per far questo basterà consultare la solita documentazione fornita da flickr visibile a questo indirizzo:

http://www.flickr.com/services/api/misc.urls.html

La pagina è in inglese, ma credo che gli esempi siano piuttosto chiari, lo schema url che useremo sarà il seguente:

1

http://farm{farm-id}.static.flickr.com/{server-id}/{id}_{secret}.jpg

per visualizzare la prima foto presente nel file xml quindi sarà visibile all’indirizzo:

1

http://farm4.static.flickr.com/3360/4615393244_e2e21720d6.jpg

A questo punto possiamo avere già un’idea di come dovrà funzionare na nostra applicazione, per prima cosa dovrà scaricare il file xml contenente tutte le informazioni necessarie, poi bisognerà parsare questo file per ottenere i singoli valori (leggete l’ottimo tutorial di Andrea Busi a tal proposito) e successivamente potremo costruire tutti gli url delle immagini per visualizzarle e salvarle sul nostro iphone.

alla prossima puntata!

Gerarchia delle classi UIPickerView e UIDatePicker

Come nostra consuetudine i nomi bordati in verde si riferiscono a classi già trattate su questo stesso sito [qui], mentre quelli bordati in rosso sono quelle che analizzeremo in questo articolo.

Concorderete con me che non c’è sistema migliore per studiare una classe se non quella di scaricare la class reference dal sito della apple, (ok, ok, a parte leggere il sorgente ) ecco quindi due link per un facile download:

UIPickerView Class Reference
UIDatePicker Class Reference

Iniziamo analizzando il più semplice tra i due, l’ UIDatePicker (che non necessita di delegate) trasciniamone uno su una view oppure inserendo questo codice per generarlo a runtime:

UIDatePicker *datePicker;
datePicker = [[UIDatePicker alloc] initWithFrame:CGRectMake(0, 150, 0, 0)];
[self.view addSubview:datePicker];

da notare che non importano le dimensioni del frame, il picker ha dimensione fissa.
Vediamo quali sono le più comuni proprietà e metodi che questo oggetto ci mette a disposizione:

maximumDate & minimumDate:

@property(nonatomic, retain) NSDate *maximumDate
@property(nonatomic, retain) NSDate *minimumDate

permettono di limitare il range di variabilità della data impostando la data massima e la data minima selezionabile. Di default vengono impostate entrambe a nil quindi l’utente può selezionare una data arbitrariamente passata o futura.

esempio: (questo esempio è complicato dall’utilizzo della classe nsdate che vedremo un’altra volta.)

NSString *min = @"20042010";
NSString *max = @"22042010";
NSDateFormatter *dateFormat = [[NSDateFormatter alloc] init];
[dateFormat setDateFormat:@"ddMMyyyy"];
NSDate *datemin = [dateFormat dateFromString:min];
NSDate *datemax = [dateFormat dateFromString:max];
[self.view addSubview:datePicker];
datePicker.maximumDate = datemax;
datePicker.minimumDate = datemin;

minuteInterval:

@property(nonatomic) NSInteger minuteInterval

Indica l’intervallo di selezione dei minuti, di default viene posto a 1 ma possiamo modificarlo, purché ci limitiamo ad inserire divisori di 60 (per esempio 2, 5, 30 ma non 23 oppure 45)

datePicker.minuteInterval = 30;

setDate:animated:

questo metodo permette di impostare una data nell’ UIDatePicker a runtime, se animated è impostato a YES verrà visualizzata l’animazione delle rotelle che girano.

datePickerMode:

@property(nonatomic) UIDatePickerMode datePickerMode</strong>

Questa proprietà determina l’aspetto delll’UIDatePicker, se permette la selezione di una data, di un orario, di entrambi o un conto alla rovescia. Il valore di default è UIDatePickerModeDateAndTime.

Gli altri possibili valori sono:

UIDatePickerModeTime
UIDatePickerModeDate
UIDatePickerModeDateAndTime
UIDatePickerModeCountDownTimer

UIDatePickerModeTime	UIDatePickerModeDate
UIDatePickerModeDateAndTime	...ModeCountDownTimer

Veniamo ora al secondo argomento di questa guida, parliamo di UIPickerView.

Proviamo come poc’anzi a creare un pickerview e visualizzarlo nella nostra applicazione:

UIPickerView *Picker;
Picker = [[UIPickerView alloc] initWithFrame:CGRectMake(0, 150, 0, 0)];
[self.view addSubview:Picker];
UIPickerView *Picker;Picker = [[UIPickerView alloc] initWithFrame:CGRectMake(0, 150, 0, 0)];
[self.view addSubview:Picker];

Purtroppo il codice sembra non funzionare, il picker non si vede ed al suo posto otteniamo soltato un rettangolo nero, come mai? Ci viene in aiuto la class reference che dice:

“A UIPickerView object requires the cooperation of a delegate for constructing its components and a data source for providing the numbers of components and rows.”

Che per chi non mastica l’inglese vuol dire:

“Un oggetto UIPickerView richiede la cooperazione di un degate per costruire i suoi componenti e di un data source che proveda a fornire il numero dei componenti e delle righe.”

Quindi poichè al nostro pickerview non abbiamo specificato nè delegate nè datasource, non è in grado di visualizzare nulla, ecco quindi spiegato il rettangolo nero.

Concettualmente delegate e dataprovider potrebbero essere due classi separate e create appositamente per tale scopo, ma spesso viene dato il compito di assolvere a questi ruoli allo stesso File’s Owner dell’uipickerview. Per fare questo quindi scriviamo:

[Picker setDelegate:self];
[Picker setDataSource:self];

Se provassimo adesso ad eseguire il codice vedremmo crashare inesorabilmente la nostra applicazione, ma anche a questo c’è una spiegazione… abbiamo detto al pickerview di interpellare il suo File’s Owner (self) per ricevere tutte le informazioni necessarie per la sua visualizzazione, ma non abbiamo detto al File’s Owner cosa rispondere, quindi in questo empasse l’applicazione va in crash.

Diamo quindi un’occhiata alla reference apple per UIPickerViewDelegate (qui)

scopriamo che la classe che vuol fare da delegare ad un uipickerview deve implementare almeno uno tra questi due metodi:

– pickerView:titleForRow:forComponent:
– pickerView:viewForRow:forComponent:reusingView:

Il secondo è meno utilizzato perché si usa per visualizzare immagini all’interno del picker piuttosto che una descrizione testuale;

Aggiungiamo quindi alla nostra classe questo metodo:

- (NSString *)pickerView:(UIPickerView *)pickerView
			 titleForRow:(NSInteger)row
			forComponent:(NSInteger)component
{
	return [NSString stringWithFormat:@"VALORE NUM:%d",row];
}

non abbiamo ancora terminato, abbiamo implementato il delegate, resta da implementare il datasource.

Leggiamo quindi sempre dalla reference apple (qui) che i metodi da implementare sono tutti e due, e sono:

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component

Il primo specifica quante “rotelle” devono essere disegnate nel picker, mentre il secondo specifica, per ogni “rotella” quanti devono essere i valori presenti. Nel nostro caso possiamo quindi aggiungere:

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
	return 1;
}
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
	return 20;
}

eseguiamo quindi il nostro codice e godiamoci finalmente il nostro UIpickerView!

PickerView

La trattazione di questi oggetti è stata particolarmente lunga e non è affatto esaustiva, invito per tanto tutti a leggere le reference apple per riuscire a sfruttare al massimo questi oggetti.

Un ultimo consiglio per gli amanti di interface builder, potete trascinare i picker come trascinereste qualsiasi altro oggetto, ricordatevi però di impostare nella finestra “connection” il corretto delegate e datasource (ctrl e trascina)

Come sempre, la guida di riferimento è la Class Reference pubblicata da Apple® che potete trovare a questo indirizzo.

Analizzando la Class Reference, l’informazione principale, e non a caso Apple® la inserisce per prima, è l’albero “genealogico” della classe in questione, per esempio per la classe UIButton la reference dice:

inherits from UIControl : UIView : UIResponder : NSObject

quindi la gerarchia è questa:

Gerarchia della classe UIButton

Ho segnato in verde le classi che abbiamo già trattato su questo sito, in rosso la classe che trattiamo oggi.

Come è facile intuire, più ci spostiamo verso il basso nella gerarchia delle classi, più saranno i metodi e le proprietà utilizzabili sulla classe stessa, questo perché non solo dobbiamo considerare metodi e proprietà proprietari della classe, ma anche tutti quelli delle sue superclassi ereditati.

Credo che tutti sappiano trascinare un UIButton da Interface Builder, vediamo invece come aggiungerne uno alle nostre view a runtime

[UIButton * btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];btn.frame = CGRectMake(0, 0, 100, 50);
[btn setTitle:@"Hello, world!" forState:UIControlStateNormal];
[self.view addSubview:btn];

Esaminando il codice vediamo subito un particolare costruttore che prende in input un (UIButtonType)buttonType; questo può avere 6 possibili diversi valori ed il risultato è quello che si vede in questa immagine.

UIButtonType

Nella prima riga non c’è un errore, il pulsante non si vede perché è un rettangolo trasparente. Questo tipo di pulsante può essere comodamente usato per ottenere un pulsante personalizzato, (se si chiama “custom” ci sarà un perché) infatti basterà inserire sotto il pulsante un controllo UIImageView di dimensioni e contenuto appropriato per ottenere un pulsante con qualsiasi immagine.

Per i fans di Interface Builder lo stesso risultato è ottenibile selezionando la voce corrente nel menù a discesa presente in “attributes inspector”:

UIButtonType in interface builder

Nell’istruzione successiva ne impostiamo la dimensione e posizione tramite la funzione CGRectMake già vista nell’articolo sulle UILabel.

Gli oggetti della classe derivate da UIControl  possono trovarsi in diversi stati (anche più contemporaneamente). Gli stati possibili sono:

Tutti i metodi che servono per modificare l’aspetto estetico dei controlli prendono quindi come parametro anche uno di questi valori. Sarà quindi possibile realizzare per esempio un pulsante rosso che diventa grigio quando viene disattivato e verde quando viene cliccato.

I metodi per modificare l’aspetto dei pulsanti sono:

- (void)setTitle:(NSString *)title forState:(UIControlState)state
- (void)setTitleColor:(UIColor *)color forState:(UIControlState)state
- (void)setTitleShadowColor:(UIColor *)color forState:(UIControlState)state
- (void)setImage:(UIImage *)image forState:(UIControlState)state
- (void)setBackgroundImage:(UIImage *)image forState:(UIControlState)state="objc"

Per ricevere in lettura questi valori sono previsti metodi analoghi:

- (NSString *)titleForState:(UIControlState)state
- (UIColor *)titleColorForState:(UIControlState)state
- (UIColor *)titleShadowColorForState:(UIControlState)state
- (UIImage *)imageForState:(UIControlState)state
- (UIImage *)backgroundImageForState:(UIControlState)state

Come se non bastasse sono state previste anche delle proprietà che quindi vengono usate con la sintassi nome_oggetto.nomeproprietà:

@property(nonatomic,readonly,retain) UILabel *titleLabel
@property(nonatomic, readonly, retain) NSString *currentTitle
@property(nonatomic, readonly, retain) UIColor *currentTitleColor
@property(nonatomic, readonly, retain) UIColor *currentTitleShadowColor
@property(nonatomic, readonly, retain) UIImage *currentImage
@property(nonatomic, readonly, retain) UIImage *currentBackgroundImage

Tutte queste personalizzazioni possono essere specificate anche tramite interface builder, ma se vogliamo modificare le proprietà di un controllo a runtime l’unica possibilità che abbiamo è quella di adoperare i metodi forniti da apple.

Proprietà di UIButtton da interface builder

Vediamo qualche esempio di utilizzo di questi metodi:

//Creo un oggetto UIButton di tipo TypeRoundedRect
UIButton * btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
//lo posiziono al centro schermo.
btn.frame = CGRectMake(35, 215, 250, 50);
//ne imposto ìl titolo per lo stato normale.
[btn setTitle:@"STATO: NORMALE" forState:UIControlStateNormal];
//ne imposto il colore del titolo per lo stato normal.
[btn setTitleColor:[UIColor greenColor] forState:UIControlStateNormal];
//ne imposto il titolo per lo stato "cliccato"
[btn setTitle:@"STATO: CLICCATO" forState:UIControlStateHighlighted];
//ne imposto il colore del titolo per lo stato "cliccato"
[btn setTitleColor:[UIColor redColor] forState:UIControlStateHighlighted];
//accedo alla proprietà currentTitle
NSLog(@"IN QUESTO MOMENTO HA TITOLO: %@", btn.currentTitle);
//accedo al valore del titolo allo stato "cliccato."
NSLog(@"NELLO STATO ATTIVO HA TITOLO: %@",[btn titleForState:UIControlStateHighlighted]);

Prima di concludere vediamo due ultime “chicche”: la prima è la proprietà showsTouchWhenHighlighted, che determina se il pulsante deve illuminarsi quando viene cliccato. Basta quindi scrivere btn.showsTouchWhenHighlighted = YES un’ottima animazione sui nostri pulsanti.
Con la seconda ed ultima chicca vediamo la possibilità di assegnare, sempre a runtime, una funzione ad un determinato evento sul controllo (per i più smaliziati..una sorta di binding dinamico).

Il metodo è il seguente:

- (void)addTarget:(id)target action:(SEL)action forControlEvents:(UIControlEvents)controlEvents

“target” è l’oggetto che deve rispondere all’evento..di solito si utilizza “self”

“action” è un selector, ne parleremo magari più avanti, per il momento basti dire che è il nome di un metodo dichiarato nella nostra classe.

“controlEvents” è l’evento che che deve essere riconosciuto.

nel nostro caso potremmo quindi scrivere

[btn addTarget:self action:@selector(aMethod:) forControlEvents:UIControlEventTouchDown];

@lla prossima

UILabel nel UIKit framework

Come possiamo vedere in questa immagine, ereditano direttamente da UIView che a loro volta ereditano da UIResponder e da NSObject. Capire a quale livello della gerarchia è posizionata la classe che stiamo analizzando è indispensabile per capire subito quali sono i metodi e proprietà che possiamo utilizzare.

In realtà se utilizzassimo le label esclusivamente trascinandole da interface builder potremmo ignorare tutto questo, ma poichè noi sviluppatori non viviamo bene senza righe di codice, vediamo in dettagli come creare ed impostare una label a runtime.

La prima cosa da fare sarà dichiarare un oggetto di tipo UILabel, allocarlo ed inizializzarne il valore, tutto questo viene fatto con queste istruzioni:

UILabel *newLabel = [[UILabel alloc] initWithFrame:CGRectMake(20, 30, 200, 100)];

Il metodo “alloc” è ereditato dalla classe NSObject e si occupa semplicemente di riservare nella memoria sufficiente spazio per allocare un oggetto di tipo UILabel, mentre il metodo “initWithFrame” è un metodo della classe UIView che inizializza e ritorna un nuovo oggetto di tipo UIView delle dimensioni e nella posizione specificata dal parametro.

Qualcuno si sta chiedendo “Ma noi serve una UILabel..se initiWithFrame restituisce una UIView che me ne faccio??”…io potrei rispondere con un altra domanda “se alloc restituisce un NSObject come mai lo utilizziamo con qualsiasi oggetto??”…la risposta è che è proprio questo il bello della programmazione ad oggetti, la UILabel è una sottoclasse di UIView quindi è una UIView…e possiamo utilizzarla come e dove è previsto l’utilizzo di una UIView. Questo è da tenere bene a mente perché è un pilastro importante della programmazione ad oggetti.

CGRectMake(x,y,width,height) fa parte di un altro framework, il quarz2d, e al momento sorvoliamo sul suo utlizzo, quello che ci serve sapere è che restituisce un rettangolo (CGRect) il cui angolo superiore sinistro è posizionato nel punto di coordinate x,y e che ha una larghezza pari a width pixel ed un’altezza di height pixel. (Trovate qui su devAPP un tutorial fatto veramente bene)

Una volta dichiarata, allocata ed inizializzata la nostra UILabel non resta che visulizzarla, richiamiamo quindi il metodo addSubView sulla vista che dovrà contenerla. (addSubView come parametro vuole una UIView..a questo punto dovrebbe essere chiaro perchè possiamo passargli una UILabel..)

[self.view addSubview:newLabel];

Vediamo ora una serie di proprietà che possono essere impostate per modificare l’aspetto della UILabel:

Una piccola nota, poiché sono dichiarate come proprietà possiamo accedervi in lettura e scrittura tramite l’operatore “.” (punto) non è necessario utilizzare metodi set e get.

myLabel.text = @"Ciao mondo"

myLabel.font = [UIFont boldSystemFontOfSize:25];

myLabel.textColor = [UIColor blueColor];

myLabel.textAlignment = UITextAlignmentCenter;

myLabel.enabled = FALSE;
myboolValue = [mylabel isEnabled];

Per le altre proprietà vi rimando alla UILabel class reference ufficiale apple che trovate a questo indirizzo:

http://developer.apple.com/iphone/prerelease/library/documentation/UIKit/Reference/UILabel_Class/UILabel_Class.pdf