JetBrains выпустила новый артефакт, набор кода, адаптированный для разных целей!

задняя часть
JetBrains выпустила новый артефакт, набор кода, адаптированный для разных целей!

Очень приятно видеть инструмент отладки пользовательского интерфейса, основанный на мультитерминале, набор кода адаптируется к мультитерминалу, и я поделюсь им с вами ниже.

1. Введение

Инструмент недавно запущен известной компанией JetBrains под названием «Jetpack Compose for Web». В официальном представлении говорится, что этот проект основан на современном наборе инструментов пользовательского интерфейса Google Jetpack Compose, который поддерживает использование Kotlin для написания адаптивного веб-интерфейса. .

Jetpack Compose — это новый набор инструментов Android для создания нативных интерфейсов. Это упрощает и ускоряет разработку интерфейса на Android. Быстро оживляйте свои приложения с помощью меньшего количества кода, мощных инструментов и интуитивно понятного API Kotlin.

Код пользовательского интерфейса и предварительный просмотр показаны ниже:Java 线程池配置的常见误区Согласно сообщениям, Jetpack Compose for Web упрощает и ускоряет разработку пользовательского интерфейса веб-приложений.Цель состоит в том, чтобы совместно использовать код пользовательского интерфейса между веб-приложениями, приложениями для настольных компьютеров и Android, а набор кодов может адаптироваться к нескольким терминалам. В настоящее время находится на стадии предварительного просмотра технологии.

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

在这里插入图片描述 2. Создавайте пользовательские интерфейсы с помощью Compose for Web

С помощью Compose for Web разработчики создают адаптивные пользовательские интерфейсы для Интернета, используя Kotlin и применяя концепции и API Jetpack Compose для выражения состояния, поведения и логики приложения.

Составной DOM API

  • Экспресс-дизайн и верстка с помощью элементов DOM и тегов HTML
  • Создавайте представления пользовательского интерфейса с помощью безопасного для типов HTML DSL.
  • Получите полный контроль над внешним видом вашего приложения, создав таблицы стилей с помощью CSS DSL с безопасным типом.
  • Интеграция с другими библиотеками JavaScript через поддеревья DOM.
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!")
        }
    }
}

在这里插入图片描述 Мультиплатформенный виджет с веб-поддержкой

  • Потребляйте и создавайте виджеты Compose, которые работают на Android, настольных компьютерах и в Интернете, используя механизм Kotlin Expect-actual для реализации конкретных платформ.
  • Экспериментальный набор примитивов макета и API, которые по функциональности аналогичны Compose for Desktop/Android.

3. Пример кода

Напишите простой счетчик с 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("+")
        }
    }
}

Объявление и использование таблиц стилей

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

Объявление и использование переменных CSS

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

Источник | Программирование программиста

Категории