This tutorial covers the use of the Enterprise Browser Network API to detect network connection state.
Prerequisites
The following are required to complete this tutorial:
- A background in HTML, CSS and JavaScript coding
- Enterprise Browser installed on a development PC
- A Zebra mobile device and USB cable
- Enterprise Browser installed on the Zebra device
Coding for the Network API
Enterprise Browser includes an API for working with WAN and WiFi networks. The steps shown below are typical for code that uses this API. The following tutorial will walk through creating a working example application using these steps. The application checks for server connectivity status based on a given URL.
The resulting example application looks like this:
Creating the App
The following HTML template will be used as a starting point for this tutorial. It includes the following features:
- Home button that returns the user to the Enterprise Browser start page.
- Quit button that exits Enterprise Browser.
- Styling to size components in an appropriate manner for use on a device.
- An element for displaying the status of a connection.
HTML Starter Template:
<HTML>
<HEAD>
<style>
h1{font-size:2.5em;background-color:gray;margin:5px;padding:5px;}
h1 button{font-size:.5em;}
input{font-size:1.3em;}
button{font-size:1.3em;}
#content{width:90%;border:black 1px solid;min-height:100px;padding:10px;}
</style>
</HEAD>
<BODY>
<h1>Network Connectivity
<button onclick="window.location.href='./index.html'">Home</button>
<button onclick="EB.Application.quit();">Quit</button>
</h1>
<div id=controls >
</div>
<div id=content >
<span id=constatus >Connectivity status goes Here</span>
</div>
</BODY>
<SCRIPT>
</SCRIPT>
</HTML>
STEP 1: Create the application file
- Create a directory on your development machine for application files.
- Create a file named
netcon.html
in your application directory and open it in a text editor. - Copy the contents of the starter template above into the file and save it.
STEP 2: Add URL input and control buttons
- In
netcon.html
, add two buttons and an input area into the controls div.
Sample HTML:
<button>Detect Connectivity</button>
<input type=text id="host" value = "www.zebra.com">
<button>Stop Checking</button>
The first button will call the API to start polling the connection. The input element will provide the URL to poll for. The second button will call the API to stop polling the connection.
STEP 3: Include the API JavaScript file
Copy the
ebapi-modules.js
file fromC:\EnterpriseBrowser\JavaScriptFiles\EnterpriseBrowser
to your application directory. This JavaScript file is required by the Network API.Add the following as the first line in the HEAD section:
Sample HTML:
<script type="text/javascript" charset="utf-8" src="./ebapi-modules.js">
</script>
STEP 4: Create a hash with settings, start connection test
- Add the method
fnDetectConnection()
to the SCRIPT section, which is between the end BODY tag and the end HTML tag.
Sample JavaScript:
function fnDetectConnection() {
var hostval = document.getElementById("host").value;
var parms_hash = {
host: hostval,
pollInterval: 5000,
detectionTimeout: 1000
};
EB.Network.detectConnection(parms_hash, onConnectionStatusChange);
}
The params_hash
parameter hash includes settings for the host URL, pollInterval
and detectionTimeout
. The pollInterval
sets the time between each check, in milliseconds. The detectionTimeout
determines how long the connection check waits before determining that the connection is disconnected. The hash is passed to the detectConnection
method along with the name of a method that will be called whenever the API detects a change in status.
STEP 5: Respond to status changes
We need to add the callback function that was passed to detectConnection()
in the previous method.
- Add
onConnectionStatusChange()
at the end of the SCRIPT section. This method displays a message regarding the connection status to the user.
Sample JavaScript:
function onConnectionStatusChange(parms) {
var msg = (parms.connectionInformation == "Connected")?"Accessible":"Inaccessible";
document.getElementById("constatus").innerHTML = msg + " (" + getDateTime() + ")";
}
Our callback method uses a utility function to display a date and time along with each status message.
- Add the following function at the end of the SCRIPT section:
Sample JavaScript:
function getDateTime() {
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth()+1;
var day = now.getDate();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
if(month.toString().length == 1) {
var month = '0'+month;
}
if(day.toString().length == 1) {
var day = '0'+day;
}
if(hour.toString().length == 1) {
var hour = '0'+hour;
}
if(minute.toString().length == 1) {
var minute = '0'+minute;
}
if(second.toString().length == 1) {
var second = '0'+second;
}
var dateTime = year+'/'+month+'/'+day+' '+hour+':'+minute+':'+second;
return dateTime;
}
Step 6: Stop the connection test
The next function will be used to cancel the connection polling that was started by the call to detectConnection()
.
- Add the following method to the end of the SCRIPT section:
Sample JavaScript:
function fnStopChecking() {
EB.Network.stopDetectingConnection();
document.getElementById("constatus").innerHTML = "Connectivity status goes here";
}
STEP 7: Hook JavaScript method to buttons
Now that the JavaScript functions have been created, we can hook them to the control buttons.
- Add
onClick
handler code to the input button tags we created earlier (or simply replace the contents of thecontent div
section inserted earlier with the function-appended code below):
Sample HTML:
<button onClick="fnDetectConnection()">Detect Connectivity</button>
<input type=text id="host" value = "www.zebra.com">
<button onClick="fnStopChecking()">Stop Checking</button>
STEP 8: Copy files to the device
To test the application, you need to copy the application files to the device and set the StartPage setting in the Enterprise Browser config.xml
file. Android- and Windows-based devices use different methods for transferring files. Please see the documentation for your device for specific instructions on copying files.
In general, here's what is required:
- Create a directory on your device for the Netcon application. Make sure the directory is in an unrestricted location to avoid any permissions issues when Enterprise Browser tries to open the files. We'll place our sample app's files in the device's root directory and show you how to modify the
config.xml
file accordingly. - Copy the
netcon.html
and any JavaScript API files you have included to the directory you created on the device. - Copy the
config.xml
file to a suitable location on the development machine from the Enterprise Browser install directory on the device and open it in a text editor. - Update the StartPage setting in
config.xml
to point to the location on the device where you placednetcon.html
and save the changes. - Copy the
config.xml
file back to its original location on the device.
Sample config.xml
showing path to Android app in root directory:
<General>
<Name value="Network"/>
<StartPage value="file:///network.html" name="Network"/>
<UseRegularExpressions value="1"/>
</General>
STEP 9: Testing the App
- Tap the Enterprise Browser icon on the device. If the device is not yet licensed for Enterprise Browser you will see the following screen:
- Click on the cancel button in the upper right hand corner of the screen to dismiss the screen and open the Network app. If you turn the device sideways it should look like this:
- Click on the Detect Connectivity button. The API will start checking for a connection to the site www.zebra.com. When it determines the connection status it will activate the callback which will display a message to the user:
- Click on Stop Checking to stop polling the connection.
- Try checking with a different URL.
- Try checking with an invalid URL. You should get a message saying that the connection is inaccessible.
Conclusion
This completes the Enterprise Browser Network API tutorial. For more information on the Network API see the Enterprise Browser API documentation.