Communication UI-ViewModel: Événements Utilisateur

Les applications nécessitent souvent une communication fluide entre l’UI et le ViewModel.

Sans une gestion efficace, cela peut entraîner des interfaces lentes et non réactives, frustrant les utilisateurs.

Cet article explore comment établir une interaction bidirectionnelle efficace pour une UI réactive.

Table de matière

Table des Matières : Événements Utilisateur Introduction à la Gestion des Événements Capturer les Actions avec ViewModel Modifiers et Lambdas pour l'UI Exemples : onFavoriClick et onArticleClick Code Complet pour l'Interaction UI Résumé de la Gestion des Événements FAQ Conclusion

Formation Créer une Architecture Moderne pour Applications Android

Apprenez à construire des applications Android avec une architecture moderne et performante!

Table des Matières : Événements Utilisateur

Introduction à la Gestion des Événements

Une fois que le flux de données du ViewModel vers l’UI est établi, il est crucial de savoir comment déclencher des fonctions dans le ViewModel à partir de l’interface graphique (UI). Cela concerne l’émission des événements, définie comme un flux d’appels allant de l’UI (typiquement un composable) vers le ViewModel, qui contient ou permet d’accéder aux données. L’émission des événements permet à l’UI d’interagir avec le ViewModel, assurant ainsi une communication bidirectionnelle entre l’interface utilisateur et la couche de logique de données.

Capturer les Actions avec ViewModel

Les actions utilisateur peuvent être diverses, comme des clics, double-clics, scrolls, etc. L’objectif est de capturer ces actions dans l’UI pour déclencher des modifications dans le ViewModel via des fonctions spécifiques. Par exemple, un clic sur un bouton dans l’UI peut déclencher une fonction dans le ViewModel qui met à jour une liste d’articles.

Modifiers et Lambdas pour l'UI

Pour déclencher des actions dans le composable, on utilise un modifier cliquable (modifier.clickable) avec une lambda expression. Cette lambda expression appelle une fonction du ViewModel. Par exemple, un composable représentant un article dans une liste peut utiliser un modifier.clickable pour écouter les clics de l’utilisateur. Lorsque l’utilisateur clique sur l’article, une lambda expression est exécutée, appelant une fonction du ViewModel qui gère l’événement de clic. Cette approche permet de lier directement les interactions utilisateur dans l’UI aux fonctions de gestion d’événements dans le ViewModel, assurant une manipulation fluide et réactive des données.

Astuce Pratique : Pour rendre votre code plus lisible et réutilisable, combinez plusieurs Modifiers en les chaînant dans l’ordre approprié. Par exemple, placez toujours modifier.clickable en dernier dans la chaîne pour garantir que les autres modifications (comme padding, background, etc.) s’appliquent correctement avant de gérer l’interaction de l’utilisateur.

Exemples : onFavoriClick et onArticleClick

Pour gérer les interactions utilisateur au niveau de l’interface graphique (UI), il est nécessaire d’ajouter des fonctions spécifiques dans le ViewModel. Ces fonctions permettent de répondre aux actions effectuées par l’utilisateur, telles que marquer un article comme favori ou éditer un article. Dans cette section, nous allons développer deux fonctions essentielles : onFavoriClick et onArticleClick .

				
					
class ArticleViewModel : ViewModel() {
  // MutableLiveData pour la liste des articles
private
  val _articles = MutableLiveData<List<Article>>() val articles
      : LiveData<List<Article>>
        get() =
            _articles init{// Initialiser avec une liste par défaut
                           _articles.value = Article.LISTE_PAR_DEFAUT}
        // Méthode pour gérer le clic sur un favori
        fun onFavoriClick(item : Article){
            // Passer l'article en favori
            val updatedArticles = _articles.value
            ?.map{if (it.id == item.id)
                      it.copy(favori = !it.favori) else it} _articles.value =
                 updatedArticles } // Méthode pour gérer le clic sur un article
            fun onArticleClick(article : Article) {
    // Éditer un article existant ou en créer un nouvel
    // Ajoutez ici la logique pour gérer l'édition ou la création de l'article
  }
}

