Originally posted on ISLAND

JetBarin recently released its Compose Desktop. Yes, you heard that right, it’s Google Compose for Android.

Jetpack Compose is a new toolkit for building native Android interfaces. Jetpack Compose simplifies and speeds up interface development on Android with less code, powerful tools, and an intuitive Kotlin API.

Now you can write the same UI layer code and run it on Android and DeskTop. It’s not hard to see that this is what Kotlin has been doing, sharing code across multiple platforms.

Skia is used for hardware acceleration (the same Skia used by Flutter) and is interoperable with AWT and Swing.

Let’s test the waters with a Hello World.

Create a Compose project

You can update to the latest idea 2020.3(currently in beta) or pull its template from Github. Here I choose to use IDEA.

Find JetBrains Compose in the Kotlin option and select Desktop Uses Kotlin.

Wait for gradle dependencies to download after the creation is complete.

But there is a problem here, the run is reporting the following error.

org/jetbrains/kotlin/cli/common/PropertiesKt

org.jetbrains.kotlin.cli.common.PropertiesKt

Try: Run with –stacktrace option to get the stack trace. Run with –info or –debug option to get more log output. Run with –scan to get full insights.

Gradle 6.6 can cause this problem. You can change Gradle to 6.7 or 6.5 and build again. I changed it to 6.5.1 here

Compose is currently in version 113, while the version created through IDEA is 63, so update the version.

The following is the official gradle.kts configuration

import org.jetbrains.compose.compose
import org.jetbrains.compose.desktop.application.dsl.TargetFormat
import org.jetbrains.kotlin.gradle.tasks.KotlinCompile

plugins {
    kotlin("jvm") version "1.4.0"
    // __UPDATE_COMPOSE_VERSION_MARKER__
    id("org.jetbrains.compose") version (System.getenv("COMPOSE_TEMPLATE_COMPOSE_VERSION") ?: "0.1.0 from - build113")
}


group = "me.young"
version = "1.0 the SNAPSHOT"

dependencies {
    implementation(compose.desktop.currentOs)
}

compose.desktop {
    application {
        mainClass = "MainKt"

        nativeDistributions {
            targetFormats(TargetFormat.Dmg, TargetFormat.Msi, TargetFormat.Deb)
            packageName = "KotlinJvmComposeDesktopApplication"
        }
    }
}
repositories {
    jcenter()
    maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")}Copy the code

run

Open main.kt and run main.

Seems to be ok, or familiar interface JavaFx, or familiar taste Material Design. Let’s look at the code.

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

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

Refresh the interface by changing the text by clicking the button. Basically the same as other declarative UIs, including Flutter, swiftUI, etc.

Basic controls can be used by referring to the Pose documentation on Androidx.com.

Some extensions have been made for the desktop, such as mouse and keyboard events, native notifications for the system, and tray menus for the system.

Refer to the official JetBrains/ comement-JB repository for detailed documentation

packaging

Completed applications can be packaged directly into platform executables. I use the Windows platform. Use the packageMsi command to package the exe application.

Wix3 will be downloaded here.

There may be a download failure. If the download fails, go to Github and download wix311-binaries. Then name the file wix311.zip in build/wixToolset and run packageMsi again.

Just when you think you have compiled successfully, Gradle reports an error again.

� � � � � � � � � � � �. � � � � � ˴ � � � � � � MSI � � װ � � � � �. � Fen � ַ � � � � � � � � � MSI � � � � � 1.0 SNAPSHOT [] ޸ � � � � � : � � � � � � � creates � � � � � � o � � � � � � � � � “win. Msi. ProductVersion” � � msdn.microsoft.com/en-us/libra…

Build (0 to 255); build (0 to 255); The final build ranges from 0 to 65535.

Add a version number to Gradle.

nativeDistributions {
    targetFormats(TargetFormat.Dmg, TargetFormat.Msi, TargetFormat.Deb)
    packageName = "Hello World"
    version = "0.1.0 from"
}
Copy the code

Re-packagemsi after updating Gradle.

Still an error. This is an IO exception.

Add a new configuration vendor in Gradle.

nativeDistributions {
    targetFormats(TargetFormat.Dmg, TargetFormat.Msi, TargetFormat.Deb)
    packageName = "Hello World"
    version = "0.1.0 from"
    vendor = "Example vendor"
}
Copy the code

After experiencing some twists and turns can pack successfully finally.

The mSI is packaged in build\compose\binaries\main\msi\Hello World-0.1.0.msi.

A simple Hello World is around 40 MB in size.

conclusion

So far, the project has a lot of bugs, it’s only Alpha, and there are errors in the official documentation. For example, packaging this piece, a lot of problems need to explore.

For example, in the case of Chinese input method, an error is reported.

The Exception in the thread “@ coroutine# AWT – EventQueue – 0 2” Java. Lang. NullPointerException: event. The text must not be null.

Icon display problem, I show a black box here.

However, it is a good thing that GUi technology on the JVM has evolved to be able to be written in one place and run in multiple places.

The resources

compose-jb

JetBrains/compose-jb

androidx.compose

Jetpack Compose basics