Skip to content

Commit e59b1cf

Browse files
committed
docs(modelql): howto generate HTML
1 parent 03a02bc commit e59b1cf

File tree

1 file changed

+44
-0
lines changed

1 file changed

+44
-0
lines changed

docs/global/modules/core/pages/howto/modelql.adoc

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,3 +143,47 @@ This basically ads the operand to the internal `zip` operation and returns an ob
143143
after receiving it from the server.
144144
Inside the `onSuccess` block you assemble the local object using the previously requested values.
145145

146+
== Kotlin HTML integration
147+
148+
One use case of the query language is to build database applications
149+
that generate HTML pages from the data stored in the model server.
150+
You can use the https://kotlinlang.org/docs/typesafe-html-dsl.html[Kotlin HTML DSL] together with ModelQL to do that.
151+
152+
Use `buildHtmlQuery` to request data from the server and render it into an HTML string:
153+
154+
[source,kotlin]
155+
--
156+
val html = query {
157+
it.map(buildHtmlQuery {
158+
val modules = input.children("modules").requestFragment<_, FlowContent> {
159+
val moduleName = input.property("name").request()
160+
val models = input.children("models").requestFragment<_, FlowContent> {
161+
val modelName = input.property("name").request()
162+
onSuccess {
163+
div {
164+
h2 {
165+
+"Model: ${modelName.get()}"
166+
}
167+
}
168+
}
169+
}
170+
onSuccess {
171+
div {
172+
h1 {
173+
+"Module: ${moduleName.get()}"
174+
}
175+
insertFragment(models)
176+
}
177+
}
178+
}
179+
onSuccess {
180+
body {
181+
insertFragment(modules)
182+
}
183+
}
184+
})
185+
}
186+
--
187+
188+
`buildHtmlQuery` and the `requestFragment` operation are similar to the `mapLocal2` operation,
189+
but inside the `onSuccess` block you use the Kotlin HTML DSL.

0 commit comments

Comments
 (0)