Fatal编程技术网
  • kotlin/
  • 在Kotlin js上设置HTML元素的样式

在Kotlin js上设置HTML元素的样式

kotlin

在Kotlin js上设置HTML元素的样式,kotlin,kotlin-js,kotlinx-html,Kotlin,Kotlin Js,Kotlinx Html,当使用Kotlinx 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.ko

当使用
Kotlinx 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()}
我的
index.html
是：

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

<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>


示例默认值
Kotlin 1.1示例
我的应用程序结构：

无论使用
Aza kotlin
还是任何其他方式，我如何设置元素的样式。

我在
kotlinx html
本身中找到了解决方案，方法是使用
样式作为：


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"  // 
... }



截至今天，aza_kotlin_css出现了一些问题，该应用程序与我合作如下[Mac新手的详细步骤：）]

安装的
自制
为：
/usr/bin/ruby-e“$（curl-fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install)“

已安装的
gradle
as:
brew安装gradle

通过运行
brew info gradle



将渐变手动添加到“Android Studio/首选项”



创建了投影文件夹，并移入
cd myapp

作为
gradleinit--type java库启动了新的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()}



<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>



#panel {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}


创建了包含以下内容的
src/resources/index.html
文件：


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



<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>



#panel {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}


使用
gradlebuild
构建项目，它运行良好

应用程序结构如下所示：



应用程序以以下方式与我一起运行：



对于服务器端的工作，我有一个问题，关于创建它的
jar
文件，希望您觉得它很有用，并且是对它的补充