Makara Book

Each widget type has its own query and blueprint. Once widgets are built, you can query any widgets within systems using its corresponding query struct.

For example, let’s say we have a text and a button. Once the button is clicked, we want to update the text.

#![allow(unused)]
fn main() {
column_!([
    text_!("Hello world", id: "my-text"),
    button_!("Click me"; on: |_clicked: On<Clicked>, mut text_q: TextQuery| {
        if let Some(text) = text_q.find_by_id("my-text") {
            text.text.value.0 = "Hello Mom".to_string();
        }
    })
]);
}

In the example above, once the button is clicked, we query text widgets using TextQuery. We then find the specific widget using its id. This is similar to how javascript finds HTML elements within the DOM.

Of course, you can query a widget using class or entity instead of id. Querying with class is useful if you want to fetch multiple widgets at same time, but requires you to write extra code.

#![allow(unused)]
fn main() {
// change all text colors when button is clicked.
column_!([
    text_!("Hello world", class: "my-text"),
    text_!("Hello mom", class: "my-text"),
    text_!("Hello friend", class: "my-text"),
    text_!("Hello stranger", class: "my-text"),
    
    button_!("Click me"; on: |_clicked: On<Clicked>, mut text_q: TextQuery| {
        // find_by_class returns list of entity
        let text_entities = text_q.find_by_class("my-text");
    
        // iterate thru the list
        for entity in text_entities.into_iter() {
            if let Some(text) = text_q.find_by_entity(entity) {
                text.text.color.0 = Color::RED;
            }
        }
    })
]);
}

For more information about widget query and its blueprint, see widgets.