Back

CreateListModern

Hello World
Content:
- Methods

A modern implementation of list using the available controls of DroidScript.

lsm = MUI.CreateListModern( list, width, height, options ) → Object

Example - No-options

cfg.Light
cfg.MUI

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

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

        var list = [
            {title: "Sample Title", body:"The quick brown fox jumps..."},
            {title: "Sample Title", body:"The quick brown fox jumps...", image: "/Sys/Img/Droid1.png"},
            {title: "Sample Title", body:"The quick brown fox jumps...", image: "/Sys/Img/Droid1.png", rightIcon: "more_vert"}
        ]

        lsm = MUI.CreateListModern(list)
        lsm.SetOnTouch(OnTouch)
        lay.AddChild(lsm)

    app.AddLayout(lay)
}

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

To make the list selectable, add the Selectable option.

Example - Selectable

cfg.Dark
cfg.MUI

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

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

        var list = [
            {title: "Sample Title", body:"The quick brown fox jumps..."},
            {title: "Sample Title", body:"The quick brown fox jumps...", image: "/Sys/Img/Droid1.png"},
            {title: "Sample Title", body:"The quick brown fox jumps...", image: "/Sys/Img/Droid1.png", rightIcon: "more_vert"}
        ]

        lsm = MUI.CreateListModern(list, 0.96, null, "Selectable")
        lsm.SetOnTouch(ListOnTouch)
        lay.AddChild(lsm)

        btn = MUI.CreateButtonRound("GET SELECTED ITEMS", 0.6)
        btn.SetMargins(0, 0.075, 0, 0)
        lay.AddChild(btn)
        btn.SetOnTouch(GetSelectedItems)

    app.AddLayout(lay)

    app.ShowPopup("Click the icon/avatar to select")
}

function ListOnTouch(title, body, index)
{
    app.ShowPopup("You choose "+title)
}

function GetSelectedItems()
{
    var items = lsm.GetSelectedItems()
    for(var i = 0; i<items.length; i++)
    {
        var item = lsm.GetItem(items[i])
        app.Alert(JSON.stringify(item))
    }
}
Copy All       Run      

Please note that CreateListInitialIcon, CreateListMaterialIcon and CreateListWithAvatar are now deprecated. But still you can achieve these designs by passing appropriate comma-separated options to the options param of CreateListModern method

Example - CreateListInitialIcon

cfg.Dark
cfg.MUI

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

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

        var list = [
            {title: "Title 1", body:"The quick brown fox jumps...", rightNote: "Aug 5"},
            {title: "Title 2", body:"The quick brown fox jumps...", rightNote: "Aug 6"},
            {title: "Title 3", body:"The quick brown fox jumps...", rightNote: "Aug 7"}
        ]

        lsm = MUI.CreateListModern(list, 1, null, "Initial,RightNote")
        lay.AddChild(lsm)

    app.AddLayout(lay)
}
Copy All       Run      

Example - CreateListMaterialIcon

cfg.Dark
cfg.MUI

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

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

        var list = [
            {title: "Folder", body:"The quick brown fox jumps...", icon: "folder", rightIcon: "more_vert"},
            {title: "Favorites", body:"The quick brown fox jumps...", icon: "favorite", rightIcon: "more_vert"},
            {title: "Music", body:"The quick brown fox jumps...", icon: "music_note", rightIcon: "more_vert"}
        ]

        lsm = MUI.CreateListModern(list, 1, null, "Material,RightNote,Selectable")
        lay.AddChild(lsm)

        btn = MUI.CreateButtonRound("GET SELECTED ITEMS", 0.6)
        btn.SetMargins(0, 0.075, 0, 0)
        lay.AddChild(btn)
        btn.SetOnTouch(GetSelectedItems)

    app.AddLayout(lay)
    app.ShowPopup("Click the icon/avatar to select")
}

function GetSelectedItems()
{
    var items = lsm.GetSelectedItems()
    for(var i = 0; i<items.length; i++)
    {
        var item = lsm.GetItem(items[i])
        app.Alert(JSON.stringify(item))
    }
}
Copy All       Run      

Example - CreateListWithAvatar

cfg.Light
cfg.MUI

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

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

        var list = [
            {title: "Someone", body:"The quick brown fox jumps...", image: "/Sys/Img/Droid1.png", rightIcon: "more_vert"},
            {title: "Anybody", body:"The quick brown fox jumps...", image: "/Sys/Img/Droid1.png", rightIcon: "more_vert"},
            {title: "Everyone", body:"The quick brown fox jumps...", image: "/Sys/Img/Droid1.png", rightIcon: "more_vert"}
        ]

        lsm = MUI.CreateListModern(list, 1, null, "Avatar,RightNote,Selectable")
        lay.AddChild(lsm)

        btn = MUI.CreateButtonRound("GET SELECTED ITEMS", 0.6)
        btn.SetMargins(0, 0.075, 0, 0)
        lay.AddChild(btn)
        btn.SetOnTouch(GetSelectedItems)

    app.AddLayout(lay)
    app.ShowPopup("Click the icon/avatar to select")
}

function GetSelectedItems()
{
    var items = lsm.GetSelectedItems()
    for(var i = 0; i<items.length; i++)
    {
        var item = lsm.GetItem(items[i])
        app.Alert(JSON.stringify(item))
    }
}
Copy All       Run      

ListModern has lots of very useful function you can use to manipulate your list. Here's a basic implementation on Removing items from Selectable list.

Example - RemoveItems

