首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何在Kotlin html框架中表示web组件标记?

如何在Kotlin html框架中表示web组件标记?
EN

Stack Overflow用户
提问于 2017-09-21 19:15:27
回答 3查看 1.2K关注 0票数 2

Kotlin有表示html的框架,如柯林克斯。如何在这样的框架中表示web组件标记?例如,如果我想使用聚合物组件,是否必须扩展这些框架以包括每个聚合物组件?

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-09-26 17:13:30

您可以使用自定义Kotlinx (创建自定义标签)。对于一个名为dicom-editor的标记,要在divs中使用:

代码语言:javascript
复制
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调用包括鼠标向下事件的回调。您还可以添加atributes:attributes["data-toggle"] = "dropdown"

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

代码语言:javascript
复制
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代码中,您必须使用_代替-,否则就会出现错误。

票数 2
EN

Stack Overflow用户

发布于 2018-04-29 18:23:50

可以使用瓦丁10从服务器端Java控制(基于聚合物的) web组件.事件是完全支持的,请阅读关于如何将Web组件封装在Java中的文档。

Kotlin与Vaadin 10的集成已经就绪:

  • 科特林 (VoK)框架;为Vaadin 10提供了很好的导轨,可以让您从那里开始。
  • 一个构建在VoK上的示例项目:瓦丁-科特林-PWA。该项目演示了AppLayout Web组件的使用:AppLayout.kt

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

代码语言:javascript
复制
@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的作者

票数 1
EN

Stack Overflow用户

发布于 2017-09-21 20:03:43

您可以为您的组件创建XSD文件并自动生成它们。科林克斯就是这么做的。

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

资源文件夹中也有HTML5的源XSD文件:5.xsd

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/46351598

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档