{"id":386901,"date":"2023-09-15T15:46:27","date_gmt":"2023-09-15T14:46:27","guid":{"rendered":"https:\/\/blog.jetbrains.com\/?post_type=kotlin&p=386901"},"modified":"2023-09-15T16:00:46","modified_gmt":"2023-09-15T15:00:46","slug":"publication-de-compose-multiplatform-1-5-0","status":"publish","type":"kotlin","link":"https:\/\/blog.jetbrains.com\/fr\/kotlin\/2023\/09\/publication-de-compose-multiplatform-1-5-0\/","title":{"rendered":"Publication de Compose Multiplatform 1.5.0"},"content":{"rendered":"

Nous avons le plaisir d’annoncer la disponibilit\u00e9 de Compose Multiplatform 1.5.0. Cette mise \u00e0 jour utilise le framework d’interface utilisateur d\u00e9claratif Jetpack Compose pour Kotlin et \u00e9tend sa prise en charge \u00e0 de nouvelles plateformes, au-del\u00e0 d\u2019Android : bureau, iOS et web. La version bureau est stable, la versions iOS est en phase Alpha et la prise en charge pour le web est encore exp\u00e9rimentale. Pour une pr\u00e9sentation d\u00e9taill\u00e9e, veuillez consulter le site Compose Multiplatform<\/a>.<\/p>\n

Voici les principales am\u00e9liorations qu’apporte cette mise \u00e0 jour :<\/p>\n

    \n
  1. Les API Dialog, Popup et WindowInsets sont maintenant en code commun.<\/li>\n
  2. Nous avons am\u00e9lior\u00e9 le d\u00e9filement, la gestion des ressources et les champs de texte sous iOS.<\/li>\n
  3. Le framework de test de l\u2019interface utilisateur a \u00e9t\u00e9 stabilis\u00e9 sur la version bureau.<\/li>\n<\/ol>\n

    Compose Multiplatform 1.5.0 est bas\u00e9 sur Jetpack Compose 1.5<\/a>, qui est principalement d\u00e9di\u00e9 \u00e0 l’am\u00e9lioration des performances. Elle s’appuie \u00e9galement sur la version 1.1 de Material Design 3<\/a>, qui fournit de nouveaux composants tels que les s\u00e9lecteurs de date et d’heure.<\/p>\n

    Essayer Compose Multiplatform 1.5.0<\/a><\/p>\n

    Compose Multiplatform prend en charge les bo\u00eetes de dialogue, popups et WindowInsets<\/h2>\n

    Les bo\u00eetes de dialogue et les popups sont maintenant disponibles dans Compose Multiplatform. Les bo\u00eetes de dialogue sont utilis\u00e9es pour les \u00e9v\u00e9nements modaux, qui requi\u00e8rent une action de la part de l’utilisateur, par exemple faire un choix ou saisir des donn\u00e9es. Les fen\u00eatres contextuelles sont quant \u00e0 elles utilis\u00e9es pour les actions non modales, comme la fourniture de fonctionnalit\u00e9s optionnelles.<\/p>\n

    Dans cette version, les types de base Dialog<\/a> et Popup<\/a>, ainsi que DropdownMenu<\/a> and AlertDialog<\/a>, sont accessibles \u00e0 partir du code commun, ce qui \u00e9vite de devoir fournir des fonctionnalit\u00e9s sp\u00e9cifiques aux plateformes.<\/p>\n

    Par exemple, l\u2019\u00e9l\u00e9ment Composable ci-dessous est enti\u00e8rement \u00e9crit en code commun\u00a0:<\/p>\n

    @Composable\nfun CommonDialog() {\n   var isDialogOpen by remember { mutableStateOf(false) }\n   Button(onClick = { isDialogOpen = true }) {\n       Text(\"Open\")\n   }\n   if (isDialogOpen) {\n       AlertDialog(\n           onDismissRequest = { },\n           confirmButton = {\n               Button(onClick = { isDialogOpen = false }) {\n                   Text(\"OK\")\n               }\n           },\n           title = { Text(\"Alert Dialog\") },\n           text = { Text(\"Lore ipsum\") },\n       )\n   }\n}\n<\/pre>\n
    Voici comment il appara\u00eet sur bureau, Android et iOS\u00a0:<\/p>\n
    \"D\u00e9mo<\/p>\n
    \"D\u00e9mo<\/p>\n
    Une troisi\u00e8me fonctionnalit\u00e9 disponible dans cette version\u00a0est l’API WindowInsets API<\/a>, qui d\u00e9crit le niveau d’ajustement requis pour \u00e9viter que votre contenu chevauche l’interface utilisateur du syst\u00e8me. Avec Compose Multiplatform 1.5.0, cette fonctionnalit\u00e9 peut \u00eatre utilis\u00e9e aussi bien sur Android que sur iOS.<\/p>\n
    Gr\u00e2ce \u00e0 l’API WindowInsets, vous pouvez dessiner du contenu d’arri\u00e8re-plan via Compose Multiplatform derri\u00e8re l\u2019encoche, sans ajout de ligne blanche en haut de l\u2019application. Les captures d’\u00e9cran ci-dessous montrent la diff\u00e9rence que cela fait :<\/p>\n
    \"Utilisation<\/figure>\n
    Am\u00e9liorations pour iOS<\/h2>\n
    Cette mise jour apporte de nombreuses am\u00e9liorations pour la plateforme iOS. Le d\u00e9filement reproduit le look and feel de la plateforme, la gestion des ressources a \u00e9t\u00e9 simplifi\u00e9e et la manipulation du texte am\u00e9lior\u00e9e.<\/p>\n
    D\u00e9filement naturel<\/h3>\n
    Nous avons adapt\u00e9 le d\u00e9filement sur iOS de fa\u00e7on \u00e0 ce qu’il reproduise le d\u00e9filement natif. Supposons que nous ayons du code dans lequel le nombre et\/ou la taille des \u00e9l\u00e9ments \u00e0 afficher exc\u00e8de l’espace disponible\u00a0:<\/p>\n
    @Composable\nfun NaturalScrolling() {\n   val items = (1..30).map { \"Item $it\" }\n   LazyColumn {\n       items(items) {\n           Text(\n               text = it,\n               fontSize = 30.sp,\n               modifier = Modifier.padding(start = 20.dp)\n           )\n       }\n   }\n}\n<\/pre>\n
    Lors du d\u00e9filement, les \u00e9l\u00e9ments apparaissent depuis les bords de l’\u00e9cran, comme avec les applications iPhone natives\u00a0:<\/p>\n
    \"Affichage<\/p>\n
    Prise en charge de Dynamic Type<\/h3>\n
    La fonctionnalit\u00e9 Dynamic Type sur iOS<\/a> permet \u00e0 l’utilisateur de d\u00e9finir sa taille de police pr\u00e9f\u00e9r\u00e9e : plus grande pour une meilleure lisibilit\u00e9 ou plus petite pour afficher plus de contenu. La taille du texte utilis\u00e9e dans une application doit \u00eatre relative \u00e0 ce param\u00e8tre syst\u00e8me.<\/p>\n
    Cette fonctionnalit\u00e9 est maintenant prise en charge dans Compose Multiplatform. Les incr\u00e9ments utilis\u00e9s pour le redimensionnement du texte sont les m\u00eames que ceux utilis\u00e9s dans les applications natives, le comportement sera donc identique.<\/p>\n
    Prenons par exemple le Composable suivant\u00a0:<\/p>\n
    @Composable\nfun DynamicType() {\n   Text(\"This is some sample text\", fontSize = 30.sp)\n}\n<\/pre>\n
    Voici ce qui s’affiche lorsque la taille de lecture pr\u00e9f\u00e9r\u00e9e est d\u00e9finie au minimum :<\/p>\n
    \"Fonctionnalit\u00e9<\/figure>\n
    Et voici ce que cela donne lorsque la taille de lecture choisie est au maximum\u00a0:<\/p>\n
    \"Fonctionnalit\u00e9<\/figure>\n
    Prise en charge des \u00e9crans \u00e0 taux de rafra\u00eechissement \u00e9lev\u00e9<\/h3>\n
    Dans les versions pr\u00e9c\u00e9dentes, la fr\u00e9quence d’images maximale \u00e9tait de 60 FPS, Cela pouvait entra\u00eener des probl\u00e8mes de lenteur et de latence de l’interface utilisateur sur les appareils dot\u00e9s d’\u00e9crans 120\u00a0Hz. La nouvelle version prend en charge des fr\u00e9quences d’images allant jusqu’\u00e0 120 FPS.<\/p>\n
    Simplification de la gestion des ressources<\/h3>\n
    \u00c0 partir de la version 1.5.0, touts les \u00e9l\u00e9ments du dossier \u00ab\u00a0resources\u00a0\u00bb d’un ensemble de sources iOS sont copi\u00e9s dans le bundle de l’application par d\u00e9faut. Si vous placez un fichier image dans src\/commonMain\/resources\/<\/code>, il sera donc copi\u00e9 dans le paquet et utilisable dans votre code.<\/p>\n
    Si vous utilisez CocoaPods, d\u00e9sormais vous n’avez plus \u00e0 configurer ce comportement dans le fichier de build Gradle. Il n’est pas n\u00e9cessaire non plus d’appeler de nouveau podInstall<\/em> pour que les ressources sont copi\u00e9es apr\u00e8s modification.<\/p>\n
    Si vous essayez de configurer le comportement explicitement dans les scripts de build (comme indiqu\u00e9 ci-dessous), une erreur se produira\u00a0:<\/p>\n
    kotlin {\n    cocoapods {\n        extraSpecAttributes[\"resources\"] = \"...\"\n    }\n}\n<\/pre>\n
    Pour plus de d\u00e9tails et un guide pour la migration du code existant, consultez ce document.<\/a><\/p>\n
    Am\u00e9lioration de TextField<\/h3>\n
    Dans les versions pr\u00e9c\u00e9dentes, deux cas de saisie de texte pouvaient entra\u00eener un comportement ind\u00e9sirable. Pour la nouvelle version, nous avons travaill\u00e9 \u00e0 l’am\u00e9lioration de TextField<\/code> afin d’\u00e9radiquer ces probl\u00e8mes.<\/p>\n
    Probl\u00e8mes de capitalisation<\/h4>\n
    Tout d’abord, TextField<\/code> est maintenant capable de d\u00e9tecter si la mise en majuscule automatique de la premi\u00e8re lettre a \u00e9t\u00e9 d\u00e9sactiv\u00e9e. Cela peut notamment \u00eatre utile lors de la saisie de mots de passe. Le contr\u00f4le de ce comportement se fait via l’argument KeyboardOptions.<\/p>\n
    Regardez le Composable ci-dessous\u00a0:<\/p>\n
    fun TextFieldCapitalization() {\n   var text by remember { mutableStateOf(\"\") }\n   TextField(\n       value = text,\n       onValueChange = { text = it },\n       keyboardOptions = KeyboardOptions(\n           capitalization = KeyboardCapitalization.Sentences,\n           autoCorrect = false,\n           keyboardType = KeyboardType.Ascii,\n       ),\n   )\n}\n<\/pre>\n
    L’image de gauche montre ce que l’on obtient lorsque la propri\u00e9t\u00e9 de capitalisation est d\u00e9finie sur KeyboardCapitalization.None<\/code>. Sur l’image de droite, on voit le r\u00e9sultat lorsque la valeur est d\u00e9finie sur KeyboardCapitalization.Sentences<\/code>.<\/p>\n
    \"D\u00e9mo<\/p>\n
    Claviers physiques<\/h4>\n
    La deuxi\u00e8me situation concerne les claviers physiques. Dans les versions pr\u00e9c\u00e9dentes, lors de l’utilisation d’un clavier physique, appuyer sur Entr\u00e9e<\/strong> entra\u00eenait l’ajout plusieurs nouvelles lignes, et appuyer sur Retour arri\u00e8re<\/strong> d\u00e9clenchait plusieurs suppressions. Avec la nouvelle version, ces \u00e9v\u00e9nements sont d\u00e9sormais trait\u00e9s correctement.<\/p>\n
    Am\u00e9liorations pour desktop<\/h2>\n
    Stabilisation du framework de test<\/h3>\n
    Cette version stabilise la prise en charge des tests sur Compose for Desktop. Jetpack Compose fournit un ensemble d’API de tests<\/a> pour v\u00e9rifier le comportement de votre code Compose. Ces API ont \u00e9t\u00e9 port\u00e9es sur desktop et la nouvelle version a supprim\u00e9 toutes les limitations de disponibilit\u00e9 que l’on pouvait rencontrer auparavant, vous pouvez donc d\u00e9sormais \u00e9crire des tests d’interface utilisateur complets pour votre application.<\/p>\n
    Cr\u00e9ons et testons une interface utilisateur simple pour explorer bri\u00e8vement la fonctionnalit\u00e9 de test. Voici notre exemple de Composable\u00a0:<\/p>\n
    @Composable\nfun App() {\n   var searchText by remember { mutableStateOf(\"cats\") }\n   val searchHistory = remember { mutableStateListOf() }\n\n\n   Column(modifier = Modifier.padding(30.dp)) {\n       TextField(\n           modifier = Modifier.testTag(\"searchText\"),\n           value = searchText,\n           onValueChange = {\n               searchText = it\n           }\n       )\n       Button(\n           modifier = Modifier.testTag(\"search\"),\n           onClick = {\n               searchHistory.add(\"You searched for: $searchText\")\n           }\n       ) {\n           Text(\"Search\")\n       }\n       LazyColumn {\n           items(searchHistory) {\n               Text(\n                   text = it,\n                   fontSize = 20.sp,\n                   modifier = Modifier.padding(start = 10.dp).testTag(\"attempt\")\n               )\n           }\n       }\n   }\n}\n<\/pre>\n
    Cela cr\u00e9e une interface utilisateur simple qui enregistre les tentatives de recherche\u00a0:<\/p>\n
    \"Application<\/p>\n
    Vous remarquerez que Modifier.testTag<\/code> est utilis\u00e9 pour attribuer des noms \u00e0 TextField<\/code>, Button<\/code> et aux \u00e9l\u00e9ments dans LazyColumn.<\/p>\n
    Nous pouvons alors manipuler l’interface utilisateur dans un test JUnit\u00a0:<\/p>\n
    class SearchAppTest {\n   @get:Rule\n   val compose = createComposeRule()\n\n\n   @Test\n   fun `Should display search attempts`() {\n       compose.setContent {\n           App()\n       }\n\n\n       val testSearches = listOf(\"cats\", \"dogs\", \"fish\", \"birds\")\n\n\n       for (text in testSearches) {\n           compose.onNodeWithTag(\"searchText\").performTextReplacement(text)\n           compose.onNodeWithTag(\"search\").performClick()\n       }\n\n\n       val lastAttempt = compose\n           .onAllNodesWithTag(\"attempt\")\n           .assertCountEquals(testSearches.size)\n           .onLast()\n\n\n       val expectedText = \"You searched for: ${testSearches.last()}\"\n       lastAttempt.assert(hasText(expectedText))\n   }\n}\n<\/pre>\n
    En utilisant la r\u00e8gle JUnit sp\u00e9cifique \u00e0 Compose, nous\u00a0:<\/p>\n
      \n
    1. D\u00e9finissons le contenu de l’interface utilisateur en tant qu\u2019App Composable.<\/li>\n
    2. Rep\u00e9rons le champ de texte et le bouton \u00e0 l\u2019aide de onNodeWithTag<\/code> .<\/li>\n
    3. Entrons \u00e0 plusieurs reprises des exemples de valeurs dans le champ de texte et cliquons sur le bouton.<\/li>\n
    4. Trouvons tous les n\u0153uds de texte qui ont \u00e9t\u00e9 g\u00e9n\u00e9r\u00e9s via onAllNodesWithTag<\/code>.<\/li>\n
    5. V\u00e9rifions que le nombre actuel de n\u0153uds de texte ont \u00e9t\u00e9 cr\u00e9\u00e9s et r\u00e9cup\u00e9rons le dernier.<\/li>\n
    6. V\u00e9rifions que cette derni\u00e8re tentative contient le message attendu.<\/li>\n<\/ol>\n
      Am\u00e9lioration de l’interop\u00e9rabilit\u00e9 avec Swing<\/h3>\n
      Cette version introduit une prise en charge exp\u00e9rimentale visant \u00e0 am\u00e9liorer le rendu des panneaux de composition dans les composants Swing. Cela \u00e9vite les probl\u00e8mes de rendu transitoires lorsque les panneaux sont affich\u00e9s, masqu\u00e9s ou redimensionn\u00e9s. Cela permet \u00e9galement d’avoir une superposition correcte lors de la combinaison de composants Swing et de panneaux compose. Un composant Swing peut d\u00e9sormais \u00eatre affich\u00e9 au-dessus ou en dessous d’un ComposePanel<\/code>.<\/p>\n
      Regardez cet exemple\u00a0:<\/p>\n
      fun main() {\n   System.setProperty(\"compose.swing.render.on.graphics\", \"true\")\n   SwingUtilities.invokeLater {\n       val composePanel = ComposePanel().apply {\n           setContent {\n               Box(modifier = Modifier.background(Color.Black).fillMaxSize())\n           }\n       }\n\n\n       val popup = object : JComponent() { ... }\n\n\n       val rightPanel = JLayeredPane().apply {\n           add(composePanel)\n           add(popup)\n           ...\n       }\n\n\n       val leftPanel = JPanel().apply { background = CYAN }\n\n\n       val splitter = JSplitPane(..., leftPanel,rightPanel)\n\n\n       JFrame().apply {\n           add(splitter)\n           setSize(600, 600)\n           isVisible = true\n       }\n   }\n}\n<\/pre>\n
      Ce code cr\u00e9e et affiche une JFrame<\/code> Swing avec le contenu suivant\u00a0:<\/p>\n
        \n
      1. La JFrame contient un JSplitPane<\/code> avec un s\u00e9parateur vertical.<\/li>\n
      2. Sur la gauche du volet divis\u00e9 se trouve un JPanel<\/code> standard de couleur cyan.<\/li>\n
      3. \u00c0 droite se trouve un JLayeredPane<\/code> compos\u00e9 de deux couches\u00a0:\n