Select - Option List

An example of a simple select that triggers an action on the Controller side.

Basic Select - Option List

The selected option is sent to the controller on a change event. Since a bean is a singleton instance, storing a variable in the controller itself would mean it is shared across all users. Instead, we can use the Session object to get the specific variables for the active user.

<section>
    <p> I really like an Orange, but what is your favorite fruit?
        <!-- use :{querySelector} to select current value of an Element -->
        <select id="select-fruit" m:change="favorite(:{#select-fruit})">
            <option th:each="fruit: ${fruits}"
                    th:text="${fruit}"
                    th:selected="(${fruit} == ${favorite})">
            </option>
        </select>
    </p>
    <p>Your favorite fruit is: <b th:text="${favorite}"></b></p>
</section>

import io.getmedusa.medusa.core.annotation.UIEventPage;
import io.getmedusa.medusa.core.attributes.Attribute;

import java.util.List;

@UIEventPage(path = "/detail/option-list", file = "/pages/option-list.html")
public class OptionListController {

    List<String> fruits= List.of("Apple", "Banana", "Lemon", "Orange", "Strawberry" );

    public List<Attribute> setupAttributes(){
        return List.of(
            new Attribute("favorite", "Orange"),
            new Attribute("fruits", fruits)
        );
    }

    public List<Attribute> favorite(String fruit) {
        return List.of(new Attribute("favorite", fruit));
    }
}

Linked Select - Option List

A selected option in the first select, triggers a change of the content of the second select. The selected option is sent to the controller on a change event.

<section>
    <p> Select your drink

    <!-- with :{selector} you can refer to 'this' as being the Element itself -->
    <select m:change="drinks(:{this})" style="width: 156px">
        <option th:each="type: ${drinksType}"
                th:text="${type}"
                th:selected="${type} == ${selectedType}">
            Drink Type
        </option>
    </select>

    <select m:change="order(:{this})" style="width: 156px">
        <option th:each="drinkType: ${drinksList}"
                th:text="${drinkType}"
                th:selected="${drinkType} == ${type}">
            Selected Drink
        </option>
    </select>
    </p>

    <p> Your Order:</p>

    <ul>
        <li th:each="item:${order}" th:text="${item}"></li>
    </ul>
</section>

import io.getmedusa.medusa.core.annotation.UIEventPage;
import io.getmedusa.medusa.core.attributes.Attribute;

import java.util.List;
import java.util.Map;

@UIEventPage(path = "/detail/option-list", file = "/pages/option-list.html")
public class OptionListController {

    private Map<String, List<String>> drinks =
        Map.of(
            "Waters",     List.of("", "Plain water", "Sparkling water", "Flavored water"),
            "Hot Drinks", List.of("", "Coffee", "Thee", "Hot chocolate"),
            "Beers",      List.of("","Dark ale", "IPA")
        );

    public List<Attribute> setupAttributes(){
        String defaultDrinkType = "Waters";
        return List.of(
            new Attribute("order", new ArrayList<String>()),
            new Attribute("drinksType", drinks.keySet()),
            new Attribute("drinksList", drinks.get(defaultDrinkType)),
            new Attribute("selectedType", defaultDrinkType),
            new Attribute("selection" ,"")
        );
    }

    // select list based on the provided type
    public List<Attribute> drinks(String type) {
        return List.of(
            new Attribute("drinksList", drinks.get(type)),
            new Attribute( "selection" ,"") // reset selection
        );
    }

    public List<Attribute> order(Session session, String drink) {
        List<String> order = session.getAttribute("order");
        if(!drink.isBlank()) {
         order.add(drink);order.add(drink);
        }
        return List.of(new Attribute("order", order));
    }
}