Back

addAppBar

JS Py
Hello World
Content:
- Examples
- Properties
- Methods

Adds an appbar to your app.

apb = ui.addAppBar( parent, title, options?, width?, height? ) → ui object: AppBar

Here are the methods available for AppBar Component.

Examples

Example - Basic AppBar

class Main extends App
{
    onStart()
    {
        // Creates a fullscreen linear layout with objects align Top and Center
        this.main = ui.addLayout("main", "Linear", "Top,Center", 1, 1)

        // Adds an appbar to the layout
        this.apb = ui.addAppBar(this.main, "My App", "", 1)

        // Adds a button control with margins 1/10 of the parent width.
        this.btn = ui.addButton(this.main, "Button")
        this.btn.margins = 0.1
    }
}
from hybrid import ui

def OnStart():
    # Creates a fullscreen linear layout with objects align Top and Center
    main = ui.addLayout("main", "Linear", "Top,Center", 1, 1)

    # Adds an appbar to the layout
    apb = ui.addAppBar(main, "My App", "", 1)

    # Adds a button control with margins 1/10 of the parent width.
    btn = ui.addButton(main, "Button")
    btn.margins = 0.1
Copy All       Run      

Example - Fixed appbar with drawer

class Main extends App
{
    onStart()
    {
        // Creates a fullscreen linear layout with objects vertically centered
        this.main = ui.addLayout("main", "Linear", "VCenter", 1, 1)

        // Add an appbar to the layout
        this.apb = ui.addAppBar(this.main, "My app", "Menu,Fixed", 1)

        // Add a callback handler to show the drawer onMenu event
        this.apb.setOnMenu( this.showDrawer )

        // Add a drawer layout
        this.drawLay = ui.addLayout(null, "Linear", "Top")

        // Add a drawer to the app and pass the drawer layout
        this.drawer = ui.addDrawer(this.drawLay, "left", 0.7)

        // Add a list to the drawer layout. See `List` component for customization.
        let lst = [
            ["folder", "Folders"],
            ["music_note", "Audios"],
            ["photo", "Photos"]
        ]
        this.lstMenu = ui.addList(this.drawLay, lst, "Icon", 1 )
        this.lstMenu.label = "Main navigation"

        // Add a callback handler to the list onTouch event
        this.lstMenu.setOnTouch( this.onTouch )
    }

    showDrawer()
    {
        this.drawer.show()
    }

    onTouch( title )
    {
        // Set the appbar text with the selected list item
        this.apb.text = title

        // Close the drawer
        this.drawer.hide()
    }
}
from hybrid import ui

def OnStart():
    global drawer, apb
    # Creates a fullscreen linear layout with objects vertically centered
    main = ui.addLayout("main", "Linear", "VCenter", 1, 1)

    # Add an appbar to the layout
    apb = ui.addAppBar(main, "My app", "Menu,Fixed", 1)

    # Add a callback handler to show the drawer onMenu event
    apb.setOnMenu( showDrawer )

    # Add a drawer layout
    drawLay = ui.addLayout(None, "Linear", "Top")

    # Add a drawer to the app and pass the drawer layout
    drawer = ui.addDrawer(drawLay, "left")

    # Add a list to the drawer layout. See `List` component for customization.
    lst = [
        ["folder", "Folders"],
        ["music_note", "Audios"],
        ["photo", "Photos"]
    ]
    lstMenu = ui.addList(drawLay, lst, "Icon", 1 )
    lstMenu.label = "Main navigation"

    # Add a callback handler to the list onTouch event
    lstMenu.setOnTouch( onTouch )

def showDrawer():
    drawer.show()

def onTouch(title, body, icon, index, event):
    # Set the appbar text with the selected list item
    apb.text = title

    # Close the drawer
    drawer.hide()
Copy All       Run      

Example - Appbar with actions

