IPAD#001 – Usiamo le Split View

Oggi vi proponiamo il primo di una lunga serie di Tutorial di programmazione iPad. Come sicuramente sarà già noto ad ognuno di voi, il nuovo dispositivo Apple, appunto l’iPad, monta una versione di iPhone OS, ovvero, lo stesso sistema che fa funzionare i nostri amati melafonini. Tra le poche differenze troviamo sicuramente qualche piccolo accorgimento dovuto all’evidente differenza di dimensioni dei display di questi due dispositivi. Imparerete quindi, con questa nuova serie di tutorial, a programmare anche il vostro iPad. Da oggi potrete creare 3 tipologie di applicazioni:

• Applicazioni iPhone
• Applicazioni iPad
• Applicazioni Universali

Queste ultime, le già note e chiaccherate Universal Application, sono in grado di funzionare perfettamente sia su iPhone che su iPad. Questo sarà sicuramente un bene per le vendite delle vostre creazioni, avrete di fatto un potenziale clienti maggiore, anche se vi toccherà lavorare un briciolo in più. Potete rispolverare la memoria rileggendo l’introduzione a questo argomento con il nostro primo articolo su questo tema. Oggi non parleremo di Universal App, vedremo semplicemente come sfruttare una nuova caratteristica compatibile esclusivamente con iPad: le Split View.

Cos’è una Split View?

Una Split View non è nient’altro che una particolare vista composta. Immaginate di tenere il vostro iPad in modalità landscape (orizzontale), la split View in questo caso è composta dall’unione di una classica TableView (sulla sinistra) utilizzabile ad esempio come menù di scelta per l’utente e una UIView (sulla destra), o meglio DetailView, dove finiranno i contenuti veri e propri.

In modalità portrait (verticale), invece, avremo sempre la View, questa volta a tutto schermo, corredata da comodissimo “Popover”, ovvero una tabella a comparsa che apparirà dopo un tap nell’apposito tasto ad esso associato. Un paio di screenshot chiariranno facilmente eventuali dubbi:

Split View in modalità Landscape

Split View in modalità Portrait

Come potete vedere dalle immagini è evidente l’incompatibilità di questa nuova visuale con il nostro caro “vecchio” iPhone, il suo “piccolo” display, infatti, non offre abbastanza spazio a video per mostrare questo tipo di visuale. In futuro vedremo come rendere le nostre applicazioni universali e come ovviare quindi a questi problemi progettando a dovere le loro interfacce grafiche.

Il progetto

Partiamo, dopo questa breve introduzione, con il tutorial vero e proprio. Quella che andremo a creare in questo tutorial è una semplice applicazione che mostra un elenco di prodotti sulla tabella a sinistra (o nel popover) e il dettaglio del prodotto nella DetailView, ovvero nella vista principale.

NOTA: Per il seguente tutorial è sottointeso che dovrete aver scaricata e installata l’ultima versione dell’SDK fornito da Apple (attualmente versione 3.2).

Apriamo Xcode e creiamo un nuovo progetto. Dall’elenco dei template disponibili selezioniamo il nuovissimo “Split View-based Application“, diamo un nome alla nostra applicazione, ad esempio “iPadSplitView“, scegliamo la posizione in cui salvare il nostro progetto e proseguiamo.

Dando un primo sguardo alla sezione “Groups & Files” in Xcode notiamo già qualcosa di nuovo tra le classi presenti:

Troviamo infatti le due nuove classi che compongono il tipo di template scelto:

• RootViewController
• DetailViewController

Iniziamo a lavorare sulla prima classe. Apriamo il file “RootViewController.h” e modifichiamo il codice come segue:

#import <UIKit/UIKit.h>
 
@class DetailViewController;
 
@interface RootViewController : UITableViewController {
    DetailViewController *detailViewController;
    NSMutableArray *prodotti;
}
 
@property (nonatomic, retain) IBOutlet DetailViewController *detailViewController;
@property (nonatomic, retain) NSMutableArray *prodotti;
 
