Integrating server-generated pages in hybrid applications
Many enterprises today decide to develop their own customer or employee-facing mobile applications.
Some of those companies already have mobile-facing websites (mobile web).
An important decision must be made then by the companies:
- Should all the mobile web features be implemented from scratch in the mobile application, which is great from a user experience perspective, but very time- and money-consuming?
The WebViewOverlay approach allows the re-use and integration of existing mobile websites within a mobile application.
Navigation is smooth and seamless between components that are internal in the mobile application, and the external content on the external mobile website.
Web resources that are bundled inside the application
External web content
In this tutorial, an application implementation is demonstrated for the Android environment.
The application contains three tab items.
The first two tabs contain internal content. The third tab shows an external IBM mobile website.
WebViewOverlay is implemented by using the Apache Cordova plug-ins functionality.
Developers can easily create their own protocol between internal web components and the WebViewOverlay control. The provided MobileFirst project can be to understand the concepts of WebViewOverlay.
Before proceeding, proficient with implementing Cordova plug-ins is advised.
Implementing the webViewOverlay
First, in the application main class, a webViewOverlay object is declared, to be used to display the external content. Static references are used for simplicity.
The object is created and its layout properties are set, and it is added as a view to the root element. It is invisible initially.
Note the setMargins API. This API can be used to position your webViewOverlay component in the screen.
Note: Android 4.4 introduces a new version of WebView that is based on Chromium and that affects the WebView margins. More information about this issue can be found here: http://developer.android.com/guide/webapps/migrating.html
Next, setting up the content view.
- A RelativeLayout object is created that functions as a root layout.
- The current root view is removed from its original parent. Instead, the root and webViewOverlay are added to the rootRelativeLayout.
- The content view is set to rootRelativeLayout.
Implementing the Java code of the Cordova plug-in
In a new class, WebViewOverlayPlugin.java, the actions the plug-in supports are declared.
If an “open” request was received from the web part of the application, load the external content and render the webViewOverlay visible.
If receive a “close” request from the web part of the application, clean the webViewOverlay and hide it.
UI-related actions are performed on a dedicated UI thread.
The clicked tab ID is analyzed and either shows or hides the webViewOverlay accordingly.
Loading external content can take time, so adding a Busy Indicator to improve the user experience should be considered.
Click to download the Studio project.