Comprendre le ViewModel avec Jetpack Compose

La gestion réactive des interfaces utilisateur Android est souvent complexe avec les approches traditionnelles.

Les développeurs sont souvent confrontés à des difficultés liées à la rigidité des IHM en XML et à la gestion des états avec des solutions vieillissantes.

Jetpack Compose avec le ViewModel offre une solution moderne et flexible pour créer des interfaces utilisateur réactives et dynamiques.

Table de matière

De l'IHM XML à Kotlin UI Compose Intégrer ViewModel dans Composables Gérer Actions et Événements Compose Observer État avec ViewModel Compose Exemple: ViewModels et Composables Conclusion sur Jetpack Compose FAQ Conclusion

Formation Créer une Architecture Moderne pour Applications Android

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

Nous allons explorer le rôle du ViewModel dans une application utilisant Jetpack Compose, le nouveau framework de construction d’interfaces graphiques pour Android. Nous verrons comment le ViewModel interagit avec les composables, les éléments de base de Compose.

De l'IHM XML à Kotlin UI Compose

Les interfaces utilisateur (IHM) étaient principalement définies en XML. Avec Jetpack Compose, nous créons désormais des interfaces directement en Kotlin. Les composables, les briques de base de ces interfaces, reçoivent les ViewModels en tant que paramètres.

Aspect	IHM en XML	IHM en Kotlin
Définition de l’interface	Utilisation de fichiers XML	Création d’interfaces directement en Kotlin
Composants de base	Views (e.g., TextView, Button, etc.)	Composables (e.g., Text, Button, etc.)
Structure du code	Séparation du code XML et Kotlin	Code unifié dans les fichiers Kotlin
Flexibilité	Structure rigide, plus difficile à personnaliser	Structure flexible, personnalisations plus faciles
Évolution	Basé sur des concepts plus anciens	Moderne, basé sur un paradigme réactif

Intégrer ViewModel dans Composables

Pour que les composables réagissent aux changements de données, ils doivent être connectés aux ViewModels en tant qu’état. Un composable se rafraîchit automatiquement lorsque son état est modifié. Le ViewModel est généralement construit au niveau de l’activité et transmis aux composables qui en ont besoin. Le ViewModel peut contenir la racine du graphe des états, permettant ainsi aux composables de dépendre de portions spécifiques du ViewModel.

Gérer Actions et Événements Compose

Les actions et événements de l’interface utilisateur sont gérés par le ViewModel. Les événements sont envoyés du composable au ViewModel, tandis que les données transitent du ViewModel vers le composable. L’objectif est d’assurer que les flux de données circulent correctement entre le ViewModel et l’UI.

Observer État avec ViewModel Compose

Question : Comment le passage de LiveData à mutableState dans Jetpack Compose change-t-il votre manière de gérer l’état dans une application Android ?

Pour gérer les états, nous devons passer des LiveData à des notions de mutable state, utilisées dans Compose. Bien que la LiveData puisse être observée, les composables se recomposent automatiquement sur modification d’état. Nous trouverons donc un moyen de convertir la LiveData en mutable state pour une intégration fluide dans Compose.

Exemple: ViewModels et Composables

Pour illustrer l’utilisation des ViewModels avec les composables, nous allons commencer avec un projet complètement neuf. Cela nous permettra de voir concrètement comment intégrer et utiliser le ViewModel dans une application Compose.

Étape 1 : Création d’un projet avec Android Studio

Ouvrir Android Studio

Créez un nouveau projet en sélectionnant « MT Compose Activity ».

Génération du projet

Le projet initial est généré par Android Studio avec une activité de composition

Étape 2 : Création d’un ViewModel

Cliquez droit sur le dossier app/src/main/java -> New -> Kotlin Class/File .

Nommer la classe ArticleViewModel .

Hériter de ViewModel

La classe ArticleViewModel doit hériter de ViewModel .

