Ejemplo de Kotlin JS para desarollo web

Kotlin JS

Un ejemplo simple, similar al código que vimos en la entrada Ejemplo: Html Builder (KotlinJS), sobre cómo usar Kotlin en el desarrollo web en lugar de Javascript. Adaptación del código Kotlin JS for Web development disponible en el repositorio kotlinjs-example.
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>KotlinJS</title>
</head>
<body>
    <script src="out/production/Kotlin Web/lib/kotlin.js"></script>
    <script src="out/production/Kotlin Web/Kotlin Web.js"></script>
</body>
</html>
//Main.tk
import html.*
import kotlin.browser.document

fun main() {
    document.body?.apply {

        h1("Desarrollo Web con KotlinJS")

        div {
            p("Test para generar código HTML con Kotlin")
            p("Iterando sobre un rango con for:")
            ul {
                for (i in 1..10) {
                    if (i < 10) li("0$i") else li("$i")
                }
            }
        }
    }
}
//html.kt
package html

import org.w3c.dom.Element
import kotlin.browser.document

// enumeramos las etiquetas HTML
enum class HtmlTag(val text: String) {
    H1("h1"),
    DIV("div"),
    P("p"),
    UL("ul"),
    LI("li")
}

// funciones sobre objetos de tipo Element que devuelven el resultado
// de una función que toma como primer argumento un valor del enum
fun Element.h1(text: String): Element = textElement(HtmlTag.H1, text)
fun Element.div(f: Element.() -> Unit) = structuralElement(HtmlTag.DIV, f)
fun Element.p(text: String): Element = textElement(HtmlTag.P, text)
fun Element.ul(f: Element.() -> Unit) = structuralElement(HtmlTag.UL, f)
fun Element.li(text: String) = textElement(HtmlTag.LI, text)

private fun Element.textElement(tag: HtmlTag, text: String): Element {
    return createTag(tag) { textContent = text }
}

private fun Element.structuralElement(tag: HtmlTag, f: Element.() -> Unit): Element {
    return createTag(tag) { f() }
}

private fun Element.createTag(tag: HtmlTag, f: Element.() -> Unit): Element {
    val element = document.createElement(tag.text)
    element.f()
    append(element)
    return element
}
El resultado se ve así en el navegador:

Clasificado en:

Comentarios

Publicar un comentario

Entradas populares

I/O: entrada y salida de datos en consola

Imagen
Dentro de la biblioteca estándar de Kotlin, el paquete kotlin.io proporciona elementos esenciales para trabajar con los flujos de entrada y salida estándar ( Input/Output o I/O). Esta transmisión de información entre la memoria principal y los dispositivos de entrada y salida permite, entre otras cosas, leer y escribir datos. En esta entrada vamos a tratar sobre cómo se transfieren datos de entrada y salida en consola (el paquete kotlin.io también proporciona herramientas para trabajar con archivos, como veremos en futuras entradas), lo que es útil para mostrar una información en pantalla y para obtener información aportada por el usuario, habitualmente a través de un dispositivo de entrada como el teclado . Output : Escribir en consola Como ya hemos visto en multitud de ejemplos previos, para enviar un mensaje a la salida estándar (la pantalla) usamos habitualmente las funciones print() y println() , que se diferencian en que la segunda incluye un salto de línea al final...
Leer más

Lectura y escritura de archivos

Imagen
Anteriormente, cuando nos referimos a la biblioteca estándar de Kotlin para trabajar con flujos de entrada y salida ( Input/Output ), nos centramos en la transferencia de datos en consola , y ahora vamos a ver cómo trabajar con archivos , y concretamente algunas maneras para leer y escribir sobre ellos. Lectura de archivos Antes de entrar en materia, lógicamente necesitamos un archivo para leer; si estamos trabajando con IntelliJ IDEA , podemos crear desde allí un nuevo directorio y crear nuestro archivo de pruebas. Para tener nuestro proyecto ordenado, es habitual llamar a este directorio resources (recursos) y crear dentro de él otros directorios para, por ejemplo, contener imágenes o archivos de texto del proyecto. Para eso, nos situamos sobre la carpeta principal del proyecto y con el botón secundario del ratón seleccionamos New --> Directory : En la siguiente ventana le asignamos un nombre, en este caso, ' resources ' (opcionalmente también podemos marcar est...
Leer más

Recursos gratis para aprender Kotlin

Imagen
ÚLTIMA ACTUALIZACIÓN: 6 de diciembre de 2019 Un repaso a algunas referencias de tutoriales, libros y cursos, preferiblemente en español y a coste cero, para introducirse en la programación con Kotlin. En la web Tutoriales Programación Ya puedes encontrar un par de tutoriales interesantes: Kotlin Ya y Kotlin para Android Ya y sus respectivas versiones en inglés en Learn Kotlin Programming Free Course for Beginners y Kotlin Android Studio Course . En la web Curso Kotlin para Android , como su propio nombre indica, hay un Curso de Programación Android en Kotlin con 20 capítulos a fecha de esta entrada. DevCode ofrece gratis un interesante curso en formato video sobre Fundamentos de Kotlin . En la web devexperto puedes encontrar diversos recursos de formación y un blog dedicados a Kotlin aplicado al desarrollo de apps en Android. Puedes empezar por visitar su Curso Gratuito Aprende Kotlin por tu cuenta . También puede resultar interesante el material del tutorial And...
Leer más