Designing the UI with the low-code API
If you'd prefer to implement the UI in pure Julia, Genie Framework provides a low-code API with which you can declare the UI components in the Julia code. These API calls generate the HTML code for many standard HTML elements and Vue.js components from the Quasar framework.
| GF API function | Generated component | Example usage |
|---|---|---|
cell | standard div | cell("Lorem ipsum") |
slider | Quasar slider | slider(1:1:20, :n) |
row | row div | row([slider(1:1:20, :n), slider(1:1:10, :k)]) |
h1 | H1 header | h1("Page header") |
Calls to the functions can be nested, enabling complex layouts. You can have for instance a slider within a div within a row, and div-like elements accept a list of elements as argument.
To define the app's UI with the low-code API, define the ui function and pass it to the @page macro as in the example below. Alternatively, you can define the UI in a separate file ui.jl and include it in app.jl with @page("/", "ui.jl").
using GenieFramework
@genietools
@handlers begin
@in number_of_slices = 3
@out piechart = PlotData(; values = [10,50,40], labels = ["First", "Second", Third], plot = "pie")
end
function ui()
row([
cell(class="st-module", [
h6("Number of slices")
slider(1:1:20, :number_of_slices; label=true)
])
])
row([
cell(class="st-module", [
h5("Pie chart")
plot(:piechart)
])
])
end
@page("/", ui)
Looking at the output of ui, you'll see that it simply generates the HTML code for the declared components:
julia> print(ui())
<div class="row"><div class="col col-12 col-sm st-module"><h5>Pie chart</h5><plotly :data="piechart" :layout="{}" :displaylogo="false"></plotly></div></div>Finally, you can also call the low-code API from HTML files to add components:
<% table(:datatable; dense=true, flat=true) %>