DevTutorial #8 – UIWebView: create un vostro mini-browser!
| 08-01-2009
Categorie: DevTutorial, iPhone SDK
24
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













ciao (dinuovo)
mercì!
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?
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!
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)
http://www.sendspace.com/file/9stqp9
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
)
disponibilissimo, grazie mille!
guida corretta, fammi sapere se trovi ancora errori!
ora guardo il tuo progetto..
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!)
certo che un po’ suocera lo sei!! scherzo ovviamente..
grazie, corretto anche questo errore!
ora guardo il tuo progetto (x davvero xò)..
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ò?
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
@iDo: ciao, strano.. se invece metti un indirizzo qualsiasi web funziona?
adex non riesco, ma più tardi provo a madarti un esempio
Si, se metto qualsiasi indirizzo web va alla grande
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.
@Nicola1975: stasera aggiorno il tutorial, questo ha dei punti sbagliati..
quello nuovo dovrebbe funzionare
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]]];
@Nicola1975: si, così vai a leggere il file “index.hmtl” dalla directory del progetto.. è forse la soluzione migliore quella che hai trovato tu!
articolo aggiornato, ora carica correttamente anche i file da locale
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
@luigi: certamente si.. prova a controllare di non aver omesso qualche passaggio, perchè deve funzionare
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
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!!
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!
é possibile collegare dei bottoni di una Navigation Bar con la UIWebView magari a pagine specifiche?
@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!