Trait zi::Component

source · [−]
pub trait Component: Sized + 'static {
    type Message: Send + 'static;
    type Properties;

    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 bindings(&self, _bindings: &mut Bindings<Self>) { ... }
    fn notify_binding_queries(
        &self, 
        _queries: &[Option<NamedBindingQuery>], 
        _keys: &[Key]
    ) { ... }
    fn tick(&self) -> Option<Self::Message> { ... }
}
Expand description

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

Required Associated Types

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.

Properties are the inputs to a Component.

Required Methods

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

Returns the current visual layout of the component.

Provided Methods

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.

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

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

Updates the key bindings of the component.

This method will be called after the component lifecycle methods. It is used to specify how to react in response to keyboard events, typically by sending a message.

Implementors