Creating UI Documents

This system comprises three primary documents:

1. Loading UI

2. Main Events UI

3. Event Item UI

These documents can be located in the UI Folder.

Loading UI:

This is the most basic UXML. It includes a background, text, and a loading bar. The entire document appears as follows:

This includes a background (BG), loading text, and a progress bar. That's all there is to it.

Mian Events UI:

This document serves as the primary document for the UI. It is instantiated from the UI Document class.

This UXML looks like this:

In this hierarchy, you'll notice there are elements such as Title, Events Scroll, and Loading Document. I will populate the Events Scroll with event items. The Loading Document is present to display the progress of data loading.

Event Item UI:

This is a somewhat intricate UI document that encompasses various pieces of information. The entire document is displayed as follows:

In this layout, you’ll notice the following elements:

• ‘BG’ serves as the background.

• ‘FG’ is used for the title. Within the title’s child elements, you’ll find the title text and time text.

• The ‘Body’ follows next, and its layout is split into two sections: the Icon and the Description Container.

• Within the Icon Panel, there’s an Icon image and a Loading panel.

• The Description Container houses the Text and a button.

The subsequent step involves instantiating these items.