Back

addWebView

JS Py

Hello World

Content:
- Examples
- Properties
- Methods

A WebView in mobile development is a component that allows embedding web content within an application.

web = ui.addWebView( parent, url?, options?, width?, height? ) → ui object: WebView

Here are the available methods for the WebView Component.

Examples

Example - EnjineIO homepage

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

        // Create a webview and load the EnjineIO homepage
        this.web = ui.addWebView(this.main, "https://enjine.io/", "", 0.9, 0.9)

        // Add a callback handler when the website is loaded
        this.web.setOnLoad( this.onLoad )
    }

    onLoad()
    {
        ui.showPopup( "Website is loaded!" )
    }
}

from hybrid import ui

def OnStart():
    main = ui.addLayout("main", "Linear", "VCenter,FillXY")
    web = ui.addWebView(main, "https://enjine.io/", "", 0.9, 0.9)
    web.setOnLoad(onLoad)

def onLoad():
    ui.showPopup("Website is loaded!")

Copy All Run

Example - Call a function inside the webview

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

        // Create a webview and pass
        this.web = ui.addWebView(this.main, "", "", 0.9, 0.7)

        // Add a callback handler when the page is loaded
        this.web.setOnLoad( this.onLoad )

        // Load a webpage from a string
        this.web.html = '<html>' +
        '<head>' +
            '<script>' +
                'function callFunc( name ) {' +
                    'alert("Hi " + name + " webview!")' +
                '}' +
            '<\/script>' +
        '<\/head>' +
        '<body>' +
            '<h2>This is an html.<\/h2>' +
        '<\/body>' +
        '<\/html>';
    }

    onLoad()
    {
        // Call the function `callFunc` inside the webpage
        // when the page is loaded
        var x = this.web.window.callFunc( "John Doe" )
    }
}

from hybrid import ui
from native import app

def OnStart():
    global web
    main = ui.addLayout("main", "Linear", "VCenter,FillXY")
    web = ui.addWebView(main, "", "", 0.9, 0.7)
    web.setOnLoad(onLoad)
    web.html = '''
        <html>
        <head>

                function callFunc(name) {
                    app.Alert("Hi " + name + " webview!")
                }

        </head>
        <body>
            <h2>This is an html.</h2>
        </body>
        </html>
    '''

def onLoad():
    x = web.window.callFunc("John Doe")

Copy All Run

Example - Getting returned values from a function in a webview

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

        // Create a webview and pass
        this.web = ui.addWebView(this.main, "", "", 0.9, 0.7)

        // Add a callback handler when the page is loaded
        this.web.setOnLoad( this.onLoad )

        // Load a webpage from a string
        this.web.html = '<html>' +
        '<head>' +
            '<script>' +
                'function getProduct(num1, num2)' +
                '{' +
                    'return num1 * num2' +
                '}' +
            '<\/script>' +
        '<\/head>' +
        '<body>' +
            '<h2>Get some product here!<\/h2>' +
        '<\/body>' +
        '<\/html>';
    }

    onLoad()
    {
        // Call the function `getProduct` inside the webview
        // when the page is loaded and display the answer
        var prod = this.web.window.getProduct(2, 3)

        ui.showPopup( "The product is " + prod )
    }
}

from hybrid import ui

def OnStart():
    global web
    main = ui.addLayout("main", "Linear", "VCenter,FillXY")
    web = ui.addWebView(main, "", "", 0.9, 0.7)
    web.setOnLoad(onLoad)
    web.html = '''
        <html>
        <head>

                function getProduct(num1, num2) {
                    return num1 * num2
                }

        </head>
        <body>
            <h2>Get some product here!</h2>
        </body>
        </html>
    '''

def onLoad():
    prod = web.window.getProduct(2, 3)
    ui.showPopup("The product is " + str(prod))

Copy All Run

Example - Manipulate dom inside the webview

class Main extends App
{
    onStart()
    {
        this.loaded = false;
        // Create a fullscreen layout with objects vertically centered
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        // Create a webview and pass
        this.web = ui.addWebView(this.main, "", "", 0.7, 0.5)

        // Add a callback handler when the page is loaded
        this.web.setOnLoad( this.onLoad )

        // Load a webpage from a string
        this.web.html = '<html>' +
        '<head>' +
        '</head>' +
        '<body>' +
            '<h2 id="my-text">Hi from webview!</h2>' +
        '</body>' +
        '</html>';

        // Add a button control to the main layout
        this.btn = ui.addButton(this.main, "Change background color")
        this.btn.setOnTouch( this.onTouch )
    }

    onLoad()
    {
        this.loaded = true;
    }

    onTouch()
    {
        // Check first if webview is loaded
        if( this.loaded )
        {
            // Get a reference to the document object of the webview
            const dom = this.web.document

            // or `const dom = this.web.window.document`

            // Set the background-color of the body to green
            dom.body.style.backgroundColor = "green"

            // Get a reference to the h2 element by its id
            let h2 = dom.getElementById("my-text")

            // Set the text
            h2.innerText = "New text from parent!"

            // Set the text color to white
            h2.style.color = "white"
        }
        else
            ui.showPopup( "Webview is not yet loaded!" )
    }
}

from hybrid import ui

