0

I'm trying to dynamically create an image which I will then append to the DOM.

import org.w3c.dom.HTMLImageElement

fun main(args: Array<String>) {

    // load footer banner image
    val img: HTMLImageElement = HTMLImageElement()
    with (img){
        src = "img/footer.png"
        classList.add("img-responsive")
    }

}

However, it doesn't like my constructor HTMLImageElement() since HTMLImageElement is an interface.

Removing the constructor and Kotlin complains that img must be initialised.

What is the correct way to make use of the HTMLImageElement in a type-safe way ?

Update: I'm now using maven which generates everything as it should.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.blah</groupId>
    <artifactId>blah</artifactId>
    <packaging>jar</packaging>
    <version>1.0.0</version>
    <name>Blah</name>

    <properties>
        <kotlin.version>1.0.2</kotlin.version>
        <kotlin.html.version>0.5.8</kotlin.html.version>
    </properties>

    <repositories>
        <repository>
            <id>bintray-kotlinx</id>
            <name>bintray</name>
            <url>http://dl.bintray.com/kotlinx/kotlinx</url>
        </repository>
    </repositories>

    <dependencies>
        <dependency>
            <groupId>org.jetbrains.kotlinx</groupId>
            <artifactId>kotlinx.html.js</artifactId>
            <version>${kotlin.html.version}</version>
        </dependency>
    </dependencies>

</project>

which compiles a blah.js, blah.js.map, blah.js.meta, kotlin.js, kotlinx.html.js, kotlinx.html.meta.js, kotlinx.html.shared.js, kotlinx.html.shared.meta.js and stdlib.meta.js.

In my html file (which is sitting in my root directory) I'm including the following:

<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="target/classes/kotlin.js"></script>
<script type="text/javascript" src="target/classes/kotlinx.html.shared.js"></script>
<script type="text/javascript" src="target/classes/blah.js"></script>

I've got a println("hello world") in my Main.kt which executes fine in the browser printing "hello world" in the browswer console.

Now I still want to append that image dynamically using Kotlin ...

The docs say I should be doing document.create.div("panel") to create a div, but document.create... autocompletes to createAttribute, createComment etc, no create() method in sight anywhere. (document is from package 'kotlin.browser').

I'm not exactly sure how to use kotlinx.html since what I'm seeing in IntelliJ doesn't match the docs.

How do I append a dynamically created image to an existing div using KotlinJS ?

5
  • Take a look at kotlinx.html Commented May 31, 2016 at 6:42
  • what jar/maven dependency are you using? Commented May 31, 2016 at 11:03
  • @pabl0rg: I've added a pom.xml now and added it into my post including all the dependencies, repositories, etc. Commented Jun 1, 2016 at 20:49
  • @IRus: I take it the docs for kotlinx.html are outdated? Or am I just using it incorrectly ? Commented Jun 1, 2016 at 20:50
  • 1
    Docs looks up to date. But js and jvm version can be different. For example with System.out will not work in kotlinjs. Commented Jun 1, 2016 at 22:29

1 Answer 1

1

I just write sample project with kotlin2js and kotlinx.html IRus/kotlin-kotlinx.html. Looks like current version of kotlinx.html (0.5.8) not compatible with Kotlin 1.0.2, but works well with kotlin 1.0.1-2.

Sign up to request clarification or add additional context in comments.

2 Comments

See 0.5.9: it is compatible with 1.0.2
Error 404, page not found :(

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.