Ce livre s'adresse aux développeuses et développeurs qui souhaitent apprendre à développer des interfaces pour Android en utilisant Jetpack Compose, le kit d’outils recommandé par Google, basé sur le langage Kotlin. Il porte un regard soucieux sur les bonnes pratiques d'accessibilité qui intéresseront également toute personne désireuse d'améliorer le quotidien numérique des personnes en situation de handicap. Des connaissances de base sur le développement Android sont requises.

Dans ce livre, l'autrice détaille pas à pas la manière de prendre en main la bibliothèque Jetpack Compose pour d'une part développer des interfaces qui répondent aux besoins de modernité des applications actuelles, et d'autre part pour répondre à la nécessité de développer des applications accessibles à toutes et à tous.

Après une explication des raisons motivant la création de Jetpack Compose et des nouveaux concepts ainsi apportés au développement d'interfaces pour Android tels que la programmation déclarative ou le mécanisme de Recomposition, le lecteur découvre comment l’utiliser au sein d'un projet Android et initie son premier composant. Il est invité à parcourir les composants de base de cette bibliothèque en réalisant des textes, des boutons et des champs de formulaires, et à les mettre en page. Un chapitre est ensuite dédié à la gestion des états et des effets, deux notions importantes qui permettront au lecteur de concevoir ses composants dans les règles de l’art. Pour finir, l'autrice explique comment afficher des listes de manière optimisée et comment effectuer des mises en page plus avancées. Pour finir, le lecteur apprend à animer simplement une interface et à la tester de manière automatisée.

Dans chaque chapitre de ce livre, l'autrice partage des bonnes pratiques d'accessibilité avec des exemples concrets.

Avant-propos

1. 1. Introduction
2. 2. Parti pris de ce livre
   1. 2.1 Ce qui ne sera pas abordé
   2. 2.2 Choix techniques
   3. 2.3 Choix d'écriture

Introduction

1. 1. Des applications accessibles
   1. 1.1 Qu'est-ce que l'accessibilité numérique ?
   2. 1.2 Quatre formes de handicap
      1. 1.2.1 Le handicap auditif
      2. 1.2.2 Le handicap moteur
      3. 1.2.3 Le handicap cognitif
      4. 1.2.4 Le handicap visuel
   3. 1.3 Responsabilités des développeurs et développeuses
      1. 1.3.1 Les référentiels d'accessibilité
      2. 1.3.2 Savoir utiliser Talkback
2. 2. Des applications modernes
   1. 2.1 Des challenges uniques spécifiques au mobile
   2. 2.2 Des appareils de plus en plus puissants menant à des interfaces de plus en plus complexes
   3. 2.3 Un UI Toolkit original qui n’est plus à la hauteur
3. 3. Prérequis
   1. 3.1 Kotlin
      1. 3.1.1 Fonctions
      2. 3.1.2 Traitement asynchrone
   2. 3.2 Android

La genèse de Jetpack Compose

1. 1. Introduction
2. 2. Les raisons motivant la création de Jetpack Compose
   1. 2.1 Pouvoir mettre à jour le UI toolkit en dehors du cycle de mise à jour de la plateforme
   2. 2.2 Améliorer la maintenabilité du UI Toolkit original
   3. 2.3 Se débarrasser des choix d’implémentation contraignants, liés au principe d’héritage
   4. 2.4 Simplifier le développement de composants réutilisables
   5. 2.5 Prendre en compte l’accessibilité dès la conception
   6. 2.6 Appliquer une meilleure séparation des responsabilités
   7. 2.7 Les lacunes de la programmation impérative
   8. 2.8 Conclusion
3. 3. Les partis pris techniques de Jetpack Compose
   1. 3.1 Avant-propos
   2. 3.2 La structure d’un composant Jetpack Compose
   3. 3.3 Un composant est une fonction
      1. 3.3.1 La piste écartée de l’utilisation des classes
      2. 3.3.2 L’utilisation de fonction
   4. 3.4 Un composant est une fonction qui prend en entrée des paramètres
      1. 3.4.1 Des données qui circulent dans un sens
      2. 3.4.2 Des événements qui circulent dans l’autre sens
      3. 3.4.3 Une fonction Composable ne gère pas l’état du composant mais le représente
   5. 3.5 L’annotation @Composable
      1. 3.5.1 Comment fonctionne cette annotation ?
      2. 3.5.2 Comment utiliser le mot-clé @Composable ?
      3. 3.5.3 L’arbre de composition
   6. 3.6 La recomposition
      1. 3.6.1 Les optimisations du processus de recomposition
      2. 3.6.2 Règle nº1 : une fonction Composable ne doit pas générer d’effet de bord
      3. 3.6.3 Règle n°2 : une fonction Composable doit être idempotente
   7. 3.7 Le nommage des fonctions Composables
   8. 3.8 Une fonction @Composable ne retourne rien
   9. 3.9 La programmation déclarative