def OnStart():
    global loaded, web
    loaded = False
    main = ui.addLayout("main", "Linear", "VCenter,FillXY")
    web = ui.addWebView(main, "", "", 0.7, 0.5)
    web.setOnLoad(onLoad)
    web.html = '''
        <html>
        <head></head>
        <body>
            <h2 id="my-text">Hi from webview!</h2>
        </body>
        </html>
    '''
    btn = ui.addButton(main, "Change background color")
    btn.setOnTouch(onTouch)

def onLoad():
    global loaded
    loaded = True

def onTouch(event):
    if loaded:
        dom = web.document
        dom.body.style.backgroundColor = "green"
        h2 = dom.getElementById("my-text")
        h2.innerText = "New text from parent!"
        h2.style.color = "white"
    else:
        ui.showPopup("Webview is not yet loaded!")

Copy All Run

Properties

The following properties are available on the WebView object:

absHeight → Number

absLeft → Number

absTop → Number

absWidth → Number

backColor → String

backImage → String

blockUrls → List

border → Number

borderColor → String

borderStyle → String

cornerRadius → Number

disabled → Boolean

document → Object

el → Object

elStyle → String

errorPage → String

fontFile → String

height → Number

html → String

isVisible → Boolean

left → Number

margins → List

opacity → Number

options → String

padding → List

parent → Object

position → Object

rotation → Number

textColor → String

textSize → Number

textZoom → Number

top → Number

type → String

url → String

visibility → String

width → Number

window → Object

Methods

The following methods are available on the WebView object:

animate( anim, duration )

bringForward( zIndex )

destroy()

getPosition( options ) → Object

gone()

hide()

print()

reload()

sendBackward( zIndex )

setBorder( left?, top?, right?, bottom?, clr?, style? )

setCornerRadius( tl?, tr?, br?, bl?, mode? )

setMargins( left?, top?, right?, bottom?, mode? )

setOnContextMenu( callback )

setOnLoad( callback )

setOnUrl( callback )

setPadding( left?, top?, right?, bottom?, mode? )

setPosition( left, top, mode )

setScale( x, y )

setSize( width, height, mode )

show()

stop()

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 border radius.

Number: Top-Right border radius.

Number: Bottom-Right border radius.

Number: Bottom-Left border 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 url of the website.”

String: “A comma separated options for WebView. Values can be `NoScrollBar`”, “”

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 of measurement. 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 WebView component.

Object: The pointer event object.

function( event )

function()

function( url )

web.absHeight
Returns the absolute height of the control in pixels.

web.absLeft
Returns the absolute distance of the control from the left in pixels.

web.absTop
Returns the absolute distance of the control from the top in pixels.

web.absWidth
Returns the absolute width of the control in pixels.

web.animate
Animate the component.

web.backColor
A hexadecimal color of the form #rrggbb

web.backImage
The path to your image file.

web.blockUrls
Sets or returns the list of blocked urls.

web.border
Sets or returns the border thickness in pixels.

web.borderColor
Sets or returns the border color. Color is in hexadecimal form #rrggbb

web.borderStyle
Sets or returns the border style. Values can be dotted, dashed, solid, double, groove, ridge, inset and outset. Default is solid.

web.bringForward
Bring this component forward by a given z-index.

web.cornerRadius
Sets or returns the corner radius in pixels.

web.destroy
Destroy the component.

web.disabled
Sets or returns the disabled state of the control.

web.document
A reference to the webview's window document object.

web.el
Returns the html container element for the control.

web.elStyle
Sets the style of the html container element.

web.errorPage
Sets or returns the redirect url when an error occur.

web.fontFile
Sets or returns the relative path to the font-family use.

web.getPosition
Returns the position of the component. The return object is of the form {left, top, right, bottom}

web.gone
Destroy the component.

web.height
Sets or returns the height of the control as a fraction of the parent control.

web.hide
Hide the component.

web.html
Setst or returns the html loaded in the iframe.

web.isVisible
Returns whether the control is visible or not.

web.left
Returns the distance of the control from the left.

web.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.

web.opacity
Sets or returns the opacity of the control.

web.options
Sets or returns the options of the control.

web.padding
Sets or returns the padding of the control. You can also pass a number to set equal padding for all sides.

web.parent
Returns the parent layout control.

web.position
Returns the position of the control. The returned object has left top right and bottom props.

web.print
Print current page via the builtin android printer dialog.

web.reload
Reloads the current page.

web.rotation
Sets or returns the angle of rotation in degrees.

web.sendBackward
Bring this component backward by a given z-index.

web.setBorder
Sets the border line for the component container.

web.setCornerRadius
Sets the corner radius of the component.

web.setMargins
Sets the margin of the component.

web.setOnContextMenu
Adds a callback function on right click.

web.setOnLoad
Adds a callback handler for onload event.

web.setOnUrl
Define a callback function which is called when the user clicked a link.

web.setPadding
Sets the padding of the component's container.

web.setPosition
Sets the position of the component relative to its parent dimensions.

web.setScale
Sets the x and y scaling of the component. This will ignore the positioning and flow of controls in the layout.

web.setSize
Sets the size of the component.

web.show
Show the component.

web.stop
Stops any web loading.

web.textColor
Sets or returns the color of the text.

web.textSize
Sets or returns the size of the text within the control.

web.textZoom
Sets or returns the text zoom of the page loaded in the web view.

web.top
Returns the distance of the control from the top.

web.type
Returns the type of the control.

web.url
Sets or returns the url of the webview.

web.visibility
Sets or returns the visibility of the control.

web.width
Sets or returns the width of the control as a fraction of the parent control.

web.window
A reference to the webview's window object.