Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error Build at import #1

Open
hasanOryx opened this issue Nov 4, 2017 · 3 comments
Open

Error Build at import #1

hasanOryx opened this issue Nov 4, 2017 · 3 comments

Comments

@hasanOryx
Copy link

I've my app working fine, once I imported azadev.kotlin It gave me error build
My full code is a s below:

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

My gradle.build is:

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}"
    }
}
@null-dev
Copy link

null-dev commented Nov 4, 2017

Aza-Kotlin-CSS actually does not support Kotlin JS! You are probably looking for my fork here: https://github.com/null-dev/Aza-Kotlin-CSS-JS which supports Kotlin JS. Replace compile "azadev.kotlin:aza-kotlin-css:$aza_kotlin_css" with compile 'xyz.nulldev:aza-kotlin-css-js:$aza_kotlin_css' and change ext.aza_kotlin_css = '1.0' to ext.aza_kotlin_css = '1.01'.

Even if you use my fork however, your syntax is wrong. After creating a stylesheet with Stylesheet {}, you must add it to the element with style(). A simple example with a button element is below:

document.create.button {
   style(Stylesheet {
      backgroundColor = RED
   }.render())
}

@hasanOryx
Copy link
Author

@null-dev I got an error as in the attached:

image

@null-dev
Copy link

null-dev commented Nov 4, 2017

Instead of style(Stylesheet {, use style(content = Stylesheet {

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants