Ciao a tutti colleghi sviluppatori 🙂 Per il mio primo articolo su devAPP.it ho pensato di scrivere una guida che io stesso qualche tempo fa ho richiesto per questo blog attraverso il Forum, ma che purtroppo, viste le numerose richieste, non è ancora mai stata pubblicata… fino ad ora 🙂 A quel tempo ero alla disperata ricerca di una guida per completare la mia prima applicazione per iPhone, “Japanese Grammar Dictionary: Basic“. Purtroppo, come dicevo, non l’ho trovata: nè qui nè altrove, quindi mi sono dovuto arrangiare da solo. Alla fine, tra documentazione Apple e l’aiuto di uno sviluppatore esperto sono riuscito nel mio intento: creare una tab che mostrasse una tableView con una lista modificabile di preferiti nella mia applicazione iPhone. Spiegare come sono riuscito a far questo e condividerlo con tutti voi è proprio l’obbiettivo dell’articolo che vi accingete a leggere, che vi anticipo subito, sarà diviso in due parti.

Il progetto di partenza

Per semplificare le cose, ho creato un piccolo progetto da cui partiremo: una semplice applicazione formata da due tab, la prima contenente un’UITableView con tre elementi, la seconda contenente l’UITableView in cui mostreremo i nostri elementi preferiti. Vi invito, dunque, a scaricare il progetto “AddToFavorites” prima di proseguire.

All’interno di questo pacchetto troverete il nostro progettino di partenza, con all’interno una cartella chiamata “Favorites Classes” contenente le classi che useremo nel corso di questo tutorial più due immagini, “EmptyStar.png” e “FullStar.png” che useremo per il tasto “Aggiungi/Rimuovi Preferito”.

In questa prima parte dell’articolo vedremo come aggiungere il tasto “Aggiungi/Rimuovi Preferito” all’interno delle detailView di ogni elemento, come salvare l’elemento tra i preferiti senza usare alcun database o plist (e come rimuoverlo dalla stessa lista, ovviamente). Nella seconda parte, invece, andremo a vedere come mostrare gli elementi salvati come preferiti nella tableView precedentemente creata nel secondo tab del progetto e vedremo inoltre come modificare la posizione dei vari elementi o come eliminarli dall’elenco senza accedere alla vista dettaglio corrispondente.

Passiamo a Xcode..

Prima di tutto, apriamo il progetto di partenza “AddToFavorites” in Xcode. Espandiamo quindi i gruppi “Classes” e “Resources” (sarà più comodo lavorare in questo modo). In Classes, creiamo un nuovo gruppo (cliccando con il tasto destro del mouse su “Classes”) e chiamiamolo, ad esempio, “FavoritesClasses” (tutto attaccato).

Nella cartella “Favorites Classes” del pacchetto .zip scaricato, selezioniamo tutti i file e importiamoli nel progetto semplicemente trascinandoli direttamente nel gruppo “FavoritesClasses” che abbiamo appena creato, assicurandoci che l’opzione “Copy file into destination folder (if needed)” sia selezionata. Facciamo lo stesso per le due immagini, facendo attenzione, questa volta, ad importarle nel gruppo “Resources”. Ora abbiamo tutto ciò che ci serve per poter procedere.

A questo punto avrete notato che nel gruppo “Classes” sono presenti tre serie di file .h, .m e .xib chiamate rispettivamente Detail1, Detail2 e Detail3. Questi sono i file delle detailView che si apriranno rispettivamente selezionando le tre celle della tabella principale, che ho preparato per il progetto e che potrete vedere immediatamente se cliccate su “Build & Run” in Xcode.

In questa prima parte del tutorial lavoreremo fondamentalmente su queste tre serie di file, o meglio, mostreremo il lavoro solo su uno di questi tre (Detail1) basterà poi ripetere il processo analogamente per le altre due.

Come salviamo i preferiti?

Come funziona il processo di salvataggio che stiamo per utilizzare? Fondamentalmente sfrutteremo delle tag preimpostate dove verranno temporaneamente salvati rispettivamente titolo e sottotitolo, che mostreremo in una riga della tableView con gli elementi preferiti (normalmente vorremo mostrare lo stesso titolo e sottotitolo che corrisponde allo stesso elemento nella tableView principale). A questo punto le salveremo in due array. Se le tag assegnate a un elemento sono presenti nei due array, allora l’elemento sarà considerato “preferito”.

Un po’ di codice

