DomInjection is one of the cool features of Enterprise Browser used by many enterprise customers. It helps user to have customized behavior at the device side without modifying the server application. DomInjection in Enterprise Browser 2.0 has undergone few enhancements which makes dominjection easier.

 

Earlier version of the dominjection were having some concerns related to providing absolute path to the injected files on the device. Absolute path to installed directory on the android devices were not common which was creating issues to customers when 'tags' file were mass deployed. This resulted in maintaining multiple 'tags' files for different set of devices. Another concern was related to injecting scripts; to specific pages. When pages='*' attribute was used in 'tags' file, scripts were getting injected to all navigated pages. This resulted in writing additional logic in the injected script to ensure changes are only applied to the specific pages.

 

Enterprise Browser 2.0 allows user to provide dominjected files path using substitution variables that allows user to forget the difficulty involved in finding the absolute path to installed directory and maintaining multiple 'tags' files. It also introduced additional attribute named 'pagecontent' inside 'tags' file; where user can provide unique string to identify the page on which dominjection needs to applied.

 

This blog provides insight to the dominjection enhancements gone into Enterprise Browser 2.0 with the help of a sample application on a TC51/TC56 device.

 

What Application Covers?

 

Application has a start page which resides locally on the device.Startpage has 3 href links which takes user to Google, Yahoo and Example domain respectively. Assume the start page is a legacy page which was migrated from Windows devices to Android touch devices where we do not have any F2, F3, F4,F5 hardware keys on the device. We are going to insert on-screen-buttons for F2,F3, F4 ,F5 for the startpage dynamically using dominjection method. However we need these buttons (F2, F3, F4, F5) only on the legacy page (in our case startpage)

 

Google and Yahoo in our case are two pages where customer wants to insert some custom buttons to perform some javascript actions. These buttons are common for both Google and Yahoo, however javascript actions are different on both pages. We insert F6, F7,F8,F9 on-screen-buttons dynamically for pages Google and Yahoo in our sample application. On clicking the button, we will execute the corresponding javascript action associated with each page. We have a special requirement here that on-screen-button should not create any page content visibility issues. We will resize the webview only for Google and Yahoo using dominjection.

 

Example Domain is a page where we have a requirement to insert an HTML button with some javascript action. In our case, we inject a button to enable or disable the battery indicator on the screen.

 

We are now ready with multiple requirements for different pages. Let us see how we are going to enable the same using dominjection with the help of Enterprise Browser 2.0

 

Addressing the requirement for Startpage!

 

In our example, startpage has a logic already existing from windows time to change the background color when function keys are pressed. Let us see, how we are going to create on-screen-buttons F2, F3,F4, F5 for the startpge without modifying the application. To have a on-screen-button that simulates a keydown event, one need to use buttonbar feature of Enterprise Browser. The sample includes a button.xml used in our case. ButtonBar xml has a grammar that defines the required button and action along with other button properties such as color, size etc.

 

To know more about buttonbar, please visit

 

A snapshot from our example is placed here

<ButtonBar1>

     <barColor value="blue" />

     <barTransparency value="0" />

     <barLeft value="4" />

     <barTop value="800" />

     <barWidth value="400" />

     <barHeight value="100" />

     <barTextColor value="white"/>

     <barTextStyle value="bold"/>

     <barGapBtwnButtons value="2"/>

     <Buttons>

          <Button1>

               <buttonText value ="F2"/>

               <buttonAction value ="key-132"/>

          </Button1>

     </Buttons>

</ButtonBar1>

 

Once the button.xml is created, one can use buttonBar API to show or hide the created-button-bar in any page. As the buttonbar gets created on Enterprise Browser Launch, we only need to inject a script to show the buttonBar1 whenever startpage is loaded. Similarly we have to hide the buttonBar1 when we moved out of the page.

 

 

Inspect the 'tags' file used for startpage DomInjection!

 

<script type='text/javascript' src='file://%INSTALLDIR%/custom-home.js' pagecontent='HOME PAGE' pages='*'/>

 

Above line says, inject the script file named custom-home.js to a page which has a string content 'HOME PAGE'

In other words, we are commanding Enterprise Browser to inject custom-home.js file from installed-directory location to startpage only( because our startpage having a title string  as 'Home Page')

 

Examine custom-home.js script file

 

