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).
Such companies must make an important decision:
- 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 reuse 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
This tutorial demonstrates an application implementation 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 through Apache Cordova plug-ins.
Developers can easily create their own protocol between internal web components and the WebViewOverlay control. Use the provided MobileFirst project to understand the concepts of WebViewOverlay.
Prerequisite: Before you proceed, you must be proficient with implementing Cordova plug-ins.
Implementing the webViewOverlay
In Java, the sample implements the page integration as follows:
- In the application main class, a
webViewOverlayobject is declared to display the external content. Static references are used for simplicity.
- The object is created, its layout properties are set, and it is added as a view to the root element. It is invisible initially. The
setMarginsmethod positions the
webViewOverlaycomponent in the screen.
Note: Android 4.4 introduces a new version of
WebViewthat is based on Chromium and affects the
WebViewmargins. For more information about this issue, see Migrating to WebView in Android 4.4.
RelativeLayoutobject is created.
RelativeLayoutobject works as a root layout.
- The current root view is removed from its original parent. Instead, the
webViewOverlayobjects are added to the
- The content view is set to
Implementing the Java code of the Cordova plug-in
- In a new class,
WebViewOverlayPlugin.java, the actions that the plug-in supports are declared.
- If an
openrequest is received from the web part of the application, the external content is loaded and makes the
- If a
closerequest is received from the web part of the application, the
webViewOverlayis cleaned up and hidden.
UI-related actions occur on a dedicated UI thread.
WebViewOverlayPluginobject is created and populated with the required methods.
- The clicked tab ID is analyzed and either shows or hides the
Loading external content can take time, so adding a Busy Indicator to improve the user experience should be considered.
Click to download the MobileFirst project.