Back

CreateListSimple

Hello World
Content:
- Methods

Creates a simple list that has an optional badge and icon with no body text.

lss = MUI.CreateListSimple( list, width, height, options ) → app object

Example - Basic

cfg.Light
cfg.MUI

function OnStart()
{
    color = MUI.colors.teal
    app.InitializeUIKit(color.teal)

    lay = MUI.CreateLayout("Linear", "FillXY,VCenter")

        var list = [
            {title: "Downloads"},
            {title: "Folders"},
            {title: "Images"},
            {title: "Videos"}
        ]
        lst = MUI.CreateListSimple(list, 1)
        lst.SetOnTouch()
        lay.AddChild(lst)

    app.AddLayout(lay)
}

function OnTouch(title, index, icon, badge)
{
    app.ShowPopup(title+" : "+index)
}
Copy All       Run      

Example - With Icon & Color

cfg.Light
cfg.MUI

function OnStart()
{
    color = MUI.colors.teal
    app.InitializeUIKit(color.teal)

    lay = MUI.CreateLayout("Linear", "FillXY,VCenter")

        var list = [
            {title: "Downloads", icon: "play_for_work", color:"#673ab7"},
            {title: "Folders", icon: "folder", color:"#009688"},
            {title: "Images", icon: "photo", color:"#1e88e5"},
            {title: "Videos", icon: "subscriptions", color:"#e53935"}
        ]
        lst = MUI.CreateListSimple(list, 1)
        lay.AddChild(lst)

    app.AddLayout(lay)
}
Copy All       Run      

Example - With Icon, Color & Badge

cfg.Light
cfg.MUI

function OnStart()
{
    color = MUI.colors.teal
    app.InitializeUIKit(color.teal)

    lay = MUI.CreateLayout("Linear", "FillXY,VCenter")

        var list = [
            {title: "Downloads", icon: "play_for_work", badge: 9, color:"#673ab7"},
            {title: "Folders", icon: "folder", badge: 11, color:"#009688"},
            {title: "Images", icon: "photo", badge: 2, color:"#1e88e5"},
            {title: "Videos", icon: "subscriptions", badge: 24, color:"#e53935"}
        ]
        lst = MUI.CreateListSimple(list, 1)
        lay.AddChild(lst)

    app.AddLayout(lay)
}
Copy All       Run      

Example - Badge Color

cfg.Light
cfg.MUI

function OnStart()
{
    MUI.theme.badgeColor = "#ec407a"
    app.InitializeUIKit()

    lay = MUI.CreateLayout("Linear", "FillXY,VCenter")

        var list = [
            {title: "Downloads", icon: "play_for_work", badge: 9, color:"#673ab7"},
            {title: "Folders", icon: "folder", badge: 11, color:"#009688"},
            {title: "Images", icon: "photo", badge: 2, color:"#1e88e5"},
            {title: "Videos", icon: "subscriptions", badge: 24, color:"#e53935"}
        ]
        lst = MUI.CreateListSimple(list, 1)
        lay.AddChild(lst)

    app.AddLayout(lay)
}
Copy All       Run      

Example - Dark With Divider

cfg.Dark
cfg.MUI

function OnStart()
{
    color = MUI.colors.teal
    app.InitializeUIKit(color.teal)

    lay = MUI.CreateLayout("Linear", "FillXY,VCenter")

        var list = [
            {title: "Downloads", icon: "play_for_work", badge: 9, color:"#673ab7"},
            {title: "Folders", icon: "folder", badge: 11, color:"#009688"},
            {title: "Images", icon: "photo", badge: 2, color:"#1e88e5"},
            {title: "Videos", icon: "subscriptions", badge: 24, color:"#e53935"}
        ]
        lst = MUI.CreateListSimple(list, 1, null, "Divider")
        lay.AddChild(lst)

    app.AddLayout(lay)
}
Copy All       Run      

Methods

The following methods are available on the ListSimple object:

