COCOA TUTORIAL Introduzione

Copyright 2008 - Xcode Italia

Lobiettivo di questo tutorial quello introdurre lutilizzo di XCode ed, in particolare, Cocoa. Ora quindi non star a spiegare cosa XCode e cosa sia Cocoa, in quanto si presume che chi stia leggendo sappia almeno i significati di entrambi i termini. Quindi andiamo subito ad iniziare. Quello che andremo a realizzare, a partire da questa prima parte e nelle altre a seguire, sar una piccola applicazione, sicuramente di nessuna utilit, ma che ci potr far comprendere le basi per un utilizzo pi avanzato di Xcode e Cocoa. Lapplicazione che ci apprestiamo a creare si chiamer Slider, che far comparire un numero allinterno di una casella di testo a seconda della posizione di un cursore su una barra di scorrimento, slider appunto. Per prima cosa lanciamo XCode e, una volta avviata lapplicazione, dal men File selezioniamo New Project. A questo punto scorriamo lelenco fino a trovare la voce Cocoa Application, selezioniamola e premiamo Next. Inseriamo il nome per il nostro progetto, nel nostro caso Slider e il percorso sul nostro Hard Disk dove vogliamo che il nostro progetto venga salvato.Per concludere premiamo Finish.

Arrivati a questo punto sulla scrivania si presenter una finestra contente tutti i file base del progetto, che XCode ha creato automaticamente per noi.

Copyright 2008 - Xcode Italia

Ma che cosa abbiamo fatto precedentemente descritti ?

eseguendo

semplici

passi

Abbiamo creato la nostra prima applicazione per MacOSX. Ora provate a cliccare sullicona con scritto Build and Go; visto ? La barra dei menu cambiata, ora non pi quella di XCode, ma bens quella della nostra applicazione e sul desktop comparsa una finestra, la finestra principale della nostra applicazione. Anche sul dock vediamo che comparsa una nuova icona, quella della applicazione che abbiamo appena creato. Quello che avete fatto, cliccando su build and go stato letteralmente costruire e lanciare lapplicazione Slider. In realt il termine tecnico compilare, ma questo lo vedremo in un secondo momento. Per ora vi basti sapere che, ogni volta che cliccherete su build and go creerete e lancerete la vostra applicazione. Ma possibile che creare una applicazione per MacOSX sia cos semplice. La risposta sia si che no. Si, perch OSX ci mette a disposizione XCode, che altro non che lambiente allinterno del quale vengono sviluppate le applicazioni, il quale a sua volta ci mette a disposizione una variet di strumenti che semplificano di molto lo sviluppo. E il no ? Se provate ad utilizzare lapplicazione che avete appena creato, noterete subito che non in grado di fare praticamente nulla, se non mostrare una finestra vuota a video. Per far si che serva a qualche cosa,saremo noi che dovremo dirgli che cosa fare. Ma in che modo ? Programmando. Ovvero scrivendo delle istruzioni che a seconda dei casi faranno fare alla applicazione quello per cui labbiamo pensata. Ora per voglio svelarvi un segreto : alla fine di questo tutorial la nostra applicazione riuscir ugualmente a fare qualche cosa senza che noi abbiamo scritto una singola riga di codice, o istruzioni che dir si voglia. Riprendiamo ora a lavorare alla nostra applicazione. Come si diceva allinizio, il nostro scopo quello di creare una applicazione che mostri, allinterno di una casella, un numero a seconda di dove posizioneremo un cursore lungo una barra.
Copyright 2008 - Xcode Italia

Se vi ricordate, la finestra della applicazione per non mostrava la casella di testo, ne tanto meno la barra con il cursore. E arrivato quindi il momento di aggiungere questi due elementi fondamentali. Per fare ci dovrete lanciare Interface Builder. Interface Builder la parte di Xcode che ha il compito di agevolarci nel realizzare laspetto grafico delle applicazioni. Quindi, rifacendovi allimmagine, fate doppio click su MainMenu.nib.

Verr lanciato Interface Builder e vi troverete nella situazione della immagine seguente.

Copyright 2008 - Xcode Italia

Ma cosa sono e a che cosa servono tutte queste finestre ? Come gi accennato, Interface Builder il componente di XCode che ci permette di creare e modificare laspetto della nostra applicazione. Prima di procedere con il modificare lapplicazione Slider, secondo le nostre esigenze, vediamo di spiegare brevemente cosa sono e a cosa servono le finestre che compaiono a video una volta lanciato Interface Builder. Facendo riferimento allimmagine precedente, troviamo nellordine, da destra a sinistra, quanto segue : - la palette degli strumenti divisa in object e media, dalla quale con un semplice drag and drop sulla finestra della applicazione, potremo aggiungere componenti alla nostra interfaccia grafica; - Linspector che, oltre a riassumere le informazione del componente selezionato, ci permetter anche di modificarlo; - MainMenu.nib che ne riassume il contenuto; - La finestra principale della nostra applicazione; - Il men della nostra applicazione. Le funzioni svolte le esamineremo di volta in volta che si render necessario, onde evitare di scrivere pagine di teoria, per poi essercele scordate al momento di applicarle. Se osserviamo bene, possiamo notare una prima cosa che non torna, ovvero che il men della applicazione riporta la dicitura NEW APPLICATION invece di Slider. La stessa cosa la noterete se cliccate su New Application e Help. Ovunque, al posto del nome che abbiamo scelto per lapplicazione, compare new application, come mostrato nelle due immagini seguenti.

