Dal progetto appena creato clickiamo due volte sul file testViewController.xib, si aprirà interfaceBuilder in tutto il suo splendore!

La piccola finestra principale contiene gli elementi della nostra interfaccia:

I tre elementi che contengono rappresentano il vero cuore della nostra applicazione.

• File's Owner è un proxy che si riferisce al controller della nostra vita, le azioni che la nostra applicazione dovrà fare passeranno per questa classe.
• First Responder è un proxy che si riferisce al'oggetto delegato a rispondere agli eventi, per il momento possiamo ignorarlo, ne parleremo in seguito.
• View è l'oggetto grafico vero e proprio, rappresentato a parte su interface builder

La view è la nostra area di lavoro, qui andremo ad inserire le nostre subview (gli elementi grafici) per rendere la nostra applicazione funzionale alle nostre esigenze.

Tocca poi al pannello delle proprietà:

Il pannello è diviso in 4 aree:

• Attributi - Qui possiamo gestire gli attributi visuali dell'oggetto selezionato, per esempio se selezioniamo una label possiamo definire il font, l'allineamento e così via.
• Connessioni - Ne parleremo abbondamente in questo paragrafo, al momento sappiate solo che qui possiamo definire in maniera visuale e veloce le connessioni tra i nostri oggetti su xCode e gli elementi visuali creati su interfaceBuilder.
• Dimensioni - Qui possiamo gestire le dimensioni dei nostri elementi.
• Identità - Qui possiamo dare un nome alla classe relativo all'element ed aggiungere action, outlet (anche su questi elementi parleremo abbondantemente) e definire l'identità con cui IB si riferisce all'oggetto.

L'ultimo pannello è quello della libreria

Da questo pannello possiamo scegliere gli elementi grafici da inserire nella nostra view.

Usiamolo subito per creare la nostra prima, semplice interfaccia:

Ho aggiunto una Label, un Round Rect Button e una Text Field. Ho poi usato il pannello delle proprietà per settare il "Placeholder" per il text field, un semplice doppio click per assegnare un'etichetta al mio pulsante e regolato posizione e dimensioni spostando e ridimensionando i miei oggetti!

Possiamo aggiungere altri attributi, per esempio al text field:

• Capitalize - Rende maiuscola la prima lettera di ogni parola
• Correction - Abilita o disabilita le correzioni automatiche
• Keyboard type - Seleziona la tipologia di tastiera da presentare all'utente
• Apparence - Alert o view normale
• Return Key - Il pulsante da premere quando abbiamo finito la digitazione
• Auto-enable Return key e Secure saranno affrontati più in là

Il passo successivo è aggiungere le azioni (ciò che succede quando l'utente preme il pulsante) e le outlet (i riferimenti agli elementi di input e di output dell'interfaccia).

Per terminare la nostra interfaccia dobbiamo collegare gli elementi visuali a ciò che gestiremo poi a livello di codice. Selezioniamo "File's Owner" dall'interfaccia principale, quindi "Identity" dal pannello proprietà.

Aggiungiamo un'azione e due outlet come segue:

Ora colleghiamo l'azione al pulsante e le outlet al textfield e alla label, per farlo clickare con ctrl premuto sopra File's Owner, si aprirà un pannellino contenenti le nostre outlet e le nostre azioni, trasciniamole semplicemente negli elementi grafici corrispondenti

Abbiamo un ultimo collegamento da fare, dobbiamo infatti delegare il controller a gestire i messaggi ricevuti dall'elemento di input della nostra applicazione. Per farlo ctrl+click sul textfield

e trasciniamo delegate su File's Owner. In questo modo il nostro controller diventerà il delegato della textField. Nel prossimo capitolo capiremo cosa questo implichi.

Non ci resta che scrivere le modifiche nel file del controller su xCode.

Dal menu File selezioniamo Write Class File... selezioniamo la directory dove sono le nostre classi e alla richiesta di sostituzione clickiamo su Merge

Selezioniamo le modifiche e clickiamo su "Choose left" e quindi salva.

A questo punto su xCode abbiamo a disposizione le nostre classi pronte per essere editate.