Документация Engee

Создание реактивных пользовательских интерфейсов с помощью Stipple.jl

Пакет Stipple.jl фреймворка Genie реализует малокодовый API, который позволяет разработчикам Julia быстро и легко создавать интерактивные информационные панели и ориентированные на данные приложения, а также веб-интерфейсы пользователя для программного обеспечения Julia. Кроме того, он содержит большой набор элементов пользовательского интерфейса (таких как поля ввода, кнопки, ползунки, вкладки, таблицы данных, адаптивные макеты и многое другое) и эффективные возможности построения графиков.

Для реализации реактивного пользовательского интерфейса необходимо определить следующее:

  • интерактивные компоненты пользовательского интерфейса;

  • реактивные переменные для хранения состояний компонентов;

  • реактивный код для обеспечения взаимодействия.

В составе малокодового API фреймворка Genie предоставляется небольшой, однако полный набор макросов, с помощью которых можно реализовать все вышеперечисленное.

Приведенный ниже фрагмент кода иллюстрирует структуру приложения с реактивным пользовательским интерфейсом.

module App
#настройка среды фреймворка Genie
using GenieFramework
@genietools

# реактивный код
@app begin
    @in N = 0
    @out msg = ""
    @onchange N begin
        msg = "N = $N"
    end
end

# компоненты пользовательского интерфейса
function ui()
    [
        cell([
                p("Enter a number")
                textfield("N", :N )
            ])
        cell([
                bignumber("The value of N is", :N)
            ])
    ]
end

# определение корневого маршрута
@page("/", ui)
end
enternumber

Давайте разберем этот код.

Настройка среды разработки Genie

Пакет GenieFramework.jl состоит из множества подпакетов, реализующих различные блоки фреймворка. При включении GenieFramework.jl экспортируются определенные подпакеты, функции которых используются для построения приложения. Затем посредством вызова @genietools настраиваются скрипты JavaScript, значки, шрифты и другие ресурсы, которые будет загружать приложение.

Реактивный код

С помощью макроса @app формируется блок, в котором определяется реактивный код. Внутри него с помощью макросов @in и @out определяются реактивные переменные, значения которых отображаются в пользовательском интерфейсе. Эти переменные служат для хранения состояния компонентов пользовательского интерфейса в бэкенде, а код JavaScript, который соединяет фронтенд с реактивными переменными, генерируется автоматически. Более того, переменные @in можно изменять из пользовательского интерфейса, тогда как переменные @out доступны только для чтения.

Кроме того, макрос @private определяет нереактивные переменные, которые не отображаются в пользовательском интерфейсе. Их можно использовать для хранения данных, не предназначенных для обмена между пользователями.

Помимо реактивных переменных, макрос @onchange определяет блок реактивного кода, который выполняется при изменении значения реактивной переменной. Изменение значения может происходить в коде Julia или в коде фронтенда: реактивный код выполняется в обоих случаях.

::alert{type="warning"} Реактивные переменные, помеченные как @in или @out, могут изменяться только внутри блока, ограниченного макросом @onchange. Изменения, вносимые за пределами этого блока, не будут отражаться в пользовательском интерфейсе.

Определение макета и компонентов пользовательского интерфейса

Реализовывать пользовательский интерфейс с помощью фреймворка Genie можно двумя способами: на чистом языке Julia с использованием малокодового API или на HTML. В рассматриваемом примере кода демонстрируется вариант с использованием Julia.

С помощью вызовов функций Julia можно создавать множество компонентов пользовательского интерфейса. Их можно разделить на две группы:

  • Макет: функции, которые настраивают макет страницы, определяя строки, ячейки или столбцы.

  • Компоненты: функции, которые создают компоненты пользовательского интерфейса, такие как поля ввода, ползунки или графики.

Полный список вызовов API доступен в разделе [API/Компоненты]. Эти функции возвращают код HTML компонентов, который можно просмотреть, выведя на экран выходные данные:

julia> print(cell())
<div class="col col-12 col-sm"></div>

julia> print(textfield("N", :N ))
<q-input label="N" v-model="N"></q-input>

Чтобы определить реактивный пользовательский интерфейс на HTML вместо использования вызовов Julia, необходимо записать его в файл ui.html и включить этот файл с помощью @page("/","ui.html"). Код должен состоять из стандартных конструкций HTML и компонентов из фреймворка Quasar. Для текущего примера пользовательский интерфейс определяется на HTML так:

<div class="col col-12 col-sm">
    <h4>Enter a number</h4>
    <q-input label="N" v-model="N" style="width:200px"></q-input>
</div>
<div class="col col-12 col-sm">
    <st-big-number :number="N" title="The value of N is"></st-big-number>
</div>

Наконец, для добавления компонентов можно также вызывать малокодовый API из файлов HTML:

 <% textfield("N", :N ) %>

Объявление маршрута

Маршрут — это адрес конечной точки для браузеров, при обращении к которому возвращается страница для отображения. Макрос @page определяет маршрут в корне /, который возвращает код страницы, сгенерированный функцией ui.

Запуск приложения

Чтобы запустить приложение, сначала перейдите в каталог, где находится код, и выполните следующую команду:

julia --project -i -e 'using Pkg; Pkg.add("GenieFramework")'

Затем запустите Julia с помощью команды julia --project и запустите приложение:

julia> using GenieFramework
julia> Genie.loadapp() # загружаем приложение
julia> up() # запускаем сервер

В процессе разработки можно вносить изменения в код работающего приложения. Они загружаются автоматически, и пользовательский интерфейс обновляется.