enterprise browser - zebra technologies · what’s new in enterprise browser • sap its mobile...

Enterprise Browser A New Web Development Frontier

ABHINEET AGARWAL

Enterprise Browser Technical Lead

AGENDA

• Enterprise Browser Overview

• Enterprise Browser Download & Installation

• Utilizing Enterprise Features

• Configuration Settings For SAP Environment

• Performance Tweaks

• What’s New In Enterprise Browser

• Upcoming Feature In Enterprise Browser

Enterprise Browser Overview - Key Features

• An application development toolkit for mobile cross-platform enterprise applications

• Build apps using HTML5, CSS and JavaScript

• Common APIs across all enterprise devices

• Backward compatible with Pocket Browser

• Backward compatible with RhoElements

• Full screen display

• Extensive logging capability

Enterprise Browser Overview - Benefits

• Reduce application and development costs

• Protect the business from OS market uncertainty

• Reduce end-user training costs

• Utilize every feature on every device - and attached peripheral

• Create consumer-style apps - for business

• Faster time to market

Enterprise Browser Download & Installation

• The latest Enterprise Browser is 1.2

• Enterprise Browser 1.2 release note link:

https://atgsupportcentral.motorolasolutions.com/content/emb/docs/ReleaseNotes/Enterprise_Browser1_2_ReleaseNotes.html

• Download Enterprise Browser MSI from the below link:

https://atgsupportcentral.motorolasolutions.com/ewa/pub/getFile.do?fileName=ssi/emb/downloads/EnterpriseBrowser_v1.2.9.0.msi

• Raise any Enterprise Browser related query at Launchpad





https://developer.motorolasolutions.com/community/technologies/enterprisebrowser/community


• Download the application from Launch pad.


• The latest Enterprise Browser available for download is 1.2. Download & install the same.

Enterprise Browser Download & Installation – Launch Installer

• Launch Enterprise Browser Installer application used for deploying the application in the device.

Enterprise Browser Download & Installation – Deploy The Application To The Device

• Ensure device is properly connected to the Windows Machine before deploying the application

Enterprise Browser Download & Installation –Application Installed In The Device

• Application installed on different device’s

MC40NO KK

Device

MC92NO CE7

Device

MC9190 WM6.5

Device

Enterprise Browser Download & Installation –Launch Application In WinCE Device • Launch application in the device.

• Application launched on MC92N0 CE7 device.

• Showing the default Menu html page.

Enterprise Browser Download & Installation –Launch Application In WM Device • Launch application in the device.

• Application launched on MC9190 WM6.5 device.


Enterprise Browser Download & Installation –Launch Application In Android Device • Launch application in the device.

• Application launched on MC40N0 KK device.


Utilizing Enterprise Features

• Access device capabilities • Scanner, Card Reader etc.

• Use Enterprise Browser API in web application.

• Different ways of accessing the API’s • Meta Tags • Pocket Browser 2.x/3.x ActiveX Object • Rho Elements 2.x JS Object • Enterprise Browser JS Object

Utilizing Enterprise Features – Config.xml

• Configure settings via config.xml • Applied during runtime of the application

• StartPage Tag in config.xml • Point to any html page. • Page present locally in the device. • Page present in some server location.

For WM/CE:

<StartPage value="file://%INSTALLDIR%\HTML\Menu.htm" name="Menu"/>

For Android:

<StartPage value="file://%INSTALLDIR%/menu.html" name="Menu"/>


• FullScreen Tag • Use for changing the screen mode

• Logger Tag • Use for enabling the logs

• ZoomKey Tag • Use for Zoom In or Zoom Out operation

• DefaultMetaTags Tag • Use for applying the particular settings on all pages


• Scanner Tag • Use for disabling the scanner during navigation

• Use for disabling the scanner functionality through out the application

• Many more tags defined in config.xml


• Config.xml is different across WM/CE & Android platform • Location in WM/CE Device

• Present under :-

“\Program Files\EnterpriseBrowser\Config”

• Location in Android Device • Present under :-

“/<mass storage location>/Android/data/com.symbol.enterprisebrowser/”

• For more information, please refer the below link:-

http://ebzebra.github.io/docs/1.2/#guide-configreference

http://ebzebra.github.io/docs/1.2/



Utilizing Enterprise Features – Via Meta Tags

• Create an html page

• Include elements.js library • Applicable only for Android platform

• Enable UseRegularExpressions

• Invoke scanner api via meta tags

• Supported • WM/CE Device using IE or webkit engine • Android Device

<META HTTP-Equiv="scanner" Content=“Enabled”>

<META HTTP-Equiv="scanner" Content=“Disabled”>

Utilizing Enterprise Features – Via ActiveX Object

• Create an html page


• Enable UseRegularExpressions

• Create ActiveX object

• Invoke scanner api via ActiveX object

