Olympe SDK

Class: ForEachLimited

olympe.ui.std. ForEachLimited

A UI component that displays the elements from a list in a scrollable area. The list is a olympe.df.SortedEnumerable instance and can hold any type, therefore a olympe.ui.std.ForEachLimited.Renderer has to be provided to create the inner view for each element. Such a renderer has to take into account the fact we are dealing with data flows.

Example:

const lst = new olympe.df.List(olympe.df.OString);
for (let i = 0; i < 100 ; i++) {
       lst.set(i.toString(),olympe.df.oString(i.toString()), i);
   }
const renderer = (elt, rank, selected) => {
       const lbl = new olympe.ui.std.Label(new olympe.df.Vector2(100, 30))
           .setText(elt)
           .setTextHorizontalAlign(olympe.ui.common.HorizontalAlign.CENTER)
           .setTextVerticalAlign(olympe.ui.common.VerticalAlign.MIDDLE)
           .setBorder(1, olympe.df.Color.black());
       lbl.setBackgroundColor(
           olympe.df.transformFlows(
               [selected],
               _selected => _selected.valueOf() ? olympe.df.Color.lightGray() : olympe.df.Color.transparent(),
               olympe.df.Color
           )
       );
       lbl.setTextColor(
           olympe.df.transformFlows(
               [selected],
               _selected => _selected.valueOf() ? olympe.df.Color.red() : olympe.df.Color.black(),
               olympe.df.Color
           )
       );

       return lbl;
   };
const size = new olympe.df.Vector2(300, 300);
const player = new olympe.ui.std.ForEachLimited(size, lst, olympe.df.OString, renderer, 0, true)
    .setBorder(2, olympe.df.Color.gray())
    .setBackgroundColor(olympe.df.Color.white())
    .setPosition(new olympe.df.Vector2(200, 200));

Will display a scrolling list looking like this after the user selected element number 19:

ForEachLimited

new ForEachLimited(dimension, data, dataType, renderer [, linePadding] [, selectable] [, multipleSelection] [, horizontal])

Creates an instance of ForEachLimited.

Parameters:
Name Type Argument Default Description
dimension olympe.df.Proxy.<olympe.df.Vector2> | olympe.df.Vector2

The dimension (w,h) of this element.
data olympe.df.Proxy.<olympe.df.SortedEnumerable> | olympe.df.SortedEnumerable

The content list.
dataType olympe.df.Proxy.<function(new:T, ...?)> | function

The type of the content elements.
renderer olympe.ui.std.ForEachLimited.Renderer

The renderer for the elements.
linePadding olympe.df.Proxy.<olympe.df.ONumber> | olympe.df.ONumber | number <optional>
 0

The padding (space), in pixels between lines.
selectable olympe.df.POBoolean | boolean <optional>
 false

true to make the elements selectable.
multipleSelection olympe.df.POBoolean | boolean <optional>
 false

true to allow multiple selections.
horizontal boolean <optional>
 false

true to scroll the list horizontally instead of vertically.

Methods

getContentDimension()

Gets the dimension of the content.

Returns:

The content dimension.

Type
olympe.df.PVector2

getSelectedElements()

Gets the selected elements.

Returns:

A map containing the selected elements.

Type
olympe.df.Map.<T>

setAsSelected(indexes)

Marks a set of elements of this ForEachLimited as 'selected' as if the user had done it.

Parameters:
Name Type Description
indexes olympe.df.Enumerable.<string> | Array.<string> | string

The indexes of the elements to select.
Returns:

This ForEachLimited.

Type
olympe.ui.std.ForEachLimited

setKeepSelection(keepSelection)

Ensures that at least an element is always selectable, if true.

Parameters:
Name Type Description
keepSelection boolean

Type Definitions

Renderer(element, rank, selected)

Renderer for element of a olympe.ui.std.ForEachLimited. It has to return a UI component based on the 3 data flows passed as arguments:

  • The element's value.
  • Its rank.
  • Whether it is selected or not.
Parameters:
Name Type Description
element *

The element's value.
rank olympe.df.Proxy.<number> | number

The element's rank.
selected olympe.df.Proxy.<olympe.df.OBoolean> | olympe.df.OBoolean

true if that element is selected.
Returns:

The created UI component.

Type
olympe.ui.std.DockableElement