In depth explanation Jetpack Compose | optimization in the process of building the UI why Google introduced design Jetpack Compose to finishing the development of native Android, now Jetpack Compose for the birth of the Desktop, It also illustrates Google’s commitment and commitment to Compose’s development.

Jetpack Compose for Desktop has finally released its first milestone release as a next-generation Kotlin UI framework for quickly building high-performance and aesthetically pleasing user interfaces.

Easier desktop UI development

Compose for Desktop provides a declarative and responsive approach to creating user interfaces using Kotlin, whose API references other modern frameworks (such as React and Flutter). Essentially, Compose for Desktop allows developers to declare a Desktop UI in their code via composite functions, and it automatically responds to application state synchronization.

The project is based on Google’s Jetpack Compose, a UI development kit for Android, Compose for Desktop allows the ability to use Jetpack Compose on Android to move directly to Compose for Desktop and vice versa.

All of the core apis provided by Compose for Desktop are the same as on mobile, including modifiers, UI elements, or layout units, and so on. In fact, the core of Compose for Desktop was developed in partnership with Jetpack Compose to make sure that the two technologies can evolve together, which makes it possible to share the UI between the Desktop and Android.

Compose for Desktop is easy to get started with. Once project dependencies are set up, developers can express a simple stateful user interface in a few lines of code, and there is a library of Material Design elements available to help quickly create uIs.

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!" )}}}Copy the code

But Compose for Desktop isn’t just a UI element, it has almost all of the features that can be found in the Android version.

Desktop-specific apis

For developers, Compose for Desktop comes with desktop-specific apis for specific Desktop functions, which are structured like the other Compose apis. Allows developers to respond to events such as the mouse pointer, query and manipulate the size and location of the application window, create taskbar ICONS or menu bar entries, 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}") } }Copy the code

Google wants these Desktop apis to cover all relevant functionality as soon as possible. To do so, it is necessary to understand which integrations are most missing in the current release, so Google can prioritize these interface updates. Welcome feedback: blog.jetbrains.com/cross-post/…

Rapid migration integration

Like Kotlin itself, Compose for Desktop follows the philosophy of simple operability and smooth migration so that it can be integrated with Swing and AWT, This allows developers’ Compose for Desktop applications to unlock these Java graphical apis, and the integration also allows developers to gradually migrate applications using these frameworks to 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") } } } }Copy the code

To make development more flexible, Google has also exposed the API portion provided by the native Skia graphics library, which supports Compose for Desktop for low-level rendering, giving developers full control over how their applications are rendered.

Compose for Desktop

To give it a try, I recommend reading the getting started tutorial, which covers the basic steps needed to set up and run Compose for Desktop, as well as other tutorials covering a range of topics, such as manipulating images, handling mouse events, and sending Desktop notifications.

These content can be found here: jetbrains.com/lp/compose/…

The Android developer portal is the main source of learning material for Jetpack Compose, which provides a lot of insight into the core API concepts that come with Compose for Desktop, For an overview of the Compose model and its basic API, see the Jetpack Compose Pathway, which includes articles, videos, and other content topics.

For a more complex Compose for Desktop example, check out Google’s Demo application, which also includes an example of how to use Kotlin Multiplatform to share user interfaces between desktops and Android.

Notes before release

This is the first milestone release of Compose for Desktop, which means developers can expect all sorts of issues, and some of the apis that Compose provides may still change until the first stable release, Of course, Gogole is also trying to get the first stable, production-ready version.

Provide feedback

Milestone builds are the most important time for developers to provide feedback, as they force Google to address key issues or include other features before stable builds are released. If you encounter any problems using Compose for Desktop, or find any examples that aren’t covered by desktop-specific apis, Please inform in the issue of the project: github.com/JetBrains/c… .

If you still want to talk to team members, Google invites you to join the discussion about Kotlin Slack. A discussion of compose for desktop can be found in # comement-desktop, and issues involving Compose and Jetpack compose on Android can also be discussed in # Compose.

Hopefully, you’ll have fun building the user interface using Compose for Desktop!

Original link: blog.jetbrains.com/cross-post/…