• Supported • WM/CE Device using IE or webkit engine • Android Device

var scannerObj = new ActiveXObject("PocketBrowser.Generic");

scannerObj.InvokeMETAFunction('Scanner', 'enable');

scannerObj.InvokeMETAFunction('Scanner', ‘disable');

Utilizing Enterprise Features – Via RhoElements 2.x JS Object

• Create an html page.


• Invoke scanner api via Java Scriptable Object.

• Supported • WM/CE Device using webkit engine

• Android Device

scanner.enable();

scanner.disable();

Utilizing Enterprise Features – Via Enterprise Browser JS Object

• Create an html page.

• Include ebapi-modules.js library

• Invoke scanner api via EB JS object.

• Supported • WM/CE Device using webkit engine

• Android Device

EB.Barcode.enable();

EB.Barcode.disable();

Configuration Settings For SAP Environment

• Handling KeyEvents

• Usage of Function keys on different platforms

• Manage UI rendering for IE/Webkit/Android stock browser

• Handling Basic/digest authentication in SAP server

• DataWedge Usage and Compatibility

• Handling Badlink and Navigation

• Migration from PB

• Usage of DefaultMetatags

Configuration Settings For SAP Environment – Handling KeyEvents

• Handling KeyEvents for WM device when IE rendering engine is used

• Known limitation with HTML key pressed events

• Instead use KeyCapture API for key pressed events

• Use KeyCapture API via DefaultMetaTags

• Use KeyCapture API directly in the web page


• Key capture via Default Meta Tags

<DefaultMetaTags>

<MetaTag VALUE="KeyCapture~KeyValue:All;Dispatch:True;KeyEvent:url('javascript:fireKeyEvent(%json);');" />

</DefaultMetaTags>

//Add the fireKeyEvent in the HTML page for handling in WM device with IE Engine

function fireKeyEvent(event)

{

var getData = processKeyEvent(event);

}


• Key capture via Meta Tags

<META HTTP-Equiv="KeyCapture“ Content="KeyValue:All;Dispatch:True;KeyEvent:url('javascript:doCapture(%json);')">

//Callback function associated with key pressed events

function doCapture (myJsObject)

{

var x = myJsObject.keyValue;

document.getElementById('myJsID').innerHTML = "KeyValue:" + x;

}


• Key capture via ActiveX object

var mygeneric = new ActiveXObject("PocketBrowser.Generic");

var keyCaptureAttributes = "KeyValue:All;Dispatch:True;KeyEvent:url('javascript:MyCallBack('%s');')";

mygeneric.InvokeMETAFunction("KeyCapture", keyCaptureAttributes );

//Callback function associated with key pressed events

function MyCallBack(myJsObject)

{

var x = myJsObject;

document.getElementById('myJsID').innerHTML = "Key Value:" + x;

}


• Key capture via Enterprise Browser JS Object

function MyCallBack(myJsObject)

{

var x = myJsObject.keyValue;

document.getElementById('myJsID').innerHTML = "KeyValue:" + x;

}

function captureKeyPressed()

{

EB.KeyCapture.captureKey(true,"ALL", MyCallBack);

}


• Key capture via JS onkeydown event attribute

<html>

<head>

<script>

function jsKeyEvent(event)

{

//Process “event.keyCode” value

}

</script>

</head>

<body onkeydown="jsKeyEvent(event);"></body>

</html>

Configuration Settings For SAP Environment – Handling KeyEvents (Supported / Not Supported)

SCENARIOS EB using Webkit

Engine on WM

Device

(YES/NO)

EB using IE Engine

on WM Device

(YES/NO)

EB using Webkit

Engine on CE

Device

(YES/NO)

EB using IE Engine

on CE Device

(YES/NO)

EB Android Stock

Browser

Capturing key via Enterprise Browser KeyCapture API

(Through EB Namespace)

YES NO YES NO YES

Capturing key via JavaScript Object using RhoElements

KeyCapture Module (Backward Compatibility API)

YES NO YES NO YES

Capturing key via Meta Tags using PocketBrowser


YES YES YES YES YES

Capturing key via ActiveXObject using PocketBrowser


YES YES YES YES YES

Capturing key via HTML onkeyup/onkeydown Event Attribute YES NO YES YES YES

Configuration Settings For SAP Environment – Usage Of Function Keys On Different Platforms

• Used for performing specific task • Zoom In or Zoom Out Operation • Refreshing the page • Navigate to home page • Quit the application etc.

• Just like other keys, function keys are also captured in the same manner

• Function keys which are predefined by OS • Cannot be captured unless proper settings are applied • Refer http://ebzebra.github.io/docs/1.2/#guide-configreference?Remarks

• “isWindowsKey” tag on Android platform • Used to mimic Windows Mobile key codes for the device hardware keys.




Configuration Settings For SAP Environment – Capturing Function Key Example

• KeyCapture meta tag is used for capturing the key and firing the associated callback in the below example

<META HTTP-Equiv="KeyCapture" Content="KeyValue:All; Dispatch:True; KeyEvent:url('javascript:MyCallBack(%json);')">

function MyCallBack(myJsObject){

var keyPressed = myJsObject.keyValue;

if( keyPressed == 114 ){ //F3 key

//Do Something

}

else if( keyPressed == 115 ) { //F4 Key

//Do Something

}

}

Configuration Settings For SAP Environment - Manage UI rendering for IE/Webkit/Android stock browser • It is handled differently with each rendering engine used.

• It depends on the following: • How the web page has been designed? • Whether browser engine supports the respective styles?

• Look & feel may not be same across different rendering engine.

• Responsive Web Design practices need to be followed across multiple platforms

Configuration Settings For SAP Environment - Handling Basic/digest authentication in SAP server • Using Webkit Engine

• Recommended to configure SAP credentials through the Authentication tag in config.xml <Authentication> <Username VALUE=“sapaccess"/> <Password VALUE=“Zebra@123"/> </Authentication>

• Using IE Engine • It is mandatory to turn off the license confirmation screen in config.xml to avoid Log-on fail.

<ShowLicenseConfirmation value="0"/>

• On Login failed page, it is recommended to have Quit, Back and Reload button to avoid having to reboot the device.

• Recommended to have StartPage pointing to local page instead of SAP URL’s.

Configuration Settings For SAP Environment - DataWedge Usage and Compatibility • Use Enterprise Browser Scanner or Barcode API

• It consists rich sets of features

• Ensure DataWedge profile is disabled outside our Application

• Don’t use Scanner API in web application if DataWedge application is used for scanning

• Refer DataWedge usage guidelines from the below link:- http://ebzebra.github.io/docs/1.2/#guide-sap




Configuration Settings For SAP Environment - Handling Badlink and Navigation • Recommended to write your own badlink page

• Configure the same via config.xml <BadLinkURI value="file://%INSTALLDIR%\HTML\BadLink.html"/>

• Ensure badlink page consists of Quit, Back & Reload button

• On clicking “Reload” button, it should redirect to SAP authentication page

Configuration Settings For SAP Environment - Migration from PB • Ensure to set PreloadLegacyActiveX tag value to 1 in config.xml.

• Ensure to set UseRegularExpressions tag value to 1 in config.xml.

• elements.js is required for accessing the backward compatibility API’s on Android Platform.

• Refer migration guide for further details. http://ebzebra.github.io/docs/1.2/#guide-migration




Configuration Settings For SAP Environment - Usage of DefaultMetatags • Choose DefaultMetaTags feature in config.xml file

• If multiple html pages perform the same action • A series of MetaTags can be included once to interact with APIs • Applied MetaTags is applied on all html pages

• Below example will use the Signal API to display the network signal icon on the application.

• It will be available in all html pages • But controlled via one location i.e. config.xml

<DefaultMetaTags>

<MetaTag value="Signal~left:10;top:200;color:#663300;"/>

</DefaultMetaTags>

Performance Tweaks

• Enable scanner once

• Disable scanner during navigation

• Disable Hourglass

• Lock Screen Rotation

• Avoid preloading unwanted capabilities

• Set UseRegularExpressions tag to 0 in config.xml • When not using the backward compatibility API’s

• Include module specific JS files

• Use ZoomKey tag • Associate function key for Zoom In operation • Associate function key for Zoom Out operation • Supported only on WM/CE platform

What’s New In Enterprise Browser

• SAP ITS Mobile Compliance • SAP ITS Mobile Usage guide

• JavaScript keyCode support for SAP Apps

• New Device Support • WorkAbout Pro 4 CE 6.0

• MC18 Android KitKat

• New APIs • SmartCradle API

• New BatteryDiagnostics method in the Battery API

• Database API

• SymbolDevice API

• New Feature Demo Application

• New configuration tags • ZoomInKey & ZoomOutKey

• DisableScannerInApp

• isWindowsKey

Upcoming Feature In Enterprise Browser

• Splash Screen Configuration • User Defined Image via Config.xml

• Set Duration Via Config.xml

• Shortcut Creation • Multiple Shortcut via EBShortcuts.xml

• DOM Injection • Include JS files

• Include CSS files

• Include Meta tags

• Settings • Settings Page

• Settings Button

• Config Editor Tool

Upcoming Feature In Enterprise Browser

• Adding new/missing configuration tags on WM/CE & Android platform

• New Enterprise Browser APIs • Camera API • Printing API • Timer API

• Mac Installer

• Device Support • MC92 Android KitKat • MC40 Android KitKat • TC70 Android KitKat • TC55 Android KitKat

THANK YOU

enterprise browser - zebra technologies · what’s new in enterprise browser • sap its mobile...

Documents