Designing the UI with the no-code editor
Genie Cloud's no-code editor allows you to implement a UI without writing any HTML or JavaScript. Simply drag and drop components onto a white canvas and bind them to the Julia code.
To open the no-code editor, click on the eye button next to app.jl.html in the GENIE APPS tab to the left.
To start building, find in the right sidebar any component you'd like to have in your UI and drag it onto the canvas. Some components such as headers can be directly edited on the canvas, with formatting options appearing in a popup menu.
To edit a component's properties, select it and the properties menu will appear on the right sidebar.
Here, you can set the data bindings, which amounts to linking the component to a variable or function in the Julia code. Other available fields customize the component's behavior and appearance.
For further customization, click on the Open Code button to open the source code tab.
Here, you can modify the HTML code of the component, and add new CSS styling. Any CSS you type in the bottom window will be saved to public/style.css.
Adding components not supported in the no-code editor
The components listed in the no-code editor come from Quasar, which is a framework based on Vue.js providing modern UI components. There are some components which have not been integrated into the no-code editor yet, such as file uploaders.
To manually add a new component to the UI, look for the corresponding code snippet in the Quasar library and add it to app.jl.html. Some components will require variable bindings which must be declared in app.jl and tagged with @in or @out.
<q-uploader accept=".csv" url="http://localhost:8000/" method="POST" field-name="csv_file" label="Upload Dataset" multiple></q-uploader
Embedding Julia code in the HTML file
If you open the file app.jl.html in the workspace, you'll see the code written by the no-code editor. This file can be manually edited and, provided that the formatting is correct, the result will also appear in the NCE. Furthermore, you can add arbitrary Julia code that will be executed when the page loads.
Julia code is delimited with the <%, %> pair for multi-line blocks, and $(...) for short expressions. For instance, you can use embedded code to control an element's visibility as in the example below.
<h1 v-if:show_title> Awesome page title </h1>
<% if show_content %>
<p> Awesome page content </p>
<% end %> The embedded code can access any Julia variable or function defined in app.jl. Note, however, that in order to modify variables from the UI these should be tagged with @in.