About

The engine provides embedded core for handling the collection-like UIs with standardized API and predefined bridge between internal logic and high-level collection's features.

GUI Elements Collection

The core of the framework implements and encapsulated entire backstage logic for collections powering with an abstract AGUIElementsCollection class. The class derived from the AGUIElement supplied with the dui2 core.

The component by itself implements IList<AGUIElement> interface that allows you to operate it as list of other GUI elements.

Explore API: Doloro.UIEngine2.Modules.ElementsCollection.AGUIElementsCollection

Grid collection

The package supplies you with powerful implementation of the abstract AGUIElementsCollection that can be used from-box and not demands any extra features development.

The collection provided with the GridCollection component that.
The component implements collection of uniform features that enough to fulfil any standard task:

Compatible with Unity's scroll view
Draws only elements on the view's scope
Supports both elements starching and fixed sizes
Implements navigation with Input axes.
Highlights selected element
Compatible with Virtual UI Hub features.

Explore API: Doloro.UIEngine2.Modules.ElementsCollection.GridCollection

Data connector

To simplify loading data to the GUI the core implements AGUIElementsCollectionDataConnector component that encapsulates bridge between data and Content Inspectors.
Usage of component allows to operate AGUIElementsCollection as IList of operating data type.

To encapsulate data loading to the GUI the component requires you to select GUI element instance that implements IContentInspector interface for an operating type. In such way the controller will instantiate the element from prefab during Add or Insert call automatically.

Explore API: Doloro.UIEngine2.Modules.ElementsCollection.AGUIElementsCollectionDataConnector

Development

Implementation of a custom data connector is very easy. In case you do not demand any extra features all you need to do is create a new class derived from the AGUIElementsCollectionDataConnector defining the operating type and expected GUI element type that supports operating type as content.

using Doloro.UIEngine2.Modules.ElementsCollection;
 
public class CustomDataConnector :
    AGUIElementsCollectionDataConnector
    <
        YOUR_DATA_TYPE,
        YOUR_INSPECTOR_TYPE
    >
{
    // Add extra features here.
}

Member	Requirements	Description
`YOUR_DATA_TYPE`	`class`	Data type that will be reflected at GUI with the collection elements.
`YOUR_INSPECTOR_TYPE`	`AGUIElement` `IContentInspector<SourceType>`	Type of expecting GUI element content inspector that will receive the data type member as `content`.

Virtual hub compatibility

The collection module provides you with collection of suitable components that allows to embed collection into virtual hierarchy created with the Virtual UI Hub module features.

Event Relay

The package supplies you with GUICollectionHubEventRelay component derived from the regular UIHubEventRelay class that extends it with child element selection event sharing feature.

In case the onSelected property is true, the component shares AGUIElement from collection children as soon as a new one has been selected.

Explore API: Doloro.UIEngine2.Modules.VirtualHub.Extensions.ElementsCollection.GUICollectionHubEventRelay

Listener

As pair to Collection's Event Relay the package provides you with such support. The component extends regular UIHubListener provided with the Virtual UI Hub module.

The module allows to catch events shared with the relay in parental UI hub scope marked with the OnSelected key. According with this the component implements API to defined handler for selection events in encapsulated way.

Note that the handler receives AGUIElement as first argument of the handler. Shared element is the one that has been selected in collection.

Explore API: Doloro.UIEngine2.Modules.VirtualHub.Extensions.ElementsCollection.GUICollectionUIHubListener

Content Inspector listener

The package supplies you with an abstract class AContentHolderUIHubListener compatible with the Content Inspectors features. The component derived from the regular GUICollectionUIHubListener.
Usage of the class allows to encapsulate content update at inspector according with selection of compatible object at the scope of parental Virtual UI Hub.

To configure an inspector with the listener you have to create a new class derived from the AContentHolderUIHubListener with declared type of compatible inspector GUI element and operating content type.

using Doloro.UIEngine2.Modules.VirtualHub;
using Doloro.UIEngine2.Modules.VirtualHub.Extensions.ElementsCollection;
using UnityEngine;
 
// Force inspector component over the same object.
[RequireComponent(typeof(CONTENT_INSPECTOR_TYPE))]
public class CustomInspectorUIHubListener :
    AContentHolderUIHubListener<
        CONTENT_INSPECTOR_TYPE, // Type of compatible inspector.
        CONTENT_TYPE>                       // Type of inspector operating content
{
    // Implement custom features here.
}

Explore API: Doloro.UIEngine2.Modules.VirtualHub.Extensions.ElementsCollection.AContentHolderUIHubListener{GUIElementType, ContentType}

How to

Create standard grid collection

Layout

The package provides you with pre-configured collection layout that can be used as example of source for your custom solutions. All you need to do is move it to your UI. In case you are planning to change it we are strongly recommend you to create a prefab variant from it.

The template prefabs can be found by the following path:
Doloro-GDK \ Doloro-UI-2 \ Resources \ Templates \ Elements Collection

Prefab	Purpose
Horizontal Grid collection	Collection with horizontal order of content elements.
Vertical Grid collection	Collection with vertical order of content elements.
Selection	GUI element using as a selection border with pre-configured selection.

Cells stretching

GridCollection supports line stretching of elements in case you need to created not a cell layout but, locate a single element in line.
To stretch a cell by some axes set it's related size to 0. Undefined size means full layout.

Main API

The pre-configured collections are using GridCollection components to empower the collection. According with this you may use entire API to manage its features.

If we are talking about more abstract concept of collections management, you have to understand that the AGUIElementsCollection implements IList<AGUIElement>, so you may work with elements directly using a regular interface as with AGUIElement instances.

In case you want to work with collection's content avoiding GUI element representation you have to implement a custom AGUIElementsCollectionDataConnector. More about here: Development. In that case you may access elements by its value content reference instead addressing the representation.

Table of Contents