Struct View 

pub struct View<M = ()> { /* private fields */ }

A surface’s view: the root of each region (main, dock, layer). A region left out is not shown.

A node given for a region is the region root itself; a list (a Vec or an array) is wrapped in a col root. Tern draws a region’s children into an element of its own and ignores the root’s kind and props (but role), so a root should be a container. A bare node or list converts into a view as main’s children:

use tern_sdk::ui::{self, View};

let view: View = ui::md("**hi**").into();
let root = view.regions()[0].unwrap();
assert_eq!((root.kind(), root.child_nodes()[0].kind()), ("col", "md"));

Implementations

impl<M> View<M>

pub fn new() -> Self

The empty view.

Examples found in repository

examples/ask.rs (line 37)

fn view() -> View<()> {
	let sizes = SIZES.iter().map(|(value, label)| choice(value, label));
	View::new().main([html::form()
		.key("ask")
		.class("ask")
		.child(html::p("Which size?").key("q"))
		.child(html::div().key("sizes").class("sizes").children(sizes))
		.child(
			html::button("Create")
				.key("go")
				.actions(Actions::new().click("submit")),
		)])
}

examples/table.rs (line 62)

fn view(entries: &[Entry]) -> View {
	let head = html::tr()
		.child(html::th("Name"))
		.child(html::th("Size").class("size"));
	let rows = entries.iter().map(|e| {
		let name = if e.dir {
			format!("{}/", e.name)
		} else {
			e.name.clone()
		};
		let size = if e.dir { "-".to_owned() } else { human(e.size) };
		html::tr()
			.child(html::td(name).class(if e.dir { "dir" } else { "file" }))
			.child(html::td(size).class("size"))
	});
	View::new().main([html::table()
		.class("ls")
		.child(html::thead().child(head))
		.child(html::tbody().children(rows))])
}

examples/progress.rs (line 65)

fn view(build: &Build) -> View {
	let fraction = build.done as f64 / STEPS.len() as f64;
	let running = build.took.is_none();
	let activity: ui::Node = if running {
		ui::spinner()
			.style("dots")
			.label(STEPS[build.done.min(STEPS.len() - 1)])
			.into()
	} else {
		ui::icon(if build.status == Status::Done {
			"check"
		} else {
			"x"
		})
		.tone(if build.status == Status::Done {
			"success"
		} else {
			"error"
		})
		.into()
	};
	let mut timer = ui::elapsed().age(0);
	if let Some(took) = build.took {
		timer = timer.stopped(took);
	}
	View::new().main([ui::card()
		.key("build")
		.head("Building demo")
		.status(build.status.clone())
		.child(
			ui::row()
				.key("head")
				.gap("sm")
				.children(nodes![activity.key("a"), timer.key("t")]),
		)
		.child(
			ui::ansi(&build.log)
				.key("log")
				.follow(true)
				.max(Bound::h(Extent::Lines(8.0))),
		)
		.child(ui::progress().key("bar").value(fraction).label(format!(
			"{}/{}",
			build.done,
			STEPS.len()
		)))])
}

examples/chat.rs (line 76)

	fn view(&self) -> View<Msg> {
		let messages = self.transcript.iter().enumerate().map(|(i, (who, text))| {
			let node = ui::md(text.clone()).key(i);
			if *who == "you" {
				ui::card().key(i).tone("user").child(node.key("t"))
			} else {
				ui::card().key(i).variant("bare").child(node.key("t"))
			}
		});
		let cursor: usize = self
			.draft
			.chars()
			.take(self.cursor)
			.map(char::len_utf16)
			.sum();
		View::new().main(ui::col().children(messages)).dock(nodes![
			ui::editor()
				.key("ed")
				.text(self.draft.clone())
				.cursor(cursor)
				.placeholder("Message (Enter sends, Escape quits)")
				.sendable(true)
				.on_send(|text| Msg::Send(text.to_owned()))
				.on_focus(Msg::Focus),
			ui::status()
				.key("bar")
				.child(ui::seg("chat").icon("message"))
				.child(
					ui::seg(format!("{} messages", self.transcript.len()))
						.side(Side::Right)
						.tone(if self.transcript.is_empty() {
							Tone::Muted
						} else {
							Tone::Success
						}),
				),
		])
	}

pub fn main(self, region: impl Into<Node<M>>) -> Self

Sets main, the flowing document: a root node, or a list of children wrapped in a col.

