使用 Stipple.jl 构建反应式用户界面
Genie Framework 中的`Stipple.jl` 软件包实现了一个低代码应用程序接口，可帮助 Julia 开发人员快速、轻松地创建交互式数据仪表盘和以数据为中心的应用程序，以及 Julia 软件的基于 Web 的用户界面。此外，它还提供了大量用户界面元素（如输入、按钮、滑块、选项卡、数据表、响应式布局等）和强大的绘图功能。
要实现反应式用户界面，需要定义以下内容
-
交互式用户界面组件
-
用于保持组件状态的反应式变量
-
处理交互的反应式代码
Genie Framework 在其低代码应用程序接口（low-code API）中提供了一套小而完整的宏，您可以利用它实现上述所有功能。
下面的代码段展示了具有反应式用户界面的应用程序结构。
module App
#setup of the Genie Framework environment
using GenieFramework
@genietools
# reactive code
@app begin
@in N = 0
@out msg = ""
@onchange N begin
msg = "N = $N"
end
end
# UI components
function ui()
[
cell([
p("Enter a number")
textfield("N", :N )
])
cell([
bignumber("The value of N is", :N)
])
]
end
# definition of root route
@page("/", ui)
end
让我们来分析一下这段代码。
反应代码
@app 宏限定了定义反应式代码的代码块。其中，@in 和`@out` 宏定义了反应式变量，其值将暴露给用户界面。这些变量用于在后台存储用户界面组件的状态，连接前端和反应式变量的 Javascript 代码会自动生成。此外，@in 变量可以从用户界面进行修改，而`@out` 变量只能读取。
此外，@private 宏定义了非反应式变量，这些变量不向用户界面公开。这些变量可用于存储用户之间不共享的数据。
除了反应式变量，@onchange 宏还定义了当反应式变量的值发生变化时执行的反应式代码块。这种值变化可能来自 Julia 代码，也可能来自前端代码；两者都会触发反应式代码的执行。
定义用户界面布局和组件
在 Genie Framework 中实现用户界面有两种方法：使用低代码 API 在纯 Julia 中实现，或在 HTML 中实现。我们正在研究的示例代码展示了 Julia 选项。
我们有一个庞大的用户界面组件库，可以通过调用 Julia 函数实例化这些组件。这些组件可分为两组：
-
布局：通过定义行、单元格或列来设置页面布局的函数。
-
组件：用于生成用户界面组件（如输入框、滑块或绘图）的函数。
API 调用的完整列表见 [API/Components] 部分。这些函数会返回组件的 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>最后，您还可以从 HTML 文件中调用低代码 API 来添加组件：
<% textfield("N", :N ) %>