Main Contents

[Objective-c] Application iPhone, XML et UITableView

avril 26, 2009

Nous allons donc poursuivre le tutorial précédent qui permettait de parser un fichier XML, mais qui n’en faisait rien de spécial. Ici nous allons voir comment remplir un UITableView et afficher les informations d’un contact.

I) Introduction

Si vous avez suivi le tutorial sur comment parser un fichier XML, vous devez avoir une application de type Navigation-Based.
C’est à dire que votre application à 2 fichiers xib, MainWindow.xib et RootViewController.xib.

II) UITableView

Première chose, nous allons remplir notre UITableView. Dans RootViewController.h ajouter un NSMutableArray.

//RootViewController.h
@interface RootViewController : UITableViewController {
	NSMutableArray *tableau;
}

Il faut maintenant remplir ce tableau. Nous allons modifier notre boucle dans RootViewController.m pour qu’elle ajoute un objet de type Contact dans chaque case du tableau.

//RootViewController.m
- (void)viewDidLoad {
	tableau = [[NSMutableArray alloc] init];
	NSURL *url = [NSURL URLWithString: @"http://www.jkraft.fr/testXml.xml"];
	XMLToObjectParser *myParser = [[XMLToObjectParser alloc] parseXMLAtURL:url toObject:@"Contact" parseError:nil];
 
	for(int i = 0; i < [[myParser items] count]; i++) {
		Contact *new = [[Contact alloc] init];
		new = (Contact *)[[myParser items] objectAtIndex:i];
		[tableau addObject:new];
		[new release];
	}
   [super viewDidLoad];
}

Toujours dans RootViewController.m nous allons décommenter quelques fonctions qui concerne le UITableView et modifier certaines. Vous devez arriver à ce résultat.

//RootViewController.m
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}
 
// Customize the number of rows in the table view.
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [tableau count];
}
 
// Customize the appearance of table view cells.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
 
    static NSString *CellIdentifier = @"Cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
    }
	NSString *ligneTableau = [NSString stringWithFormat:@"%@ %@", [[tableau objectAtIndex:indexPath.row] nom],[[tableau objectAtIndex:indexPath.row] prenom]];
	cell.text=ligneTableau;	// Configure the cell.
    return cell;
}

Ligne 8, on indique au TableView combien de ligne il aura, c’est à dire combien d’élément il y a dans mon tableau. Et ligne 20-21 je concatène le nom et le prénom et je l’écris dans la cellule du TableView. Compiler et éxécuter l’application et vous devriez avoir quelque chose qui ressemble à ça si vous utilisez mon fichier XML.

UItableView

III) La fiche contact

Maintenant que nous avons la liste des contacts nous aimerions pouvoir en choisir un et afficher le reste des informations.
D’abord ajoutez une nouvelle classe de type UIViewController SubClass et nommez la ContactViewController. Vous avez donc 2 nouveaux fichiers, ContactViewController.h et ContactViewController.m
Nous voulons afficher nos 4 informations, on va donc créer 4 IBOutlets de type UILabel et un champs MonContact de type Contact qui contiendra notre objet courant. N’oubliez pas d’ajouter le Contact.h pour que le compilateur sache ce qu’est l’objet Contact.

//ContactViewController.h
#import
#import "Contact.h"
 
@interface ContactViewController : UIViewController {
 
	IBOutlet UILabel *nom;
	IBOutlet UILabel *prenom;
	IBOutlet UILabel *tel;
	IBOutlet UILabel *email;
	Contact *MonContact;
 
}
 
@property (nonatomic, retain) UILabel *nom;
@property (nonatomic, retain) UILabel *prenom;
@property (nonatomic, retain) UILabel *tel;
@property (nonatomic, retain) UILabel *email;
@property (nonatomic, retain) Contact *MonContact;
@end
//ContactViewController.m
#import "ContactViewController.h"
 
@implementation ContactViewController
@synthesize  nom,prenom,tel, email , MonContact;
 
- (void)viewDidLoad {
	prenom.text=MonContact.prenom;
	tel.text=MonContact.tel;
	nom.text=MonContact.nom;
	email.text=MonContact.email;
    [super viewDidLoad];
}

Et voilà, il ne reste plus qu’à définir la vue. Ajouter donc un nouveau fichier de type View Xib dans l’onglet User Interface avec le nom : ContactView.xib. Ajouter des labels, et reliez les au IBOutlets pour arriver à ceci.

liaison

Il reste une dernière chose à faire, car si vous compilez, lorsque vous cliquez sur un des éléments du TableView rien ne se passe. Il faut pour cela, modifier une dernière fois le fichier RootViewController.m et rajouter cette fonction.

// Override to support row selection in the table view.
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    // Navigation logic may go here -- for example, create and push another view controller.
	ContactViewController *contactViewController = [[ContactViewController alloc] initWithNibName:@"ContactView" bundle:nil];
	contactViewController.MonContact=[tableau objectAtIndex:indexPath.row];
	self.navigationItem.title=[[tableau objectAtIndex:indexPath.row] nom];
	[self.navigationController pushViewController:contactViewController animated:YES];
	[contactViewController release];
}

Ligne 5 on affecte l’objet Contact sélectionné dans contactViewController.
Ligne 6, on affiche dans la NavigationBar le nom du contact sélectionné.
Compilez et voilà. Nous affichons les détails pour chaqu’un des contacts de votre fichier XML!
Téléchargez les fichiers sources si vous avez un soucis.

resultat

Catégorie(s): Développement, Iphone, Objective-C, Tutorial | Comments (26)

26 Comments