Skip to content

You are here: Important Considerations

CordovaBrowser Widget

Cordova is an open-source development framework for mobile applications that rely on JavaScript, HTML5, and CSS3 rather than the APIs that are specific to a given platform, such as iOS and Android.The layout of a Cordova app is built using web views. This layout is not created using any platform's native UI framework. But, unlike other web apps, Cordova apps cannot access native APIs and cannot be bundled as apps for publication.

Cordova Browser widget is a container that displays web application designed in the Cordova platform. This widget helps you to view HTML/JavaScript content without navigating away from the application.

Following are the real-time use cases of Cordova Browser widget:

  • To run video calling web applications developed in Cordova platform, you must use the Cordova Browser widget.

  • To view Cordova based travel applications that embed maps, you must use Cordova Browser widget.

Note: In iOS applications created prior to iOS 12, CordovaBrowser widget uses UIWebView class in UIKit framework of iOS by default to display its contents. Apple has deprecated UIWebView class and recommends using the WKWebView class in WebKit framework.
As UIWebView class has been deprecated and its support will be removed from Apple, you must change the Browser Type of CordovaBrowser widget to WKWebView class.

When you modify the CordovaBrowser widget type to WKWebView, ensure that you add the cordova-plugin-wkwebview-engine plugin to your Cordova apps.

If the Cordova global version is 10.0 or higher, you must not add the cordova-plugin-wkwebview-engine plugin to your cordova apps.

If the Cordova global version is less than 10.0, you can add the cordova-plugin-wkwebview-engine plugin. However, you cannot submit your application to the App Store as the previous versions of Cordova contains UIWebView.
Hence Volt MX Iris recommends you to use global version 10.0 or higher while using Cordova.

Widgets are normally added to your application using Volt MX Iris, but can also be added from code. For general information on using widgets in Volt MX Iris, see Designing an Application in the Iris User Guide.

For general information on the CordovaBrowser widget see the CordovaBrowser topic in the Volt MX Iris User Guide.

The CordovaBrowser widget capabilities can be broadly categorized into the following:

Layout

Events Description
doLayout Invoked for every widget when the widget position and dimensions are computed.
Properties Description
anchorPoint Specifies the anchor point of the widget bounds rectangle using the widget's coordinate space.
bottom Determines the bottom edge of the widget and is measured from the bottom bounds of the parent container.
centerX Determines the center of a widget measured from the left bounds of the parent container.
centerY Determines the center of a widget measured from the top bounds of the parent container.
enableZoom Specifies if Zoom (ability to change the scale of the view area) must be enabled.
height Determines the height of the widget and measured along the y-axis.
left Determines the lower left corner edge of the widget and is measured from the left bounds of the parent container.
maxHeight Specifies the maximum height of the widget and is applicable only when the height property is not specified.
maxWidth Specifies the maximum width of the widget and is applicable only when the width property is not specified.
minHeight Specifies the minimum height of the widget and is applicable only when the height property is not specified.
minWidth Specifies the minimum width of the widget and is applicable only when the width property is not specified.
right Determines the lower right corner of the widget and is measured from the right bounds of the parent container.
screenLevelWidget Specifies whether the widget should occupy the whole container or not when your Browser widget has a large.md content to display.
showProgressIndicator Specifies if the progress indicator must be displayed before loading the URL or executing an event.
top Determines the top edge of the widget and measured from the top bounds of the parent container.
width Determines the width of the widget and is measured along the x-axis.
zIndex Specifies the stack order of a widget.
Methods Description
canGoBack Specifies whether the CordovaBrowser can navigate back into history.
canGoForward Specifies whether the CordovaBrowser can navigate forward into history.
goBack Provides you with the ability to navigate one step back in the browser history.
goForward Provides you with the ability to navigate one step forward in the browser history.
reload Provides you with the ability to reload the current web page.

Animations

Methods Description
animate Applies an animation to the widget.
Properties Description
transform Contains an animation transformation that can be used to animate the widget.

Data Management

Methods Description
clearHistory Clears the page history of the specified CordovaBrowser.
clone When this method is used on a container widget, then all the widgets inside the container are cloned.
loadData Enables you to load the data into the CordovaBrowser widget with the provided configuration.
Events Description
handleRequest Invoked by the platform before CordovaBrowser widget navigates to a new URL.
onFailure Invoked by the platform when the given URL fails to load.
onProgressChanged Shows you the progress of the page loading in the CordovaBrowser Widget.
onSuccess Invoked by the platform when the given request URL is successful in loading the data.
Properties Description
baseURL Used to configure the base URL that is displayed when a CordovaBrowser is rendered.
clearCanvasBeforeLoading Clears the browser's canvas before data is loaded.
detectTelNumber Specifies if the Browser widget must support the detection of phone numbers in the web page and display the phone numbers as clickable Phone links.
enableNativeCommunication Enables web apps to access native capabilities from within the web app's JavaScript code.
loadPageInBrowser Enables the URL in CordovaBrowser widget to open inside the application.
requestURLConfig Specifies the configurations for the requested URL in key-value pairs as a JavaScript object.
settings Helps you to configure the Browser Widget settings.
zoomDensity Specifies the default zoom density of the page.