Importez ViewModel en ajoutant import androidx.lifecycle.ViewModel au début du fichier

				
					
import androidx.lifecycle.ViewModel

Définir une MutableLiveData

Définir une liste mutable d’articles dans ArticleViewModel

Étape 3 : Création de la classe Article

Définir la classe Article

Initialisation par défaut

				
					
package biz.ei6.jpkappli.domain data class Article(
    var id : Long = NEW_ARTICLE_ID, val user : String = "",
    val gate : String = "", val titre : String = "", val texte : String = "",
    val images : List<String> = listOf(), val longitude : Double = 0.0,
    val latitude : Double = 0.0, var favori : Boolean = false) {
  companion object{const val NEW_ARTICLE_ID = -1L}
}

Étape 4 : Création du fichier composable

Créer un fichier composable

Ajouter un nouveau fichier Kotlin nommé EcranListeArticle .kt.

Définir la fonction composable

@Composable : Marque la fonction comme un composant Jetpack Compose.

ArticlesList : Nom de la fonction composable.

Paramètres de la fonction :

articles : Une liste d’articles de type Article à afficher.

onClickSurArticle : Une fonction lambda à appeler lorsque l’article est cliqué.

onClickSurFavori : Une fonction lambda à appeler lorsque l’icône de favori est cliquée.

LazyColumn : Crée une colonne défilante pour afficher les articles.

itemsIndexed : Pour chaque article dans la liste, crée un élément de la liste avec son index.

ArticleItem : Fonction composable pour afficher un article individuel. Elle prend en paramètres

item : L’article à afficher.

onClickSurArticle : La fonction à appeler lors du clic sur l’article.

onClickSurFavori : La fonction à appeler lors du clic sur l’icône de favori.

				
					
import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.itemsIndexed import androidx.compose.runtime.Composable import biz.ei6.jpkappli.domain.Article @Composable fun ArticlesListe(articles:List <Article>, onClickSurArticle: (Article)->Unit, onClickSurFavori: (Article)->Unit){LazyColumn{itemsIndexed(articles){index, item->ArticleItem(article = item, onClickSurArticle = onClickSurArticle, onClickSurFavori = onClickSurFavori) } } }

Étape 5 : Connexion entre ViewModel et composables

Observer les articles :

val articles: List<Article> by viewModel.articles.observeAsState(listOf()) :

articles : Liste des articles obtenus depuis le ViewModel.

viewModel.articles.observeAsState(listOf()) : Observe les articles dans le ViewModel et les met à jour automatiquement lorsque les données changent. La fonction observeAsState transforme la LiveData en état Compose.

listOf() : Valeur par défaut utilisée si la liste des articles est nulle.

Afficher la liste des articles :

ArticlesList(articles, onClickSurArticle = {}, onClickSurFavori = {}) :

ArticlesList : Appelle la fonction composable définie précédemment pour afficher la liste des articles.

articles : Passe la liste des articles observés au composant ArticlesList.

onClickSurArticle = {} : Lambda expression vide pour le clic sur un article. Vous

onClickSurFavori = {} : Lambda expression vide pour le clic sur le bouton favori.

				
					
