Tutoriel n°7 : Et si on allait faire un tour du côté du (Tab) Bar ?

Oui je sais la blague dans le titre est fantastique  lol
Bref, dans ce tutoriel nous allons apprendre à afficher une page web et à envoyer des mails via une architecture dite Tab Bar.

Nous obtiendrons quelque chose de ce style :

http://www.ipup.fr/forum/userimages/image-tuto-n-7.jpg

1) Le Tab Bar :

Créons une application de type Tab Bar et nommons la «iPuPMail»

Mais le Tab Bar c’est quoi ?

Un Tab Bar est un élément d’interface homme machine permettant de passer d’une vue à une autre dans une application.

D’ailleurs, nous pouvons d’ores et déjà exécuter l’application pour mieux nous rendre compte de ce qu’il en est réellement.

En lançant interface Builder via le fichier MainWindow.xib nous pouvons noter que la vue rattachée au second item est définie dans le fichier SecondView.nib.

Pour cette application Xcode nous fournit déjà tout le squelette de notre application

2) Affichage d’une page Web :

Bon, maintenant nous pouvons commencer !  tongue

Restons un peu dans le fichier MainWindow.xib afin de définir les éléments de notre première vue. Pour afficher une page web il va nous falloir placer sur celle-ci un «Web View» :

http://www.ipup.fr/forum/userimages/Image-3-1.jpg
http://www.ipup.fr/forum/userimages/Image-4-1.jpg

C’est tout pour le moment avec Interface Builder, revenons donc à Xcode.

Comme  d’habitude il faut déclarer nos éléments d’interfaces dans notre ViewController, c’est à dire dans le header «FirstViewController.h» :

@interface FirstViewController : UIViewController {
 
IBOutlet UIWebView *webView;
}
@end

Passons donc à notre code source :

- (void)viewDidLoad {
[super viewDidLoad];
 
NSString *adresseUrl = @"http://www.ipup.fr";
 
//Creation d'un objet de type NSURL
NSURL *url = [NSURL URLWithString:adresseUrl];
 
//Création d’un objet de type NSURLRequest
NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];
 
[webView loadRequest:requestObj];
}

-La classe NSURL est utilisée pour créer un objet qui détiendra l’adresse URL.
-La méthode loadRequest, pré-définie dans la classe UIWebView, permet de charger la page dans l’UIWebView que nous avons placée tout à l’heure.

Voilà il nous suffit de relier, à l’aide d’Interface Builder, notre objet webView à son élément et notre première vue affichera la page d’accueil de notre site préféré !

3) Envoi d’un mail :

Passons maintenant à notre deuxième vue (SecondView.xib) qui permettra d’envoyer des mails directement dans notre application.

Pour cela nous devons tout d’abord placer deux Text Fields (qui contiendront respectivement l’adresse et l’objet), un  Text View (pour le message), un bouton (pour envoyer notre prose) et quelques labels. Tout ceci nous donne :

http://www.ipup.fr/forum/userimages/image-tuto-7.jpg

Nous devons maintenant rajouter dans notre ViewController (FirstViewController.h) les déclarations de nos éléments. Au final notre header doit ressembler à cela :

#import <UIKit/UIKit.h>
 
 
@interface FirstViewController : UIViewController {
 
IBOutlet UIWebView *webView;
 
IBOutlet UIButton *boutonEnvoyer;
IBOutlet UITextField *txtTo;
IBOutlet UITextField *txtSubject;
IBOutlet UITextView  *txtBody;
}
 
-(IBAction)Envoyer:(id) sender;
- (void) sendEmailTo:(NSString *)to withSubject:(NSString *) subject withBody:(NSString *)body;
 
 
@end

Ici nous définissons de plus deux méthodes. Une liée à la gestion d’événement (IBAction) pour le bouton, et l’autre réalisant l’envoi d’e-mail. La première sera activée lors du clic sur le bouton et fera appel à la seconde.

Voyons donc cette méthode :

- (void) sendEmailTo:(NSString *)to withSubject:(NSString *) subject withBody:(NSString *)body {
NSString *mailString = [NSString stringWithFormat:@"mailto:?to=%@&subject=%@&body=%@",
[to stringByAddingPercentEscapesUsingEncoding:NSASCIIStringEncoding],
[subject stringByAddingPercentEscapesUsingEncoding:NSASCIIStringEncoding],
[body  stringByAddingPercentEscapesUsingEncoding:NSASCIIStringEncoding]];
 
[[UIApplication sharedApplication] openURL:[NSURL URLWithString:mailString]];
}

Elle prend donc 3 arguments : l’adresse, l’objet et le message (c’est mieux pour un mail !). Puis elle construit une chaîne de caractère à l’aide d’une fonction permettant la mise en forme de celle-ci (par exemple les espaces seront remplacées par des %20 …).
Cette chaîne de caractère ou string aura donc le format d’une URL. C’est donc comme ci nous avions réalisé un lien «mail» sur un page web.

Il ne nous reste plus qu’à réaliser la méthode appelée lors du clic :

-(IBAction) Envoyer:(id) sender {
[self sendEmailTo:[txtTo text] withSubject:[txtSubject text] withBody:[txtBody text]];
}

Il ne s’agit ici que d’un appel vers la méthode précédente.

Oulà !!!… on allait oublier : Il faut également coder pour que le clavier se rétracte :

- (BOOL)textFieldShouldReturn:(UITextField *)textField {
if(textField == txtTo || textField == txtSubject) {
[txtTo resignFirstResponder];
[txtSubject resignFirstResponder];
}
return YES;
}

Voilà, on nous avons presque terminé, retournons à Interface Builder pour relier nos éléments comme nous en avons maintenant l’habitude.