class Main extends App
{
    onStart()
    {
        // Creates a fullscreen layout with objects vertically centered
        this.main = ui.addLayout("main", "Linear", "Top,Center", 1, 1)

        this.apb = ui.addAppBar(this.main, "My App", "Menu,Primary")
        this.apb.setOnMenu( this.showDrawer )

        // Add an icon buttons to the appbar with onTouch callbacks
        this.btn1 = ui.addButton(this.apb.layout, "mail", "icon")
        this.btn1.setOnTouch(() => { ui.showPopup("Messages", "Bottom") })

        this.btn2 = ui.addButton(this.apb.layout, "person", "icon")
        this.btn2.setOnTouch(() => { ui.showPopup("Account", "Bottom") })

        this.btn3 = ui.addButton(this.apb.layout, "more_vert", "icon")
        this.btn3.setOnTouch(() => { ui.showPopup("More options", "Bottom") })

        // Adds a drawer layout
        this.drawLay = ui.addLayout(null, "Linear", "Top")

        // Adds a drawer to the app and pass the drawer layout
        this.drawer = ui.addDrawer(this.drawLay, "left", 0.7)

        // Adds a list to the drawer layout. See `List` component for customization.
        let lst = [
            ["folder", "Folders"],
            ["music_note", "Audios"],
            ["photo", "Photos"]
        ]
        this.lstMenu = ui.addList(this.drawLay, lst, "Icon", 1 )
        this.lstMenu.label = "Main navigation"

        // Add a callback handler to the list onTouch event
        this.lstMenu.setOnTouch( this.onTouch )
    }

    showDrawer()
    {
        this.drawer.show()
    }

    onTouch( title )
    {
        // Set the appbar text with the selected list item
        this.apb.text = title

        // Close the drawer
        this.drawer.hide()
    }
}
from hybrid import ui

def OnStart():
    global drawer, apb
    # Creates a fullscreen layout with objects vertically centered
    main = ui.addLayout("main", "Linear", "Top,Center", 1, 1)

    apb = ui.addAppBar(main, "My App", "Menu,Primary")
    apb.setOnMenu( showDrawer )

    # Add an icon buttons to the appbar with onTouch callbacks
    btn1 = ui.addButton(apb.layout, "mail", "icon")
    btn1.setOnTouch(lambda event: ui.showPopup("Messages", "Bottom"))

    btn2 = ui.addButton(apb.layout, "person", "icon")
    btn2.setOnTouch(lambda event: ui.showPopup("Account", "Bottom"))

    btn3 = ui.addButton(apb.layout, "more_vert", "icon")
    btn3.setOnTouch(lambda event: ui.showPopup("More options", "Bottom"))

    # Adds a drawer layout
    drawLay = ui.addLayout(None, "Linear", "Top")

    # Adds a drawer to the app and pass the drawer layout
    drawer = ui.addDrawer(drawLay, "left")

    # Adds a list to the drawer layout. See `List` component for customization.
    lst = [
        ["folder", "Folders"],
        ["music_note", "Audios"],
        ["photo", "Photos"]
    ]
    lstMenu = ui.addList(drawLay, lst, "Icon", 1 )
    lstMenu.label = "Main navigation"

    # Add a callback handler to the list onTouch event
    lstMenu.setOnTouch( onTouch )

def showDrawer():
    drawer.show()

def onTouch(title, body, icon, index, event):
    # Set the appbar text with the selected list item
    apb.text = title

    # Close the drawer
    drawer.hide()
Copy All       Run      

Example - Appbar with search field

class Main extends App
{
onStart()
{
     // Creates a fullscreen layout with objects vertically centered.
     this.main = ui.addLayout("main", "Linear", "Top,FillXY")

     // Add an appbar to the main layout with menu icon
     this.apb = ui.addAppBar(this.main, "My app", "Default,Menu")

     // Add a callback handler when the menu icon is click
     this.apb.setOnMenu( this.onMenu )

     // Adds a textfield to the appbar
     this.tfd = ui.addTextField(this.apb.layout, "", "Search,Small", 0.9)
     this.tfd.placeholder = "Search"
     this.tfd.hide()

     // Add a search icon button to the appbar
     this.searchBtn = ui.addButton(this.apb.layout, "search", "icon")

     // Add a callback handler when the search button is click
     this.searchBtn.setOnTouch( this.showSearchField )
}

