Page: Hybrid Browser Control
Page: Run the Hybrid Browser Control Sample App
Page: Explore the Hybrid Browser Control Sample App
Page: Title Override Control
Page: Control Types
Page: Empty Space Control
Page: Association Field Control
Page: Check Box Control
Page: List Builder Control
Hybrid Browser Control
The Hybrid Browser control is a powerful extension of the Browser Field control that integrates the open source Apache Cordova 2.2.0 framework. The usage and considerations applicable for Browser Field Control remains the same for the Hybrid Browser control.
The Hybrid Browser control is an HTML5-compatible control that enables:
- AppStudio apps
- Device features such as camera, GPS, accelerometer, and others.
The document caching feature is not available for Hybrid Browser control.
The Hybrid Browser control is not available on the BlackBerry platform.
Cordova White Listing
The Hybrid Browser control extends the Cordova implementation of WebView. This implementation provides you with the additional security capability of domain white-listing. Only white listed domains and resources referenced by using the
src tag are allowed access to the network. For more details on domain white listing, refer to the Cordova Domain Whitelist Guide.
You can define white-listed domains in AppStudio under Application Properties->Security->Hybrid Control domain white-list. Multiple domains can be separated with a comma. You can white list all domains with '*' (without quotes). For more details refer to the Cordova Domain Whitelist Guide.
By default, the domain of the AppServer is automatically white listed.
- Android only respects white listing of top level domains. All resources accessed by using the
srctag are loaded irrespective of white listing. Any top level domain URL not in the white list opens the platform browser.
- iOS blocks from loading all top level URLs and resources accessed by using the
- For iOS, a Browser Field control respects domain white lists if the control is in the same Form screen as the Hybrid Browser control.
- All URLs including any redirection should be whitelisted for the page to load.
Consideration when rotating the app
By default, app screens conform to the rotation behavior of the client device. That means the screen displays in portrait or landscape mode to match the current rotation of the device. For more information, see Controlling Screen Rotation.
On screen rotation, the screen reconfigures its layout and refreshes the Hybrid Browser control. This refresh means that the Hybrid Browser control reloads and discards all user interactions. Appery recommends that you to lock the screen rotation on screens when user interaction needs to be preserved. However, you can also use the Apache Cordova storage API to write the state information on local storage and read from it on reload. You are then responsible for deleting from the local storage all assets that you created.
Debug offline manifest file
An HTML 5 cache manifest file, a .appcache file, loads cached assets for offline use. If your application is not loading the resources for offline use, then follow the debugging steps below:
- Make sure that your app navigates to the HTML code that loads the manifest file.
- Try to load the HTML page which load the manifest file on Google chrome and then open the developer tools by pressing F12. Then, go to the Resources tab and look in the Application cache to see the cached resources are there.
- Resource names in the manifest file are case sensitive so make sure they are correct.
- URL paths in the Hybrid Browser control calculation fields are case sensitive so make sure they are correct.
- Check whether the resources on the server come through an actual physical path on the server or from a virtual path on IIS.
- Wild cards are supported only under the network section of the manifest file. Make sure wild cards are not used in other sections of the manifest file.
Set Hybrid Browser control properties
The following sections describe the properties that you can set on a Browser Field control.
Make sure to set the size of the Hybrid Browser control appropriately for the content displayed.
The name used to reference this control from within the application or script.
The label that appears on the control.
|Show Label||Specifies the location of the label relative to the control. Select Off to hide the label. Select Left if you want to control placement, and select Device Default to let the device position the label. For example, on Android, Device Default causes the label to appear above the control.|
Specifies the label's alignment relative to the view or region.
The data associated with the control. You can select one of the following values:
Hide if Empty
Check to hide the control if it is empty.
The Label style when it is neither selected nor focused. For more information, see Styles.
The style of the control when it is neither selected nor focused. For more information, see Styles.
Specifies the style used to display the label on rollover.
The style of the control when selected.
|Default Value||The default value of the control.|
|Focusable||Specifies if the control can receive focus.|
Check to assign the height to the control by percentage of the screen or in pixels.
|Specify Width||Check to assign the width to the control by percentage of the screen or in pixels.|