Stefano e Lori Blog

Nella prima parte abbiamo creato l’oggetto “Model” della applicazione Currency converter, i questa seconda parte creeremo l’oggetto “View” cioè l’interfaccia grafica dell’applicazione. Per creare l’interfaccia grafica il tool di sviluppo Xcode mette a disposizione un’applicazione chiamata Interface Builder. IB ci permette di creare in modo visuale un’interfaccia grafica funzionante attraverso una libreria di oggetti grafici standard predefiniti (UI design) e una finestra ispettiva dove possiamo impostare le proprietà di ogni oggetto. IB permette inoltre di creare i collegamenti fra i vari oggetti grafici.

I file Nib

Ogni applicazione Cocoa dotata di interfaccia grafica ha almeno un Nib file. Il Nib file principale viene caricato automaticamente all’avvio dell’applicazione e generalmente contiene un menu e una finestra con altri oggetti sopra.

Ogni Nib file contiene:

• Archivio degli oggetti: esso contiene le informazioni sugli oggetti come le dimensioni, il posizionamento e la posizione nella gerarchia degli oggetti. Il livello più alto delle gerchia degli oggetti archiviati è occupato da File’s Owner object, una specie di proxy che in fase di runtime diventa l’oggetto padrone del Nib file.
• Immaggini: le immagini che compongono la nostra interfaccia utente come ad esempio bottoni o pulsanti.
• Class references: IB conserva le informazioni sugli oggetti che compongono l’interfaccia ma non conosce le classi che avete sviluppato, come ad esempio la nostra classe Converter che rappresenta il “model” della nostra applicazione, perchè non può accedere al loro codice. Per ogniuna di queste classi IB mette a disposizione una specie di oggetto proxy a cui vengono applicate le informazioni sulla classe.
• Connection information: le informazioni circa i collegamenti fra i vari oggetti che compongono l’interfaccia.

Apriamo Interface Builder

Per aprire il IB è sufficiente fare doppio click sul file MainMenu.xib nella finestra di progetto di Xcode. Currency Converter ha una finestra principale (Main Window) sulla quale si eseguono tutte le operazioni che svolge l’applicazione. IB crea per noi un Main Menu con alcuni menu di default e una finestra che rappresenta la Main Windows di Currency Converter. L’interfaccia di IB è costituita poi da altre 3 finestre:

• Library: contiene tutti gli oggetti, le classi e i media che possiamo utilizzare nella nostra applicazione. Possiamo inserire nella libreria oggetti, classi e  media personalizzati.
• Attributes o inspector: contiene gli attributi dell’oggetto correntemente selezionato. Se ad esempio selezionate la nostra Main Window nella finestra compariranno tutti i relativi attributi.
• La finestra principale: quale file nib è aperto e quali sono gli oggetti che lo compongono.

Come si presenta IB appena lo apro cliccando su MainMenu.xib Di Currency Converter

Conviene dare uno sguardo a IB per familiarizzare con le sue componenti prima di andare avanti, io ci ho passato un paio d’ore giocando con gli oggetti e cercando di capirne le caratteristiche attraverso l’ispector. Magari fatelo su un progetto vuoto.

Modifichiamo la Main Window

Possiamo ridimensionare la finestra manualmente semplicemente afferrandola per l’angolo in basso a destra. Selezionando la finestra e facendo clic sull’iconcina a forma di righello nell’ispector possiamo impostare nei campi width e height i valori 400 e 200 per dimensionare correttamente la finestra. Possiamo inoltre scegliere la posizione iniziale della finestra, che normalmente dovrebbe essere in alto a sinistra.

Cliccando sulla prima iconcina nell’ispector possiamo impostare gli attributi della finestra fra cui il titolo. IB ha già impostato questo valore con il nome dell’applicazione, questo è sicuramente un buon titolo in questo caso quindi lo lasciamo inalterato.

Inseriamo i textField

Nella finestra libreria selezioniamo Objects per mostrare gli oggetti e poi navighiamo nella libreria Library -> Cocoa -> Views & Cells -> Inputs & Values.

Prendiamo l’oggetto NSTextField e trasciniamolo nella finestra di Currency Converter, IB ci guiderà nel corretto posizionamento del campo in alto a destra mostrandoci delle linee guida quando ci avviciniamo ai bordi della finestra.

Avvicinandosi ai bordi e ad altri oggetti IB mostra delle comode linee guida per allineare e distanziare correttamente gli oggetti