    onMenu()
    {
        // Close the textfield if it is shown
        if( this.show )
        {
            this.closeSearchField()
        }
    }

    showSearchField()
    {
        // Display textfield if not shown
        if( !this.show )
        {
            this.tfd.show()
            this.apb.text = ""
            this.apb.icon = "arrow_back"
            this.show = true;
        }
        else
        {
            ui.showPopup("Search for "+this.tfd.text)
        }
    }

    closeSearchField()
    {
        this.tfd.hide()
        this.apb.text = "My app"
        this.apb.icon = "menu"
        this.show = false
    }
}
from hybrid import ui

def OnStart():
    global tfd, searchBtn
    # Creates a fullscreen layout with objects vertically centered.
    main = ui.addLayout("main", "Linear", "Top", 1, 1)

    # Add an appbar to the main layout
    apb = ui.addAppBar(main, "My app", "Default")

    # Adds a textfield to the appbar
    tfd = ui.addTextField(apb.layout, "", "Search,Outlined,Small")
    tfd.placeholder = "Search"
    tfd.hide()

    # Add a search icon button to the appbar
    searchBtn = ui.addButton(apb.layout, "search", "icon")

    # Add a callback handler when the button is click
    searchBtn.setOnTouch( showSearchField )

def showSearchField(event):
    if searchBtn.text == "search":
        tfd.show()
        searchBtn.text = "close"
    else:
        tfd.hide()
        searchBtn.text = "search"
Copy All       Run      

Properties

The following properties are available on the AppBar object:

absHeight → Number
absLeft → Number
absTop → Number
absWidth → Number
backColor → String
backImage → String
border → Number
borderColor → String
borderStyle → String
color → String
cornerRadius → Number
disabled → Boolean
el → Object
elStyle → String
fontFile → String
height → Number
icon → String
isVisible → Boolean
layout → Object
left → Number
margins → List
menu → Boolean
opacity → Number
options → String
padding → List
parent → Object
position → Object
rotation → Number
text → String
textColor → String
textSize → Number
textVariant → String
top → Number
type → String
visibility → String
width → Number

Methods

The following methods are available on the AppBar object:

