• An Introduction to JetPack Compose for Desktop
  • By Siva Ganesh Kantamani
  • Translation from: The Gold Project
  • This article is permalink: github.com/xitu/gold-m…
  • Translator: YueYongDev
  • Proofreader: [Hoarfroster](PassionPenguin (Hoarfroster) (github.com)

JetPack Compose for Desktop First experience

So far, we’ve only seen Jetpack Compose in Android development. Today, we’re entering a brand new phase, as JetBrains has announced an early access version of IntelliJ, which allows you to build Windows applications using Jetpack Compose.

This article is the first in a series I plan to write in the future about how to use Jetpack Compose for Desktop. Last month, JetBrains announced the release of Compose for Desktop Milestone 2, which brings better development experience and operability to developers.

As always, JetBrains continues to try to simplify the development process for developers by providing exclusive project guidance. In earlier versions of Compose for Desktop, they added a desktop project boot for IntelliJ that allowed us to configure the project in seconds.

Before you can start development, you need to install IntelliJ IDEA 2020.3 or later.

Get started quickly using the project template

As I said earlier, project templates are one of the best things IntelliJ can do. After installing the IDE, start the application. You will see the following interface:

Then click the “New Project “button in the top bar. This action will take you to the screen for selecting the type of application. As follows:

First, we need to select Kotlin from the left menu, and then change the project name and location. After that, we need to select the project template. This is an important step in configuring the project. We need to select a desktop template from the project template list, scroll down to find it. Then you need to select the JDK for your project, and I recommend JDK 11 here.

Then click the ‘Next’ button, which will jump to the interface to confirm the Compose module. Now click the “Finish” button and IntelliJ will configure the entire project for you by automatically downloading the appropriate Gradle.

Run your first desktop application

If all goes well, the entire desktop project will load and you will see the following interface:

At this point, you are ready to run the application. For some reason, main. kt is not selected by default next to the ‘run’ button in the upper right corner, so it will ask you to configure the project. To solve this problem, you need to click the green “Run” button next to the Main function in the main.kt file.

When it runs successfully, you should see the following output, with one containing “Hello, World!” Text button. If you click on it, the text inside the button changes to “Hello, Desktop!” “And see how that works in practice.

To explore the code

As you can see, this is a simple Hello World program — not complicated at all. Most of the code is similar to the Android Jetpack Compose UI.

Main.kt is the Kotlin file that contains the code associated with the output. It has a main function that serves as the entry point for the application to run. The code starts with the Window function and opens a Window with the given content. It needs several parameters to initially configure the attributes of the window, such as title, size, location, Centered, content, etc.

fun main(a) = Window {
}
Copy the code

In this case, we just need to pass the value to the content parameter and leave the rest of the parameters as default. In the following code, we declare a text variable with the function remember, with an initial value of Hello, World! . As follows:

fun main(a) = Window {
    var text by remember { mutableStateOf("Hello, World!")}}Copy the code

In a declarative UI system, the code itself describes the UI. We need to describe the UI at any point in time — not just the initial time. In UI components such as buttons, text fields, and so on, we use Remember as the state of the text, so that when we update the text variable in the future, the view associated with that variable will also update the display text.

To better understand it, I recommend reading the following article.

Jetpack Compose Components (Part 2)

The next piece of code is to define a clickable button and set the entire application window to a Material theme. As follows:

fun main(a) = Window {
    var text by remember { mutableStateOf("Hello, World!") }

    MaterialTheme {
        Button(onClick = {
            text = "Hello, Desktop!"
        }) {
            Text(text)
        }
    }
}
Copy the code

conclusion

Right now, Jetpack Compose is in its very early stages on both the desktop and Android, but it still shows great strides in building a UI. A framework like Jetpack Compose coupled with the power of Kotlin will increase developers’ productivity and give them a way to work on different platforms.

Developers like Gurupreet Singh are very actively involved in Compose’s launch and have created valuable resources (like ComposeCookBook) to help other developers. He also created the Spotify Desktop Clone from the Compose Android app, which gave me a lot of inspiration.

donation

If you’re new to Jetpack Compose, you can start here.

  • “Jetpack Compose — A New and Simple Way to Create Material-UI in Android”
  • “JetPack Compose With Server Driven UI”
  • “Jetpack Compose: How to Build a Messaging App”

That’s all for this article. I hope it helped you. Thank you for reading.

If you find any errors in the translation or other areas that need improvement, you are welcome to revise and PR the translation in the Gold Translation program, and you can also get corresponding bonus points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

Diggings translation project is a community for translating quality Internet technical articles from diggings English sharing articles. The content covers the fields of Android, iOS, front end, back end, blockchain, products, design, artificial intelligence and so on. For more high-quality translations, please keep paying attention to The Translation Project, official weibo and zhihu column.