zng/examples

animation

Source: animation.rs

cargo do run animation

Demonstrates animation, easing functions.

border

Source: border.rs

cargo do run border

Demonstrates borders, corner radius, multiple borders per widget and clip-to-bounds.

button

Source: button.rs

cargo do run button

Demonstrates the button widget.

calculator

Source: calculator.rs

cargo do run calculator

Simple calculator, demonstrates Grid layout, data context.

config

Source: config.rs

cargo do run config

Demonstrates the CONFIG service, live updating config between processes.

countdown

Source: countdown.rs

cargo do run countdown

Demonstrates the TIMERS service, variable mapping.

cursor

Source: cursor.rs

cargo do run cursor

Demonstrates each CursorIcon, tooltip anchored to cursor.

extend_view

Source: extend_view.rs

cargo do run extend_view

Demonstrates the zng-view extension API and render extensions API.

focus

Source: focus.rs

cargo do run focus

Demonstrates the focus service, logical and directional navigation.

gradient

Source: gradient.rs

cargo do run gradient

Demonstrates gradient rendering.

headless

Source: headless.rs

cargo do run headless

Demonstrates headless apps, image and video rendering.

icon

Source: icon.rs

cargo do run icon

Search and copy Material Icons constants.

image

Source: image.rs

cargo do run image

Demonstrates image loading, displaying, animated sprites, rendering, pasting.

layer

Source: layer.rs

cargo do run layer

Demonstrates the LAYERS service.

localize

Source: localize.rs

cargo do run localize

Demonstrates localization.

markdown

Source: markdown.rs

cargo do run markdown

Demonstrates the Markdown! widget.

respawn

Source: respawn.rs

cargo do run respawn

Demonstrates app-process crash handler and view-process respawn.

scroll

Source: scroll.rs

cargo do run scroll

Demonstrates the Scroll! widget and scroll commands.

shortcut

Source: shortcut.rs

cargo do run shortcut

Small utility that displays the pressed key gestures.

text

Source: text.rs

cargo do run text

Demonstrates the Text! and TextInput! widgets. Text rendering, text editor.

transform

Source: transform.rs

cargo do run transform

Demonstrates 2D and 3D transforms, touch transforms.

window

Source: window.rs

cargo do run window

Demonstrates the window widget, service, state and commands.

Adding an Example

Add the new example in examples/<example-name>.rs:

//! Demonstrates foo, bar.

#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

use zng::prelude::*;

use zng::view_process::prebuilt as view_process;

fn main() {
    examples_util::print_info();
    // view_process::run_same_process(app_main);

    view_process::init();
    app_main();
}

fn app_main() {
    APP.defaults().run_window(async {
        Window! {
            title = "Foo Example";
            child = Text!("Bar");
        }
    })
}

Register it in examples/Cargo.toml:

[[example]]
name = "<example-name>"
path = "<example-name>.rs"

Run the example and test it.

cargo do run <example-name>

Optionally, take a screenshot and save it to examples/res/screenshots/<example-name>.png. You can take a screenshot using the inspector window, press Ctrl+Shift+I then click the "Save Screenshot" menu.

Run oxipng or another minifier on the screenshot before committing.

oxipng -o max --strip safe --alpha "examples/res/screenshots/<example-name>.png"

Update the auto generated README:

cargo do doc --readme-examples

Done. You can run the new example using:

cargo do run <example-name>

Local Example

You can create local examples for manual testing in /examples/examples/<test>.rs. These files are git-ignored and can be run using cargo do run <test> without needing to register.