onFavoriClick: Fonction pour marquer un article comme favori

Définition : onFavoriClick est utilisée pour marquer un article comme favori ou pour annuler cette action. Lorsqu’un utilisateur clique sur l’icône de favori, cette fonction est appelée pour mettre à jour l’état de l’article dans le ViewModel.

Définition de la fonction:

				
					
fun onFavoriClick(article : Article) {
  // Basculer l'état de favori de l'article
  val updatedArticles = _articles.value ?.map {
    if (it.id == article.id)
      it.copy(favori = !it.favori) else it
  }
  // Mettre à jour la liste des articles
  _articles.value = updatedArticles
}

Mise à jour de la liste des articles:

Il est important de notifier l’UI des changements afin qu’elle puisse se mettre à jour en conséquence. Cela peut se faire en utilisant un mécanisme comme LiveData.

				
					
private
fun refreshArticles() {
  // Rafraîchir la liste des articles en actualisant les données (par exemple,
  // depuis une source locale ou distante)
  _articles.value = _articles.value ?.map { it.copy() }
}

Gestion de l’état des articles:

La liste des articles est généralement stockée dans un MutableLiveData pour permettre à l’UI de s’abonner aux changements.

				
					
private
val _articles =
    MutableLiveData<List<Article>>() val articles : LiveData<List<Article>>
                                                    get() = _articles

onArticleClick: Fonction pour éditer un article existant ou en créer un nouveau

Définition : onArticleClick est utilisée pour éditer un article existant ou pour en créer un nouveau. Lorsqu’un utilisateur clique sur un article, cette fonction est appelée pour ouvrir l’écran d’édition.

Définition de la fonction:

				
					
