Basic Components
HTML markup
KVision contains classes for creating typical HTML markup of a web page. The main class for this purpose is io.kvision.html.Tag
, which allows you to render any HTML element. This class is also a container, so instances of Tag
can be nested inside other Tag
objects. There are a few subclasses of Tag
- Div
, P
, Span
, H1
, H2
, H3
, H4
, H5
, H6
, Main
, Section
, Header
, Footer
- which render the most used HTML elements. With DSL builders you can declare simple markup as follows:
And it will be rendered as:
Lists
You can use the io.kvision.html.ListTag
class to create HTML lists. You can use a List<String>
value to quickly populate the list:
but you can also treat ListTag
as a typical container:
Tables
You can use classes from the io.kvision.table.*
package to create HTML tables:
For interactive, editable tables KVision also supports Tabulator
Links
To create a link use io.kvision.html.Link
class:
Dynamic content
Note that all the generated HTML markup is fully dynamic and is bound to the state of the KVision components. If you change content or styling properties of any visible object, it will automatically re-render the content shown in the browser. These changes can be triggered by any source (timers, coroutines, network events) but probably most often they will be triggered by user interaction.
Rich text
All components which render textual content allow you to declare such content as "rich text". If you set the rich
property to true
, the content will be treated as raw HTML. The framework takes care of making the output markup valid HTML if it's not. This code:
will render:
Notice the extra <span style="display: contents;">
element surrounding the given content.
XSS Protection
By default KVision is safe from XSS - all text data is processed by the virtual DOM library and is fully sanitized before rendering in the browser. There are two exceptions to watch out for:
Intentional use of rich text (described above), which is unsafe by design.
Use of Handlebars.js templates, which are also rendered directly (using rich text internally).
If you need to use rich text with untrusted data (e.g. some input from a user), you should sanitize all the data before rendering with some proven sanitizer library.
Custom attributes
All KVision components support additional, custom attributes using setAttribute
, getAttribute
and removeAttribute
methods from the Widget
class.
Last updated