Use a declarative language (json5, json, xml, toml) to describe your fltk-rs gui, with support for hot-reloading of your gui file.
In your Cargo.toml:
toml
[dependencies]
fltk-decl = "0.1"
Create a json file, let's call it gui.json. ```json { "$schema": "https://raw.githubusercontent.com/MoAlyousef/fltk-decl/main/schemas/fltk-schema.json", "widget": "Column", "children": [ { "widget": "Button", "label": "Inc", "fixed": 60, "id": "inc", "labelcolor": "#0000ff"
},
{
"widget": "Row",
"children": [
{
"widget": "Frame",
"fixed": 30
},
{
"widget": "Frame",
"label": "0",
"id": "result",
"labelcolor": "#ff0000"
},
{
"widget": "Frame",
"fixed": 30
}
]
},
{
"widget": "Button",
"label": "Dec",
"fixed": 60,
"id": "dec"
}
]
} ``` Notice we point to the schema to get auto-completion and hinting on vscode, otherwise it's optional.
Note that this crate uses json5, so you could just as easily change your gui.json to gui.json5 (to benefit from comments, trailing commas and unquoted keys!):
json5
{
// main column
widget: "Column",
children: [
{
// our button
widget: "Button",
label: "Click me",
color: "#ff0000",
id: "my_button",
}
],
}
However, you lose vscode's auto-completion since json5 extensions in vscode don't support schemas.
You could also use xml:
gui.xml
xml
<?xml version="1.0" encoding="UTF-8"?>
<root>
<widget>Column</widget>
<children>
<widget>Button</widget>
<label>Click Me</label>
<id>my_button</id>
<labelcolor>#0000ff</labelcolor>
</children>
</root>
or toml! ``` widget = "Column"
[[children]] widget = "Button" label = "Click Me" id = "my_button" ```
Import it into your app: ```rust use fltk_decl::DeclarativeApp;
fn main() {
// use the filetype and extension that you require
// run takes a bool and a callback, the bool indicates you want hot-reloading.
// The callback runs at least once, or whenever the gui file changes.
DeclarativeApp::new(200, 300, "MyApp", "gui.json").run(true, |mainwin| {});
}
```
To handle callbacks: ```rust use fltk::{prelude::*, *}; use fltk_decl::DeclarativeApp;
struct State { count: i32, }
impl State { pub fn increment(&mut self, val: i32) { let mut result: frame::Frame = app::widgetfromid("result").unwrap(); self.count += val; result.setlabel(&self.count.tostring()); } }
fn incbtncb(_b: &mut button::Button) {
let state = app::GlobalState::
fn decbtncb(_b: &mut button::Button) {
let state = app::GlobalState::
fn main() { app::GlobalState::new(State { count: 0 }); DeclarativeApp::new(200, 300, "MyApp", "examples/gui.json") .run(true, |win| { let mut inc: button::Button = app::widgetfromid("inc").unwrap(); let mut dec: button::Button = app::widgetfromid("dec").unwrap(); inc.setcallback(incbtncb); dec.setcallback(decbtn_cb); }) .unwrap(); } ```