Crate acrylic

Expand description

A work-in-progress, easily portable, small, web-inspired user interface toolkit.

Example project structure:

├── Cargo.toml
├── assets
│   ├── ferris.png
│   └── default.xml
└── src
    └── app.rs

An asset: ferris.png

You can get it here

The view layout: default.xml

<x rem="1" style="default">
    <inflate />
    <y fixed="400" gap="10">
        <inflate />
        <png src="ferris.png" />
        <x fixed="40" gap="10">
            <inflate />
            <p txt="Rust rocks!" />
            <inflate />
        </x>
        <inflate />
    </y>
    <inflate />
</x>

The code: app.rs

use platform::app;
use acrylic::app::Application;
use acrylic::xml::ViewLoader;
 
app!("assets/", {
    let loader = ViewLoader::new("default.xml");
    Application::new((), loader)
});

The manifest: Cargo.toml

[package]
name = "my-app"
version = "0.1.0"
edition = "2021"
 
[lib]
crate-type = [ "cdylib" ]
path = "src/app.rs"
 
[dependencies]
acrylic = "0.2.0"
 
# building for the web
platform = { package = "acrylic-web", version = "0.2.0" }

Building

cargo build --target wasm32-unknown-unknown

Install a web server

httpserv is tiny and good enough for this demo.

cargo install httpserv

Start the web server

# normal start:
httpserv
 
# quiet + in the background
httpserv > /dev/null &

Then open http://localhost:8080/#release

Expected Result

app.rs code walkthrough

// this is macro import.
// each platform implementation is required
// to provide an `app` macro which either
// maps to a `main` function or to whatever
// is an entry point for that platform.
use platform::app;
 
// A structure which owns fonts, views,
// event handlers, assets: the state of
// an `acrylic` application.
use acrylic::app::Application;
 
// A structure capable of mapping an XML
// file to a view layout.
use acrylic::xml::ViewLoader;
 
// This translates to an entry point.
// We also specify the location of our
// assets.
app!("assets/", {
 
    // instanciate our view layout
    let loader = ViewLoader::new("default.xml");
 
    // creates an Application object
    // The second parameter is our model
    // of this real-world application.
    // We can store any Sized data here
    // and get it back with Application::model().
    Application::new((), loader)
 
    // Before returning the Application to the
    // platform, where it will be managed in an
    // event loop, we could also add named event
    // handlers using Application::add_handler().
    // On certain element types, you can redirect
    // events to these handlers; for instance,
    // acrylic::text::xml_paragraph accepts handlers
    // for text edition and submission.
});