buttonBar1.show();

 

 

window.addEventListener("beforeunload", function(event) {

 

  buttonBar1.hide(); 

 

});

Whenever user navigates to the startpagge, custom-home.js file gets injected. Script has a logic to show the buttonBar1 and to hide it whenever user navigates away from the page.

 

User can now press F2, F3, F4, F5 to see the back ground color changes. In other words, legacy application code gets executed whenever keydown events are simulated using buttonbar feature of Enterprise Browser. Below are the snap shots of startpage.

 

startpage1.jpgF1prees.jpgf4.jpg

As shown above, user can see the background color gets changed whenever the function keys are pressed. Also user can observe, buttonBar1 is hidden when moved to other pages.

 

Addressing the requirement for Google!

Here we are creating some on-screen-buttons F6,F7,F8,F9 respectively and changes the color of background using dominjected script. Any user preferring to create a onscreen button without modifying server application can make use of this example.

 

Here we are taking additional requirement of resizing the webview sothat buttons will be created outside the webview area. This helps user to see the full page content with a scrolling feature on webview when resized.

 

Inspect the 'tags' file used for Google DomInjection!

 

We identify the navigated page is google when page has a content 'Google Search' in English.

 

<script type='text/javascript' src='file://%INSTALLDIR%/custom-google.js' pagecontent='Google Search' pages='*'/>

Above line in 'tags' file, commands Enterprise Browser to inject custom-google.js file from installed-directory to DOM whenever navigated page is Google.

 

custom-google.js file has the logic to show the buttonBar2 defined inside button.xml  on Google page. It also contains a logic to remove the buttonBar2 whenever user navigated out of google.

 

Additionally, it has a logic to resize the webview and to perform Enterprise Browser keycapture logic to change the background color as shown below

 

Examine custom-google.js script file

 

EB.WebView.resizeWebviewLayout(500, 0,  500, 650);

buttonBar2.show();

 

window.addEventListener("beforeunload", function(event) {

 

  buttonBar2.hide();

  EB.WebView.resetWebviewLayout();

 

});

 

Above script resizes the webview sothat buttonBar2 will be shown outside the webview rendering area. Also it has an additional logic to hide the buttonBar2 when moved out of the page. Similarly it revert the webview size to original size whenever user navigated away from the page.

 

EB.KeyCapture.captureKey(true, 'all', keyCallback);

 

 

function keyCallback(data)

{

 

 

       if(data.keyValue == 136)

       {

          document.body.style.backgroundColor = "red";

       }

       else if(data.keyValue == 137)

       {

          document.body.style.backgroundColor = "blue";

       }

       else if(data.keyValue == 138)

       {

          document.body.style.backgroundColor = "green";

       }

       else if(data.keyValue == 139)

       {

          document.body.style.backgroundColor = "white";

       }

 

 

}

 

Above logic in the custom-google.js script uses Enterprise Browser keycapture module to capture the keydown event to modify the background color of the page as shown below

 

screenshot-1546950448006.jpgscreenshot-1546950513124.jpg

 

As shown above, first image shows whenever user navigated freshly to Google, next image shows when F6 was pressed and last two shows when F8 was pressed. User can see page becomes scroll-able as seen in the last two images. If I would have created an HTML button, i couldn't have placed it outside the webview area. Also note buttonbar shown in Google page is different from startpage. DomInjection helps user to show custom buttons on specific pages without modifying server application.

 

 

Addressing the requirement for Example Domain!

 

Here I wanted to place a button on the bottom of the webview as I have some empty area on my page as it has got less page content.  I use custom-example.js javascript file to create a HTML5 button element on the Example Domain page and applies CSS style to set the color and size of the button. Button click, toggles the battery indicator on the screen. All without modifying the application.

 

 

Inspect the 'tags' file used for Example Domain DomInjection!

 

Here we command Enterprise Browser to inject a javascript file and a CSS file to Example domain page as seen below

 

<link rel='stylesheet' type='text/css' href='file://%INSTALLDIR%/custom-example.css' pagecontent='Example Domain' pages='*' />

<script type='text/javascript' src='file://%INSTALLDIR%/custom-example.js' pagecontent='Example Domain' pages='*'/>

 

Above commands Enterprise Browser to inject custom-example.js file and custom-example.css file to a page where it has a string content 'Example Domain'

 