Examples found in repository

examples/ask.rs (lines 37-46)

fn view() -> View<()> {
	let sizes = SIZES.iter().map(|(value, label)| choice(value, label));
	View::new().main([html::form()
		.key("ask")
		.class("ask")
		.child(html::p("Which size?").key("q"))
		.child(html::div().key("sizes").class("sizes").children(sizes))
		.child(
			html::button("Create")
				.key("go")
				.actions(Actions::new().click("submit")),
		)])
}

examples/table.rs (lines 62-65)

fn view(entries: &[Entry]) -> View {
	let head = html::tr()
		.child(html::th("Name"))
		.child(html::th("Size").class("size"));
	let rows = entries.iter().map(|e| {
		let name = if e.dir {
			format!("{}/", e.name)
		} else {
			e.name.clone()
		};
		let size = if e.dir { "-".to_owned() } else { human(e.size) };
		html::tr()
			.child(html::td(name).class(if e.dir { "dir" } else { "file" }))
			.child(html::td(size).class("size"))
	});
	View::new().main([html::table()
		.class("ls")
		.child(html::thead().child(head))
		.child(html::tbody().children(rows))])
}

examples/progress.rs (lines 65-85)

fn view(build: &Build) -> View {
	let fraction = build.done as f64 / STEPS.len() as f64;
	let running = build.took.is_none();
	let activity: ui::Node = if running {
		ui::spinner()
			.style("dots")
			.label(STEPS[build.done.min(STEPS.len() - 1)])
			.into()
	} else {
		ui::icon(if build.status == Status::Done {
			"check"
		} else {
			"x"
		})
		.tone(if build.status == Status::Done {
			"success"
		} else {
			"error"
		})
		.into()
	};
	let mut timer = ui::elapsed().age(0);
	if let Some(took) = build.took {
		timer = timer.stopped(took);
	}
	View::new().main([ui::card()
		.key("build")
		.head("Building demo")
		.status(build.status.clone())
		.child(
			ui::row()
				.key("head")
				.gap("sm")
				.children(nodes![activity.key("a"), timer.key("t")]),
		)
		.child(
			ui::ansi(&build.log)
				.key("log")
				.follow(true)
				.max(Bound::h(Extent::Lines(8.0))),
		)
		.child(ui::progress().key("bar").value(fraction).label(format!(
			"{}/{}",
			build.done,
			STEPS.len()
		)))])
}

examples/chat.rs (line 76)

	fn view(&self) -> View<Msg> {
		let messages = self.transcript.iter().enumerate().map(|(i, (who, text))| {
			let node = ui::md(text.clone()).key(i);
			if *who == "you" {
				ui::card().key(i).tone("user").child(node.key("t"))
			} else {
				ui::card().key(i).variant("bare").child(node.key("t"))
			}
		});
		let cursor: usize = self
			.draft
			.chars()
			.take(self.cursor)
			.map(char::len_utf16)
			.sum();
		View::new().main(ui::col().children(messages)).dock(nodes![
			ui::editor()
				.key("ed")
				.text(self.draft.clone())
				.cursor(cursor)
				.placeholder("Message (Enter sends, Escape quits)")
				.sendable(true)
				.on_send(|text| Msg::Send(text.to_owned()))
				.on_focus(Msg::Focus),
			ui::status()
				.key("bar")
				.child(ui::seg("chat").icon("message"))
				.child(
					ui::seg(format!("{} messages", self.transcript.len()))
						.side(Side::Right)
						.tone(if self.transcript.is_empty() {
							Tone::Muted
						} else {
							Tone::Success
						}),
				),
		])
	}

pub fn dock(self, region: impl Into<Node<M>>) -> Self

Sets dock, sticky at the pane’s bottom: a root node, or a list.

Examples found in repository