3D Touch

Methods Description
registerForPeekandPop Registers a widget to enable 3D Touch peek and pop gestures.
setOnPeek Sets and overrides the existing onPeekCallback for the widget.
setOnPop Overrides the existing onPopCallback for the widget.
unregisterForPeekandPop Unregisters a widget from 3D Touch peek and pop gestures.
Properties Description
enableFocusInTouchMode Enables or disables the Browser widget from scrolling to the top of the device screen.

User Input Handling

Events Description
onScrollWidgetPosition Invoked by the platform when the widget location position gets changed on scrolling.
scrollingEvents Called when scrolling reaches beginning of the widget or end of the widget.
Methods Description
addGestureRecognizer Allows you to set a gesture recognizer for a specified gesture for a specified widget.
removeGestureRecognizer Allows you to remove the specified gesture recognizer for the specified widget.
setGestureRecognizer Allows you to set a gesture recognizer for a specified gesture for a specified widget.

Enabling RTL

Properties Description
retainContentAlignment Helps to retain the content alignment of the widget while applying RTL.
retainFlexPositionProperties Helps to retain the left, right and padding properties while applying RTL.
retainFlowHorizontalAlignment Enables you to change the horizontal flow of the widget from left to right.

Miscellaneous

Properties Description
cursorType Specifies the type of the mouse pointer used.
enableOverviewMode Specifies whether the browser should load pages in overview mode.
opacity Specifies the opacity of the widget.
Methods Description
evaluateJavaScript Accepts a JavaScript snippet in the form of a string.
evaluateJavaScriptAsync Accepts a JavaScript snippet and a callback function as inputs.
getHTMLFilesInWebFolder Retrieves a list of the HTML files of the specified type.
getBadge Enables you to read the badge value (if any) attached to the specified widget.
isCordovaAppsEnabled Retrieves a Boolean value that indicates whether Apache Cordova apps are enabled.
isHtmlPreviewEnabled Retrieves a Boolean value that indicates whether your app can open an HTML preview.
isWebAppDevelopmentEnabled Retrieves a Boolean value indicating whether web app development is enabled in the app.
setBadge Enables you to set the badge value to the given widget at the upper, right corner of the widget.

Configurations common to all widgets

Properties Description
accessibilityConfig Enables you to control accessibility behavior and alternative text for the widget.
enable Allows you to make a widget visible but not actionable.
enableCache Enables you to improve the performance of Positional Dimension Animations.
id id is a unique identifier of Browser widget consisting of alpha numeric characters.
info A custom JSObject with the key value pairs that a developer can use to store the context with the widget.
isVisible Controls the visibility of a widget on the form.
parent Helps you access the parent of the widget.
Methods Description
convertPointFromWidget Allows you to convert the coordinate system from a widget to a point (receiver's coordinate system).
convertPointToWidget Using the convertPointToWidget method, you can modify the co-ordinate system.
removeFromParent Allows you to remove a child widget from a parent widget.
setEnabled Specifies the widget that must be enabled or disabled.
setFocus Specifies the widget on which there must be focus.
setVisibility Use this method to set the visibility of the widget.

Important: For Cordova browser, the.htmlString property is not available.

CordovaBrowser Widget Basics

Important Considerations

The CordovaBrowser widget has the following important considerations:

  • On iOS and Android platforms, when the CordovaBrowser widget is set as non-screen level widget, and if you keep some widgets before and after the browser, then double scrolling issue will be seen. This is a native iOS issue. To avoid this, use the CordovaBrowser widget as screen level widget and move other widgets to the header or footer of the form.
  • The CordovaBrowser widget, unlike other widgets, is considered to be "heavy" widget as far as memory and performance is considered.
  • The CordovaBrowser widget uses a lot of initial RAM. The RAM usage grows in proportion to the number of images and static text rendered.
  • If there are multiple instances of the CordovaBrowser widget in the same application, there may be issues related to sharing of information. For example, cookies etc.
  • You must not place multiple CordovaBrowser widgets in a screen. As a guideline, you must not have more than two CordovaBrowser widgets in an application.
  • You must not use CordovaBrowser widget as a RichText widget. It should only be used to display large HTML content.
  • You must avoid using the CordovaBrowser widget to create an application which looks and behaves like a mini web browser. Users normally expect to use the native browser to browse web content. Replicating this functionality within your application is not recommended.
  • Server side Mobile Web platform does not support CordovaBrowser widget in startup form.
  • On SPA platform,