Examine custom-google.js script file

 

var element = document.createElement("input");

var battery_flag=false;

  //Assign different attributes to the element.

  element.type = 'button';

  element.value = '+'; // Really? You want the default value to be the type string?

  element.id = 'battery-button'; // And the name too?

  element.onclick = function() { // Note this is a function

   if(battery_flag == false)

    {

          battery.visibility = 'visible';

          battery_flag =true;

     }

     else

     {

          battery.visibility = 'hidden';

          battery_flag =false;

 

     }

  };

 

document.body.appendChild(element);

custom-example.js file creates a button element with css id and appends it to document body. It also associate a button click event to show or hide the battery indicator using Enterprise Browser 2.x APIs.

 

Whenever user navigates to the Example Domain, it just insert a HTML button to the page; later applies the CSS to place the button at the bottom with green color. On clicking it toggles battery indicator on the screen as shown below.

 

 

Pictures captured above shows a HTML button (first image) and a battery indicator (second image) when button is clicked.

 

Addressing the requirement for Yahoo!

 

This example is similar to Google one!. However, I just wanted to demonstrate a use-case where user can reuse the same button bar to execute different javascript functions..

 

For example, you have already seen Google page uses F6, F7,F8 F9 on-screen-native-button keys. These buttons are defined under button.xml as buttonBar2. We have a requirement to use same set of buttons in another page say Yahoo in our case; but with different keydown-javascript-action. Let us see the example in detail.

 

Inspect the 'tags' file used for Yahoo DomInjection!

<script type='text/javascript' src='file://%INSTALLDIR%/custom-yahoo.js' pagecontent='<title>Yahoo</title>' pages='*'/>

 

Above commands Enterprise Browser to inject custom-yahoo.js file to Yahoo page only. To avoid the conflict with the 'Yahoo' string in the start page, I am picking a unique string from the yahoo page '<title>Yahoo</title>'

 

The unique string, i received by inspecting the page element in Chrome browser on desktop as shown below.

 

Examine custom-yahoo.js script file

 

This script shows the buttonBar2, however on keycapture callback we introduce the changes related yahoo page as seen below

 

EB.WebView.resizeWebviewLayout(500, 0,  500, 650);

buttonBar2.show();

 

window.addEventListener("beforeunload", function(event) {

       buttonBar2.hide();

      EB.WebView.resetWebviewLayout();

});

 

EB.KeyCapture.captureKey(true, 'all', keyCallback);

 

 

function keyCallback(data)

{

 

 

  if(data.keyValue == 136)

  {

     EB.WebView.resizeWebviewLayout(500, 0,  500, 300);

 

  }

  else if(data.keyValue == 137)

  {

     EB.WebView.resizeWebviewLayout(500, 0,  500, 400);

 

  }

  else if(data.keyValue == 138)

  {

     EB.WebView.resetWebviewLayout();

  }

  else if(data.keyValue == 139)

  {

     EB.WebView.resizeWebviewLayout(500, 0,  500, 650);

 

  }

 

 

}

 

 

As seen in the above script, though buttonBar2 is reused in Yahoo; keydown actions are different in the case of Yahoo page. This is handled inside keycapture callback to resize the webview as shown below.

 

 

 

 

As seen above, one can observe webview get resized to full when F8 is pressed (image3), and to the lowest when F6 is pressed.

 

Prerequisite

 

As we are using Enterprise Browser specific APIs through out our DomInjection Sample, one should ensure that, below Config.xml attribute is set

 

  <InjectEBLibraries>

         <JSLibraries value="1"/>

  </InjectEBLibraries>

 

As we are using dominjection, dominjection 'tags' file path must be included in Config.xml as below

 

  <CustomDOMElements value="file://%INSTALLDIR%/mytags.txt"/>

 

If you are using Enterprise Browser 1.8 Config.xml, user need to ensure below Config.xml attribute is set

<FunctionKeysCapturable value="1" />

 

Using Sample Application

 

Download and extract attached advanced-dominjection.rar file and place it under Enterprise Browser 2.0  installed directory. Launch Enterprise Browser and navigate to different pages.

Conclusion

 

DomInjection helps user to change the client side behaviour specific to pages based on the business cases. New enhancements in DomInjection ease the job for customers