Tabs.md

K2 tabs

In K2D2 The tabs system is used as the central controler. Each Pilot is located under it's tab. Each tab can be Visible or not and On/Off. Each button should have 4 different states. This "compexity" make the K2UI tab system a little bit more complex than simple tabs.

This On/off Feature can be ignored and the tabs can be used without it.

Main Structure

usage

1. Create a K2TabsView as a root Element

it will automatically creates a K2TabsBar and adds button when pgae will be addes

2. adds page with a K2PageElement

• The name of the label will be used to be identified by the K2TabsView
• It's label Attribute will be used as the button's Label

3. adds control to the page

the K2TabsView

You can select the start up page with the K2TabsView's attribute : Selected Tab Name

• use Select(string code) to open a page by it's code.

The current page code can be get using the CurrentTabCode attribute

K2Page

The K2Page is a base class the Mod's pages could overload. This is not a visual element as it should be linked more with the plugin logic.

And it is not mandatory, the Tabs logic can work on itself without this class but is can simplify the work and I advise to use it.

This class can be used to have a different behavior it the page if shown or not to avoid computing things that is not useful to the user. It is alos used in K2D2 to show settings when the settings button is pressed. As each setting is relative to a pilot it's a convenient way to show options on eachs pilot.

This init of the ui should be done by overiding the virtual bool onInit()

You must defines the list of pages by using the Init(List<K2Page> panels) of the K2TabsView.

Each page will then receive the isVisible and isRunning properties. And the onUpdateUI will be called on each Update Frame.

The K2Page also check the presence in the Xml Tree of children named "page" and "content" to show a settings page when the setting button is clicked. It is a behavior that I needed for K2D2 mod but it is fully optional.

simple example

Without the use of settings

    public class TimerPanel: K2Page
    {
        public TimerPanel()
        {
            // this code is used to find the TapPage in the Xml tree
            code = "timer";
        }

        Label my_label;

        public override bool onInit()
        {
            // find the element in the tree
            my_label = panel.Q<Label>("timer_label");     
            return true;
        }

        public override bool onUpdateUI()
        {
            // called on each frame when the UI is visible 
            if (!base.onUpdateUI())
                // the base class return false if the UI is hidden
                return false;

            Debug.Log("calling update");
            my_label.text = $"time is {Time.time:n1} s";

            return true;
        }
    }

You can see more example in the test_k2ui repo : https://github.com/cfloutier/test_k2ui

What is inside the K2Tabs

Tabs has been rewritten 4 times ! it was the first element I worked on and I was struggling with UI Toolkit logic and behavior. The solutions thats were mainly used didn't satisfied what I wanted to have to be easy to configure and maintains.

The tabs in K2D2 have quite a complexity because each one holds a pilot that can be visible or not and active or not. each page have to show this 2 informations and dealing with only css to do that made the problem more complex.

I finally had to separate the work into many differents classes :

• TabbedPage : maintains the a global logic. It creates TabButton depending on TabPages found in it's content.
• TabPage : is a VisualElement used to identiy a page and create it's associated TabButton. Thats where we can edit this in the UIBuilder
• TabButton : created by the is TabbedPage in the TabsBar
• TabsBar : have the responsability of showing and hiding pages and changing buttons look on user inputs
• and the K2Page is used a on interface between the UI and the mod.