Extending WebIO
Rendering Custom Objects
WebIO defines the WebIO.render
function which can be extended to render any Julia type into the DOM. Think of it as a better version of show(io::IO, m::MIME"text/html", x)
(where the output is a tree of Node
's instead of an HTML string).
Learning By Example
Suppose we want to teach WebIO how to render our to-do list type. Given a TodoItem
like
struct TodoItem
description::String
done::Bool
end
we might define a render
method such as
function WebIO.render(todoitem::TodoItem)
return dom"div.todo-item"(
dom"input[type=checkbox]"(checked=todoitem.done),
todoitem.description,
style=Dict("display" => "flex", "flex-direction" => "horizontal"),
)
end
If we have a to-do list that looks like
struct TodoList
title::String
items::Vector{TodoItem}
end
mylist = TodoList(
"My todo list",
[
TodoItem("Make my first WebIO widget", false),
TodoItem("Make a pie", false),
],
)
we can define render
as
function WebIO.render(list::TodoList)
return dom"div"(
dom"h2"(list.title),
dom"div.todo-list"(
WebIO.render.(list.items)...
),
)
end
Always remember to recursively WebIO.render
any child elements if necessary.