4. 4. L’arbre sémantique pour gérer l’accessibilité
   1. 4.1 Représentation de l’arbre sémantique
   2. 4.2 Propriétés sémantiques
   3. 4.3 Propriétés sémantiques des composants de la bibliothèque Compose UI
   4. 4.4 Visualiser l’arbre sémantique et ses propriétés avec Android Studio
5. 5. De l’annotation @Composable au rendu visuel à l’écran
   1. 5.1 Interprétation de l’annotation Composable par le compilateur
   2. 5.2 Mise en mémoire de l’interface dans la Slot table lors de l’exécution
   3. 5.3 Les trois phases de rendu d’un écran
6. 6. Conclusion

Les bases de Compose UI

1. 1. Premiers pas
   1. 1.1 Les dépendances Jetpack Compose
   2. 1.2 Créer un nouveau projet Android avec Jetpack Compose
   3. 1.3 Ajouter Jetpack Compose à un projet existant
   4. 1.4 Le composant racine
      1. 1.4.1 Une activité Jetpack Compose
      2. 1.4.2 Jetpack Compose au sein d'une vue XML
   5. 1.5 Aperçu d'un composant utilisant Compose UI
   6. 1.6 Prévisualiser un composant avec Android Studio
2. 2. Modifier
   1. 2.1 Définition
      1. 2.1.1 À quoi sert un Modifier ?
      2. 2.1.2 Les Modifiers peuvent se chaîner
      3. 2.1.3 L'ordre des Modifiers a une importance
      4. 2.1.4 Certains Modifiers sont type safe
   2. 2.2 Le Modifier .semantics() pour gérer l'accessibilité
   3. 2.3 Des Modifiers qui s'enchaînent
   4. 2.4 Bonne pratique : tout composant doit exposer un paramètre Modifier
3. 3. Les thèmes
   1. 3.1 Création d'un MaterialTheme
      1. 3.1.1 La notion de thème au sein de Material Design
      2. 3.1.2 La fonction Composable MaterialTheme
      3. 3.1.3 Définir un thème propre à notre application
      4. 3.1.4 Personnalisation des couleurs
      5. 3.1.5 Personnalisation de la typographie
      6. 3.1.6 Personnalisation des formes
   2. 3.2 L'objet MaterialTheme pour accéder aux attributs de notre thème
   3. 3.3 Appliquer les couleurs "On" par défaut
      1. 3.3.1 Le composant Surface
      2. 3.3.2 CompositionLocal
   4. 3.4 Bonnes pratiques d'accessibilité
      1. 3.4.1 Des couleurs avec des niveaux de contraste suffisamment prononcés
      2. 3.4.2 Une typographie lisible
      3. 3.4.3 Un thème homogène et cohérent
      4. 3.4.4 Un thème sombre
   5. 3.5 Aller plus loin avec les thèmes
4. 4. Conclusion

Textes, boutons et images

1. 1. Textes
   1. 1.1 Les paramètres de la fonction Composable Text
   2. 1.2 Style
      1. 1.2.1 Première version brute du composant
      2. 1.2.2 Version stylisée du composant
      3. 1.2.3 Version stylisée via TextStyle
      4. 1.2.4 Version reposant sur le thème Material Design
   3. 1.3 Plusieurs styles au sein d'un même texte
   4. 1.4 Bonnes pratiques d'accessibilité concernant les textes
      1. 1.4.1 Le contexte du texte est véhiculé implicitement par un élément non textuel
      2. 1.4.2 Le texte contient du texte barré
      3. 1.4.3 Le texte contient des caractères spéciaux ou des abréviations
      4. 1.4.4 Le texte est réparti sur plusieurs composants agencés d'une manière spécifique
2. 2. Boutons
   1. 2.1 Les paramètres du composant Button
      1. 2.1.1 Introduction
      2. 2.1.2 Un composant 100 % personnalisable
      3. 2.1.3 Personnaliser l'apparence d'un bouton avec ButtonDefaults
   2. 2.2 Bouton icône
      1. 2.2.1 Les paramètres du composant IconButton
      2. 2.2.2 Le composant Icon
   3. 2.3 Boutons flottants
   4. 2.4 Un composant cliquable grâce au Modifier .clickable
   5. 2.5 Bonnes pratiques d'accessibilité concernant les boutons
      1. 2.5.1 Associer un texte alternatif aux composants de type IconButton
      2. 2.5.2 Veillez à ce que les boutons flottants soient bien atteignables avec un lecteur d'écran
      3. 2.5.3 Annoncer les informations affichées temporairement suite à une action
      4. 2.5.4 Annoncer les changements d'état d'un composant suite à une action
      5. 2.5.5 Personnaliser le nom de l'action associée au bouton avec la propriété onClickLabel