examples/chat.rs (lines 76-97)

	fn view(&self) -> View<Msg> {
		let messages = self.transcript.iter().enumerate().map(|(i, (who, text))| {
			let node = ui::md(text.clone()).key(i);
			if *who == "you" {
				ui::card().key(i).tone("user").child(node.key("t"))
			} else {
				ui::card().key(i).variant("bare").child(node.key("t"))
			}
		});
		let cursor: usize = self
			.draft
			.chars()
			.take(self.cursor)
			.map(char::len_utf16)
			.sum();
		View::new().main(ui::col().children(messages)).dock(nodes![
			ui::editor()
				.key("ed")
				.text(self.draft.clone())
				.cursor(cursor)
				.placeholder("Message (Enter sends, Escape quits)")
				.sendable(true)
				.on_send(|text| Msg::Send(text.to_owned()))
				.on_focus(Msg::Focus),
			ui::status()
				.key("bar")
				.child(ui::seg("chat").icon("message"))
				.child(
					ui::seg(format!("{} messages", self.transcript.len()))
						.side(Side::Right)
						.tone(if self.transcript.is_empty() {
							Tone::Muted
						} else {
							Tone::Success
						}),
				),
		])
	}

pub fn layer(self, region: impl Into<Node<M>>) -> Self

Sets layer, the overlays: a root node, or a list.

pub const fn regions(&self) -> [Option<&Node<M>>; 3]

The regions in order main, dock, layer.

pub fn from_json(value: &Value) -> Result<Self, Error>

Builds a view from its wire form {main?, dock?, layer?} (null is the empty view; a region given as a list is wrapped in a col).

Errors

Error::InvalidView for an unknown region or a malformed node.

Trait Implementations

impl<M> Clone for View<M>

fn clone(&self) -> Self

Returns a duplicate of the value.

fn clone_from(&mut self, source: &Self)

Performs copy-assignment from source.

impl<M> Debug for View<M>

