Question

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

Answer 1

您可以Custom Tag（创建{{3}}）。对于在INFO ShutdownHookManager: Deleting directory /mnt/tmp/spark-144e34d1-bd37-4d99-8fae-e4c0e5df内使用的名为dicom-editor的标记：

divs

在上面的示例中，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"

在Kotlin代码中，您必须在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" } }的位置使用_，否则会出错。

Answer 2

可以使用Vaadin 10从服务器端Java控制（基于聚合物的）Web组件。完全支持活动，请阅读有关如何wrap Web Component in a Java API。

的文档

与Vaadin 10的Kotlin集成准备就绪：

Vaadin-on-Kotlin（VoK）框架; Vaadin 10有很好的guides让你开始。
基于VoK构建的示例项目：Vaadin-Kotlin-PWA。该项目取消了AppLayout Web组件的使用：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的作者

Answer 3

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

Generator是项目的一部分。请在此处查看：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

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

3 个答案: