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

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:

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:

Immagine 2

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

Immagine 3

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:

Immagine 4

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

Immagine 5

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:

Immagine 6

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 (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:

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!

Immagine 8

Se Avete Problemi, questo è il file di progetto.

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

Andrea Busi | @bubidevs

Laureato in Ingegneria Informatica, ho fondato nel 2008 questo piccolo blog, in cui racconto le mie esperienze e i miei pensieri sul mondo dell'informatica. Nella vita mi occupo di sviluppo software, e nel tempo libero continuo a coltivare la mia passione per il mondo iOS.

(ommenti a “DevTutorial #8 – UIWebView: create un vostro mini-browser!

  1. kraken ha detto:

    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!

  2. kraken ha detto:

    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)

  3. Andrea Busi ha detto:

    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 😉 )

  4. kraken ha detto:

    disponibilissimo, grazie mille!

  5. Andrea Busi ha detto:

    guida corretta, fammi sapere se trovi ancora errori!

    ora guardo il tuo progetto..

  6. kraken ha detto:

    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!)

  7. Andrea Busi ha detto:

    certo che un po’ suocera lo sei!! scherzo ovviamente..
    grazie, corretto anche questo errore!

    ora guardo il tuo progetto (x davvero xò)..

  8. iDo ha detto:

    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ò?

  9. iDo ha detto:

    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

  10. Andrea Busi ha detto:

    @iDo: ciao, strano.. se invece metti un indirizzo qualsiasi web funziona?
    adex non riesco, ma più tardi provo a madarti un esempio 😉

  11. iDo ha detto:

    Si, se metto qualsiasi indirizzo web va alla grande

  12. Nicola1975 ha detto:

    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.

  13. Andrea Busi ha detto:

    @Nicola1975: stasera aggiorno il tutorial, questo ha dei punti sbagliati..
    quello nuovo dovrebbe funzionare 😉

  14. Nicola1975 ha detto:

    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]]];

  15. Andrea Busi ha detto:

    @Nicola1975: si, così vai a leggere il file “index.hmtl” dalla directory del progetto.. è forse la soluzione migliore quella che hai trovato tu!

  16. Andrea Busi ha detto:

    articolo aggiornato, ora carica correttamente anche i file da locale 😉

  17. luigi ha detto:

    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

  18. Andrea Busi ha detto:

    @luigi: certamente si.. prova a controllare di non aver omesso qualche passaggio, perchè deve funzionare 😉

  19. luigi ha detto:

    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

  20. luigi ha detto:

    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!!

  21. Francesco ha detto:

    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!

  22. Francesco ha detto:

    é possibile collegare dei bottoni di una Navigation Bar con la UIWebView magari a pagine specifiche?

  23. Andrea Busi ha detto:

    @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!

  24. Francesco ha detto:

    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

  25. Andrea Busi ha detto:

    @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?

  26. Francesco ha detto:

    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

  27. Marco ha detto:

    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?

  28. Andrea Busi ha detto:

    @Marco: non penso vada implementata come funzione, dovrebbe essere presente di default come comportamento in una UIWebView..

  29. Marco ha detto:

    Sono entrato nel mio browser ma facendo come ti ho descritto sopra non succede niente

  30. Andrea Busi ha detto:

    @Marco: davvero strano.. non è che la pagina sia già ottimizzata per iPhone?

  31. Fabrizio D'Amore ha detto:

    Ciao Andrea (mi permetto di darti del tu) sto seguendo la tua guida da pochi giorni e già sono arrivato a questo capitolo, è fatta veramente bene e ti ringrazio per averla realizzata 😀 finalmente riesco a capirci qualcosa anche io!

    Sono riuscito ad aprire la pagina html in locale e mi chiedevo se fosse possibile e di cosa ci fosse bisogno per far girare in locale una pagina PHP. Per me sarebbe straordinario in quanto da anni sviluppo siti in PHP, e per me potrebbe essere una alternativa per sviluppare applicazioni interessanti, finché non avrò imparato a sfruttare al massimo ciò che da xcode è possibile fare (cosa che ho intenzione di scoprire)

    Se puoi darmi qualche dritta in merito te ne sarei grato. Ciao!

  32. Andrea Busi ha detto:

    @Fabrizio D’Amore: ciao, grazie dei complimenti 😉

    per quanto riguarda il PHP, come ben sai è un linguaggio server-side, quindi è impossibile (non vorrei dire eresie ma ne sono abbastanza sicuro) far girare una pagina PHP direttamente su iPhone. Che io sappia non esiste nessun progetto che si realizza di fare ciò, ma tolto questo non avrebbe senso perchè dovrebbe essere installato poi su tutti i device.
    Se vuoi sviluppare pagine in PHP, quindi, l’unica soluzione è sempre quella di appoggiarsi ad un server esterno..

  33. Enzo ha detto:

    Riesumo un articolo di un anno fa :). Funziona tutto alla perfezione ma ho un problema: il mio minibrowser si apre su una pagina che richiede l’autenticazione ad un sito. Una volta inseriti user e password dovrebbe aprirsi una nuova pagina in cui continuerà la navigazione. Il fatto è che sembra che questo minibrowser sia non supporti l’apertura di nuove finestre, ma che tutto debba svolgersi in un’unica finestra. E’ possibile implementarlo?

  34. Andrea ha detto:

    Buonasera
    grande Andrea bella guida 🙂
    posso chiederti un favore tu sapresti dirmi come posso fare per avere una schermata con i bottoni…e quando schiaccio un bottone mi appare una pagina con una PageViewController come se fosse in versione sfoglia libro…
    grazie in anticipo 🙂

    1. Andrea Busi ha detto:

      Ciao,
      purtroppo non ho nulla da consigliarti per realizzare quello che ti serve. Proverò a dare un’occhiata in rete, se trovo qualcosa di interessante ti farò sapere 🙂

  35. Diego ha detto:

    Ciao, volevo sapere se è possibile e come, inserire più UIWebView nella stessa app richiamandole da una tab bar. Grazie!

    1. Andrea Busi ha detto:

      Ciao, puoi avere due opzioni:
      a) crei n controller con altrettante UIWebView, in base a quante sezioni hai nel controller. Ovviamente caricherai di conseguenza la pagina desiderata.
      b) Sfrutti un solo controller per gestire la selezione degli elementi nella tab bar. Questa è sicuramente la soluzione più “elegante”, ti consiglio di dare un’occhiata al delegate UITabBarDelegate

      1. Diego ha detto:

        Grazie.. complimenti per il sito e i tutorial. 😉

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*