Ui in Rust - SixtyFPS


Eine weitere Möglichkeit

UIs in Rust sind leider noch immer nicht ganz so einfach wie z.B. in C#. Aber auch hier werden die Möglichkeiten mehr.

Vor kurzem bin ich auf ein Framework, SixtyFPS, gestossen das zumindest für mich schon recht gut funktioniert.

Vorteile

Es läuft auf vielen Plattformen:

Ausserdem ist SixtyFPS zwar in Rust geschrieben worden, kann aber in mehreren Sprachen verwendet werden. Bindings existieren nativ für

Nachteile

SixtyFPS kommt mit einer eigenen “Programmiersprache”, die zwar sehr einfach ist, die man aber trotzdem erst lernen muss.

Es gibt zwar einige hilfen wie z.B. den Online Playground oder ein VS-Code Plugin mit UI-Voransicht (SixtFPS-vscode), trotzdem muss man sich damit auseinandersetzen.

Verwendung

Ein Nachteil von SixtyFPS ist gleichzeitig auch ein kleiner Vorteil. Man trennt nämlich den Programmcode mehr oder weniger automatisch von der GUI und kann die Teile getrennt entwickeln.

Beispielcode (einfaches Fenster):

import { Button, LineEdit} from "sixtyfps_widgets.60";

export MainWindow := Window {
    title: "Simple UI Window";
    min-height: 100px;
    min-width: 400px;
    
    VerticalLayout { 
        HorizontalLayout {
            spacing: 5px;
            padding: 10px;
            Text {
                vertical-alignment: TextVerticalAlignment.center;
                text: "Input File:";
            }
            LineEdit { 
                enabled: false;
                vertical-stretch: 100%;
            }
        }
        Rectangle {}
        HorizontalLayout {
            spacing: 5px;
            padding: 10px;
            Button {
                text: "OK";
            }
        }
    }
}

Anzeigen kann man das ganze dann von Rust aus mit:

sixtyfps::sixtyfps!{ import { MainWindow} from "ui/MainWindow.60"; }

fn main() {
    let mainwindow = MainWindow::new();

    mainwindow.run();
}

Im cargo.toml muss man es natürlich auch eintragen:

[package]
name = "sixtyfps_rust"
version = "0.1.0"
edition = "2021"

[dependencies]
sixtyfps = "0.1"
Einfache UI Als Belohnung erhält man dafür ein Fenster mit simpler UI.

SixtyFPS erlaubt neben einfacher UI auch interaktionen (z.B. umschalten von Tabs, Fade in/out, u.s.w.). Wenn es allerdings darum geht wirklich ein Programm zu schreiben das auch etwas macht, muss man irgendwie den UI-Code mit dem Programmcode verbinden.

Interaktion mit der Programmlogik

Um auf Button-Klicks oder ähnliches zu reagieren erlaubt SixtyFPS die verwendung von callbacks.

Um mit Inhalten zu interagieren (z.B. Text in Feldern ändern) kann man properties verwenden:

import { Button, LineEdit} from "sixtyfps_widgets.60";

export MainWindow := Window {
    title: "Simple UI Window";
    min-height: 100px;
    min-width: 400px;
    property<string> text_content;
    callback ok_clicked();
    
    VerticalLayout { 
        HorizontalLayout {
            spacing: 5px;
            padding: 10px;
            Text {
                vertical-alignment: TextVerticalAlignment.center;
                text: "Input File:";
            }
            LineEdit { 
                text <=> root.text_content;
                vertical-stretch: 100%;
            }
        }
        Rectangle {}
        HorizontalLayout {
            spacing: 5px;
            padding: 10px;
            Button {
                text: "OK";
                clicked => { root.ok_clicked(); }
            }
        }
    }
}

Interagieren kann man damit im Rust code dann so:

use std::process::exit;

use sixtyfps::SharedString;
sixtyfps::sixtyfps!{ import { MainWindow} from "ui/MainWindow.60"; }

fn main() {
    let mainwindow = MainWindow::new();

    {   // ein scope für "win"
        let win = mainwindow.clone_strong();
        mainwindow.on_ok_clicked( move || {
            win.hide();
            exit(0);
        });
    }

    mainwindow.set_text_content(SharedString::from("Hallo Welt"));

    mainwindow.run();
}

Zusammenfassung

Ich habe bis jetzt nur spielerisch ein paar einfache UIs zusammengebaut. Das Potential ist da, allerdigs sollte man beim Implementieren vorsichtig sein, da die Dateien sehr schnell unübersichtlich werden.

Das Interface sieht aber sehr gut aus und mit ein wenig Geduld kann man damit auch sehr ansprechende Designs gestalten.

Was (scheinbar) leider (noch) nicht geht sind Fenstermenüs. Ansonst ist es jedenfalls einen Versuch wert.