Low-code UI design

For reactive pages, 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.

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"), or with @page("/", "pages/ui.jl", Stipple.ReactiveTools.DEFAULT_LAYOUT(), Main.App.ControllerName) if you're using the MVC architecture.

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)

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)
        ])
])

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) %>