[−][src]Trait zi::Component

pub trait Component: Sized + 'static {
    type Message: Send + 'static;
    type Properties: Clone;
    fn create(
        properties: Self::Properties, 
        frame: Rect, 
        link: ComponentLink<Self>
    ) -> Self;

    fn view(&self) -> Layout;

    fn change(&mut self, _properties: Self::Properties) -> ShouldRender { ... }

    fn resize(&mut self, _frame: Rect) -> ShouldRender { ... }

    fn update(&mut self, _message: Self::Message) -> ShouldRender { ... }

    fn has_focus(&self) -> bool { ... }

    fn input_binding(&self, _pressed: &[Key]) -> BindingMatch<Self::Message> { ... }

    fn tick(&self) -> Option<Self::Message> { ... }
}

Components are the building blocks of the UI in Zi.

The trait describes stateful components and their lifecycle. This is the main trait that users of the library will implement to describe their UI. All components are owned directly by an App which manages their lifecycle. An App instance will create new components, update them in reaction to user input or to messages from other components and eventually drop them when a component gone off screen.

Anyone familiar with Yew, Elm or React + Redux should be familiar with all the high-level concepts. Moreover, the names of some types and functions are the same as in Yew.

A component has to describe how:

  • how to create a fresh instance from Component::Properties received from their parent (create fn)
  • how to render it (view fn)
  • how to update its inter

Associated Types

type Message: Send + 'static

Messages are used to make components dynamic and interactive. For simple components, this will be (). Complex ones will typically use an enum to declare multiple Message types.

type Properties: Clone

Properties are the inputs to a Component.

Loading content...

Required methods

fn create(
    properties: Self::Properties,
    frame: Rect,
    link: ComponentLink<Self>
) -> Self

Components are created with three pieces of data:

  • their Properties
  • the current position and size on the screen
  • a ComponentLink which can be used to send messages and create callbacks for triggering updates

Conceptually, there's an "update" method for each one of these:

  • change when the Properties change
  • resize when their current position and size on the screen changes
  • update when the a message was sent to the component

fn view(&self) -> Layout

Returns the current visual layout of the component.

Loading content...

Provided methods

fn change(&mut self, _properties: Self::Properties) -> ShouldRender

When the parent of a Component is re-rendered, it will either be re-created or receive new properties in the change lifecycle method. Component's can choose to re-render if the new properties are different than the previously received properties.

Root components don't have a parent and subsequently, their change method will never be called. Components which don't have properties should always return false.

fn resize(&mut self, _frame: Rect) -> ShouldRender

This method is called when a component's position and size on the screen changes.

fn update(&mut self, _message: Self::Message) -> ShouldRender

Components handle messages in their update method and commonly use this method to update their state and (optionally) re-render themselves.

fn has_focus(&self) -> bool

Whether the component is currently focused.

fn input_binding(&self, _pressed: &[Key]) -> BindingMatch<Self::Message>

If the component is currently focused (see has_focus), input_binding will be called on every keyboard events.

fn tick(&self) -> Option<Self::Message>

Loading content...

Implementors

impl Component for Border[src]

type Message = ()

type Properties = BorderProperties

impl Component for Input[src]

type Message = Message

type Properties = InputProperties

impl Component for Select[src]

type Message = Message

type Properties = SelectProperties

impl Component for Text[src]

type Message = ()

type Properties = TextProperties

Loading content...