Allunghiamo il campo appena aggiunto per portarlo intorno ai 150 pixel di lunghezza. Con il campo selezionato premiamo Ctrl-D per duplicarlo. Posizioniamo il campo duplicato immediatamente sotto il precedente sfruttando sempre le solite linee guida. Ripetiamo l’operazione per il terzo campo.

Aggiungiamo ora le etichette che indicano cosa sono i tre campi che abbiamo appena aggiunti. Prendiamo una label dalla Library e posizioniamola a sinistra del primo campo di testo. Nell’ispector negli attributi della label impostate l’allineamento a destra e il titolo della label “Exchange Rate per €1:”. Stiamo facendo l’applicazione in inglese come nel tutorial perché poi proveremo a creare la localizzazione in italiano.

Ridimensioniamo la label in modo che compaia tutto il testo. Ripetiamo per le altre due label “Euro to convert” e “Amount in Other Currency:”

Adesso la finestra di Currency Converter dovrebbe essere così

Per concludere dobbiamo impostare l’attributo Editable del 3° TextField su false in modo che l’utente non possa cambiare il valore del campo. Selezioniamo quindi il 3° TextField e nell’ispector visualizziamo gli attributi e deselezioniamo Editable. Lasciamo invece selezionato Selectable per permettere la selezione e il copia del valore.

Inseriamo e configuriamo il pulsante.

Dalla Library prendiamo nella sezione Buttons un PushButton e posizioniamolo al di sotto del 3° campo di testo. Spostiamolo un pò più giu. Doppio Click sul pulsante appena aggiunto per modificare il titolo in “Convert”. Inseriamo un linea di separazione fra il bottone e i campi di testo. Come al solito la prendiamo dalla Library e l’allineiamo tramite le linee guida subito sotto il 3° campo di testo, allunghiamola a destra e sinistra fin quando non compaiono le linee guida. Posizioniamo il pulsante convert subito al di sotto del separatore sempre usufruendo delle guide automatiche. Seguire queste guide automatiche è importantissimo perché sono gli spazi raccomandati dalla guida Apple Human Interface Guidelines. La Apple Human Interface Guidelines è veramente una sorta di testo sacro sull’interfaccia grafica del mac e dovrebbe assolutamente essere letta e studiata per comprendere a fondo come realizzare un’interfaccia in perfetto stile Apple.

Rifiniamo la nostra interfaccia

Possiamo rifinire l’interfaccia appena creata sfruttando qualche funzionalità di IB. Selezioniamo tutte e 3 le Label e clicchiamo sul menu Layout > Size to fit per dimensionare le Label alla loro larghezza minima. Clicchiamo poi sempre su Layout > Alignment > Align Right Edges per allineare le Label sull’angolo destro. Spostiamo infine le Label sulla sinistra fin quando non appare la linea guida. Selezioniamo e spostiamo a sinistra i 3 Text Field fin quando non compare la linea guida. Dimensioniamo ora nuovamente il Separatore per farlo coincidere con il lato destro dei Text Field. Spostiamo il pulsante per centrarlo con l’ultimo Text Field. Ridimensioniamo la finestra fin quando non compaiono tutte le linee guida. Ok l’interfaccia è ottimizzata più facile a farsi che a dirsi.

La finestra di Currency Converter finita

Ultima chicca impostiamo il tasto return come Key Equivalent per premere il pulsante. Selezioniamo il pulsante e andiamo negli attributi, selezioniamo l’attributo Key Equiv. e premiamo il tasto return.

Abilitiamo il Tabbing fra i campi di testo

Vogliamo fare in modo che premendo il tatso Tab si passi da un campo all’altro. Per far ciò selezioniamo il campo Exchange Rate e tenendo premuto il tasto Ctrl clicchiamo e tiriamo un collegamento fino al campo Euro to convert. Nella pannello semitrasparente selezioniamo nel gruppo Outlets  ”nextKeyView”. Ripetiamo la procedura all’inverso.

Impostiamo il First Responder

Impostiamo Exchange Rate come primo campo selezionato all’avvio dell’applicazione. Per far ciò dobbiamo selezionare l’istanza della nostra finestra nella finestra MainMenu.nib  e tenendo premuto il tasto Ctrl creare una connessione con il campo Exchange Rate per €1. Nel pannello che appare selezioniamo “initialFirstResponder”.

Bene ora la nostra interfaccia è pronta possiamo salvare e testare l’interfaccia attraverso il menu File > Simulate Interface.

Nella prossima parte realizzeremo il Controller, cioè il ponte fra l’interfaccia (View) e il Model.