iPhone and Go

13th ottobre, 2008

Gestione NSView in Cocoa. Per: “progetto cresciamo insieme” [n.1] Parte 1

by Stefano Lodu

Secondo articolo per il "concorso : cresciamo insieme" n.1
Scritto da Alessandro - prima parte

Salve a tutti,

prima di cominciare mi sembra doveroso presentarmi: mi chiamo Alessandro e programmo su Macintosh da diversi anni, soprattutto in Cocoa e Applescript. Appena sono venuto a conoscenza dell’iniziativa di Stefano sul suo interessantissimo sito www.iphoneandgo.it, ho deciso di scrivere questo piccolo tutorial per esplorare alcune delle possibilità offerte dal framework di Cocoa, che Apple mette a disposizione gratuitamente per tutti coloro che vogliono cominciare o che già conoscono un linguaggio di programmazione e vogliono imparare a programmare in Objective-C.

Al momento in cui scrivo non dispongo, purtroppo (sob!), di un computer con Mac OS X Leopard e del relativo pacchetto di sviluppo per iPhone, ma pare che martedì prossimo Apple presenterà i suoi nuovi portatili, allora state certi che nel giro di qualche settimana avrò sia l’uno che l’altro!

In alternativa, ho deciso di scrivere qualche riga per mostrare ai neofiti (so benissimo quanto si abbia bisogno di esempi, quando si comincia!) come utilizzare alcune semplici librerie di Cocoa che riguardano l’input da tastiera, il disegno tramite NSView e in generale l’organizzazione necessaria per ottenere un codice pulito e facile da maneggiare. Credetemi: la bravura di un programmatore non sta solamente nella conoscenza che ha del suo linguaggio di programmazione preferito, sta soprattutto nell’ordine (del codice e mentale) con cui riesce a organizzare il software. Ma bando alle ciance!

1. Cominciamo!

Per cominciare, ho pensato a un vecchio gioco che mi ha sempre tanto divertito quanto annoiato: il vecchio Memo Colors. Sinceramente non so se si chiami davvero così: è quel gioco in cui un cerchio è diviso in quattro spicchi colorati che si illuminano e suonano in una certa sequenza, di solito sempre più lunga e difficile, che voi dovete ripetere senza errori. Divertente, ma un po’ noioso per me: non ricordo né un nome né un viso, ma una sequenza di suoni e colori mi basta vederla una volta e ripeterla è un gioco da ragazzi. Va be’, tagliamo!

1) Iniziamo con il creare il nostro progetto: per questo tutorial, andrà bene una semplice Cocoa Application. Dal menu File -> New Project e scegliete Cocoa Application.

2) Create il progetto e chiamatelo, per esempio, MemoColors. Il nome non è importante, ma è buona norma usare sempre le iniziali maiuscole, anche quando il nome è formato di più parole attaccate.

3) Dopo aver creato il progetto, dovreste vedere una finestra simile a questa:

4) Di default, XCode crea tutto quello di cui abbiamo bisogno per una normale applicazione: headers, collegamento alle principali librerie, interfaccia grafica. MemoColors è in rosso perché non è ancora stato compilato e quindi creato: questo è compito nostro! Se volete, potete già compilare il programma (Control+R) e vedere cosa succede. Il risultato non sarà dei più eccitanti, ma se non si verificano errori significa che tutto è a posto e possiamo cominciare ad aggiungere il nostro codice. Allora cominciamo!

2. NSView

5) Dato che il nostro programma dovrà disegnare, anche se in forma grossolana, le quattro aree colorate che ricordano il gioco, dobbiamo aggiungere al progetto un nuovo file, che si occuperà esclusivamente del disegno. Andiamo su File -> New File… e scegliamo Objective-C NSView subclass.

6) Ho chiamato questo file AreaDiGioco, ma potete dargli un nome qualunque. L’importante è che per voi sia chiaro che questo file (e il suo nome dovrebbe suggerirlo) si occuperà di disegnare e aggiornare quanto visivamente apparirà lanciando il programma.

7) Una volta creato, questo file apparirà così:

3. Preliminari

Come abbiamo detto, questo file si occuperà di disegnare ciò che vedremo una volta lanciata l’applicazione. Per poter utilizzare questo file, però, dobbiamo prima integrarlo con Interface Builder. Per fare questo apriamo Interface Builder, prendiamo il file AreaDiGioco.h dall’elenco dei file di XCode, e trasciniamolo sulla finestra MainMenu.nib. Il file a questo punto è stato accettato dall’interfaccia ed è disponibile per ogni successiva manipolazione:

9) Perfetto! Quello che vogliamo ora, è che il programma utilizzi, una volta lanciato, una NSView, o meglio la “nostra” NSView, per mostrare ciò che succede sullo schermo. Per fare questo, bisogna per prima cosa aggiungere alla finestra principale una vista generica, e poi specificare che si tratta della “nostra” vista, ossia che il comportamento della vista verrà gestito dal file AreaDiGioco che abbiamo creato in XCode:

10) Adattate la finestra e la CustomView in modo che combacino (ho scelto le dimensioni 320×480, come lo schermo del Melafonino) e assegnate alla CustomView (che non è altro che una vista generica) la tipologia corretta, ossia la nostra AreaDiGioco:

11) A questo punto torniamo in XCode, e andiamo a modificare il codice in modo che l’intera area visualizzata venga colorata di grigio. Non è molto allegro, ma almeno saremo sicuri che tutto sta funzionando nella maniera corretta:

12) A questo punto compiliamo il programma. Dovrebbe apparire una finestra completamente grigia, come questa:

4. Aggiungiamo i colori

13) Bene, siamo sulla buona strada! Adesso, andiamo a creare la funzione che mostrerà le quattro aree con i quattro diversi colori scelti. La funzione è molto semplice: prima crea un rettangolo (NSRect), poi un’area basata su quel rettangolo (NSBezierPath), infine imposta un colore e lo applica all’area. Molto semplice. Il nome che ho usato per la funzione è: mostraAreeColorate, o meglio – (void)mostraAreeColorate. La funzione non restituisce alcun valore (void, infatti) perché non ci interessa avere un riscontro, l’importante è che faccia quello che deve. Cominciamo con un colore alla volta: come prima cosa, proviamo a colorare di verde il riquadro in basso a sinistra.

Dato che l’altezza e la larghezza della finestra della nostra applicazione non cambieranno, è conveniente definirli come costanti. Alla riga 11 del codice di AreaDiGioco.m vengono infatti definite le costanti ALTEZZA e LARGHEZZA, che ci serviranno per tutto il tutorial.

Una volta definite altezza e larghezza, creiamo il rettangolo che useremo come base per definire un’area, scegliamo il colore verde [NSColor greenColor] e lo usiamo per riempire l’area appena definita. Facile, no?

PS: Se non avete definito la funzione – (void)mostraAreeColorate anche nell’header del file, ossia: AreaDiGioco.h, il compilatore vi segnalerà un warning (riga 35). Non è importante, ma è meglio evitare queste piccole imprecisioni quando si andrà in fase di release vera e propria.

14) Una volta definito il primo riquadro colorato, procediamo nello stesso modo per gli altri tre. Il codice risultante sarà questo:

15) L’utilizzo dei commenti dovrebbe essere limitato in fase di release, ma per testare il codice non solo è molto utile: è decisamente indispensabile! A questo punto, lanciate la vostra applicazione. Il risultato finale dovrebbe essere molto simile a questo. Certo, non sarà la Gioconda, ma con appena 16 righe di codice è un ottimo risultato!

Parte 2a

iPhoneandGo - Lodu - iPhoneandGo@gmail.com