private
val _currentArticle = MutableLiveData<Article>() val currentArticle
    : LiveData<Article>
      get() = _currentArticle
          // Méthode pour gérer le clic sur un article
          fun onArticleClick(article : Article) {
  // Définir l'article en cours dans le ViewModel
  _currentArticle.value = article
  // Naviguer vers l'écran d'édition
  navigateToEditScreen()
}
private
fun navigateToEditScreen() {
  // Implémentez la logique de navigation ici}

Article en cours:

L’article en cours est stocké dans un MutableLiveData pour permettre à l’écran d’édition de s’abonner aux changements.

				
					
private
val _currentArticle =
    MutableLiveData<Article>() val currentArticle : LiveData<Article> get() =
                                                        _currentArticle

Navigation vers l’écran d’édition:

La navigation peut être gérée de différentes manières selon le framework utilisé. Par exemple, dans Jetpack Compose, cela peut être fait en utilisant un NavController.

				
					
private
fun navigateToEditScreen() {
  // Logique de navigation vers l'écran d'édition
  navController.navigate("editArticle")
}

Code Complet pour l'Interaction UI

Voici un exemple complet des deux fonctions dans un ViewModel :

				
					
class ArticleViewModel : ViewModel() {
  // Liste des articles observables
private
  val _articles = MutableLiveData<List<Article>>() val articles
      : LiveData<List<Article>>
        get() = _articles
        // Article actuellement sélectionné
        private val _currentArticle =
            MutableLiveData<Article>() val currentArticle
      : LiveData<Article>
            get() = _currentArticle
                // Gérer le clic sur le favori d'un article
                fun onFavoriClick(article : Article) {
    // Basculer l'état de favori de l'article
    article.isFavori =
        !article.isFavori
         // Mettre à jour la liste des articles pour refléter le changement
         updateArticleList()
  }
  // Méthode privée pour rafraîchir la liste des articles
private
  fun updateArticleList(){// Rafraîchir la liste des articles
                          _articles.value = _articles.value}
  // Gérer le clic sur un article
  fun onArticleClick(article : Article) {
    // Définir l'article en cours dans le ViewModel
    _currentArticle.value = article
    // Naviguer vers l'écran d'édition
    navigateToEditScreen()
  }
  // Méthode privée pour gérer la navigation vers l'écran d'édition
private
  fun navigateToEditScreen() {
    // Logique de navigation vers l'écran d'édition
    // Assurez-vous que navController est correctement initialisé
    navController.navigate("editArticle")
  }
}

Fonction	Description	Action Déclenchée
onFavoriClick	Gère l’action de marquer ou de retirer un article des favoris	Ajoute ou retire l’article de la liste des favoris, puis met à jour l’interface utilisateur en conséquence.
onArticleClick	Gère l’action de cliquer sur un article pour l’éditer	Ouvre l’écran d’édition de l’article, permettant à l’utilisateur de modifier les détails de l’article.

Résumé de la Gestion des Événements

La classe ArticleViewModel gère les données et les interactions utilisateur pour une liste d’articles. Elle permet de marquer des articles comme favoris, d’ouvrir un article pour l’édition et de notifier l’UI des changements de données. En séparant les responsabilités entre le ViewModel et l’UI, cette approche permet de maintenir une architecture propre et réactive.

Formez-vous gratuitement avec Alphorm !

Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.

FAQ

Comment l'émission des événements fonctionne-t-elle dans l'UI?

L’émission des événements dans l’UI permet une communication bidirectionnelle entre l’interface utilisateur et le ViewModel. Cette interaction est cruciale pour déclencher des fonctions dans le ViewModel à partir de l’UI. Lorsqu’un utilisateur interagit avec l’interface, comme en cliquant sur un bouton, cela génère un événement qui est capturé et traité par le ViewModel, assurant ainsi que les données et l’interface restent synchronisées et réactives.

Comment capturer les actions utilisateur dans l'UI?

Les actions utilisateur telles que les clics ou les scrolls sont capturées dans l’UI à l’aide de modifiers cliquables et de lambda expressions. Ces outils permettent de lier directement les interactions utilisateur à des fonctions spécifiques du ViewModel. Par exemple, un clic sur un article dans une liste peut appeler une fonction de gestion d’événements dans le ViewModel, permettant ainsi une manipulation fluide et réactive des données affichées à l’utilisateur.

Qu'est-ce qu'un modifier cliquable dans Jetpack Compose?

Un modifier cliquable dans Jetpack Compose est un composant qui permet de détecter les clics utilisateur et de les associer à des actions spécifiques. En utilisant une lambda expression, il devient possible d’appeler directement une fonction du ViewModel à chaque interaction. Cela assure une correspondance directe entre l’UI et la logique de l’application, permettant une réponse immédiate et appropriée à chaque action utilisateur.

Comment fonctionne la fonction onFavoriClick?

La fonction onFavoriClick est conçue pour basculer l’état de favori d’un article dans le ViewModel. Lorsqu’un utilisateur clique sur l’icône de favori, cette fonction est appelée pour mettre à jour l’état de l’article. Le ViewModel ajuste alors la liste des articles afin de refléter ce changement, et l’UI est notifiée de cette mise à jour, assurant que les favoris de l’utilisateur sont affichés correctement.

Comment gérer la navigation vers l'écran d'édition?

La navigation vers l’écran d’édition dans une application Android peut être gérée via des contrôleurs de navigation comme NavController. Lorsqu’un utilisateur clique sur un article, la fonction onArticleClick est appelée, ce qui sélectionne l’article et déclenche la navigation. Le navController dirige alors l’utilisateur vers l’interface d’édition, permettant de modifier ou créer un article selon les besoins de l’application.

Conclusion

En comprenant ces mécanismes, comment pourriez-vous améliorer l’interaction utilisateur dans votre propre application Android?