Skip to content

Latest commit

 

History

History
98 lines (76 loc) · 5.12 KB

html_dsl.md

File metadata and controls

98 lines (76 loc) · 5.12 KB

Required dependencies: io.ktor:%artifact_name%

HTML DSL integrates the kotlinx.html library into Ktor and allows you to respond to a client with HTML blocks. With HTML DSL, you can write pure HTML in Kotlin, interpolate variables into views, and even build complex HTML layouts using templates.

Add dependencies {id="add_dependencies"}

HTML DSL doesn't need installation but requires the %artifact_name% artifact. You can include it in the build script as follows:

Send HTML in response {id="html_response"}

To send an HTML response, call the respondHtml method inside the required route:



{src="snippets/html/src/main/kotlin/com/example/Application.kt" lines="12-28"}


In this case, the following HTML will be sent to the client:


<head>
    <title>Ktor</title>
</head>
<body>
    <h1>Hello from Ktor!</h1>
</body>


To learn more about generating HTML using kotlinx.html, see the kotlinx.html wiki.


Templates {id="templates"}


In addition to generating plain HTML, Ktor provides a template engine that can be used to build complex layouts. You can create a hierarchy of templates for different parts of an HTML page, for example, a root template for the entire page, child templates for a page header and footer, and so on. Ktor exposes the following API for working with templates:


    

  1. To respond with an HTML built based on a specified template, call the respondHtmlTemplate method.
    2. 

  2. To create a template, you need to implement the Template interface and override the Template.apply method providing HTML.
    3. 

  3. Inside a created template class, you can define placeholders for different content types:

      

    • Placeholder is used to insert the content. PlaceholderList can be used to insert the content that appears multiple times (for example, list items).
      • 

    • TemplatePlaceholder can be used to insert child templates and create nested layouts.
      • 

    

    4. 



Example {id="example"}


Let's see on the example of how to create a hierarchical layout using templates. Imagine we have the following HTML:


<body>
<h1>Ktor</h1>
<article>
    <h2>Hello from Ktor!</h2>
    <p>Kotlin Framework for creating connected systems.</p>
</article>
</body>


We can split the layout of this page into two parts:


    

  • A root layout template for a page header and a child template for an article.
    • 

  • A child template for the article content.
    • 



Let's implement these layouts step-by-step:


    

  1. 

    Call the respondHtmlTemplate method and pass a template class as a parameter. In our case, this is the LayoutTemplate class that should implement the Template interface:
    

    get("/") {
    call.respondHtmlTemplate(LayoutTemplate()) {
        // ...
    }
}
    

    Inside the block, we will be able to access a template and specify its property values. These values will substitute placeholders specified in a template class. We'll create LayoutTemplate and define its properties in the next step.
    

    2. 

  2. 

    A root layout template will look in the following way:
    

    

    {src="snippets/html-templates/src/main/kotlin/com/example/Application.kt" lines="30-41"}
    

    The class exposes two properties:
    

      

    • The header property specifies a content inserted within the h1 tag.
      • 

    • The content property specifies a child template for article content.
      • 

    

    3. 

  3. 

    A child template will look as follows:
    

    

    {src="snippets/html-templates/src/main/kotlin/com/example/Application.kt" lines="43-56"}
    

    This template exposes the articleTitle and articleText properties, whose values will be inserted inside the article.
    

    4. 

  4. 

    Now we are ready to send HTML built using the specified property values:
    

    

    {src="snippets/html-templates/src/main/kotlin/com/example/Application.kt" lines="12-26"}
    

    5. 



You can find the full example here: html-templates.