Ejemplo: Html Builder (KotlinJS)

Ejemplo: Html Builder

Ejemplo para crear una web html con Kotlin ilustrando y ampliando el contenido expuesto en la entrada Introducción a KotlinJS: Desarrollo web con Kotlin.

Observa en el código que getHTML se refiere a una función que toma como argumento una expresión lambda que utiliza una instancia de la clase HTML, y headTag y bodyTag son funciones miembro de la clase HTML, y agregamos el texto a las etiquetas html invocando el operador String.unaryPlus(). Para más detalles puedes ver (en inglés): Type-Safe Builders 
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>

<body>

    <script src="out/production/html/lib/kotlin.js"></script>
    <script src="out/production/html/html.js"></script>

</body>
</html>

//html.kt
package html

import kotlin.browser.document

fun main() {

    val codeHTML = getHTML {
        // <head>
        headTag {
            title { +"KotlinJS" }
        }
        // <body>
        bodyTag {
            h1Tag { +"Desarrollo web con Kotlin" }
            pTag {
                +"Página web con etiquetas de marcado"
                +"HTML <h1>, <p>, <b>, <a>, <ul>, <li>"
                +"desarrollada con Kotlin"
            }
            pTag {
                bTag { +"Kotlin Doc" }
                +"comparte y divulga en español"
                +"información y ejemplos sobre programación con Kotlin y Android. Visita"
                aTag(href = "https://kotlindoc.blogspot.com") {
                    +"Kotlin Doc"
                }
            }
            pTag {
                +"La tabla de multiplicar del 2 iterando sobre un rango con un bucle for:"
                ulTag { for (i in 1..10) li { +"$i * 2 = ${i * 2}" } }
            }
        }
    }
    document.body?.appendChild(codeHTML.elemento)
}

// Clase abstracta
abstract class TagHTML(name: String) {
    val elemento = document.createElement(name)
    protected fun <T : TagHTML> initTag(tag: T, init: T.() -> Unit): T {
        tag.init()
        elemento.appendChild(tag.elemento)
        return tag
    }
}

// Clase Abstracta que herada de TagHTML
abstract class TagTextHTML(name: String) : TagHTML(name) {
    operator fun String.unaryPlus() {
        elemento.appendChild(document.createTextNode("$this "))
    }
}

// Clases que heredan de TagTextHTML
class HTML : TagTextHTML("html") {
    fun headTag(init: Head.() -> Unit) = initTag(Head(), init)
    fun bodyTag(init: Body.() -> Unit) = initTag(Body(), init)
}

class Head : TagTextHTML("head") {
    fun title(init: Title.() -> Unit) = initTag(Title(), init)
}

class Title : TagTextHTML("title")

// Clase abstracta
abstract class BodyTag(name: String) : TagTextHTML(name) {
    fun bTag(init: B.() -> Unit) = initTag(B(), init)
    fun pTag(init: P.() -> Unit) = initTag(P(), init)
    fun h1Tag(init: H1.() -> Unit) = initTag(H1(), init)
    fun ulTag(init: UL.() -> Unit) = initTag(UL(), init)
    fun aTag(href: String, init: A.() -> Unit) {
        val a = initTag(A(), init)
        a.href = href
    }
}

// Clases que heredan de BodyTag
class Body : BodyTag("body")

class UL : BodyTag("ul") {
    fun li(init: LI.() -> Unit) = initTag(LI(), init)
}

class B : BodyTag("b")

class LI : BodyTag("li")

class P : BodyTag("p")

class H1 : BodyTag("h1")

class A : BodyTag("a") {
    var href: String
        get() = elemento.getAttribute("href") ?: ""
        set(value) = elemento.setAttribute("href", value)
}

// función que toma como argumento una expresión lambda que utiliza una instancia de la clase HTML
fun getHTML(init: HTML.() -> Unit): HTML {
    val html = HTML()
    html.init()
    return html
}

Lo que se visualiza en el navegador de esta manera:

Clasificado en:

Comentarios

Publicar un comentario

Entradas populares

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

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