In this discussion I would like to bring your attention towards dominjection module in EB. This feature was introduced in Enterprise Browser version 1.4 and is supported on both android and wm/ce platform.
DomInjection module was introduced by taking in account that users may need to migrate their app to EB without modifying their application. DomInjection module injects the lists of meta/script/css tags mentioned in a local file to the required pages* (refer dominjection module documentation for syntax). We had got couple of scenarios where our customers could solve their needs using dominjection technique. However I am taking out one scenario as an example.
As you know NativeTabbar methods lets you use multiple instances of the webview in separate tabs. On Windows Mobile/CE there are no visible tabs as we see in the case of desktop browsers. Once tabs are created one should programatically switch between tabs. The API exposed for switching tab is EB.NativeTabbar.switchTab(nTabIndex) , refer NativeTabBar for more details.
One of our users wanted to use NativeTabBar for his app, however he was not willing to modify his existing application for the tab creation or for switching between tabs. Having a button/href link to switch to a different tab from each tab was looking awkward for the user. Moreover he was worried about modifying his application just for migrating to EB. This was the situation where our team could help the user with dominjection technique.
DomInjection has three initialization parts. Firstly a custom tag file placed locally on the device, secondly mentioning custom tag file path in config.xml element named CustomDOMElements, thirdly fill the custom tag file with required tag details (refer dominjection module for more details). Once initialization part is completed your EB is ready to inject those tags to the specified pages.
The below example was validated on MC92 CE7 and ideally should work for all devices
Below is the CustomDOMElements path mentioned in my example. It says that custom tag file is placed under Application directory folder named EBKeyCaps.
Below is custom tag file content. It says that the script files named ebapi-modules.js and KeyCap.js should be injected to all pages navigated by EB.
Now Let us look at tab creation part. Customer needed two tabs each tabs has its own urls, www.google.co.in and www.yahoo.com respectively.
The startpage of the config.xml has been pointed to nativetabbar.html and the page content is as shown below.
STARTPage
function create_tabbar()
{
EB.NativeTabbar.create(
[
{
'label':'MainPage', 'action':'http://192.168.1.5:80/xampp/ebtest/nativetabbar.html', 'useCurrentViewForTab':true
}, {
label: "abc",
reload: false,
action: "https://www.google.co.in"
},
{
label: "abcd",
reload: false,
action: "http://www.yahoo.com"
}
],
{createOnInit: "true"} ,tabbar_callback );
}
function tabbar_callback(params)
{
//alert(params) }
var alreadyloaded = false;
function loadEvent()
{
if(alreadyloaded == false)
{
alreadyloaded = true;
create_tabbar();
EB.NativeTabbar.switchTab(1); //this will give a feel to user that his start page is tab1 page contents.(google.co.in in this case) }
}
function removetabbar()
{
EB.NativeTabbar.remove();
}
window.addEventListener('DOMContentLoaded', loadEvent);
Quit
Please note that startpage just creates three tabs tab0, tab1, tab2 respectively and where tab0 is the should be the page which created the tabs as per NativeTabBar documentation. Tab1 and Tab2 are the tabs where user is really interested in and where Tab1 is pointing to google and tab2 is pointing to Yahoo. As you can see onload event tabs are getting created and we switches to tab1 directly. This gives a feeling to the customer that his start page is google (tab1).
Now how do we switch to tab2. Here comes the role of dominjection module. When you switched to Tab1 after creating the tabs, there are two script injected to your tab1 (ebapi-modules.js and KeyCap.js respectively without app developer knowledge). Let us see the content of KeyCap.js.
(function() {
// Poll for EB namespace to come into existence var checkReady = function(callback){
if (window.Rho)
{
callback(Rho);
}
else
{
window.setTimeout(function() { checkReady(callback); }, 100); //check here }
};
// Start polling... checkReady(function(Rho) {
EB.KeyCapture.captureKey(true, "ALL", keyCapCallback); });
})();
function keyCapCallback(result)
{
if(result.keyValue==112) // F1 EB.NativeTabbar.switchTab(1);//go to google if(result.keyValue==113)
EB.NativeTabbar.switchTab(2);//go to yahoo if(result.keyValue==114)
{
EB.NativeTabbar.remove();//remove tabs EB.Application.quit();//quit app }
}
Whenever KeyCap.js is loaded on to tab1 or tab2, a anonymous function is getting executed.
EB.KeyCapture.captureKey(true, "ALL", keyCapCallback);
The above line of code registers a keydown callback event on each tab. On pressing any key, keyCapCallback will be called from EB. Based on the keyValue one can write the logic. On pressing F2 key EB view switches to yahoo.com. On pressing F1, EBview will switch back to google.com. On pressing F3 key, EB app will quit.
Ultimately the above example will give a feel to user that his start page is google.com and upon pressing F2 key his view switches to yahoo.com. On pressing F1, his view will switch back to google.com. On pressing F3, his app will quit. Note that keyboard layout is different on various zebra devices. Hence keyvalue used here needs to be modified based on the users device key mapping.
Thus DOMInjection helps user to do tabswitching on button press without modifying his application.
For more details on dominjection please refer
Enterprise Browser 1.4
0 Replies