T#008 – Creiamo un Browser

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 <UIKit/UIKit.h>
 
@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:

Scarica il progetto completo