@end

Abbiamo semplicemente dichiarato un oggetto di tipo “NSMutableArray” chiamato “prodotti” che useremo più avanti per visualizzare l’elenco dei prodotti.

Creiamo ora un file .plist chiamato “prodotti” e sfruttiamolo per salvarci dentro l’elenco dei prodotti, che caricheremo successivamente nell’array dichiarato poco fa. Per far ciò cliccate con il pulsante destro del mouse su “Resources“, quindi su “Add” e infine su “New File…“.

Selezionate il gruppo “Resource” sulla sinistra, quindi scegliete il modello di file “Property List” dall’elenco sulla destra. Diamo un nome al nostro nuovo file, ad esempio “prodotti.plist” e proseguiamo. Andiamo quindi a modificare il file appena creato selezionando “Array” e aggiungendo le voci mostrate in figura qui in basso (fate click sull’immagine per ingrandire):

Salviamo il file prodotti.plist. Trasciniamo ora 5 immagini nella cartella “Resources” del nostro progetto. Il loro nome (delle immagini) dovrà essere uguale ai rispettivi oggetti inseriti nel file .plist. Nel nostro caso abbiamo utilizzato immagini in formato .jpg, se usate altri formati, dovrete fare una piccola modifica nella parte di codice dove verranno richiamate mettendo il vostro formato al posto di “jpg”. Ricordate inoltre di mettere la spunta su “Copy items into destination group’s folder (if needed)” per copiare i file nel progetto.

Passiamo ora al file RootViewController.m. Modifichiamo innanzitutto la seguente istruzione come segue:

@synthesize detailViewController, prodotti;

Passiamo quindi al metodo “viewDidLoad” e modifichiamolo in questo modo:

- (void)viewDidLoad {
    [super viewDidLoad];
 
    self.title = @"Prodotti Apple";
 
    self.clearsSelectionOnViewWillAppear = NO;
    self.contentSizeForViewInPopover = CGSizeMake(320.0, 600.0);
    self.prodotti = [[NSMutableArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"prodotti" ofType:@"plist"]] retain];
}

Come vedete abbiamo semplicemente aggiunto un titolo, “Prodotti Apple“, e caricato nell’array “prodotti” il contenuto del file “prodotti.plist” creato in precedenza.

Passiamo quindi al “riempimento” della nostra tabella con i valori dell’array:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)aTableView {
    // Return the number of sections.
    return 1;
}
 
- (NSInteger)tableView:(UITableView *)aTableView numberOfRowsInSection:(NSInteger)section {
    // Return the number of rows in the section.
    return [prodotti count];
}
 
 
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
 
    static NSString *CellIdentifier = @"CellIdentifier";
 
    // Dequeue or create a cell of the appropriate type.
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
        cell.accessoryType = UITableViewCellAccessoryNone;
    }
 
    // Configure the cell.
    cell.textLabel.text = [self.prodotti objectAtIndex:indexPath.row];
    return cell;
}

Come potete vedere stiamo lavorando in modo molto simile a quanto accade nella programmazione iPhone classica.

Specifichiamo ora quale vista caricare nella “Detail View” al tap su una voce della tabella:

- (void)tableView:(UITableView *)aTableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
 
    /*
     When a row is selected, set the detail view controller's detail item to the item associated with the selected row.
     */
    detailViewController.detailItem = [self.prodotti objectAtIndex:indexPath.row];
}

Abbiamo terminato con la nostra classe RootViewController, passiamo quindi all’altra classe disponibile con il nuovo template scelto ad inizio tutorial DetailViewController.

Apriamo quindi il file DetailViewController.h e modifichiamo il codice come segue:

#import <UIKit/UIKit.h>
 
@interface DetailViewController : UIViewController <UIPopoverControllerDelegate, UISplitViewControllerDelegate> {    
    UIPopoverController *popoverController;
    UIToolbar *toolbar;
 