cfg.Dark
cfg.MUI

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

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

        var list = [
            {title: "Folder", body:"The quick brown fox jumps...", icon: "folder", rightIcon: "more_vert"},
            {title: "Downloads", body:"The quick brown fox jumps...", icon: "play_for_work", rightIcon: "more_vert"},
            {title: "Music", body:"The quick brown fox jumps...", icon: "music_note", rightIcon: "more_vert"},
            {title: "Account", body:"The quick brown fox jumps...", icon: "person", rightIcon: "more_vert"},
            {title: "Password", body:"The quick brown fox jumps...", icon: "lock", rightIcon: "more_vert"}
        ]

        lsm = MUI.CreateListModern(list, 1, null, "Material,RightNote,Selectable")
        lsm.SetOnSelect(OnSelect)
        lay.AddChild(lsm)

        btn = MUI.CreateButtonRaised("REMOVE SELECTED", 0.75)
        btn.SetMargins(0, 0.075, 0, 0)
        btn.SetOnTouch(RemoveSelected)
        btn.Hide()
        lay.AddChild(btn)

    app.AddLayout(lay)
    app.ShowPopup("Click the icon/avatar to select")
}

function OnSelect()
{
    var items = lsm.GetSelectedItems()
    btn.SetText(items.length+" REMOVE SELECTED")
    if(items.length) btn.Show()
    else btn.Hide()
}

function RemoveSelected()
{
    var items = lsm.GetSelectedItems()
    lsm.RemoveItems(items)
}
Copy All       Run      

Example - With-Color No Options

cfg.Light
cfg.MUI

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

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

        var list = [
            {title: "Sample Title", body:"The quick brown fox jumps...", rightIcon: "more_vert", color: "#673ab7"},
            {title: "Sample Title", body:"The quick brown fox jumps...", rightIcon: "more_vert", color: "#673ab7"},
            {title: "Sample Title", body:"The quick brown fox jumps...", rightIcon: "more_vert", color: "#673ab7"}
        ]

        lsm = MUI.CreateListModern(list, 0.96)
        lsm.SetOnTouch(OnTouch)
        lay.AddChild(lsm)

    app.AddLayout(lay)
}

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

Methods

The following methods are available on the ListModern object:

Focus()
GetAbsHeight() → Number: integer
GetAbsWidth() → Number: integer
GetHeight( options ) → Number
GetItem( index ) → Object
GetLeft( options ) → Number
GetList() → Object
GetParent() → app object
GetPosition( options ) → Object: { left, top, right, bottom }
GetSelectedItems() → List: List of indexes for slected items
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: “Initial” or “Material” or “Avatar”, “ RightIcon” or “RightNote”, “ Selectable”
String: “px”
String: “screen”, “px”
String: “New body text”
String: path to file ( “/absolute/...” or “relative/...” ): “Path to the new image”
String: “px” or “sp” or “dip” or “mm” or “pt”
String: “New note text”
String: “New right icon”
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: A single element of the list object
Object: List Modern list
Object: { x, y, w, w, sw, sh, rot }
List: An array of object elements. See list example
List: An array of indexes.
function( index )
function( index, isSelected )
function( title, body, index )
function()
lsm.AppendItem
Appends an item at the bottom of the list
lsm.ClearFocus
Removes the focus of the control so that the user no longer has immediate access to it.
lsm.Focus
Set the focus to the control so that the user can interact with it immediately.
lsm.GetAbsHeight
Get the absolute height of the control in pixels.
lsm.GetAbsWidth
Get the absolute width of the control in pixels.
lsm.GetHeight
Get the height of the control as screen height relative float or in pixels with the px option.
lsm.GetItem
Returns the respective item in the list
lsm.GetLeft
Get the distance from the control to the left parent border as width relative float or in pixels with the px option.
lsm.GetList
Returns the current list object
lsm.GetParent
Returns the parent control object where the object was added to - commonly a layout.
lsm.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.
lsm.GetSelectedItems
Returns the selected items in the list
lsm.GetTop
Get the distance from the control to the upper parent border as height relative float or in pixels with the px option.
lsm.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
lsm.GetWidth
Get the width of the control as screen width relative float or in pixels with the px option.
lsm.Gone
Hides the control without consuming any more layout space as if it were never there.
lsm.Hide
Hide the control but keep the layout space free.
lsm.Highlight
Highlight a respective item in the list
lsm.IsEnabled
Returns whether the control is currently useable by the user.
lsm.IsOverlap
Returns whether the control overlaps with another by a given distance.
lsm.IsVisible
Returns whether the control is currently visible to the user, ignoring overlaying controls.
lsm.PopItem
Removes an item at the bottom of the list
lsm.RemoveHighlight
Removes a highlight to a respective item in the list
lsm.RemoveItem
Removes a single item in the list.
lsm.RemoveItems
Removes multiple items in the list.
lsm.SetAvatarOnTouch
Calls a function when an icon or avatar is click. The same as SetIconOnTouch.
lsm.SetBodyText
Set a new body to a respective index
lsm.SetControlOnTouch
Calls a function when a right icon is click
lsm.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.
lsm.SetImage
Set a new image to a respective item in the list
lsm.SetItem
Set item
lsm.SetList
Sets a new list
lsm.SetMargins
Define a distance to other controls on each side of the control.
lsm.SetNoteText
Set a new note text for a respective item on the list
lsm.SetOnSelect
Calls a function when an item in the list is select. List must be selectable.
lsm.SetOnTouch
Calls a function when an item is click.
lsm.SetPosition
Defines the position and size for the control if the parent is an absolute layout.
lsm.SetRightIcon
Set a new material icon to the right icon
lsm.SetSelectable
Enable or disable selectable option.
lsm.SetTitleText
Set a new title to a respective index
lsm.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
lsm.ShiftItem
Removes an item at the beginning of the list
lsm.Show
Set the visibility of the control to “Show”.
lsm.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!