3. 3. Images
   1. 3.1 Les paramètres de la fonction Image
   2. 3.2 Charger une image à partir d'une URL
   3. 3.3 La fonction Icon
   4. 3.4 Bonnes pratiques d'accessibilité
      1. 3.4.1 Quand faut-il écrire un texte alternatif ?
      2. 3.4.2 Comment écrire un texte alternatif ?

Champs de formulaire

1. 1. Introduction
2. 2. Champs de saisie
   1. 2.1 Aperçu du composant TextField
   2. 2.2 Les paramètres de la fonction Composable TextField
   3. 2.3 Style
   4. 2.4 Styles multiples au sein d'un champ de saisie
   5. 2.5 Faciliter la saisie des douze chiffres d'une carte bancaire
   6. 2.6 Bonnes pratiques d'accessibilité pour les champs de saisie
      1. 2.6.1 Donner la possibilité à l'utilisateur d'afficher et masquer le contenu d'un champ de type mot de passe
      2. 2.6.2 Informer suffisamment tôt l'utilisateur des contraintes d'un champ de saisie
      3. 2.6.3 Informer l'utilisateur s'il y a une erreur dans sa saisie
      4. 2.6.4 Permettre le remplissage automatique dans certains types de champs
      5. 2.6.5 Utiliser un label et pas seulement un placeholder
3. 3. Boutons de type radio, cases à cocher et switchs
   1. 3.1 Boutons de type radio
   2. 3.2 Cases à cocher
   3. 3.3 Switch
      1. 3.3.1 Amélioration du contraste du composant Switch
      2. 3.3.2 Associer un texte à un Switch

Mise en page standard

1. 1. Introduction
2. 2. Le processus de mise en page
   1. 2.1 La phase de layout
      1. 2.1.1 Le processus de mesure
      2. 2.1.2 Le processus de positionnement
3. 3. Mise en page en ligne ou en colonne
   1. 3.1 Le layout Row
   2. 3.2 Le layout Column
4. 4. Modifiers affectant la mise en page
   1. 4.1 La taille
   2. 4.2 Le positionnement
      1. 4.2.1 Alignement
      2. 4.2.2 Alignement sur la ligne de base
      3. 4.2.3 Poids
      4. 4.2.4 Marge
   3. 4.3 Le défilement
5. 5. Mise en page en superposition
   1. 5.1 Les paramètres du layout Box
   2. 5.2 Cas d'usage du layout Box
   3. 5.3 Alignement unitaire des composants en superposition
   4. 5.4 Taille relative d'un enfant
6. 6. Mise en page selon l'espace disponible avec BoxWithConstraints
   1. 6.1 Cas d'usage
   2. 6.2 Impact sur le processus de mise en page
7. 7. Les mesures intrinsèques
   1. 7.1 Introduction
   2. 7.2 Définition des mesures intrinsèques
   3. 7.3 Cas d'usage en largeur
   4. 7.4 Cas d'usage en hauteur
8. 8. Bonnes pratiques d'accessibilité
   1. 8.1 Redimensionnement sans dégradation jusqu’à 200 %
      1. 8.1.1 Exemple
      2. 8.1.2 Comment détecter ce type d'anomalies ?
      3. 8.1.3 Correction
   2. 8.2 Navigation facilitée grâce aux titres
      1. 8.2.1 Exemple
      2. 8.2.2 Correction
   3. 8.3 Navigation facilitée grâce aux regroupements de composant
      1. 8.3.1 Exemple
      2. 8.3.2 Correction

Gestion des états et des effets

1. 1. Qu'est-ce qu'un état ?
   1. 1.1 Introduction
   2. 1.2 Différents types d'états
   3. 1.3 Production d’un Screen UI State
   4. 1.4 Production d’un UI Element State
      1. 1.4.1 Cas n°1 : la logique UI est simple
      2. 1.4.2 Cas n°2 : la logique UI est complexe et implique un ou plusieurs états
   5. 1.5 Résumé
2. 2. Composant sans état interne
   1. 2.1 Origine de cette pratique
   2. 2.2 Conception de composants sans état
      1. 2.2.1 Unidirectional Data Flow (UDF)
      2. 2.2.2 États et événements dans les paramètres
   3. 2.3 Résumé
