DevTutorial #8 – UIWebView: create un vostro mini-browser!

Andrea Busi The Time

8 gennaio 2009 Comments

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 UIWebView, 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 grafico 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:

#import 
 
@interface MyBrowserViewController : UIViewController {
	IBOutlet UIWebView *webView;
}
 
@end

Abbiamo semplicemente definito una UIWebView, che sarà il componente incaricato di caricare le pagine web. 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, 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) e spostiamoci nel Connections Inspector. 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:

#import "MyBrowserViewController.h"
 
@implementation MyBrowserViewController
 
-(void)viewDidLoad{
	//indirizzo web da caricare
	NSString *indirizzo = @"http://www.bubidevs.net";
	//crea un oggetto URL
	NSURL *url = [NSURL URLWithString:indirizzo];
	NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];
	// visualizza la pagina nella UIWebView
	[webView loadRequest:requestObj];
}

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 (riga 12), 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ì le righe 7 e 9 del codice precedente:

1 2	NSString indirizzo = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"]; NSURL url = [NSURL fileURLWithPath:indirizzo];

In questo modo verrà caricato 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!

Se Avete Problemi, questo è il file di progetto.

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

32 Comments

kraken
20 gennaio 2009 alle 20:06
ciao (dinuovo)
Ho seguito la tua ottima guida l’unico problema è che non hai spiegato (magari non volevi :p) come rendere “funzionanti” i tre (o più) tasti nella ToolBar!! :’(
saresti cosi gentile da spegarmi? mercì!
a presto

PS
un altra cosa, per caricare il sito in locale, devo mettere il database nella cartella resources?
(il percorso come sarebbe)?

Pps
scusa la newbaggine!
Replica
kraken
20 gennaio 2009 alle 20:42
altra cosa (scusa se rompo)
potresti dare un occhiata al mio file progetto (completamente simile alla tua guida) che non riesce a partire (ricevo 2 errori!!) o crash sul simulatore…possibilmente (se avrai tempo) potresti dirmi dove sbaglio (sono ore che controllo)
Replica
kraken
20 gennaio 2009 alle 20:42
dimenticavo il link:
http://www.sendspace.com/file/9stqp9
Replica
Andrea Busi
20 gennaio 2009 alle 20:44
Vero, hai pienamente ragione!!
Che tonto, mi sono dimenticato, ora provvedo subito a sistemare la guida..

ok, appena riesco provo a darci un’okkiata (magari anke subito )
Replica
kraken
20 gennaio 2009 alle 20:50
disponibilissimo, grazie mille!
Replica
Andrea Busi
20 gennaio 2009 alle 21:15
guida corretta, fammi sapere se trovi ancora errori!

ora guardo il tuo progetto..
Replica
kraken
20 gennaio 2009 alle 21:23
non sono una suocera è!

comunque:

“Ora spostiamoci nel file “webViewTutorialController.h”. Dobbiamo scrivere il codice che dica alla nostra applicazione (ed in particolare al componente webView) di caricare una determinata pagina web. Ecco il codice che dovete inserire (all’interno del metodo viewDidLoad che troverete già presente):” credo il file sia: webViewTutorialController.m
Non è che sono bstardo (non troppo, almeno), è che dicendomi di controllare l’ho fatto per davvero! (la prima volta mi era sfuggito!)
Replica
Andrea Busi
20 gennaio 2009 alle 22:08
certo che un po’ suocera lo sei!! scherzo ovviamente..
grazie, corretto anche questo errore!

ora guardo il tuo progetto (x davvero xò)..
Replica
iDo
18 luglio 2009 alle 10:40
Io invece non riesco a far caricare dall’applicazione il file html che si trova in locale. Provo ad utilizzare @”file://file.html” ma nada non lo carica.
Come fò?
Replica
iDo
18 luglio 2009 alle 15:34
Ciao Andrea,
ho provato a mettere nel codice la stringa @”file://nomefile.html” ma non mi carica la pagina come mai?
ah la pagina html in questione si trova nella stessa cartella del progetto
Replica
Andrea Busi
18 luglio 2009 alle 20:33
@iDo: ciao, strano.. se invece metti un indirizzo qualsiasi web funziona?
adex non riesco, ma più tardi provo a madarti un esempio
Replica
iDo
18 luglio 2009 alle 23:44
Si, se metto qualsiasi indirizzo web va alla grande
Replica
Nicola1975
22 agosto 2009 alle 06:53
Ciao Andrea e ciao a tutti. Sono un principiante che chiede aiuto.
Ho due problemi con questo tutorial.
Al punto 3, nella Document Window, trovo solo un componente “View” (quello con toolbar e webview), e non due come mostrato nel tutorial. Le View da inserire sono quindi una o due?
Inoltre, quando scelgo la suddetta View, nel menu a tendina “Class” dell’Identity Inspector non ho MainView, pur avendo già creato in precedenza la class e salvato il progetto. Perchè non la trovo?
Grazie.
Replica
Andrea Busi
22 agosto 2009 alle 16:47
@Nicola1975: stasera aggiorno il tutorial, questo ha dei punti sbagliati..
quello nuovo dovrebbe funzionare
Replica
Nicola1975
24 agosto 2009 alle 16:16
Grazie Andrea, ora funziona!

Per quanto riguarda il caricamento di un file locale (ad esempio index.html), ho trovato su internet questa riga di codice da inserire all’interno del metodo viewDidLoad, al posto di tutto il resto:

[webView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@”index” ofType:@”html”]isDirectory:NO]]];
Replica
Andrea Busi
26 agosto 2009 alle 11:42
@Nicola1975: si, così vai a leggere il file “index.hmtl” dalla directory del progetto.. è forse la soluzione migliore quella che hai trovato tu!
Replica
Andrea Busi
19 ottobre 2009 alle 00:42
articolo aggiornato, ora carica correttamente anche i file da locale
Replica
luigi
3 novembre 2009 alle 17:11
ma questa guida la si puo usare in presenza di una tab bar?
perche ho provato ad eseguirla ma mi da dei problemi nel caricamente della pagina web.
grazie
Replica
Andrea Busi
3 novembre 2009 alle 20:29
@luigi: certamente si.. prova a controllare di non aver omesso qualche passaggio, perchè deve funzionare
Replica
luigi
4 novembre 2009 alle 15:23
ciao andrea…lho rifatta piu volte ma nulla.
Nella Connection Inspector non riesco a trovare il metodo webView da collegare…ora provo direttamente con il tuo file e ti faccio sapere.
Eventualmente ti passo il file di progetto
Replica
luigi
4 novembre 2009 alle 16:41
Allora ci sono riuscito, era un mio grossolano errore.
Ho anche collegato la tabbar con UIWebView ma quando nella simulazione cerco di cliccare sul tab relativo l’applicazione smette di rispondere ed è come se si bloccasse!!
Replica
Francesco
22 novembre 2009 alle 23:57
Ho seguito con successo la tua guida per collegare l’applicazione ad un mini sito realizzato appositamente per iphone che tramite una semplice form-query interroga un db MySQL per ottenere informazioni. Mi chiedo se è lecito tuttavia da parte mia imporre la connessione ad un sito web quando lo scopo non è la navigazione e se la cosa non prgeiudichi troppo la qualità del servizio…..
Ciao e grazie!
Replica
Francesco
12 gennaio 2010 alle 18:38
é possibile collegare dei bottoni di una Navigation Bar con la UIWebView magari a pagine specifiche?
Replica
Andrea Busi
19 gennaio 2010 alle 22:37
@Francesco: certamente inserisci i componenti che ti servono (ad es la UINavigationBar) e poi inserisci i bottoni, collegandolo alle azioni, proprio come se fossero normalissimi bottoni!
Replica
Francesco
24 marzo 2010 alle 10:36
Ciao andrea,
volevo ringraziarti per la guida e allo stesso tempo volevo porgerti una domanda.
visualizzo direttamente da internet un pdf per mezzo di una UIWebView.
Come posso fare a salvare in locale il pdf visualizzato all’interno della UIWebView?

