Modals

When building your UI with Mateu you can start a new flow in a modal window at any point. For doing that you only need to use the target parameter in any @Action, @MainAction or @Button annotations. You can close the modal at any point by using the closeModalWindow parameter in the same annotations.

An example

So, let's say you want to build the following flow:

Please notice that:

1. On clicking a button we open a new modal
2. Obn clicking a button we close the modal

For doing that you can create the main form using the following code:

package com.example.demo.infra.ui.menus.actions;

import io.mateu.core.domain.uidefinition.shared.annotations.*;
import org.springframework.stereotype.Service;

import java.util.concurrent.Callable;

@Service
@Caption("Actions as buttons")
public class ActionsAsButtonsForm {

    String name = "Mateu";

    @Button(target = ActionTarget.NewModal) // notice the target
    @SameLine
    @FlexGrow("0")
    Callable<ChangeNameForm> changeName = () -> new ChangeNameForm(name, this);

    int age = 16;

    @Button(target = ActionTarget.NewModal) // notice the target
    @SameLine
    @FlexGrow("0")
    Callable<ChangeAgeForm> changeAge = () -> new ChangeAgeForm(age, this);

}

And for the form to be opened in the modal we can write the following code:

package com.example.demo.infra.ui.menus.actions;

import io.mateu.core.domain.uidefinition.shared.annotations.Caption;
import io.mateu.core.domain.uidefinition.shared.annotations.MainAction;

@Caption("Change name")
public class ChangeNameForm {

    private final ActionsAsButtonsForm formWithCallbacks;

    String name;

    public ChangeNameForm(String name, ActionsAsButtonsForm formWithCallbacks) {
        this.name = name;
        this.formWithCallbacks = formWithCallbacks;
    }

    @MainAction(closeModalWindow = true) // notice the parameter for closing the modal
    ActionsAsButtonsForm save() {
        formWithCallbacks.name = this.name;
        return formWithCallbacks;
    }

}

As you see it's enough by providing some parameters to the @MainAction and @Button annotations to control (open and close) the modal.

There can be use cases where we do not now if we will be opening or closing the modal after running an action. For those situations we can just wrap our answer using a ResponseWrapper or a CloseModal object.

package com.example.demo.infra.ui.menus.actions;

import io.mateu.core.domain.uidefinition.shared.annotations.Caption;
import io.mateu.core.domain.uidefinition.shared.annotations.MainAction;
import io.mateu.core.domain.uidefinition.shared.data.CloseModal;

@Caption("Change age")
public class ChangeAgeForm {

    private final ActionsAsButtonsForm formWithCallbacks;

    int age;

    public ChangeAgeForm(int age, ActionsAsButtonsForm formWithCallbacks) {
        this.age = age;
        this.formWithCallbacks = formWithCallbacks;
    }

    @MainAction
    Object save() {
        formWithCallbacks.age = this.age;
        // here we decide to close the modal by wrapping our response in a CloseModal object
        return new CloseModal<>(formWithCallbacks);
    }

}

Nesting

You can nest any number of modals.

Left and right drawers

Besides setting a new modal as the target for your action you can also use ActionTarget.LeftDrawer and ActionTarget.RightDrawer as the target. That will work exactly the same way but placing your content in the left or right drawers.

Conclusion

Managing modals with Mateu is easy peasy.