Introd Uzi One Cocoa

COCOA TUTORIAL

Introduzione

Copyright 2008 - Xcode Italia

L’obiettivo di questo tutorial è quello introdurre l’utilizzo 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.

L’applicazione che ci apprestiamo a creare si chiamerà Slider, che farà comparire un numero all’interno 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 l’applicazione, dal menù File selezioniamo New Project.A questo punto scorriamo l’elenco 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.


Ma che cosa abbiamo fatto eseguendo i semplici passi precedentemente descritti ?

Abbiamo creato la nostra prima applicazione per MacOSX.Ora provate a cliccare sull’icona con scritto Build and Go; visto ?

L a b a r r a d e i m e n u è cambiata, ora non è più quella di XCode, ma bensì q u e l l a d e l l a n o s t r a 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” l’applicazione 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 l’ambiente all’interno 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 l’applicazione 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 l’abbiamo 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 all’inizio, il nostro scopo è quello di creare una applicazione che mostri, all’interno di una casella, un numero a seconda di dove posizioneremo un cursore lungo una barra.


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 l’aspetto grafico delle applicazioni.Quindi, rifacendovi all’immagine, fate doppio click su MainMenu.nib.

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


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 l’aspetto della nostra applicazione.Prima di procedere con il modificare l’applicazione 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 all’immagine precedente, troviamo nell’ordine, 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;

-L’inspector 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 l’applicazione, compare new application, come mostrato nelle due immagini seguenti.

Questo accade per impostazione di default di XCode/Interface Builder .


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 dell’Inspector, 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.


Ora tornate ad XCode e cliccate su Build and Go.Una volta compilata e avviata l’applicazione, noterete subito che l’aspetto è cambiato ma, se provate a muovere il cursore della barra, non accade nulla di quello che ci siamo prefissati.


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 dell’Inspector 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 l’obiettivo della nostra applicazione, lo possiamo tradurre come “l’oggetto text field riceve un valore da l’oggetto slider”.Noterete che nella frase ci sono tre parole evidenziate rispetto al resto; perchè ?

Provate ad esaminare con attenzione l’immagine; non notate delle a s s o n a n z e c o n l e p a r o l e 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; l’importante è avere ben chiaro il concetto che, in questo modo, possiamo fare Copyright 2008 - Xcode Italia

accettare all’oggetto 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.L’operazione è alquanto semplice :

Selezionate il controllo Horizontal Slider e con il tasto control (crtl) premuto, trascinate il puntatore del mouse sull’oggetto Text Field, quindi rilasciate il tasto control.

Questo è quello che vedrete :

Scorrete quindi l’elenco e selezionate takeintValueFrom.

Per capire quello che è successo scegliete un oggetto alla volta e controllate la tab connection dell’Inspector.

Come si vede nella sezione Sent Actions dell’oggetto Slider e nella sezione Received Actions dell’oggetto Text Field, è comparsa la connessione.Questo sta ad indicare che l’oggetto Slider trasmetterà all’oggetto Text Field, che lo riceverà, un valore corrispondente alla


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 u n ’ a l t r a l i n g u a d i v e r s a d a l l ’ i n g l e s e , a f f r o n t e r e m o l’implementazione delle classi e inizieremo ad introdurci nel linguaggio Ojective-C.

LagMac


Documents

Introd Uzi One Cocoa