Hi, i’m trying to use kotlin HTML DSL as my main templating engine in ktor. Is there a full blown kotlin HTML DSL example? For example I’m trying to use buttonInput, but there’s no example how to handle the on click function. And I think it should be enclosed(?)/passed form argument. But there’s no document how to use it. I already check the wiki and the unit test. It seems the component is ready to be used. But there’s no guide how to use it.
Thanks
Another thing, what’s the different between FlowContent vs HtmlBlockTag, PlaceHolder vs TemplatePlaceHolder?
Sorry if this is a little of topic, but may I ask you to have a look at https://fritz2.dev. You will find a small lib we wrote to help you building reactive web-apps. You can find a full-stack example with Ktor at GitHub - jamowei/fritz2-ktor-todomvc
Would be happy about any feedback.
Hi, it’s very interesting. But It’s not what I’m looking for right now.
When you use html dsl to create html on the server the onClick content will just be literally passed into the html (as inline javascript). So if you want to do something with it there needs to be javascript code that can be called.
The difference between those classes is mostly between those that define the dsl (i.e. any FlowContent has a div function) and those that define receivers (i.e. the DIV class that is a receiver for the div function implements HtmlBlockTag, and HtmlBlockTag extends FlowContent because a div can contain a div).
Hi rnentjes.1 Thanks for replying.
So to enable some kind click action to the button there’s 2 option. I create an inline javascript code to handle the click that will be executed by the browser (?) or Using some kind of form submission for the button. Is there an example code for this 2 approach?
Sorry, receiver function is one of the concept I haven’t fully grasped in kotlin. So i tried to create a simple template using bootstrap that shows bootstrap grid. But it said the receiver doesn’t match. Here’s the code:
class BootstrapTemplate(val main : TwoColumnTemplate = TwoColumnTemplate(“two”)): Template {
val content = Placeholder()
override fun HTML.apply() {
head {
meta(charset = "utf-8")
meta(name = "viewport", content = "width=device-width, initial-scale=1, shrink-to-fit=no")
title { +"Tag" }
link(rel="stylesheet", href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css")
}
body {
insert(main) {
h1 {
+"Hello world"
}
div("container") {
div("row") {
div("col-md-2") { +"""Column left""" }
div("col-md-auto") { +"""Column right""" }
}
}
script{src = "https://code.jquery.com/jquery-3.5.1.min.js"}
script{src = "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"}
script{src = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"}
}
}
}
class TwoColumnTemplate(val titleString: String) : Template {
val leftColumn = Placeholder()
val middleColumn = Placeholder()
override fun HTML.apply() {
head {
title { +titleString }
}
body {
div(“container”) {
div(“row”) {
div(“col-md-2”) { insert(leftColumn) }
div(“col-md-auto”) { +“”“Column right”“” }
}
}
}
}
}
No idea what this Template class is you are working with, but if you show the error message and where it occurs then maybe we can figure out why it fails.
To submit a form to the server just make sure there is a form element and within it a submit button with the type of submit. The form element has some attributes to control the submit.
I’ve got the template class from https://ktor.io/servers/features/templates/html-dsl.html. At the bottom there’s a section dedicated to template. I’m trying to follow that example. First i create a minimum bootstrap page with html-dsl and then try to break down into modular template so it can be reused.
Here’s the error from the previous code. There’s 2:
For the form, this is the furthest i go. By only guessing from the API:
body {
form {
+"Form Input: "
textInput(name = "myInput")
buttonInput(name = "submit") { print("Submit is clicked: ") }
}
}
But nothing happens when i click the button. And I don’t know how to refer to the value of myInput.
Thanks a lot for your help.
I think you need this@BootstrapTemplate.insert, ‘this’ at that point is referencing the DIV block you are in.
See: https://kotlinlang.org/docs/reference/this-expressions.html