fn fmt(&self, f: &mut Formatter<'_>) -> Result

Formats the value using the given formatter.

impl<M> Default for View<M>

fn default() -> Self

Returns the “default value” for a type.

impl<M> From<Agent<M>> for View<M>

A bare node is main’s one child.

fn from(n: Agent<M>) -> Self

Converts to this type from the input type.

impl<M> From<Ansi<M>> for View<M>

A bare node is main’s one child.

fn from(n: Ansi<M>) -> Self

Converts to this type from the input type.

impl<M> From<Badge<M>> for View<M>

A bare node is main’s one child.

fn from(n: Badge<M>) -> Self

Converts to this type from the input type.

impl<M> From<Card<M>> for View<M>

A bare node is main’s one child.

fn from(n: Card<M>) -> Self

Converts to this type from the input type.

impl<M> From<Chart<M>> for View<M>

A bare node is main’s one child.

fn from(n: Chart<M>) -> Self

Converts to this type from the input type.

impl<M> From<Checklist<M>> for View<M>

A bare node is main’s one child.

fn from(n: Checklist<M>) -> Self

Converts to this type from the input type.

impl<M> From<Code<M>> for View<M>

A bare node is main’s one child.

fn from(n: Code<M>) -> Self

Converts to this type from the input type.

impl<M> From<Col<M>> for View<M>

A bare node is main’s one child.

fn from(n: Col<M>) -> Self

Converts to this type from the input type.

impl<M> From<Diff<M>> for View<M>

A bare node is main’s one child.

fn from(n: Diff<M>) -> Self

Converts to this type from the input type.

impl<M> From<Editor<M>> for View<M>

A bare node is main’s one child.

fn from(n: Editor<M>) -> Self

Converts to this type from the input type.

impl<M> From<Effort<M>> for View<M>

A bare node is main’s one child.

fn from(n: Effort<M>) -> Self

Converts to this type from the input type.

impl<M> From<El<M>> for View<M>

A bare node is main’s one child.

fn from(n: El<M>) -> Self

Converts to this type from the input type.

impl<M> From<Elapsed<M>> for View<M>

A bare node is main’s one child.

fn from(n: Elapsed<M>) -> Self

Converts to this type from the input type.

impl<M> From<IconNode<M>> for View<M>

A bare node is main’s one child.

fn from(n: IconNode<M>) -> Self

Converts to this type from the input type.

impl<M> From<Image<M>> for View<M>

A bare node is main’s one child.

fn from(n: Image<M>) -> Self

Converts to this type from the input type.

impl<M> From<Input<M>> for View<M>

A bare node is main’s one child.

fn from(n: Input<M>) -> Self

Converts to this type from the input type.

impl<M> From<Item<M>> for View<M>

A bare node is main’s one child.

fn from(n: Item<M>) -> Self

Converts to this type from the input type.

impl<M> From<Kbd<M>> for View<M>

A bare node is main’s one child.

fn from(n: Kbd<M>) -> Self

Converts to this type from the input type.

impl<M> From<Kv<M>> for View<M>

A bare node is main’s one child.

fn from(n: Kv<M>) -> Self

Converts to this type from the input type.

impl<M> From<List<M>> for View<M>

A bare node is main’s one child.

fn from(n: List<M>) -> Self

Converts to this type from the input type.

impl<M> From<Math<M>> for View<M>

A bare node is main’s one child.

fn from(n: Math<M>) -> Self

Converts to this type from the input type.

impl<M> From<Md<M>> for View<M>

A bare node is main’s one child.

fn from(n: Md<M>) -> Self

Converts to this type from the input type.

impl<M> From<Meter<M>> for View<M>

A bare node is main’s one child.

fn from(n: Meter<M>) -> Self

Converts to this type from the input type.

impl<M> From<Node<M>> for View<M>

A bare node is main’s one child.

fn from(node: Node<M>) -> Self

Converts to this type from the input type.

impl<M> From<Overlay<M>> for View<M>

A bare node is main’s one child.

fn from(n: Overlay<M>) -> Self

Converts to this type from the input type.

impl<M> From<Picker<M>> for View<M>

A bare node is main’s one child.

fn from(n: Picker<M>) -> Self

Converts to this type from the input type.

impl<M> From<Prefs<M>> for View<M>

A bare node is main’s one child.

fn from(n: Prefs<M>) -> Self

Converts to this type from the input type.

impl<M> From<Progress<M>> for View<M>

A bare node is main’s one child.

fn from(n: Progress<M>) -> Self

Converts to this type from the input type.

impl<M> From<Rate<M>> for View<M>

A bare node is main’s one child.

fn from(n: Rate<M>) -> Self

Converts to this type from the input type.

impl<M> From<Row<M>> for View<M>

A bare node is main’s one child.

fn from(n: Row<M>) -> Self

Converts to this type from the input type.

impl<M> From<Rows<M>> for View<M>

A bare node is main’s one child.

fn from(n: Rows<M>) -> Self

Converts to this type from the input type.

impl<M> From<Rule<M>> for View<M>

A bare node is main’s one child.

fn from(n: Rule<M>) -> Self

Converts to this type from the input type.

impl<M> From<Section<M>> for View<M>

A bare node is main’s one child.

fn from(n: Section<M>) -> Self

Converts to this type from the input type.

impl<M> From<Seg<M>> for View<M>

A bare node is main’s one child.

fn from(n: Seg<M>) -> Self

Converts to this type from the input type.

impl<M> From<Shimmer<M>> for View<M>

A bare node is main’s one child.

fn from(n: Shimmer<M>) -> Self

Converts to this type from the input type.

impl<M> From<Spacer<M>> for View<M>

A bare node is main’s one child.

fn from(n: Spacer<M>) -> Self

Converts to this type from the input type.

impl<M> From<Spinner<M>> for View<M>

A bare node is main’s one child.

fn from(n: Spinner<M>) -> Self

Converts to this type from the input type.

impl<M> From<StatusBar<M>> for View<M>

A bare node is main’s one child.

fn from(n: StatusBar<M>) -> Self

Converts to this type from the input type.

impl<M> From<Table<M>> for View<M>

A bare node is main’s one child.

fn from(n: Table<M>) -> Self

Converts to this type from the input type.

impl<M> From<Tabs<M>> for View<M>

A bare node is main’s one child.

fn from(n: Tabs<M>) -> Self

Converts to this type from the input type.

impl<M> From<TextNode<M>> for View<M>

A bare node is main’s one child.

fn from(n: TextNode<M>) -> Self

Converts to this type from the input type.

impl<M> From<Toast<M>> for View<M>

A bare node is main’s one child.

fn from(n: Toast<M>) -> Self

Converts to this type from the input type.

impl<M> From<Tool<M>> for View<M>

A bare node is main’s one child.

fn from(n: Tool<M>) -> Self

Converts to this type from the input type.

impl<M> From<Tree<M>> for View<M>

A bare node is main’s one child.

fn from(n: Tree<M>) -> Self

Converts to this type from the input type.

impl<M> From<Vec<Node<M>>> for View<M>

A list of nodes is main’s children.

fn from(children: Vec<Node<M>>) -> Self

Converts to this type from the input type.

impl<M, C: Into<Node<M>>, const N: usize> From<[C; N]> for View<M>

An array of nodes is main’s children.

fn from(children: [C; N]) -> Self

Converts to this type from the input type.