addLayout( lay )
animate( anim, duration )
bringForward( zIndex )
destroy()
getPosition( options ) → Object
gone()
hide()
sendBackward( zIndex )
setBorder( left?, top?, right?, bottom?, clr?, style? )
setCornerRadius( tl?, tr?, bl?, br?, mode='px' )
setMargins( left?, top?, right?, bottom?, mode? )
setOnContextMenu( callback )
setOnMenu( callback )
setOnTouch( callback )
setPadding( left?, top?, right?, bottom?, mode? )
setPosition( left, top, mode )
setScale( x, y )
setSize( width, height, mode )
show()
Number: Fraction of the parent width `[0-1]`
Number: Fraction of the parent height `[0-1]`
Number: The time in milliseconds.
Number: The z-index. A negative value behaves like `sendBackward` method.
Number: The z-index. A positve value behaves like `bringForward` method.
Number: Border-left thickness in pixels.
Number: Border-top thickness in pixels.
Number: Border-right thickness in pixels.
Number: Border-bottom thickness in pixels.
Number: Top-left corner radius.
Number: Top-right corner radius.
Number: Bottom-left corner radius.
Number: Bottom-right corner radius.
Number: Left margin. You can also pass string e.g. `12rem`
Number: Top margin. You can also pass string e.g. `12rem`
Number: Right margin. You can also pass string e.g. `12rem`
Number: Bottom margin. You can also pass string e.g. `12rem`
Number: Fraction of the component width.
Number: Fraction of the component height. [0-1]
Number: Fraction of the component width. [0-1]
Number: Fraction of the parent width. [0-1]
Number: Fraction of the parent height. [0-1]
Number: The x-scale of the component.Values less than `0` is smaller than the normal. While values greater than `1` is greater than the normal.
Number: The y-scale of the component. Values less than `1` is smaller than the normal. While vaues greater than `1` is greater than the normal.
String: “The title text of the appbar”
String: “A comma separated options.
Menu icon: `Menu`
Theme Color: `Primary`”, “ `Secondary`”, “ `Transparent`”, “ `Inherit`”, “ `Default`
Position: `Absolute`”, “ `Static`”, “ `Fixed`”, “ `Relative`”
String: “The type of animation. Here are the available values
`bounce`”, “ `flash`”, “ `pulse`”, “ `rubberBand`”, “ `shakeX`”, “ `shakeY`”, “ `headShake`”, “ `swing`”, “ `tada`”, “ `wobble`”, “ `jello`”, “ `heartBeat`”, “
Back Entrances: `backInDown`”, “ `backInLeft`”, “ `backInRight`”, “ `backInUp`
Back Exits: `backOutDown`”, “ `backOutLeft`”, “ `backOutRight`”, “ `backOutUp`
Bouncing Entrances: `bounceIn`”, “ `bounceInDown`”, “ `bounceInLeft`”, “ `bounceInRight`”, “ `bounceInUp`
Bouncing exits: `bounceOut`”, “ `bounceOutDown`”, “ `bounceOutLeft`”, “ `bounceOutRight`”, “ `bounceOutUp`
Fading entrances: `fadeIn`”, “ `fadeInDown`”, “ `fadeInDownBig`”, “ `fadeInLeft`”, “ `fadeInLeftBig`”, “ `fadeInRight`”, “ `fadeInRightBig`”, “ `fadeInUp`”, “ `fadeInUpBig`”, “ `fadeInTopLeft`”, “ `fadeInTopRight`”, “ `fadeInBottomLeft`”, “ `fadeInBottomRight`
Fading exits: `fadeOut`”, “ `fadeOutDown`”, “ `fadeOutDownBig`”, “ `fadeOutLeft`”, “ `fadeOutLeftBig`”, “ `fadeOutRight`”, “ `fadeOutRightBig`”, “ `fadeOutUp`”, “ `fadeOutUpBig`”, “ `fadeOutTopLeft`”, “ `fadeOutTopRight`”, “ `fadeOutBottomRight`”, “ `fadeOutBottomLeft`
Flippers: `flip`”, “ `flipInX`”, “ `flipInY`”, “ `flipOutX`”, “ `flipOutY`
Lightspeed: `lightSpeedInRight`”, “ `lightSpeedInLeft`”, “ `lightSpeedOutRight`”, “ `lightSpeedOutLeft`
Rotating Entrances: `rotateIn`”, “ `rotateInDownLeft`”, “ `rotateInDownRight`”, “ `rotateInUpLeft`”, “ `rotateInUpRight`
Rotating Exits: `rotateOut`”, “ `rotateOutDownLeft`”, “ `rotateOutDownRight`”, “ `rotateOutUpLeft`”, “ `rotateOutUpRight`
Specials: `hinge`”, “ `jackInTheBox`”, “ `rollIn`”, “ `rollOut`
Zooming Entrances: `zoomIn`”, “ `zoomInDown`”, “ `zoomInLeft`”, “ `zoomInRight`”, “ `zoomInUp`
Zooming Exits: `zoomOut`”, “ `zoomOutDown`”, “ `zoomOutLeft`”, “ `zoomOutRight`”, “ `zoomOutUp`
Sliding Entrances: `slideInDown`”, “ `slideInLeft`”, “ `slideInRight`”, “ `slideInUp`
Sliding Exits: `slideOutDown`”, “ `slideOutLeft`”, “ `slideOutRight`”, “ `slideOutUp`”
String: “The mode of the measurements. Values can be `px` or `%`”
String: “Border color in hexadecimal format `#rrggbb`.”
String: “Border-styles. Values can be `dotted`”, “ `dashed`”, “ `solid`”, “ `double`”, “ `groove`”, “ `ridge`”, “ `inset` and `outset`. Default is `solid`”
String: “Unit. Values are `px` `rem` or `%`.”
String: “Unit of measurement.
`rem` for root em.
`px` for pixels
`%` relative to its parent dimension.
`v` relative to viewport dimension.”
String: “Unit of measurement.
`rem` for root em.
`px` for pixels
`%` relative to its parent dimensions
`v` relative to viewport dimensions.”
String: “Unit of measurment. Can be "px"”, “ "rem"”, “ "%"”, “ "v" for viewport width/height or any css supported unit.”
Object: The parent layout where to add the AppBar
Object: The layout where to add controls
Object: The pointer event object.
Object: The position of the touch event.
function( event )
function( pos )
apb.absHeight
Returns the absolute height of the control in pixels.
apb.absLeft
Returns the absolute distance of the control from the left in pixels.
apb.absTop
Returns the absolute distance of the control from the top in pixels.
apb.absWidth
Returns the absolute width of the control in pixels.
apb.addLayout
Adds a layout for additional controls at the right of the appbar.
apb.animate
Animate the component.
apb.backColor
A hexadecimal color of the form #rrggbb
apb.backImage
The path to your image file.
apb.border
Sets or returns the border thickness in pixels.
apb.borderColor
Sets or returns the border color. Color is in hexadecimal form #rrggbb
apb.borderStyle
Sets or returns the border style. Values can be dotted, dashed, solid, double, groove, ridge, inset and outset. Default is solid.
apb.bringForward
Bring this component forward by a given z-index.
apb.color
Sets or returns the theme color of the AppBar. Values can be Default Primary Secondary Transparent Inherit
apb.cornerRadius
Sets or returns the corner radius in pixels.
apb.destroy
Destroy the component.
apb.disabled
Sets or returns the disabled state of the control.
apb.el
Returns the html container element for the control.
apb.elStyle
Sets the style of the html container element.
apb.fontFile
Sets or returns the relative path to the font-family use.
apb.getPosition
Returns the position of the component. The return object is of the form {left, top, right, bottom}
apb.gone
Destroy the component.
apb.height
Sets or returns the height of the control as a fraction of the parent control.
apb.hide
Hide the component.
apb.icon
Sets or returns the icon of the menu button.
apb.isVisible
Returns whether the control is visible or not.
apb.layout
Returns the right layout of the appbar where you can add controls.
apb.left
Returns the distance of the control from the left.
apb.margins
Sets or returns the margin of the control. Works on controls with Linear parent only. You can also pass a number to set equal margins for all sides.
apb.menu
Sets or returns whether the appbar has menu button.
apb.opacity
Sets or returns the opacity of the control.
apb.options
Sets or returns the options of the control.
apb.padding
Sets or returns the padding of the control. You can also pass a number to set equal padding for all sides.
apb.parent
Returns the parent layout control.
apb.position
Returns the position of the control. The returned object has left top right and bottom props.
apb.rotation
Sets or returns the angle of rotation in degrees.
apb.sendBackward
Bring this component backward by a given z-index.
apb.setBorder
Sets the border line for the component container.
apb.setCornerRadius
Sets the corner radius of the appbar.
apb.setMargins
Sets the margin of the component.
apb.setOnContextMenu
Adds a callback function on right click.
apb.setOnMenu
Sets a function to be called when the user clicks the menu.
apb.setOnTouch
Adds a callback handler when the component is touch.
apb.setPadding
Sets the padding of the component's container.
apb.setPosition
Sets the position of the component relative to its parent dimensions.
apb.setScale
Sets the x and y scaling of the component. This will ignore the positioning and flow of controls in the layout.
apb.setSize
Sets the size of the component.
apb.show
Show the component.
apb.text
Sets or return the AppBar title text
apb.textColor
Sets or returns the color of the text.
apb.textSize
Sets or returns the size of the text within the control.
apb.textVariant
Sets or returns the variant of the title text. Values can be h1 h2 h3 h4 h5 or h6
apb.top
Returns the distance of the control from the top.
apb.type
Returns the type of the control.
apb.visibility
Sets or returns the visibility of the control.
apb.width
Sets or returns the width of the control as a fraction of the parent control.