Idea has a new artifact, a set of code to adapt to multiple terminals!

Click below “Java Programming duck ” Follow and mark the stars

More exciting First time direct

JetBrains  New multi terminal based UI Debugging tools , A set of code to adapt to multiple terminals , It's really great , Let's share with you .

Preface

The tool is famous  JetBrains  The company's new , called ：“Jetpack Compose for Web”, Officials say the project is based on Google modern UI tool kit Jetpack Compose, Support use Kotlin Write responsive Web UI.

Jetpack Compose  Is a new tool for building native interfaces Android tool kit . It simplifies and speeds up Android Interface development on . Use less code 、 Powerful tools and intuitive Kotlin API, Quickly make the application vivid and exciting .

UI The code and preview are shown in the figure below ：

According to introducing ,Jetpack Compose for Web Can simplify and accelerate Web Applied UI Development , The goal is to Web、 Desktop and Android APP Realization between UI Code sharing , A set of code to adapt to multiple terminals . Currently in the technology 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

Use Compose for Web Build the user interface

With the help of Compose for Web, Developers use Kotlin And Application Jetpack Compose The concept and API by Web Build a responsive user interface , To express the state of the application 、 Behavior and logic .

Combinable DOM API

• adopt DOM Elements and HTML Label expression design and layout

• Use type safe HTML DSL structure UI Representation form

• By using type safe CSS DSL Create style sheets to fully control the appearance of your application

• adopt DOM Subtree and other JavaScript Library Integration

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

94_3.png

have Web Supported multi platform widgets

By using Kotlin Of Expect-actual Mechanism to provide platform specific implementation , Thus, it can be used and built in Android、 Desktop and Web Running on Compose The widget

A set of layout primitives in the experimental stage (layout primitives) and API, These primitives and API And Compose for Desktop/Android The functions of are similar

Sample code

Use Composable DOM Write a simple counter

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()
    }
}

Declaration and use CSS Variable

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

END

 After reading this article, there are gains ？ Please forward to share with more people 
 Focus on 「Java Programming duck 」, promote Java Skill 
 Focus on Java Programming duck WeChat official account , The background to reply ： Yard farm gift bag   A copy of the latest technical data can be obtained . cover Java  Frame learning 、 Architect learning, etc ！


 If the article helps , Looking at , Forward! .
 Thank you for your support  (*^__^*）