Cheat Sheet

Some concepts are mentioned in more detail in later lessons. Treat this lesson more as a 'cheat sheet' of good to know methods rather than a full explanation.

Views

Construct basic text with the text function located in the prelude.

#![allow(unused)]
fn main() {
text("rabbit")
}

Display image

#![allow(unused)]
fn main() {
ImageView::new("path_to_resource_in_res_folder")
}

All colors are IVPs (usually you want to set a size, hence the second line)

#![allow(unused)]
fn main() {
BLACK
    .intrinsic(100, 100)
}

Dropdown Menu

#![allow(unused)]
fn main() {
let selection = Store::new(None);

Dropdown::new(selection.binding())
    .option("Alpha")
    .option("Beta");
}

TextField

#![allow(unused)]
fn main() {
let text = Store::new("initial".into());
TextField::new(text.binding());
}

Text Button

#![allow(unused)]
fn main() {
button("Label", |s| { /* action */ })
}

*There are many controls that one would expect from a UI library that are yet to be added. I apologize for this and may add them in the future if there is interest.

Layouts

You can use a vstack, hstack, or zstack to organize content easily. There are also flex layouts, but these are needed less.

You can either layout heterogenous data known at compile time,or dynamically based off of bindings and signals.

#![allow(unused)]
fn main() {
// hetereogenous
vstack()
    .push(ivp1)
    .push(ivp2)

// vector binding to vstack
binding.binding_vmap(|content| text(content.to_string());

// vector signal to vstack (slow)
signal.sig_vmap(|content| text(content.to_string());
}

Modifiers

Apply padding to an ivp

#![allow(unused)]
fn main() {
ivp
    .padding(amount)
}

Offset the ivp by some amount

#![allow(unused)]
fn main() {
ivp
    .offset(dx, dy)
}

Set the intrinsic size, essentially allocating a rectangle of space.

#![allow(unused)]
fn main() {
ivp
    .intrinsic(width, height)
// shorthand for .frame(F.intrinsic(width, height))
}

Setting text attributes

#![allow(unused)]
fn main() {
ivp
    .text_font("font_file_in_res/font")
    .text_size(size)
    .text_color(color)
}

Set the background color

#![allow(unused)]
fn main() {
ivp
    .bg_color(COLOR)
}

Add a foreground view

#![allow(unused)]
fn main() {
ivp
    .foreground(attraction)
}

Add a background view

#![allow(unused)]
fn main() {
ivp
    .background(attraction)
}

Lifecycle methods

#![allow(unused)]
fn main() {
ivp
    .pre_show(|s| { ... }) // called before children and before being shown
    .post_show(|s| { ... }) // called after children and after being shown
    .pre_hide(|s| { ... }) // called before children and before being hidden
    .post_hide(|s| { ... }) // called after children and after being hidden
}

Conditional

if else

#![allow(unused)]
fn main() {
view_if(condition_signal, IVP1)
    .view_else(IVP2)
}

view match

#![allow(unused)]
fn main() {
view_match!(signal;
    0 => arm1ivp,
    1 => arm2ivp,
    _ => default_arm_ivp
);
}