Implementing the app logic

A typical UI will have controls to trigger actions, input fields to collect information, and outputs to display the data and computation results. The app's logic controls which functions are executed, which variables are recalled, or which variables are set to a new value when the user interacts with a component in the UI.

To enable a UI component, you need to:

1. Expose reactive variables from the Julia code to the UI.
2. Bind the exposed variables to the component in the no-code editor.
3. Write reactive code to handle user interaction.

Exposing and binding variables to the UI

Every component that displays or gathers information must be linked to a variable in the Julia code. This variable will store the component's state, which can be a number, array, or other type of object. To identify the type required by a component, check the "bindings" field in the right side bar. You can find more information about the available components in the reference.

Define the appropriate variable in app.jl and tag it with the @in or @out macro to make it reactive, considering that:

• @in is for variables taking their value from the component.
• @out is for components reading their state from the variable.

Reactive variables should be given an initial value so that the UI is not empty when the page first loads. Moreover, they should be placed within a @app block as in the example below.

using GenieFramework
@genietools

@app begin
  @out number_of_slices = 3
  @out piechart = PlotData(; values = [10,50,40], labels = ["First", "Second", Third], plot = "pie")
end

@page("/", "app.jl.html")

Next, link the component to its state variable by selecting it in the "bindings" field in the properties tab of the no-code editor. After setting the binding, the component's code in app.jl.html will be updated.

<p></p>
<plotly :data="piechart" :layout="{}" :displaylogo="false"></plotly>

With the state variables bound to the components, now the UI can display and store information. To make it interactive you need to add the reactive code.

Adding reactive code

Reactive code is be executed whenever the user interacts with a component, and as a result a reactive state variable changes its value. With the @onchange macro, you can watch one or more variables and execute a block of code whenever any of them changes.

using GenieFramework
@genietools

@app begin
  @in number_of_slices = 3
  @out piechart = PlotData(; values = [10,50,40], labels = ["First", "Second", Third], plot = "pie")
  @onchangeany number_of_slices begin
    piechart = PlotData(
      values = rand(1:100, number_of_slices),
      labels = [i for i in 1:number_of_slices],
      plot = "pie"
    )
  end
end

@page("/", "app.jl.html")