Oggi creeremo un semplice browser completo di tutte le funzionalità necessarie per la navigazione su internet. Il tutto sarà incentrato sull’oggetto UIWebView, dove verranno appunto caricate le pagine web che andremo a visitare. Aprite Xcode, cliccate su “Nuovo progetto”, selezionate “View-based Application” dall’elenco dei Template disponibili e proseguite. Inserite un nome per la vostra applicazione, ad esempio “MyBrowser”, scegliete quindi la posizione dove salvare e andate avanti. Apriamo il file “myBrowserViewController.h” e creiamo 2 oggetti. Il primo di tipo UIWebView, che chiamiamo semplicemente webView, e il secondo un UITextField, che chiameremo “Indirizzo” e che ci servirà per inserire gli indirizzi dei siti da visitare. Entrambi gli oggetti andranno poi collegati tramite Interface Builder ai rispettivi oggetti che disegneremo nell’interfaccia grafica più avanti. Dichiariamo inoltre le property per i due oggetti che ci permetteranno di usare le loro proprietà nel nostro progetto. Il codice sarà come il seguente:
#import
@interface myBrowserViewController : UIViewController {
IBOutlet UIWebView *webView;
IBOutlet UITextField *indirizzo;
}
@property (nonatomic, retain) IBOutlet UIWebView *webView;
@property (nonatomic, retain) IBOutlet UITextField *indirizzo;
- (IBAction)apriPagina;
@end
Apriamo ora Interface Builder facendo doppio click sul file “myBrowserViewController.xib” e disegnamo la nostra interfaccia grafica. Trascinate, posizionate e modificate le proprietà, come mostrato nella figura sotto l’elenco, dei seguenti oggetti:
- N. 1 UIToolBar
- N. 4 UIBarButtonItem (da posizionare dentro la UIToolBar)
- N. 1 Flexible Space Bar Button Item (da posizionare tra i Button Item nella ToolBar come in figura)
- N. 1 UIWebView
- N. 1 UITextField
- N. 1 UIButton
Effettuiamo ora i collegamenti tra gli oggetti appena creati e quelli creati da Xcode. Clicchiamo su File’s Owner e colleghiamo “Indirizzo” con l’UITextField, webView con l’UIWebView e “apriPagina” con l’UIButton, facendo attenzione a selezionare “Touch Up Inside”. Clicchiamo quindi sulla UIWebView e colleghiamo le quattro “Received Action” presenti con i rispettivi pulsanti nella ToolBar inseriti in precedenza. Salviamo e torniamo ad Xcode.
Apriamo il file “myBrowserViewController.m” e andiamo quindi a scrivere il codice vero e proprio della nostra applicazione:
//Con la direttiva @synthetize potremo accedere a tutte le proprietà dei rispettivi oggetti
@synthesize webView;
@synthesize indirizzo;
- (IBAction)apriPagina{
NSString *strIndirizzo = indirizzo.text;
NSURL *url = [NSURL URLWithString:strIndirizzo];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[webView loadRequest:request];
[webView setScalesPageToFit:YES];
}
- (void)viewDidLoad {
[super viewDidLoad];
NSString *strIndirizzo = @"http://www.devapp.it/";
NSURL *url = [NSURL URLWithString:strIndirizzo];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[webView loadRequest:request];
[webView setScalesPageToFit:YES];
}
Iniziamo a vedere come funziona il metodo “apriPagina”. Abbiamo creato un oggetto NSString, chiamato “strIndirizzo” a cui passeremo il contenuto della UITextField, ovvero l’indirizzo che vorremo visitare durante l’esecuzione del programma. L’indirizzo viene quindi passato a un oggetto NSURL che passerà a sua volta ad un’altro di tipo NSURLRequest, chiamato “request”, che useremo infine per caricare la pagina tramite il metodo “loadRequest” della UIWebView. L’ultima istruzione, setScalesPageToFit:YES , serve ad abilitare lo zoom (e di conseguenza lo scrool) nelle pagine che andremo a visitare.
Inseriamo più o meno lo stesso codice al caricamento della view, quindi all’interno del metodo “viewDidLoad”, che dovremo “scommentare”, però questa volta impostiamo esplicitamente un indirizzo web, che sarà la nostra pagina predefinita all’apertura del programma, nel nostro caso abbiamo inserito “NSString *strIndirizzo = @”http://www.devapp.it/”;”. Il significato del resto del codice è lo stesso visto poco fa per il metodo “apriPagina”.
A questo punto il programma è quasi terminato. Non ci resta altro, infatti, che inserire il solito metodo per la chiusura della tastiera (sempre in questo file su cui stiamo lavorando):
//Metodo per nascondere la tastiera
-(BOOL)textFieldShouldReturn:(UITextField *)textField{
[textField resignFirstResponder];
return YES;
}
Torniamo quindi su Interface Builder, clicchiamo sulla UITextView, apriamo la finestra “Connections” e colleghiamo l’unico Outlets presente con File’s Owner. Salviamo e chiudiamo. Possiamo provare la nostra applicazione. Per farlo clicchiamo su “Build and Run” da Xcode. Ricordate di inserire anche “http://” negli indirizzi durante il test dell’applicazione, perchè non abbiamo gestito questo aspetto. Il risultato è quello mostrato in figura:
Video Tutorial
by David Pollak
19 Responses to “T#008 – Creiamo un Browser”
29 Novembre 2009
valeriosarebbe possibile avere il progetto Xcode di questo browser?
29 Novembre 2009
Clod75Non credo ci siano problemi.. Comunque io ho provato questo tutorial e funziona perfettamente 🙂
30 Novembre 2009
Staff devAPPHo aggiornato l’articolo inserendo il link al progetto completo sotto l’ultima immagine 😉
Per comodità:
http://www.devapp.it/wordpress/wp-content/uploads/files/myBrowser.zip
17 Dicembre 2009
MaxCiao una domanda…è possibile aprire anche siti https in questo modo? perchè io ho provato ma non me li carica.
Grazie!
16 Febbraio 2010
TIPS#002 – Caricare il contenuto di un file HTML locale in una UIWebView | devAPP[…] nostro ottavo tutorial “Creiamo un Browser”, abbiamo visto come creare un semplice browser, il quale, non fa […]
20 Febbraio 2010
L-04ottimo, ma se volessi impostare un’immagine per l’applicazione??
29 Marzo 2010
Video Tutorial di programmazione iPhone SDK (in italiano) | devAPP[…] Oggi creeremo un semplice browser completo di tutte le funzionalità necessarie per la navigazione su internet. Il tutto sarà incentrato sull’oggetto UIWebView, dove verranno appunto caricate le pagine web che andremo a visitare. (visualizza l’articolo completo) […]
6 Aprile 2010
Widgetbox: Crea la versione mobile del tuo sito in pochi minuti | devAPP[…] è davvero minimo, basterà infatti creare una semplice App che funge da Browser (potete trovare un tutorial a riguardo sulle nostre pagine) che, all’avvio dell’applicazione, carica e visualizza la versione mobile del vostro […]
15 Aprile 2010
gabriel81miCiao ho una domanda da porvi.
Io ho scaricato il codice sorgente di questo tutorial e non mi funzionava, poi ho seguito passo per passo il tutorial e l’applicazione mi funzionava e quindi ho fato delle modifiche e ho realizzato una web applicazione completa.
Il tutto funzionante, l’ho passato via skype al mio titolare ma a lui non funziona, come mai ha questo comportamento?
18 Maggio 2010
Creiamo il nostro lettore di feed RSS per iPhone SDK | devAPP[…] file “ViewArticolo.m” e inseriamo il seguente codice (che vi abbiamo già spiegato in questo tutorial): 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 #import "ViewArticolo.h" @implementation […]
14 Ottobre 2010
» devAPP – Tutorial Set #2[…] (Vai al tutorial completo) […]
16 Novembre 2010
Emiliociao a tutti mi chiedevo..se volessi inserire un url..prelevato da una uitextfield presente in un’altra vista? come si potrebbe fare?:D
24 Novembre 2010
FrancescoScusate per la versione 4.2 dell’SDK non è utilizzabile, vero? Potreste creare una zip della versione 4 per favore? Si può aprire ma non lo esegue!
7 Febbraio 2011
f.complimenti per i tutorials!
mi sono appassionato da poco alla programmazione e li trovo davvero utili.
scrivo per rilanciare la domanda di Max:
– come possono essere gestiti url https?
vi ringrazio,
f.
30 Marzo 2011
MatteoCiao a tutti!
Qualcuno mi sa dire sè il progetto completo scaricabile si può rinominare?
7 Maggio 2011
antoCiao e complimenti per il tutorial, vi seguo sempre e siete davvero un valido supporto!
volevo chiedere se è possibile rendere la toolbar e la navigation bar trasparenti mantenendo però i bottoni opachi e ben visibili.
grazie
23 Maggio 2011
MaveDevOttimo tutorial 🙂
6 Giugno 2011
TeraBiteSalve,
essendo un novizio della programmazione con iPhone ho molto apprezzato questo Tutorial.
Volevo solamente aggiungere a questa splendida guida la ” Rotazione ” che non tutti sanno come implementarla ( Parlo per chi inizia )
– (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
return YES;
}
7 Luglio 2011
LucaCome si può aggiornare la “barra degli indirizzi”???
Io ho fatto una cosa del tipo:
– (void)webViewDidFinishLoad:(UIWebView *)webView
{
[indirizzo setText: [[pagina.request URL] absoluteString]];
}