Back

CreateAppBarModern

Hello World

Content:
- Methods

A modern appbar with a search input, leading icon and trailing icon.

abm = MUI.CreateAppBarModern( hint, controlIcon, options, color ) → Object

Example - Basic

cfg.Light
cfg.MUI

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

    lay = MUI.CreateLayout("Absolute", "FillXY")

        apb = MUI.CreateAppBarModern("Search for games", "more_vert")
        var apbHeight = apb.GetHeight()

        scr = app.CreateScroller(1, 1, "NoScrollBar")

            pageLay = MUI.CreateLayout("Linear", "VCenter")
            pageLay.SetSize(1, 1.2)
            pageLay.SetPadding(0, 0, apbHeight, 0)
                var txt = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ..."
                pageLay.AddChild( MUI.CreateTextParagraph(txt) )
            scr.AddChild(pageLay)

        lay.AddChild(scr)
        lay.AddChild(apb)

    app.AddLayout(lay)
}

Copy All Run

Example - Sample page

cfg.Light
cfg.MUI

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

    lay = MUI.CreateLayout("Absolute", "FillXY")

        apb = MUI.CreateAppBarModern("Search for games", "more_vert", "Round")
        apb.SetOnMenuTouch(OnMenuTouch)
        apb.SetOnControlTouch(OnCtrlTouch)

        var apbHeight = apb.GetHeight()

        scr = app.CreateScroller(1, 1, "NoScrollBar")

            pageLay = MUI.CreateLayout("Linear", "VCenter")
            pageLay.SetSize(1, 1.2)
            pageLay.SetPadding(0, 0, apbHeight, 0)
                var txt = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ..."
                pageLay.AddChild( MUI.CreateTextParagraph(txt) )
            scr.AddChild(pageLay)

        lay.AddChild(scr)
        lay.AddChild(apb)

    app.AddLayout(lay)
}

function OnMenuTouch()
{
    lay.Animate("SlideToBottom")
}

function OnCtrlTouch()
{
    app.ShowPopup("You click for more options.")
}

Copy All Run

Example - Dark mode

cfg.Dark
cfg.MUI

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

    lay = MUI.CreateLayout("Absolute", "FillXY")

        apb = MUI.CreateAppBarModern("My Title", "menu", "search,more_vert")
        var apbHeight = apb.GetHeight()

        scr = app.CreateScroller(1, 1, "NoScrollBar")

            pageLay = MUI.CreateLayout("Linear", "VCenter")
            pageLay.SetSize(1, 1.2)
            pageLay.SetPadding(0, 0, apbHeight, 0)
                var txt = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ..."
                pageLay.AddChild( MUI.CreateTextParagraph(txt) )
            scr.AddChild(pageLay)

        lay.AddChild(scr)
        lay.AddChild(apb)

    app.AddLayout(lay)
}

Copy All Run

Methods

The following methods are available on the AppBarModern object:

ClearFocus()

ClearHistory()

Focus()

GetCursorLine()

GetCursorPos()

GetHeight( options ) → Number

GetSelectedText()

GetSelectionEnd()

GetSelectionStart()

GetText() → String

InsertText( text, start )

Redo()

ReplaceText( text, start, end )

SetCursorPos( position )

SetOnChange( callback )

SetOnControlTouch( callback )

SetOnEnter( callback )

SetOnFocus( callback )

SetOnMenuTouch( callback )

SetPosition( left, top, width, height, options )

SetText( text )

Undo()

Number

String

Number: integer

String:
hexadecimal: “#rrggbb”, “#aarrggbb”
colourName: “red”, “green”, ...

String: “Hint text for the search input”

String: “Material font for the control icon”

String: “Can be Round” or “Rectangle”

String: “px”

function()

abm.ClearFocus
Removes the focus of the control so that the user no longer has immediate access to it.

abm.ClearHistory
Clear history

abm.Focus
Set the focus to the control so that the user can interact with it immediately.

abm.GetCursorLine
Get cursor line

abm.GetCursorPos
Get cursor pos

abm.GetHeight
Get the height of the control as screen height relative float or in pixels with the px option.

abm.GetSelectedText
Get selected text

abm.GetSelectionEnd
Get selection end

abm.GetSelectionStart
Get selection start

abm.GetText
Returns the current displayed text of the control.

abm.InsertText
Inserts a string at a given position.

abm.Redo
Redo an undone action.

abm.ReplaceText
Replaces a given range in the text with some string.

abm.SetCursorPos
Change the curernt cursor position.

abm.SetOnChange
Called when the containing data has been changed by the user.

abm.SetOnControlTouch
Calls a function when right control is touch

abm.SetOnEnter
Define a callback function which is called when the user pressed 'Done' or 'Enter' on the keyboard (line can still be inserted via Shift+Enter)

abm.SetOnFocus
Define a callback function which is called when the user focuses the control.

abm.SetOnMenuTouch
Call a function when the menu icon is touch

abm.SetPosition
Defines the position and size for the control if the parent is an absolute layout.

abm.SetText
Change the currently displayed text in the control.

abm.Undo
Undo an action.