Luna UI Documentation

title: Example: Multi Page UI

MultiPageUI

You can find this example in Components sample.

csharp

using CupkekGames.Luna;
using UnityEngine.UIElements;

namespace CupkekGames.UITK.Demo.Components
{
    public class MultiPageUI : UIViewComponent
    {
        // Views
        private UIView _modal;
        private UIView _modalPageFirst;
        private UIView _modalPageSecond;

        // Buttons
        private Button _openModal;
        private Button _next;
        private Button _previous;

        protected override void Awake()
        {
            base.Awake();

            // Initialize the modal as a hidden UIView
            _modal = new UIView(gameObject, ParentElement.Q<VisualElement>("Modal"), UIStartVisibility.Invisible);

            // Initialize the first page of the modal and make it visible initially
            _modalPageFirst = new UIView(
                gameObject,
                _modal.ParentElement.Q<VisualElement>("Page1"),
                UIStartVisibility.Visible
            );

            // Initialize the second page of the modal and keep it hidden initially
            _modalPageSecond = new UIView(
                gameObject,
                _modal.ParentElement.Q<VisualElement>("Page2"),
                UIStartVisibility.Invisible
            );

            // Add an escape action to the modal to close it when triggered
            _modal.AddAction(new UIViewActionEscape(CloseModal));
            // Add an escape action to the second page to navigate back to the first page
            _modalPageSecond.AddAction(new UIViewActionEscape(() => ModalGoToPage(0)));

            // Retrieve button elements from the UI and assign them to variables
            _openModal = ParentElement.Q<Button>("OpenModal");
            _next = _modal.ParentElement.Q<Button>("Next");
            _previous = _modal.ParentElement.Q<Button>("Prev");
        }

        private void OnEnable()
        {
            // Register button click event handlers
            _openModal.clicked += OpenModal;
            _previous.clicked += InputEscapeManager.OnEscape; // Trigger the escape action
            _next.clicked += NextPage;
        }

        private void OnDisable()
        {
            // Unregister button click event handlers to avoid memory leaks
            _openModal.clicked -= OpenModal;
            _previous.clicked -= InputEscapeManager.OnEscape;
            _next.clicked -= NextPage;
        }

        public void OpenModal()
        {
            _modal.Fade.FadeIn();
        }

        public void CloseModal()
        {
            _modal.Fade.FadeOut();
        }

        public void ModalGoToPage(int index)
        {
            if (index == 0)
            {
                _modalPageFirst.Fade.FadeIn();
                _modalPageSecond.Fade.FadeOut();
            }
            else if (index == 1)
            {
                _modalPageFirst.Fade.FadeOut();
                _modalPageSecond.Fade.FadeIn();
            }
        }

        private void NextPage()
        {
            if (!_modalPageSecond.IsVisible)
            {
                ModalGoToPage(1);
            }
        }
    }
}

Nested UIViews

I will elaborate on the problem and solution by building upon the example provided above.

Add an Action to first page

csharp

// Add a UIViewActionEscape with Debug.Log to _modalPageFirst

// Set the second parameter, bool activate, to false because we don't want Action to register immediately.
// Because even of _modalPageFirst is visible, it's parent _modal is invisible.
// Otherwise, this Action will register at the start, when modal is closed.
_modalPageFirst.AddAction(new UIViewActionEscape(() => Debug.Log("First page: Can't escape me!")), false);

Problem

Actions such as UIViewActionEscape are registered when a UIView fades in. However, if you control the visibility of a UIView through a parent UIView, the actions of the child UIView will not be registered.

In this case, we are controlling visibility with the parent _modal and we never fade _modalPageFirst directly. This means the Action we added to _modalPageFirst will never activate.

Solution

To fix this issue, simply use AddChild function.

csharp

_modal.AddChild(_modalPageFirst);

With this, the Actions of child _modalPageFirst will register/unregister in sync with the parent _modal. So when _modal fades in, the UIViewActionEscape with debug message will be registered and next escape input will print the message to the console.

Examplemultipage

title: Example: Multi Page UI

MultiPageUI

Nested UIViews

Add an Action to first page

Problem

Solution