[iOS] Combining native and web controls in Cordova based applications
AntonAleksandrov 270005D80F Comments (3) Visits (15441)
[Update - for Android part of this blog go to
This blog post has several purposes. First is to provide some technical details regarding iOS Cordova/Worklight based application architecture from a native views stack perspective. Second is to demonstrate a technique allowing to manipulate this view stack in order to integrate native controls with web based ones. Though information below applies to pure Cordova apps as well it will be given in a context of Worklight based application.
Before we dive in, lets recall what Apache Cordova actually is.
When using the Cordova APIs, an app can be built without any native code (Java, Objective-C, etc) from the app developer. Instead, web technologies are used, and they are hosted in the app itself locally (generally not on a remote http server).
So basically Apache cordova allows you to build mobile applications without any (or very minimal) native coding. In order to understand how this is possible lets try to understand several (but definitely not all) components that Cordova application consists of. The following image depicts the essence of a Cordova based application.
On the other hand - what if you want your application to be even more hybrid? For example having both native and web controls on a same screen? Something like this
On a picture above, the top part of the app (highlighted with green) is purely native. It is using native iOS UINavigationBar and UISegmentedControl controls. The bottom part (highlighed with blue), however, is purely web.
In order to understand how this is implemented lets first take a look at what the Cordova based app view stack actually consists of.
The bottommost rectangle is a window object. This is basically your application window. It is owned by the app's UIAp
During application initialization the UIAp
Developer can put additional native views on top of the UIVi
In Cordova based applications the only additional view that is put on top of the main view is an instance of Cord
The thing we want to do in this demo is actually change default application layout to what is shown below
This means three things
1. Resize CordovaWebView so it wouldn't take the whole screen
2. Add native controls to the top part of the screen
3. Implement communications between native and web controls
Ok, now that we know what we're trying to achieve we can start going into more technical and implementation details. First of all, from the code perspective this is how the application architecture will look like.
Native code consists of
1. Application native code - the one that handles native application behaviour, native controls, e.g. CDVM
2. MyNativeBridge Cordova plugin code - the native piece of Cordova plugin that will be responsible for bridging between native and hybrid
Let's examine the main flows that we're interested in. First one is an application startup.
First thing we want to do on an application startup is to prepare our native UI layout. This will be done in view controller by using native code.
Let's see what is going to happen once native event has occurred.
The video below is expanding detail level of everything discussed above and actually shows the complete implementation. It is highly recommended to view this video in HD quality (at least 720cc)
Download the sample code from GitHub -