Ciao e grazie
Replica
Andrea Busi
24 marzo 2010 alle 13:49
@Francesco: ciao.. non ho ben capito, tu vuoi caricare un pdf da locale, oppure prima accedere da Internet, scaricare il pdf e salvarlo in locale, in modo da non doverlo più scaricare?
Replica
Francesco
25 marzo 2010 alle 14:19
Allora attualmente faccio cosi:
se il pdf è presente gia in locale visualizzo tramite uiwebview il pdf locale, in caso contrario lo visualizzo come un qualsiasi documento presente in rete e con una funzione fatta ad hoc effettuo il download del file per memorizzarlo in locale.
Come puoi vedere tale metodo non è ottimizzato in quanto alla fine è come se effettuassi due volte il download dello stesso file.
vorrei salvare automaticamente il pdf che visualizzo tramite uiwebview prelevandolo come contenuto di quest’ultima
Replica
Marco
17 giugno 2010 alle 13:24
Ciao Andre, la guida è perfetta ma avrei una domanda da farti. Hai presente che in Safari allargando e restringendo le dita, zummi la pagina…come è possibile farlo?
Replica
Andrea Busi
17 giugno 2010 alle 14:52
@Marco: non penso vada implementata come funzione, dovrebbe essere presente di default come comportamento in una UIWebView..
Replica
Marco
17 giugno 2010 alle 15:37
Sono entrato nel mio browser ma facendo come ti ho descritto sopra non succede niente
Replica
Andrea Busi
21 giugno 2010 alle 22:07
@Marco: davvero strano.. non è che la pagina sia già ottimizzata per iPhone?
Replica