Dopo molto tempo eccomi a riscrivere un tutorial sulla programmazione di iPhone. Si tratta di un semplice tutorial che però a me è stato utile per sviluppare (insieme a Fabiano) le applicazioni Calcio e Formula1 di iSpazio.
Vedremo come utilizzare una WebView, che ci permetterà di visualizzare una pagina web all’interno di una nostra applicazione! Realizzeremo, in sostanza, un piccolo browser, con tre semplici pulsanti: avanti, indietro e ricarica. Certo, non potremo competere con Safari (anche perchè in ultima analisi è ancora lui a mostrarci la pagina), ma potrebbe tornarci molto utile nelle nostre applicazioni!
Buona programmazione quindi!

1. Creiamo un nuovo progetto

Aprimo Xcode, selezioniamo “File -> New Project”. Nel menù che ci appare selezioniamo “View-based Application”, clicchiamo su “Choose…” e immettiamo come nome “MyBrowser” e fate clic su “Save”. Abbiamo così creato il nostro nuovo progetto.

Prima di definire l’aspetto della nostra applicazione, dichiariamo un componente che ci servirà (sarà il componente principale che caricherà le pagine web).
Apriamo il file “MyBrowserViewController.h” e inseriamo la seguente definizione:

Salviamo il file e apriamo “MyBrowserViewController.xib” per avviare Interface Builder.

2. Creare l’interfaccia grafica dell’applicazione

Il template che abbiamo utilizzato ci fornisce già una vista di base, noi iniziamo inserendo nella parte bassa della vista un componente di tipo UIToolbar e tre bottoni (UIBarButtonItem, quelli utilizzati nel capitolo 5), separando gli ultimi due tramite un “Flexible Space” (anche questo già visto). I primi due bottoni ci serviranno per muoverci tra le pagine visitate (i classici “Avanti” e “Indietro”), mentre il terzo servirà a ricaricare la pagina. Ecco come appare la barra appena definita:

Ora dobbiamo inserire la WebView. Dalla libreria scegliamo un componente “UIWebView” e inseriamolo nella nostra finestra. Ecco il risultato finale:

3. Definiamo i componenti e colleghiamo le azioni

Abbiamo già concluso con la definizione dell’interfaccia grafica. Dobbiamo ora definire i componenti che ci serviranno e collegare le relative azioni. Vedrete che si rivelerà tutto molto semplice, in quanto troveremo già tutto pronto.
Iniziamo cliccando sul “File’s Owner” (che troviamo nel Pannello dei documenti). Colleghiamo il componente “webView” (che è quello definito all’inizio del tutorial) con la UIWebView che abbiamo appena inserito nella nostra applicazione. Se abbiamo eseguito questo passaggio correttamente avremo un pannello “Connections Inspector” come questo:

Dopo aver fatto questo semplice collegamento, andiamo ancora nel Pannello dei documenti ed espandiamo il componente View e selezioniamo la UIWebView :

Andiamo nel “Connections Inspector” e noteremo che ci sono già delle azioni definite (“goBack”, “goForward”, etc.), non dovremo far altro che collegarle con i bottoni adeguati. Ecco le associazioni da fare:

• “goBack” con il bottone “<“, ovvero per tornare alla pagina precedente;
• “goForward” con il bottone “>”, ovvero per andare alla pagina successiva (della cronologia);
• “reload” con il bottone “Ricarica”, per ricaricare la pagina web.

Se avete eseguito tutto correttamente avrete un risultato come questo:

Tutto molto semplice e veloce!
Salviamo tutto e chiudiamo Interface Builder.

4. Inseriamo il codice necessario

Dobbiamo ora inserire il codice che si occupa di caricare la pagina web desiderata e mostrarla nella UIWebView. Utilizziamo un metodo che viene caricato all’avvio dell’applicazione, e che ci permette di settare i comportamenti iniziali del nostro browser.
Aprite il file “MyBrowserViewController.m” e inserite il seguente codice:

Come potete vedere si tratta solo di quattro istruzioni!
Definiamo, per prima cosa, l’indirizzo che vogliamo aprire (la variabile “indirizzo”), mentre nelle righe successive inizializiamo i componenti necessari per poter visualizzare la pagina (non preoccupatevi troppo, sono sempre questi da utilizzare). L’ultima istruzione, infine, serve a settare i componenti che abbiamo appena creato nella UIWebView, in modo che venga mostrata la pagina web all’utente.
E se volessimo caricare dei file HTML che abbiamo in locale? Semplice, modificate così parte del codice:

in questo modo caricherà il file “index.html” che si deve trovare, però, nella stessa cartella in cui viene seguita l’applicazione (quindi dovete prima importarla nel vostro progetto). Semplice vero?

Cliccate su “Build and Go!” e provate il vostro personalissimo browser!

Come potete vedere con pochi e semplici passaggi abbiamo creato un nostro personalissimo browser!

Se Avete Problemi, questo è il file di progetto.

La guida è stata realizzata da Andrea Busi per “Bubi Devs”. I meriti sono del legittimo autore.

1.257 visite