Prima di procedere, diamo uno sguardo ai files che abbiamo importato all’inizio. Iniziamo da “SyntetizeSingleton.h”. Di questo file non parlerò molto, per maggiori informazioni vi rimando a un’ottimo articolo che trovate sul blog Cocoa with Love. Per ora vi basti sapere che questo è uno dei files che si occupa di far in modo che la nostra lista di preferiti sia accessibile da qualsiasi classe. In Favorite.h e Favorite.m, invece, abbiamo semplicemente dichiarato due stringe, “favId” e “description”, le nostre tag. In FavoritesData.h e FavoritesData.m abbiamo inoltre definito i metodi che ci consentiranno di aggiungere o rimuovere un elmento ai preferiti.

Andiamo quindi a modificare il file Detail1.m (non abbiamo necessità di toccare il suo header .h). La prima cosa che vorremo fare, sarà quella di creare un tasto che si aggiorni a seconda che l’elemento sia già un preferito o meno, mostrando come immagine una stellina gialla quando l’elemento è già preferito o una stellina bianca quando invece non lo è.

Per una questione sia estetica che pratica, per far ciò ho usato un “UISegmentedControl” con un solo elemento che può essere ampliato a più elementi facendo posto a più bottoni nello stesso lato di una navbar. Copiate e incollate il seguente codice, facendo attenzione a rimuovere le precenti dichiarazioni di alcune righe:

// importiamo i file Favorite and FavoritesData
#import "Favorite.h"
#import "FavoritesData.h"

// definiamo il titolo e sottotitolo che vorremo mostrare nella tableView Preferiti
#define FAV_ID @"Titolo Riga 1"
#define FAV_DESC @"Sottotitolo Riga 1"

// creiamo un tasto che si aggiorna a seconda che un elemento sia preferito o meno
// questa implementazione ci serve per aggiornare lo stato del tasto
@interface Detail1 (Private)

- (void) rebuildButton;

@end

@implementation Detail1

- (void) rebuildButton {
	
	self.navigationItem.rightBarButtonItem = nil;
	
	BOOL isFav = [[FavoritesData sharedFavoritesData] favoriteWithId:FAV_ID] != nil;
	NSString *starImage = isFav ? @"FullStar.png" : @"EmptyStar.png";
	
    // Creiamo un SegmentedControl e lo aggiungiamo come rightBarButtonItem
	UISegmentedControl *segmentedControl = [[UISegmentedControl alloc] initWithItems:
											[NSArray arrayWithObjects:
											 [UIImage imageNamed:starImage],
											 nil]];
	
	[segmentedControl addTarget:self action:@selector(makeFavorite:) forControlEvents:UIControlEventValueChanged];
	segmentedControl.frame = CGRectMake(0, 0, 35, 30);
	segmentedControl.segmentedControlStyle = UISegmentedControlStyleBar;
	segmentedControl.momentary = YES;
	
	UIBarButtonItem *segmentBarItem = [[UIBarButtonItem alloc] initWithCustomView:segmentedControl];
	[segmentedControl release];
	
	self.navigationItem.rightBarButtonItem = segmentBarItem;
	[segmentBarItem release];
    
}

// l'azione che dev'essere eseguita quando il tasto viene premuto.
- (void) makeFavorite:(id)sender
{
    Favorite *favorite = [[FavoritesData sharedFavoritesData] favoriteWithId:FAV_ID];
    
    if(!favorite) {
        
        Favorite *fav = [[Favorite alloc] init];
        fav.favId = FAV_ID;
        fav.description = FAV_DESC;
        [[FavoritesData sharedFavoritesData] addFavorite:fav];
        [fav release];
        
    }
    else {
        [[FavoritesData sharedFavoritesData] removeFavoriteById:FAV_ID];
    }
}

- (void) _refreshFav{
	[self rebuildButton];
}

// in dealloc
[[NSNotificationCenter defaultCenter] removeObserver:self];

// in viewDidLoad
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(_refreshFav) name:REFRESH_FAVORITES object:nil];
    
    [self rebuildButton];

Dai commenti nel codice dovreste capire come funziona il tutto. Non ci resta che ripetere il processo per i restanti file Detail2.m e Detail3.m cambiando in maniera opportuna le istruzioni #define, @interface e @implementation. Ora, se proviamo a cliccare su “Build & Run” in Xcode e avviamo l’applicazione nell’iPhone Simulator, vedremo che è presente il tasto “Aggiungi/Rimuovi Preferito” e cliccandoci sopra l’immagine della stellina cambia (da bianco a giallo e viceversa).

Per ora è tutto. Vi ricordo che nella seconda parte, vedremo come mostrare gli elementi salvati come preferiti nella tableView precedentemente creata nella seconda tab del progetto e come modificare la posizione degli elementi o ancora eliminare quelli che non vogliamo più visualizzare nel nostro elenco senza accedere alle relative viste dettaglio.

Se avete problemi con il tutorial, questo è il nostro file di progetto.