Focus()
GetAbsHeight() → Number: integer
GetAbsWidth() → Number: integer
GetHeight( options ) → Number
GetLeft( options ) → Number
GetList() → Object
GetParent() → app object
GetPosition( options ) → Object: { left, top, right, bottom }
GetTop( options ) → Number
GetVisibility() → String: “Show” or “Hide” or “Gone”
GetWidth( options ) → Number
Gone()
Hide()
IsEnabled() → Boolean
IsOverlap( obj, depth ) → Boolean
IsVisible() → Boolean
Show()
Boolean
app object
Number
Number: fraction (0..1)
Number: integer
Number: milliseconds
String: “Divider”
String: “px”
String: “screen”, “px”
String: “px” or “sp” or “dip” or “mm” or “pt”
String: “New title text”
String: “Show” or “Hide” or “Gone”
String: “Linear.None” or “Quadratic.In/Out” or “Cubic.In/Out” or “Quartic.In/Out” or “Quintic.In/Out” or “Sinusoidal.In/Out” or “Exponential.In/Out” or “Circular.In/Out” or “Elastic.In/Out” or “Back.In/Out” or “Bounce.In/Out”
Object: A single element of the list
Object: ListSimple list
Object: { x, y, w, w, sw, sh, rot }
List: {title|icon|color|badge}
function( title, index, icon, badge )
function()
lss.AppendItem
Appends an item at the bottom of the list
lss.ClearFocus
Removes the focus of the control so that the user no longer has immediate access to it.
lss.Focus
Set the focus to the control so that the user can interact with it immediately.
lss.GetAbsHeight
Get the absolute height of the control in pixels.
lss.GetAbsWidth
Get the absolute width of the control in pixels.
lss.GetHeight
Get the height of the control as screen height relative float or in pixels with the px option.
lss.GetLeft
Get the distance from the control to the left parent border as width relative float or in pixels with the px option.
lss.GetList
Returns the current list object
lss.GetParent
Returns the parent control object where the object was added to - commonly a layout.
lss.GetPosition
Returns data about the position and size of the control.
If the screen option is given the position on the screen will be returned. Otherwise relative to the parent control.
The px options turns the relative values into pixels.
lss.GetTop
Get the distance from the control to the upper parent border as height relative float or in pixels with the px option.
lss.GetVisibility
Returns the current visibility state of the control. The Values are:
Show: visible
Hide: invisible but still consuming space
Gone: invisible and not consuming space
lss.GetWidth
Get the width of the control as screen width relative float or in pixels with the px option.
lss.Gone
Hides the control without consuming any more layout space as if it were never there.
lss.Hide
Hide the control but keep the layout space free.
lss.IsEnabled
Returns whether the control is currently useable by the user.
lss.IsOverlap
Returns whether the control overlaps with another by a given distance.
lss.IsVisible
Returns whether the control is currently visible to the user, ignoring overlaying controls.
lss.RemoveItem
Removes an item in the list.
lss.SetBadge
Set the badge of the corresponding item
lss.SetEnabled
En/Disable the control physically and visually so that the user can/can not access the control. Events like OnTouch will still be fired.
lss.SetList
Sets a new list
lss.SetMargins
Define a distance to other controls on each side of the control.
lss.SetOnTouch
Calls a function when an item is click.
lss.SetPosition
Defines the position and size for the control if the parent is an absolute layout.
lss.SetTitleText
Sets a new title to a corresponding item
lss.SetVisibility
Change the visibility of the control to one of the available modes:
Show: visible
Hide: invisible but still consuming space
Gone: invisible and not consuming space
lss.Show
Set the visibility of the control to “Show”.
lss.Tween
Performs an animation on the control.
The target object is for the position, size and rotation that the control has at the end of the animation.

The type specifies the behavior and the speed of the animation. Separated by a dot, you must also specify whether you want to apply this behavior to the beginning (In), end (Out), or to both (InOut) times of the animation.

With the amount of repeats you can control how many times you want to play the animation.

If you have jojo activated, the animation will alternate between forward and backward playback, so that if the repetition value is odd, the control will be at the start position again at the end of the animation.

Finally the callback function will be called after the animation has finished. Well, it's about time!