如何在 Kotlin html 框架中表示 Web 组件标签？

Question

Kotlin 有表示 html 的框架，例如 kotlinx。我如何在此类框架中表示 Web 组件标签？例如，如果我想使用 Polymer 组件，是否必须扩展这些框架以包含每个 Polymer 组件？

Answer 1

您可以为您的组件创建 XSD 文件并自动生成它们。 kotlinx 正是这样做的。

生成器是项目的一部分。在这里查看：https://github.com/Kotlin/kotlinx.html/tree/master/generate

资源文件夹中还有 HTML5 的源 XSD 文件： https://github.com/Kotlin/kotlinx.html/blob/master/generate/src/main/resources/html_5.xsd

Answer 2

你可以 Customize Kotlinx (To create a Custom Tag)。对于要在 divs 中使用的名为 dicom-editor 的标签：

class DicomEditor(consumer: TagConsumer<*>) :
        HTMLTag("dicom-editor", consumer, emptyMap(),
                inlineTag = true,
                emptyTag = false), 
        HtmlInlineTag {}

fun DIV.dicom_editor(block: DicomEditor.() -> Unit = {}) {
    DicomEditor(consumer).visit(block)
}
...
div{
    dicom_editor {
        onMouseDownFunction = {_ ->
            window.alert("Dicom Editor")
        }
    }
}

在上面的示例中，dicom_editor 调用包括鼠标按下事件的回调。您还可以添加属性：attributes["data-toggle"] = "dropdown"

您可以将属性添加为字段：

class DicomEditor(consumer: TagConsumer<*>) :
        HTMLTag("dicom-editor", consumer, emptyMap(),
                inlineTag = true,
                emptyTag = false), 
        HtmlInlineTag {
            var data_toggle: String = ""
                set(x) {attributes["data-toggle"] = x}
        }

fun DIV.dicom_editor(block: DicomEditor.() -> Unit = {}) {
    DicomEditor(consumer).visit(block)
}
...
div{
    dicom_editor {
        data_toggle = "dropdown"
    }
}

在 Kotlin 代码中，您必须使用 _ 代替 - 否则会出错。

Answer 3

可以使用Vaadin 10 to control (Polymer-based) web components from server-side Java. Events are fully supported, please read the docs on how to wrap Web Component in a Java API。

Kotlin 与 Vaadin 10 的集成就绪：

Vaadin 10 的 Vaadin-on-Kotlin (VoK) framework; there are nice guides 可帮助您入门。
基于 VoK 构建的示例项目：Vaadin-Kotlin-PWA. This project demoes usage of AppLayout Web Component: AppLayout.kt。

使用AppLayout布局显示基本页面的示例代码：

@BodySize(width = "100vw", height = "100vh")
@HtmlImport("frontend://styles.html")
@Viewport("width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes")
@Theme(Lumo::class)
class MainLayout : AppHeaderLayout(), RouterLayout {
    private val content: Div
    init {
        appHeader {
            appToolbar {
                title.text = "Vaadin Kotlin PWA Demo"
                paperIconButton(VaadinIcons.FILE_REMOVE) {
                    addClickListener {
                        Notification.show("A toast!", 3000, Notification.Position.BOTTOM_CENTER)
                    }
                }
            }
        }
        appDrawer {
            navMenuItem(VaadinIcons.LIST, "Task List")
            navMenuItem(VaadinIcons.COG, "Settings")
            navMenuItem(VaadinIcons.QUESTION, "About")
        }
        content = div {
            setSizeFull(); classNames.add("app-content")
        }
    }

    override fun showRouterLayoutContent(content: HasElement) {
        this.content.element.appendChild(content.element)
    }
}

免责声明：我是 VoK 的作者

如何在 Kotlin html 框架中表示 Web 组件标签？

How to represent web component tags in Kotlin html frameworks?

html

web-frameworks

kotlin