Questo accade Builder .

per

impostazione

di

default

di

XCode/Interface

Copyright 2008 - Xcode Italia

Sar nostro compito modificare New Application con il nome da noi scelto. Per fare ci cliccate due volte su New Application e digitate il nome scelto, ovvero Slider, quindi confermate premendo invio. Usate lo stesso metodo per modificare tutte le scritte New Application in Slider. Una volta terminato il risultato sar questo :

Semplice vero ? Ora passiamo ad inserire i due componenti principali che serviranno per il funzionamento della applicazione. Nel nostro caso saranno una Slide bar e un Text Field. Per farlo, scorriamo la finestra degli strumenti fino a trovare il componente Horizontal Slider (NSSlider) e semplicemente, trasciniamolo sulla finestra principale della applicazione Slider. Facciamo la stessa cosa per il componente Text Field (NSTextField). Posizionate e ridimensionate a vostro piacimento i due componenti, quindi salvate il lavoro fin qui svolto. Ma se volessi posizionare gli oggetti in un determinato modo ? Per esempio tutti e due centrati verticalmente e orizzontalmente nella finestra ? Oppure centrati tra loro e cos via ? Anche in questo caso ci vengono in aiuto gli strumenti di interface builder. Nella finestra dellInspector, clicchiamo sulla icona a forma di righello. Questo aprir una tab che permetter di posizionare i componenti, secondo schemi predefiniti sia tra di loro che rispetto alla finestra. Quando siete soddisfatti del vostro lavoro, salvatelo. Tutte le immagini di riferimento le trovate nella pagina seguente.
Copyright 2008 - Xcode Italia

Ora tornate ad XCode e cliccate su Build and Go. Una volta compilata e avviata lapplicazione, noterete subito che laspetto cambiato ma, se provate a muovere il cursore della barra, non accade nulla di quello che ci siamo prefissati.
Copyright 2008 - Xcode Italia

Questo perch non abbiamo ancora detto alla nostra applicazione che cosa deve fare se si muove il cursore. Rinfreschiamoci la memoria : il nostro scopo quello di far si che al movimento del cursore compaia nella casella di testo il valore numerico relativo alla posizione del cursore stesso. Per fare ci ritornate ad Interface Builder, nella finestra dellInspector cliccate sulla icona blu con la freccia bianca al centro, quinsi selezionate la casella di testo nella finestra della applicazione. Cosa ci mostra questo pannello ? Semplicemente le connessioni disponibili per il nostro oggetto Text Field. Tenendo sempre a mente lobiettivo della nostra applicazione, lo possiamo tradurre come loggetto text field riceve un valore da loggetto slider. Noterete che nella frase ci sono tre parole evidenziate rispetto al resto; perch ? Provate ad esaminare con attenzione limmagine; non notate delle assonanze con le parole evidenziate ? Received Actions non vi dice nulla ? E tutti quei take...ValueFrom ? Vediamo di chiarire un p. Nella sezione Received Actions, troviamo tutte le azioni che possono essere ricevute dal nostro oggetto. Tra queste ce ne sono alcune pi interessanti per il nostro progetto. Sono quelle che iniziano con il termine take letteralmente prendere e finiscono con from in italiano da. Noi dovremo usare una di queste, ma quale tra le disponibili ? Quella che interessa a noi takeIntValueFrom. Tradotto in italiano significa prendi un valore int (intero o integer in inglese) da. Ora non mi soffermer a spiegare la differenza tra tipo di dato int, float, double, ecc.. non essendo lo scopo primario di questo tutorial e che affronteremo in una prossima puntata; limportante avere ben chiaro il concetto che, in questo modo, possiamo fare
Copyright 2008 - Xcode Italia

accettare alloggetto Text Field un valore proveniente da un altro oggetto. A questo punto arrivato il momento di creare fisicamente la connessione tra i due oggetti Text Field e Horizontal Slider. Loperazione alquanto semplice :

Selezionate il controllo Horizontal Slider e con il tasto control (crtl) premuto, trascinate il puntatore del mouse sulloggetto Text Field, quindi rilasciate il tasto control.
Questo quello che vedrete :

Scorrete quindi lelenco e selezionate takeintValueFrom. Per capire quello che successo scegliete un oggetto alla volta e controllate la tab connection dellInspector. Come si vede nella sezione Sent Actions delloggetto Slider e nella sezione Received Actions delloggetto Text Field, comparsa la connessione. Questo sta ad indicare che loggetto Slider trasmetter alloggetto Text Field, che lo ricever, un valore corrispondente alla
Copyright 2008 - Xcode Italia

posizione del cursore lungo la barra. Salvate il lavoro fin qui svolto, tornate a XCode, compilate ed eseguite. Se ora provate a muovere il cursore lungo la barra, una volta che rilascerete il mouse vedrete comparire nella casella il valore corrispondente. Si conclude cos il tutorial su come creare una applicazione tramite Cocoa. Quello che avete fatto non nulla di particolare, ma avete appreso i primi rudimenti per potervi muovere, in futuro, attraverso le varie componenti di XCode. Nei prossimi tutorial vedremo come localizzare una applicazione in unaltra lingua diversa dallinglese, affronteremo limplementazione delle classi e inizieremo ad introdurci nel linguaggio Ojective-C. LagMac

Copyright 2008 - Xcode Italia