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.
type Properties
type Properties
Properties are the inputs to a Component.
Required Methods
fn create(
properties: Self::Properties,
frame: Rect,
link: ComponentLink<Self>
) -> Self
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 changeresize
when their current position and size on the screen changesupdate
when the a message was sent to the component
Provided Methods
fn change(&mut self, _properties: Self::Properties) -> ShouldRender
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
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
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.
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.