Présentation de Compose for Desktop – Étape 1

Nous avons le plaisir de vous présenter la première étape de Compose for Desktop, un framework pour Kotlin qui simplifie la création d’interfaces utilisateurs à la fois performantes et esthétiques. Nous vous invitons à tester cette technologie en avant-première et attendons vos retours avec impatience !

Consultez la page dédiée à Compose for Desktop

Développement d’interfaces utilisateurs de bureau agréable

Compose for Desktop propose une approche déclarative et réactive pour la création d’interfaces utilisateur avec Kotlin, grâce à une API inspirée de frameworks tels que React et Flutter. Compose for Desktop vous permet de déclarer votre interface utilisateur en code en combinant des fonctions composables. Le maintien de la synchronisation de l’état et de la représentation visuelle de votre application se fait automatiquement.

Le projet est basé sur Jetpack Compose de Google, une boîte à outils pour le développement d’interfaces utilisateurs pour Android. Par conséquent, les connaissances que vous avez peut-être déjà acquises en travaillant avec Jetpack Compose sur Android peuvent être directement appliquées à Compose for Desktop et vice versa. Les principales API fournies par Compose for Desktop se comportent comme leurs homologues mobiles, notamment en ce qui concerne les modificateurs, les éléments d’interface utilisateur et les primitives de disposition. En fait, le cœur de Compose for Desktop est développé comme une partie intégrante du Jetpack Compose de Google, ce qui garantit que les deux technologies évolueront ensemble. Cette approche permet également de partager des parties importantes de la mise en œuvre de votre interface utilisateur entre desktop et Android.

La prise en main de Compose for Desktop est rapide. Après avoir configuré les dépendances du projet, vous pouvez exprimer une interface simple et dynamique en quelques lignes de code seulement et une riche bibliothèque d’éléments de Material Design prêts à l’emploi vous aidera à démarrer la création de votre interface utilisateur.

 import androidx.compose.desktop.Window import androidx.compose.foundation.Text import androidx.compose.material.* import androidx.compose.runtime.*

fun main() = Window(title = "Compose for Desktop") { var count by remember { mutableStateOf(0) } MaterialTheme { Button( onClick = { count++ }) { Text(if (count == 0) "Hello World" else "Clicked $count!") } } } 

Mais Compose for Desktop va au-delà des éléments d’interface utilisateur, des fonctions composables et autres concepts que l’on peut également trouver dans son équivalent Android.

API spécifiques au bureau

Pour assurer la conception d’interfaces utilisateurs de bureau correctement intégrées pour vos applications, Compose for Desktop dispose de son propre ensemble d’API permettant le déploiement de fonctionnalités spécifiques au bureau. Elles ont la même structure que les autres API de Compose et permettent à votre application de réagir à des événements de pointeur, d’interroger et de manipuler la taille et le positionnement des fenêtres de votre application, de créer des icônes de gouttière ou des entrées de barre de menu, etc.

 fun main() { Window { var windowSize by remember { mutableStateOf(IntSize.Zero) } var windowLocation by remember { mutableStateOf(IntOffset.Zero) } AppWindowAmbient.current?.apply { events.onResize = { windowSize = it } events.onRelocate = { windowLocation = it } } Text(text = "Location: ${windowLocation}\nSize: ${windowSize}") } } 

Nous avons pour objectif de traiter toutes les fonctionnalités utiles avec ces API dès que possible. Pour ce faire, nous devons déterminer quelles sont les intégrations qui vous manquent le plus dans cette version intermédiaire, afin de pouvoir hiérarchiser les priorités dans l’évolution continue de ces interfaces. Nous vous invitons donc à nous faire part de vos retours à ce sujet.

Migrations harmonieuses et contrôle total

Tout comme le langage de programmation Kotlin, l’approche de Compose for Desktop vise à faciliter l’interopérabilité et les migrations. Ainsi, l’intégration de Compose for Desktop avec Swing et AWT met à disposition de vos applications toute la puissance de ces API graphiques Java. Elle vous permet également de migrer progressivement les applications utilisant ces frameworks vers Compose for Desktop.

 fun main() = Window(title = "JFrame properties") { var alwaysOnTop by remember { mutableStateOf(false) } onCommit(alwaysOnTop) { val jFrame = AppManager.focusedWindow?.window jFrame?.let { // Use JFrame-specific methods it.isAlwaysOnTop = alwaysOnTop } } MaterialTheme { Column { Button(onClick = { alwaysOnTop = !alwaysOnTop }) { Text("Toggle always on top") } } } } 

Pour un maximum de flexibilité et de maîtrise, nous exposons également une partie importante de l’API fournie par la bibliothèque graphique native Skia, sur laquelle repose Compose for Desktop, ce qui vous procure un contrôle total sur le rendu de votre application.

Apprendre à utiliser Compose for Desktop

Nous espérons que vous êtes aussi enthousiaste que nous vis-à-vis de Compose for Desktop ! Avant de l’essayer, nous vous recommandons de suivre notre tutoriel de prise en main, qui explique les principales étapes nécessaires à la configuration et à l’exécution d’une application générée par Compose for Desktop. Vous pouvez également consulter les autres tutoriels disponibles dans le référentiel, qui abordent des sujets tels que la manipulation d’images, la gestion des événements de la souris et l’envoi de notifications sur le bureau. Un aperçu de ce contenu est disponible sur la page d’accueil de Compose for Desktop.

Visiter la page d’accueil de Compose for Desktop

Une excellente source de supports d’apprentissage pour les sujets généraux liés à Compose est l’Android Developer Portal, qui fournit des explications pour de nombreux concepts faisant intervenir l’API principale qui est également incluse avec Compose for Desktop. Pour un aperçu du modèle mental de Compose et de son API principale, jetez un coup d’œil aux 10 étapes du Jetpack Compose Pathway, qui couvrent ces sujets avec des articles, des vidéos et plus encore.

Si vous souhaitez explorer des cas d’utilisation plus complexes de Compose for Desktop, consultez nos applications de démo, qui comprennent notamment des exemples sur la manière de partager des interfaces utilisateur entre desktop et Android en utilisant Kotlin Multiplatform.

Notes de pré-version

Nous n’en sommes qu’à la première étape de Compose for Desktop. Il est donc possible que vous rencontriez des problèmes ou trouviez que certaines fonctionnalités manquent. Veuillez également noter qu’avant une première version stable, certaines des API fournies par Compose for Desktop peuvent encore changer. Nous travaillons activement à une première version stable et comptons beaucoup sur vos retours pour nous aider à y parvenir.

Partagez vos retours et participez à la discussion !

Cette étape est le meilleur moment pour nous faire part de vos commentaires, car cela nous permet de corriger des problèmes critiques ou d’inclure des fonctionnalités supplémentaires avant une version stable. Si vous rencontrez des problèmes en travaillant avec Compose for Desktop ou si vous identifiez des cas d’utilisation qui ne sont pas encore couverts par nos API, n’hésitez pas à nous en faire part via l’outil de suivi du projet.

Si vous souhaitez échanger avec d’autres développeurs et membres de l’équipe, nous vous invitons également à rejoindre le canal Slack Kotlin. Vous pouvez aussi trouver des discussions concernant Compose for Desktop sur #compose-desktopet échanger autour de sujets généraux impliquant Compose et Jetpack Compose sur Android sur#compose.

Nous espérons que vous apprécierez de concevoir vos interfaces utilisateur avec Compose for Desktop !

Auteur de l’article original en anglais : Nikolay Igotti