3. 3. Composants avec état interne
   1. 3.1 La fonction remember
   2. 3.2 Composant avec état immutable
      1. 3.2.1 Cas pratique
   3. 3.3 Composant avec état mutable
      1. 3.3.1 La fonction mutableStateOf()
      2. 3.3.2 Cas pratique
      3. 3.3.3 Différentes manières de déclarer un état mutable
   4. 3.4 La fonction rememberSaveable
   5. 3.5 Autres états Android supportés
      1. 3.5.1 Cas pratique
   6. 3.6 Résumé
4. 4. Arbre de décision : où gérer l'état ?
5. 5. Gestion des effets de bord
   1. 5.1 Introduction
   2. 5.2 Gestion d'effet de bord synchrone
      1. 5.2.1 DisposableEffect
      2. 5.2.2 SideEffect
   3. 5.3 Gestion d'effet de bord asynchrone
      1. 5.3.1 rememberCoroutineScope
      2. 5.3.2 LaunchedEffect
   4. 5.4 Effets de bord produisant un état
      1. 5.4.1 rememberUpdatedState
      2. 5.4.2 produceState
      3. 5.4.3 derivedStateOf
      4. 5.4.4 remember

Les listes

1. 1. Introduction
2. 2. Définition du contenu via un DSL
   1. 2.1 DSL : définition
   2. 2.2 Accès au DSl via LazyListScope
   3. 2.3 Les fonctions du DSL
      1. 2.3.1 La fonction item
      2. 2.3.2 Les fonctions items
      3. 2.3.3 La fonction itemsIndexed
      4. 2.3.4 La fonction stickyHeader
3. 3. LazyColumn et LazyRow
   1. 3.1 Introduction
   2. 3.2 Paramètres
   3. 3.3 Cas d'usage
   4. 3.4 Point de vigilance : imbrication de Lazy layout dans un layout standard défilable
4. 4. Grilles
   1. 4.1 Paramètres de LazyVerticalGrid et LazyHorizontalGrid
   2. 4.2 Cas d'usage de LazyVerticalGrid et LazyHorizontalGrid
      1. 4.2.1 Grille verticale adaptative
      2. 4.2.2 Grille horizontale avec un nombre de lignes fixe
   3. 4.3 Grilles contenant des éléments de hauteur ou largeur différente
      1. 4.3.1 Cas d'usage
5. 5. Contrôler et réagir à l'état de défilement
   1. 5.1 Le State Holder d'un lazy layout
   2. 5.2 Cas d'usage
      1. 5.2.1 Observer la position de défilement
      2. 5.2.2 Actionner le défilement vers une position

Une interface riche et animée

1. 1. Les composants Materials
   1. 1.1 Une librairie de composants personnalisables
   2. 1.2 Le slot API Pattern
      1. 1.2.1 Définition
      2. 1.2.2 Principes de conception du Slot API Pattern
   3. 1.3 Prise en main du composant Scaffold
      1. 1.3.1 Signature et paramètres
      2. 1.3.2 Squelette
      3. 1.3.3 Analyse
      4. 1.3.4 Cas pratique
2. 2. Les animations
   1. 2.1 Animer la visibilité
   2. 2.2 Animer la taille d'un contenu
   3. 2.3 Animer une valeur
   4. 2.4 Les effets négatifs des animations sur l'accessibilité
      1. 2.4.1 Mouvement, clignotement, défilement
      2. 2.4.2 Animation de mouvement lors d'une interaction
   5. 2.5 Personnaliser le comportement d'une animation
      1. 2.5.1 Différents comportements
      2. 2.5.2 Accélérer ou ralentir
      3. 2.5.3 Personnaliser le comportement d'une animation et sa vitesse d'exécution
   6. 2.6 Aller plus loin

Les tests automatisés

1. 1. Introduction
   1. 1.1 Installation
   2. 1.2 Différents types de tests
2. 2. Définir l'interface à tester avec createComposeRule
3. 3. Les fonctions permettant de tester une interface
   1. 3.1 Rechercher, actionner, vérifier
   2. 3.2 Matcher
   3. 3.3 Associer un tag à un composant
4. 4. Tester au sein d'une activité
   1. 4.1 Accéder aux ressources
   2. 4.2 Tester de bout en bout une activité
5. 5. Arbre sémantique
   1. 5.1 Deux versions de l'arbre sémantique : fusionné et non fusionné
   2. 5.2 Imprimer l'arbre sémantique dans les logs pour déboguer
   3. 5.3 Cas d'usage : arbre non fusionné dans un test
   4. 5.4 Synchronisation des tests
      1. 5.4.1 Cas d'usage : synchroniser manuellement l'interface et contrôler le temps
      2. 5.4.2 Cas d'usage : attendre un traitement
6. 6. Conclusion
7.  
8.  
9.  
10.  
11. Index