BackButton Module

RhoElements 2.x API

Overview

The BackButton Module is used to set the parameters of BACK, the button that moves application to the previously loaded page, if any.

Note: The VC5090 device might exhibit slight screen distortion while one or more KeyState icons are displayed. This occurs only when overlays (listed below) are visible.

  • AddressBar
  • BackButton
  • ForwardButton
  • GoButton
  • MinimizeButton
  • QuitButton
  • ReloadButton
  • SipButton
  • StopButton

Enabling the API

To use this API you must include a reference to the following JavaScript file that is included with the Enterprise Browser installation:

  • elements.js

Note - this file either needs to be on the device in a relative folder from where your HTML page is, or it must be copied to your web server appropriately.


<script type="text/javascript" charset="utf-8" src="elements.js"></script>;

API Usage

This API does not use the EB namespace. It is simply referenced using the API name:


backButton.visibility = 'visible';

Properties

visibility

Type

STRING

Description

Sets the visibility of the button.

Possible Value

  • visible
  • hidden

Platforms

  • Android
  • Windows Mobile/CE

left

Type

INTEGER - Positive number, representing pixels

Description

Sets the X position of the button. Default Value = To the right of the address bar.

Platforms

  • Android
  • Windows Mobile/CE

top

Type

INTEGER - Positive number, representing pixels

Description

Sets the Y position of the button. Default Value = To the right of the address bar.

Platforms

  • Android
  • Windows Mobile/CE

width

Type

INTEGER - Positive number, representing pixels

Description

Sets the width of the button. Default Value = Dependant on screen resolution.

Platforms

  • Android
  • Windows Mobile/CE

height

Type

INTEGER - Positive number, representing pixels

Description

Sets the height of the button. Default Value = Dependant on screen resolution.

Platforms

  • Android
  • Windows Mobile/CE

imageUp

Type

STRING

Description

Sets the image to be displayed when the button is in the up state. See Remarks.

Possible Value

  • String - URL to location of image file in relation to the Enterprise Browser device folder. A default image is provided.

Platforms

  • Android
  • Windows Mobile/CE

imageDown

Type

STRING

Description

Sets the image to be displayed when the button is in the down state. See Remarks.

Possible Value

  • String - URL to location of image file in relation to the Enterprise Browser device folder. A default image is provided.

Platforms

  • Android
  • Windows Mobile/CE

Examples

Using the Back Button

In this example, you will see how to enable the back button as well as set many of its properties. This example assumes that the elements and ebapi-modules.js files reside in the same file as the html file invoking them.

Note: The ebapi-modiles.js library here is only included because it is needed for the System API.


<head>
    <script type="text/javascript" charset="utf-8" src="elements.js"></script>
    <script type="text/javascript" charset="utf-8" src="ebapi-modules.js"></script>

    <title>Back Button Example</title>

    <script>
    var visibility   = false;
    var screenWidth  = EB.System.realScreenWidth;
    var screenHeight = EB.System.realScreenHeight;

    function toggleBackButton(){
        print.innerHTML = visibility
        if(visibility){
            backButton.visibility = 'hidden';
            visibility = false;
        }
        else{
            showButton();
            visibility = true;
        }
    }

    function showButton(){
        backButton.width = 50;
        backButton.height = 50;
        // When aligning the icon with the right side, we need to account for the icon width.
        backButton.left = screenWidth - 50;
        // When aligning the icon with the bottom, we need to account for the icon height.
        backButton.top = screenHeight - 50;
        backButton.visibility = 'visible';
    }

    function hideBackButton(){
        backButton.visibility = 'hidden';
    }

    </script>
</head>
<body onunload='hideBackButton()'>
    <h1>BackButton API Example</h1>
    </br>
    </br>
    <div>
        <button onclick="toggleBackButton()">Toggle Back Button</button></br>
    </div>
</body>

Remarks

Use of Images on Buttons.

Images can be specified as local to the device or on an HTTP / FTP server, just specify the required protocol as part of your URL (ex: file://, HTTP:// ). Image will be scaled to the size of the button. JPEG and GIF images are only supported on WM devices. Both CE and WM support BMP files.

Default Positions

By default this control will be placed a the top of the screen. On Windows Mobile if the ‘FullScreen’ configuration setting is disabled the control will need to be moved, otherwise it will appear beneath the task bar.

Switching to Other Applications

All controls are designed to be shown on top of Enterprise Browser. If you require to switch to an application other than Enterprise Browser you should minimize Enterprise Browser to ensure the buttons do not remain shown. (Not applicable to Android)

Screen Orientation

When the screen orientation changes, either using the ScreenOrientation tag or by rotating a device with hardware support, the command areas will automatically move and resize to fit the new layout. However the buttons themselves are not moved and in some cases this may result in them being off the screen or not in the expected position. If so they must be moved manually by detecting the ScreenOrientationEvent.

Use in Production

This API is designed for debugging your application only and should not be used in production

Internet Explorer (IE) Rendering Engine

When using the this feature on a CE device using the IE engine, screen distortion may be noticed when scrolling. This is due to a limitation of the IE engine and can be worked around by any of the following options:

  • Not using debug buttons - If your app must use the IE engine, do not use debug buttons in the app.
  • If you need to use the signal or battery indicators either:
    • Don't scroll the page.
    • Don't use the signal / battery indicators
    • Use the Webkit engine.