    id detailItem;
 
    IBOutlet UILabel *lblTitolo;
    IBOutlet UIImageView *prodottoImageView;
    IBOutlet UITextView *textViewDescrizione;
}
 
@property (nonatomic, retain) IBOutlet UIToolbar *toolbar;
@property (nonatomic, retain) id detailItem;
 
@property (nonatomic, retain) IBOutlet UILabel *lblTitolo;
@property (nonatomic, retain) IBOutlet UIImageView *prodottoImageView;
@property (nonatomic, retain) IBOutlet UITextView *textViewDescrizione;
 
@end

Abbiamo semplicemente dichiarato i 3 oggetti che comporranno l’interfaccia della DetailView nella nostra App.

Salviamo e andiamo quindi a disegnare l’interfaccia grafica, in questo caso, davvero molto semplice. Facciamo doppio-click sul file “DetailView.xib” in modo da aprire Interface Builder. Trasciniamo dentro la nostra vista i seguenti oggetti:

• N. 1 UILabel
• N. 1 UIImageView
• N. 1 UITextView

Clicchiamo su “File’sOwner” e dalla finestra “Detail View Controller Connection” colleghiamo i tre nuovi oggetti con i rispettivi dichiarati precedentemente via Xcode (lblTitolo, prodottoImageView e textViewDescrizione).

Prima di chiudere verificate le impostazioni per ogni oggetto nella finestra “View Size” e in particolare la configurazione nella sezione “Autosizing“. Questi accorgimenti vi eviteranno brutti scherzi quando la vostra applicazione passerà dalla modalità portrait (verticale) a landscape (orizzontale) e viceversa. Potete effettuare delle prove sul funzionamento dell’interfaccia direttamente da Interface Builder cliccando la “frecciolina” che trovate in alto a destra nella view.

Terminate le personalizzazioni possiamo salvare e chiudere Interface Builder.

Apriamo il file DetailViewController.m e iniziamo ad aggiungere i tre oggetti alla riga del @synthesize:

@synthesize toolbar, popoverController, detailItem, lblTitolo, prodottoImageView, textViewDescrizione;

Modifichiamo quindi i successivi due metodi come segue:

- (void)setDetailItem:(id)newDetailItem {
    if (detailItem != newDetailItem) {
        [detailItem release];
        detailItem = [newDetailItem retain];
 
        // Update the view.
        [self configureView];
 
        NSString *nomeImmagine = [NSString stringWithFormat:@"%@.jpg", detailItem];
        [self.prodottoImageView setImage:[UIImage imageNamed:nomeImmagine]];
 
        NSString *testo = [NSString stringWithFormat:@"Testo di prova per la categoria %@", detailItem];
        self.textViewDescrizione.text = testo;
    }
 
    if (popoverController != nil) {
        [popoverController dismissPopoverAnimated:YES];
    }        
}
 
- (void)configureView {
    // Update the user interface for the detail item.
	self.lblTitolo.text = [detailItem description];
}

In questo modo non faremo altro che caricare i dati corretti nella DetailView, in base alle scelte dell’utente. A questo punto non ci rimane altro che rilasciare gli oggetti, per i soliti discorsi di corretta gestione della memoria:

- (void)dealloc {
    [popoverController release];
    [toolbar release];
 
    [detailItem release];
    [lblTitolo release];
    [prodottoImageView release];
    [textViewDescrizione release];
 
    [super dealloc];
}

Con il primo tutorial di programmazione iPad abbiamo terminato, potete cliccare su “Build & Run” e testare l’applicazione sul vostro simulatore iPad, a meno che non siate già tra i pochi fortunati possessori di questo fantastico dispositivo, che ancora deve uscire nel nostro paese.

Concludiamo l’articolo mostrandovi un paio di screenshot dell’applicazione iPad appena creata in esecuzione, in entrambe le modalità:

Esecuzione in modalità Landscape

Esecuzione in modalità Portrait

Alla prossima