See a UI debugging tool based on multi-terminal, a set of code to adapt to multi-terminal, is really great, the following to share with you.

1, the preface

The new tool from JetBrains is called: “Jetpack Composer for Web”. The project is based on Google’s modern UI toolkit Jetpack Composer and supports writing responsive Web UIs using Kotlin.

Jetpack Compose is a new Android toolkit for building native interfaces. It simplifies and speeds up interface development on Android. Use less code, powerful tools, and the intuitive Kotlin API to make your application lively and exciting quickly.

The UI code and preview are shown below:



JetPack Composer for Web simplifies and speeds up UI development for Web applications. The goal is to share UI code between the Web, desktop and Android apps. One set of code is adaptable to many ends. It is currently in the technical preview stage.

fun greet() = listOf("Hello", "Hallo", "Hola", "Servus").random()

renderComposable("greetingContainer") {
    var greeting by remember { mutableStateOf(greet()) }
    Button(attrs = { onClick { greeting = greet() } }) {
        Text(greeting)
    }
}
Result: Servus



Create a user interface using Compose for Web

With Compose for Web, developers build a responsive user interface for the Web by using Kotlin and applying the concept and API of Jetpack Compose to express the state, behavior and logic of the application.

Composable DOM API

  • Design and layout are expressed through DOM elements and HTML tags
  • Use a type-safe HTML DSL to build the UI representation
  • You have complete control over the appearance of your application by creating stylesheets using type-safe CSS DSLs

  • Integration with other JavaScript libraries via DOM subtrees

    fun main() {
  renderComposable("root") {
      var platform by remember { mutableStateOf("a platform") }
      P {
          Text("Welcome to Compose for $platform! ")
          Button(attrs = { onClick { platform = "Web" } }) {
              Text("...for what?")
          }
      }
      A("https://www.jetbrains.com/lp/compose-web") {
          Text("Learn more!")
      }
  }
}



    Multi-platform widgets with Web support

  • Use and build Compose widgets that run on Android, the desktop, and the Web by leveraging Kotlin’s Expect -Actual mechanism to provide a platform-specific implementation
  • A group of layout primitives and APIs in the experimental stage that are similar to the Compose for Desktop/Android functionality

3. Sample code

Write a simple counter using the Composable DOM

fun main() {
    val count = mutableStateOf(0)
    renderComposable(rootElementId = "root") {
        Button(attrs = {
            onClick { count.value = count.value - 1 }
        }) {
            Text("-")
        }
        Span(style = { padding(15.px) }) { /* we use inline style here */
            Text("${count.value}")
        }
        Button(attrs = {
            onClick { count.value = count.value + 1 }
        }) {
            Text("+")
        }
    }
}

Declare and use style sheets

object MyStyleSheet : StyleSheet() { val container by style { /* define a class `container` */ border(1.px, LineStyle.Solid, Color.RGB(255, 0, 0)) } } @Composable fun MyComponent() { Div(attrs = { classes(MyStyleSheet.container) /* use `container` class */ }) { Text("Hello world!" ) } } fun main() { renderComposable(rootElementId = "root") { Style(MyStyleSheet) /* mount the stylesheet */ MyComponent() } }

Declare and use CSS variables

object MyVariables : CSSVariables { val contentBackgroundColor by variable<Color>() /* declare a variable */ } object MyStyleSheet: StyleSheet() { val container by style { MyVariables.contentBackgroundColor(Color("blue")) /* set its value */ } val content by style { backgroundColor(MyVariables.contentBackgroundColor.value()) /* use it */ } } @Composable fun MyComponent() { Div(attrs = { classes(MyStyleSheet.container) }) { Span(attrs = { classes(MyStyleSheet.content) }) { Text("Hello world!" )}}}

Source | programmers programming