Blog ENI : Toute la veille numérique !
-25€ dès 75€ sur les livres en ligne, vidéos... avec le code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. Xamarin
  3. Mise en forme des données
Extrait - Xamarin Développez vos applications multiplateformes pour iOS, Android et Windows
Extraits du livre
Xamarin Développez vos applications multiplateformes pour iOS, Android et Windows Revenir à la page d'achat du livre

Mise en forme des données

Introduction

Dans les applications modernes, il est souvent nécessaire d’afficher des listes d’items de manière rapide et fluide avec des comportements jugés standards comme le Pull To Refresh (rafraîchissement de la liste en déplaçant son doigt vers le bas) ou l’Infinite Scroll (chargement incrémental à la volée).

Les trois plateformes possèdent chacune leurs mécanismes propres et nous verrons dans ce chapitre comment mettre en place des listes et des grilles personnalisées.

Lier la vue aux données

1. iOS et Android

iOS et Android n’ont pas de mécanisme avancé de liaison de données à l’opposé d’UWP qui a un moteur appelé Binding.

2. UWP

a. Lier une donnée à un contrôle

Les contrôles XAML peuvent être utilisés pour effectuer de la mise en forme ou pour afficher des données. Les contrôles qui affichent les données possèdent en général des propriétés permettant de définir la source.

Pour les listes et grilles, on utilisera la propriété ItemsSource par exemple. Nous verrons dans le chapitre sur ces contrôles comment les utiliser plus en détail.

Le Binding

DataContext

Chaque contrôle possède un contexte de données appelé DataContext permettant de définir la liaison aux données.

Pour le définir, plusieurs moyens s’offrent à vous. Vous pouvez tout d’abord le définir par code ou directement dans le code XAML.

Pour définir ce contexte de données, la déclaration est possible en XAML ou en code.

Exemple de déclaration de contexte de données en C#


// myUser is set to be an object of type User. 
User myUser = new User("John"); 
 
// Set the DataContext of the StackPanel MyStackPanel. 
MyStackPanel.DataContext = myUser;
 

Ce DataContext...

Créer une liste

1. iOS

a. Présentation

Le composant permettant d’afficher des éléments sous forme de liste s’appelle UITableView. Il est optimisé pour gérer une grande quantité de cellules.

Création d’une table view


TableView = new UITableView(); 
TableView.Frame = new CGRect(0, 0, View.Frame.Width, 
View.Frame.Height); 
 
// Ajout de la TableView à la vue principale 
View.AddSubview(TableView);
 

Si votre liste prend tout l’écran, il est recommandé d’utiliser le contrôleur UITableViewController avec une instance de UITableView nommée TableView, qui prend toute la place de celui-ci.

b. Créer une source de données

Pour lier des données à cette vue, il faut définir une source de données (UITableViewSource) qui se charge d’afficher la vue correspondant à la donnée.

Création d’une source de données personnalisée de liste de string


public class TableSource : UITableViewSource 
{ 
  private List<string> _items; 
  private string cellIdentifier = "IdentifiantCellule"; 
 
  public TableSource(List<string> items) 
  { 
    _items = items; 
  } 
 
 
  public override nint RowsInSection(UITableView tableview, 
nint section) 
  { 
  // Retourne le nombre de lignes pour la section courante (dans 
notre cas nous n'avons qu'une seule section) 
            return _items.Count; 
  } 
 
   public override void RowSelected(UITableView tableView, 
NSIndexPath indexPath) 
   { 
      Console.WriteLine($"Ligne {indexPath.Row}  seletionné :
{_items[indexPath.Row]} )"); 
   } 
 
   public override nfloat GetHeightForRow(UITableView tableView, 
NSIndexPath indexPath) 
   { 
      return base.GetHeightForRow(tableView, indexPath); 
   } 
 
 
   public override UITableViewCell GetCell(UITableView tableView, 
NSIndexPath indexPath) 
   { 
 
      // Essaye de réutiliser une cellule qui n'est plus affichée. 
    ...

Conclusion

Dans ce chapitre, nous avons vu que la mise en forme des données diffère selon les plateformes. Difficile dans ce cadre de mettre en place un affichage sans implémenter d’adaptateurs spécifiques.

En revanche, nous pouvons aussi remarquer que, quelle que soit la plateforme, ce sont souvent les mêmes types de données que l’on manipule, notamment les listes, que nous pouvons charger de manière unifiée dans un code commun.