@Composable fun EcranListeArticle(viewModel : ArticleViewModel) {
  // Obtenir la liste des articles depuis le ViewModel
val articles: List<Article> by viewModel.articles.observeAsState(listOf())
// Afficher la liste des articles
ArticlesListe(
articles = articles,
onClickSurArticle = { article ->
// Gérer le clic sur un article
},
onClickSurFavori = {
    article->
    // Gérer le clic sur le favori d'un article })
}
@Composable
fun ArticlesListe(
articles: List<Article>,
onClickSurArticle: (Article) -> Unit,
onClickSurFavori: (Article) -> Unit
) {
    LazyColumn {
      itemsIndexed(articles) { index, item ->
ArticleItem(
article = item,
onClickSurArticle = onClickSurArticle,
onClickSurFavori = onClickSurFavori
      }
    }
}

Conclusion sur Jetpack Compose

Nous avons exploré les étapes nécessaires pour développer une application Android en utilisant Jetpack Compose et un ViewModel afin de gérer et afficher une liste d’articles de manière réactive. Voici un résumé des points clés abordés :

Création d’un ViewModel :

Nous avons commencé par créer une classe ArticleViewModel, héritant de ViewModel, pour gérer les données des articles et les rendre disponibles sous forme de LiveData.

Définition de la classe Article :

Une classe de données simple représentant un article a été définie, comprenant des propriétés telles que l’utilisateur, la date et le titre.

Création de composants composables :

Nous avons créé des fonctions composables comme ArticlesList et ArticleItem pour afficher la liste des articles et les éléments individuels respectivement. Ces composants utilisent LazyColumn et itemsIndexed pour gérer la disposition et le rendu des articles.

Connexion du ViewModel aux composables :

La fonction EcranListeArticle observe les articles dans le ViewModel en utilisant observeAsState et passe ces articles au composant ArticlesList. Cela permet une mise à jour réactive de l’interface utilisateur en réponse aux changements de données dans le ViewModel.

Gestion des interactions utilisateur :

Les composants sont configurés pour gérer les interactions utilisateur, comme les clics sur les articles et les boutons favoris, à travers des lambda expressions passées en paramètres

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 fonctionne le ViewModel dans Jetpack Compose ?

Dans Jetpack Compose, le ViewModel joue un rôle essentiel en fournissant des données aux composables, qui sont les éléments de base d’une interface utilisateur. Il est généralement initialisé au niveau de l’activité et partagé entre plusieurs composables, assurant une gestion cohérente des états. Le ViewModel permet aux composables de réagir automatiquement aux changements de données, ce qui facilite la création d’interfaces dynamiques et réactives.

Quelle est la différence entre les IHM XML et Kotlin avec Jetpack Compose ?

Les IHM en XML utilisent des fichiers séparés pour définir l’interface utilisateur, tandis que Jetpack Compose permet de créer des interfaces directement en Kotlin. Cette approche unifiée simplifie la gestion du code et favorise une plus grande flexibilité. Les composables remplacent les vues XML traditionnelles, offrant une structure plus moderne et réactive pour le développement d’interfaces utilisateur sur Android.

Comment les composables interagissent-ils avec le ViewModel ?

Les composables interagissent avec le ViewModel en recevant des données sous forme d’état. Lorsqu’un composable est connecté à un ViewModel, il peut réagir automatiquement aux modifications de l’état, grâce à des mécanismes tels que observeAsState. Cela permet de construire des interfaces réactives où les données et l’interface utilisateur sont synchronisées sans effort supplémentaire.

Comment gérer les événements utilisateurs avec le ViewModel ?

Le ViewModel est crucial pour gérer les événements utilisateurs dans une application Jetpack Compose. Les événements, tels que les clics sur un bouton, sont envoyés du composable au ViewModel. Ce dernier traite ces événements et met à jour l’état en conséquence, qui est ensuite reflété dans l’interface. Cela garantit une circulation fluide des données et des événements entre le ViewModel et l’interface utilisateur.

Comment convertir LiveData en mutableState pour Jetpack Compose ?

Pour intégrer LiveData dans Jetpack Compose, il est essentiel de le convertir en mutableState. Cela se fait en utilisant la fonction observeAsState, qui transforme LiveData en un état réactif compatible avec Compose. Ce processus permet aux composables de se recomposer automatiquement lorsque les données sous-jacentes changent, assurant une interface utilisateur toujours à jour.

Conclusion

En exploitant Jetpack Compose avec le ViewModel, vous pouvez créer des interfaces utilisateur Android modernes et réactives. Quelle autre fonctionnalité de Jetpack Compose souhaitez-vous explorer davantage pour optimiser vos applications Android ?