{"id":3651,"date":"2010-06-10T09:30:55","date_gmt":"2010-06-10T07:30:55","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=3651"},"modified":"2010-11-05T16:36:42","modified_gmt":"2010-11-05T15:36:42","slug":"t051-accedere-a-flickr-dalle-nostre-applicazioni-iphone-parte-4","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/t051-accedere-a-flickr-dalle-nostre-applicazioni-iphone-parte-4\/","title":{"rendered":"T#051 – Accedere a Flickr dalle nostre applicazioni iPhone (parte 4)"},"content":{"rendered":"

\"\" Ed eccoci arrivati all’ultima puntata di questo lungo tutorial, vedremo oggi come realizzare una semplice interfaccia grafica per il nostro programma.<\/p>\n

L’idea \u00e8 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.<\/p>\n

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.<\/p>\n

Un bel po’ di roba, no?<\/p>\n

Apriamo quindi il nostro caro vecchio progetto, e modifichiamo il file devFlickrViewController.h<\/em> inserendo queste dichiarazioni:<\/p>\n

\r\n@interface devFlickrViewController : UIViewController {\r\n\tUILabel\t\t*currentPhotoNum;\r\n\tUIImageView\t*imageView;\r\n\tNSArray\t\t*urlArray;\r\n\tint\t\t\tcurrentphoto;\r\n\tUIActivityIndicatorView *act;\r\n}\r\n@property (nonatomic,retain) IBOutlet UILabel\t\t*currentPhotoNum;\r\n@property (nonatomic,retain) IBOutlet UIImageView\t*imageView;\r\n@property (nonatomic,retain) IBOutlet UIActivityIndicatorView\t*act;\r\n- (IBAction)nextPhoto;\r\n- (IBAction)prevPhoto;\r\n- (IBAction)savePhoto;\r\n- (IBAction)refreshPhotoList;\r\n<\/pre>\n
Creiamo l’interfaccia tramite Interface Builder, quello che vedete in questa foto \u00e8 il massimo che il mio estro artistico sia riuscito a partorire:<\/p>\n
<\/p>\n
\"\"<\/a><\/p>\n
Creazione dell inerfaccia con inteface builder<\/p>\n<\/div>\n
<\/center><\/p>\n
Non dimenticate di collegare correttamente gli IBOutlet e di scivere i @syntetize<\/em> nel file .m (commentate se ci sono difficolt\u00e0 con questa parte!)<\/p>\n
Passiamo ora a scrivere il codice delle funzioni che abbiamo dichiarato, iniziamo da refreshPhotoList<\/strong><\/p>\n
\r\n- (IBAction)refreshPhotoList\r\n{\r\n\t[act startAnimating];\r\n\tinterestingness *inter = [[interestingness alloc] initWithApiKey:@\"MY_APY_KEY_IS_PRIVATE\"];\r\n\t[inter downloadXML];\r\n\tURLbuilder *urlBuilder = [[URLbuilder alloc] initWithXMLdata:[inter getinterestingnessXML]];\r\n\t[urlBuilder startParsing];\r\n\turlArray = [[NSArray arrayWithArray:[urlBuilder getURLarray]] retain];\r\n\r\n\t[inter release];\r\n\t[urlBuilder release];\r\n\t[act stopAnimating];\r\n\r\n}\r\n<\/pre>\n
Esaminiamo questo codice: per prima cosa visualizziamo la “rotellina”, poi istanziamo un oggetto di tipo interestigness<\/em> e invochiamo su di esso il metodo downloadXML<\/em> per far si che l’oggetto recuperi l’intero file xml dal sito di flickr.<\/p>\n
Successivamente istanziamo un oggetto di tipo urlBuilder<\/em> passando come parametro proprio il file xml appena scaricato e invochiamo su di esso il metodo startParsing<\/em>.<\/p>\n
Ricordiamo che l’oggetto urlBuilder<\/em> ha un metdo getURLarray<\/em> che restituisce l’array con gli URL delle foto, invochiamo quindi tale metodo e memorizziamo questo array nella variabilie urlArray<\/em>.<\/p>\n
A questo punto possiamo effettuare il release degli oggetti inter<\/em> e urlBuilder<\/em>. (nessun tifo calcistico \ud83d\ude42 )<\/p>\n
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 \u00e8 una chiamata sincrona, inoltre l’activityview (la rotellina) non viene proprio visualizzata.<\/p>\n
Risolveremo questo problema alla fine di questo tutorial, per il momento lasciamolo cos\u00ec.<\/p>\n
Dopo aver cliccato sul pulsante refresh ci si aspetta che venga visualizzata la prima foto, creiamo quindi un metodo che chiameremo viewPhotoAtIndex<\/em>:<\/p>\n
\r\n- (IBAction)viewPhotoAtIndex:(int)position\r\n{\r\n\tNSURL *url = [NSURL URLWithString:\t[urlArray objectAtIndex:position]];\r\n\tNSData *data = [NSData dataWithContentsOfURL:url];\r\n\tUIImage *img = [[UIImage alloc] initWithData:data];\r\n\t[imageView setImage:img];\r\n\tcurrentphoto = position;\r\n\tcurrentPhotoNum.text = [NSString stringWithFormat:@\"Foto %d su %d\",position+1,[urlArray count]];\r\n\t[img release];\r\n}\r\n<\/pre>\n
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<\/em> per effettuare il download della foto, e la visualizza.<\/p>\n
Aggiorniamo il valore di currentphoto<\/em> e visualizziamo nella label il testo “foto x su y”.<\/p>\n
Ho utilizzato position+1 perch\u00e8 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.<\/p>\n
Aggiungiamo quindi al metodo precedente (refreshPhotoList<\/em>), giusto prima della chiusura, la riga<\/p>\n
\r\n[self viewPhotoAtIndex:0];\r\n<\/pre>\n
in modo da visualizare la prima foto.<\/p>\n
Fatto questo implementare i due metodi nextPhoto<\/em> e prevPhoto<\/em> \u00e8 molto semplice perch\u00e8 sar\u00e0 sufficiente scrivere:<\/p>\n
\r\n- (IBAction)nextPhoto\r\n{\r\nif (currentphoto + 1  < [urlArray count]) {\r\n            [self viewPhotoAtIndex:currentphoto + 1];\r\n}\r\n}\r\n\r\n - (IBAction)prevPhoto {\r\nif (currentphoto - 1 >= 0 )\r\n{\r\n    [self viewPhotoAtIndex:--currentphoto];\r\n}\r\n}\r\n<\/pre>\n
Un semplice controllo ci impedisce di andare “out of range” sul nostro array.<\/p>\n
Non ci resta che implementare la funzione per salvare l’immagine su nostro cellulare:<\/p>\n
Il comando sarebbe semplice, perch\u00e9 basterebbe questo codice:<\/p>\n
\r\n- (IBAction)savePhoto {\r\n\tUIImage *img = [imageView image];\r\n\tUIImageWriteToSavedPhotosAlbum( img, self ,nil, nil );\r\n}\r\n<\/pre>\n
Per\u00f2 in questo caso non potremmo verificare se il salvataggio \u00e8 andato o meno a buon fine, allora sfruttiamo il terzo parametro di questa funzione \u00e8 un selector, ovvero \u00e8 il nome di un’altra funzione che verr\u00e0 automaticamente invocata quando il metodo avr\u00e0 finito di salvare l’immagine.<\/p>\n
Questo avviene perch\u00e8 il salvataggio \u00e8 ASINCRONO ovvero parte quando invochiamo questo metodo, ma poi lavora “per conto suo”, invocher\u00e0 il metodo specificato nel selector per informarci dell’esito dell’operazione.<\/p>\n
Secondo le indicazioni delle apple il metodo deve essere di questa forma.<\/p>\n
\r\n- (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo\r\n{\r\n\tNSString *message;\r\n\tNSString *title;\r\n\tif (!error)\r\n\t{\r\n\t\ttitle = @\"Ok\";\r\n\t\tmessage = @\"foto salvata\";\r\n\r\n\t}\r\n\telse\r\n\t{\r\n\t\ttitle = @\"Error\";\r\n\t\tmessage = [error description];\r\n\r\n\t}\r\n\tUIAlertView *alert = [[UIAlertView alloc]\r\n\t\t\t\t\t\t  initWithTitle:title\r\n\t\t\t\t\t\t  message:message\r\n\t\t\t\t\t\t  delegate:self\r\n\t\t\t\t\t\t  cancelButtonTitle:@\"OK\"\r\n\t\t\t\t\t\t  otherButtonTitles:nil];\r\n\t