在 Kotlin-js 中为 HTML 元素设置样式
Posted
技术标签:
【中文标题】在 Kotlin-js 中为 HTML 元素设置样式【英文标题】：Styling HTML elements at Kotlin-js 【发布时间】：2018-04-17 01:00:15 【问题描述】：如何在使用 Kotlinx-html 时设置我的 HTML 元素的样式，我的应用程序运行良好，然后我尝试使用 AZA-Kotlin 添加样式，但是一旦我导入 azadev.kotlin 它给了我错误构建
我的完整代码如下：
Main.kt:
import azadev.kotlin.css.Stylesheet
import azadev.kotlin.css.color
import azadev.kotlin.css.dimens.px
import azadev.kotlin.css.opacity
import azadev.kotlin.css.width
import kotlinx.html.*
import kotlinx.html.js.*
import kotlinx.html.dom.create
import kotlin.browser.*
import kotlinx.html.dom.append
import org.w3c.dom.HTMLButtonElement
fun main(args: Array<String>)
println("Hello javascript!")
val myDiv = document.create.div("panel") // class = "panel"
p
+"Here is "
a("http://kotlinlang.org") +"official Kotlin site"
val button = BUTTON()
button!!.innerText = "Click me"
button!!.onclick = println("Button clicked!")
val btn = document.create.button
text("click me")
onClickFunction = _ -> window.alert("Kotlin!")
Stylesheet
color = 0xffffff
width = 10.px
opacity = .8
hover
color = 0xf2cacf
document.getElementById("container")!!.appendChild(myDiv)
document.getElementById("container")!!.appendChild(btn)
document.getElementById("container")!!.appendChild(button)
document.getElementById("container")!!.append
div
+"added it"
fun BUTTON(): HTMLButtonElement return document.create.button()
我的gradle.build 是：
group 'org.example'
version '1.0-SNAPSHOT'
buildscript
ext.kotlin_version = '1.1.51'
ext.kotlinx_html_version = '0.6.4'
ext.aza_kotlin_css = '1.0'
ext.web_dir = 'web'
repositories
mavenCentral()
dependencies
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
apply plugin: 'kotlin2js'
repositories
mavenCentral()
jcenter()
dependencies
compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
compile "org.jetbrains.kotlinx:kotlinx-html-js:$kotlinx_html_version"
compile "azadev.kotlin:aza-kotlin-css:$aza_kotlin_css"
compileKotlin2Js
kotlinOptions.outputFile = "$projectDir/web/scripts/main.js"
kotlinOptions.moduleKind = "umd"
kotlinOptions.sourceMap = true
clean.doFirst()
delete("$web_dir")
build.doLast()
// Copy kotlin.js and kotlin-meta.js from jar into web directory
configurations.compile.each File file ->
copy
includeEmptyDirs = false
from zipTree(file.absolutePath)
into "$projectDir/$web_dir/lib"
include fileTreeElement ->
def path = fileTreeElement.path
path.endsWith(".js") && (path.startsWith("META-INF/resources/") || !path.startsWith("META-INF/"))
// Copy scripts to web directory
copy
includeEmptyDirs = false
from new File("build/classes/main")
into "$web_dir/lib"
// Copy resources to web directory
copy
includeEmptyDirs = false
from new File("src/main/kotlin/resources")
into "$web_dir"
我的index.html 是：
<html>
<head>
<meta charset="UTF-8">
<title>Sample Default</title>
</head>
<body id="BODY">
<h1>Kotlin 1.1 Example</h1>
<div id="container"/>
<input type="text" name="email" id="email"/>
<script type="text/javascript" src="lib/kotlin.js"></script>
<script type="text/javascript" src="lib/kotlinx-html-js.js"></script>
<script type="text/javascript" src="scripts/main.js"></script>
</body>
</html>
我的应用结构：
无论使用Aza-kotlin 或任何其他方式，我如何设置元素的样式。
【问题讨论】：
【参考方案1】：我在kotlinx-html 中找到了解决方案，方法是将style 用作：
val btn = document.create.button
text("click me")
onClickFunction = _ -> window.alert("Kotlin!")
style = """
color: 0xffffff;
width: 10.px;
opacity: .8;
hover
color : 0xf2cacf
"""
另一个已知选项是使用css 文件，并为元素附加所需的类，例如：
val btn = document.create.button(classes = "container left tree") ...
//or
val btn = document.create.button
classes = setOf("container", "left", "tree")
classes += "siteHeader" //
...
【讨论】：
【参考方案2】：截至今天，aza_kotlin_css 出现问题，该应用程序与我一起使用如下 [Mac 新手的详细步骤:)]
安装Homebrew为：/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
安装gradle为：brew install gradle
运行brew info gradle找到安装路径
手动将 gradle 添加到 `android Studio/Preferences'
创建了投影文件夹，并移入cd myapp
以gradle init --type java-library启动新的java gradle项目
删除了src/main 和src/test 文件夹
创建了src/kotlin 和src/resources 文件夹
将build.gradle文件的内容替换为：
buildscript
ext.kotlin_version = '1.2.21'
ext.web_dir = 'web'
repositories
mavenCentral()
dependencies
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" // for gradle build
apply plugin: 'kotlin2js'
repositories jcenter()
dependencies
def kotlinx_html_version = "0.6.8"
// for interacting with the DOM
compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
// for DOM creation in the client sie
compile "org.jetbrains.kotlinx:kotlinx-html-js:$kotlinx_html_version"
// for DOM creation in the server sie
// compile "org.jetbrains.kotlinx:kotlinx-html-jvm:$kotlinx_html_version"
sourceSets.main
kotlin.srcDirs += 'src/kotlin'
resources.srcDirs += 'src/resources'
compileKotlin2Js.kotlinOptions
outputFile = "$projectDir/web/scripts/main.js"
moduleKind = "commonjs" // can be other options, commonjs is the one that works with Nodejs
sourceMap = true
clean.doFirst()
delete("$web_dir")
build.doLast()
// Copy kotlin.js and kotlin-meta.js from jar into web directory
configurations.compile.each File file ->
copy
includeEmptyDirs = false
from zipTree(file.absolutePath)
into "$projectDir/$web_dir/lib"
include fileTreeElement ->
def path = fileTreeElement.path
path.endsWith(".js") && (path.startsWith("META-INF/resources/")
|| !path.startsWith("META-INF/"))
// Copy scripts to web directory
copy
includeEmptyDirs = false
from new File("build/classes/main")
into "$web_dir/lib"
// Copy resources to web directory
copy
includeEmptyDirs = false
from new File("src/resources")
into "$web_dir"
创建了src/kotlin/Main.Kt 文件，内容如下：
import kotlinx.html.*
import kotlinx.html.js.*
import kotlinx.html.dom.create
import kotlin.browser.*
import kotlinx.html.dom.append
import org.w3c.dom.HTMLButtonElement
fun main(args: Array<String>)
println("Hello JavaScript!, do you know that fib(5) = $fib(5)")
val myDiv = document.create.div("panel") // class = "panel"
p
+"Here is "
a("http://kotlinlang.org") +"official Kotlin site"
val email = document.getElementById("email") as HTMLInputElement
email.value = "hadi@jetbrains.com"
val button = BUTTON()
button!!.innerText = "Click me"
button!!.onclick = println("Button clicked!")
val btn = document.create.button
text("click me")
onClickFunction = _ -> window.alert("Kotlin!")
style = """
color: 0xffffff;
width: 10.px;
opacity: .8;
hover
color : 0xf2cacf
"""
/*
// OR use one of the bew to load the style from the .css file
val btn = document.create.button(classes = "container left tree")
...
//or
val btn = document.create.button
classes = setOf("container", "left", "tree")
classes += "siteHeader"
...
*/
document.getElementById("container")!!.appendChild(myDiv)
document.getElementById("container")!!.appendChild(btn)
document.getElementById("container")!!.appendChild(button)
document.getElementById("container")!!.append
div
+"added it"
fun BUTTON(): HTMLButtonElement return document.create.button()
创建了另一个文件src/kotlin/Fib.tk，内容如下，从Main.kt文件中调用，全部编译为single JavaScript文件：
fun fib(n: Int):Int
return when (n)
0,1 -> 1
else -> fib(n - 1) + fib(n - 2)
创建了src/resources/index.html 文件，内容如下：
<html>
<head>
<meta charset="UTF-8">
<title>Sample Default</title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body id="BODY">
<h1>Kotlin 1.1 Example</h1>
<div id="container"/>
<input type="text" name="email" id="email"/>
<script type="text/javascript" src="lib/kotlin.js"></script>
<script type="text/javascript" src="lib/kotlinx-html-js.js"></script>
<script type="text/javascript" src="scripts/main.js"></script>
</body>
</html>
创建了src/resources/styles/main.css 文件，内容如下：
#panel background-color: powderblue;
h1 color: blue;
p color: red;
使用gradle build 构建项目并且运行良好。
应用结构如下：
该应用程序与我一起运行：
对于服务器端的工作，我有一个问题here 和here 和here 关于创建它的jar 文件，希望你觉得它有用和补充。
【讨论】：
以上是关于在 Kotlin-js 中为 HTML 元素设置样式的主要内容，如果未能解决你的问题，请参考以下文章
克托尔。无法在 kotlin-js 端创建 Httpclient 的实例
在 Kotlin 1.3 多平台 gradle 项目中参考来自 kotlin-jvm 的 kotlin-js 资源