This guide will walk you through step by step to build a simple app from scratch.
The Enterprise Browser will usually be used in one of three different but, related, scenarios:
- Hosted Web App - You already have a web app hosted somewhere and you want the Enterprise Browser to render it on your mobile device.
- Local Web App - You have all your assets stored on your mobile device and want the Enterprise Browser to render these pages for use on your mobile device.
- Hybrid local / hosted App - You have a web app hosted somewhere but some of the assets that your web app uses are stored locally on your device. You want the Enterprise Browser to render these pages for use on your mobile device.
With any of these three scenarios, you will need to be able to edit the config.xml file that comes with the Enterprise Browser. The config.xml resides on the device in a directory which is dependent on your device's OS:
- Android - /Android/data/com.zebra.mdna.enterprisebrowser/Config.xml
- Windows Mobile / Windows CE - \Program Files\EnterpriseBrowser\Config\Config.xml
NOTE: It is worth noting that, with most Windows Mobile / CE devices, you will have to copy the config.xml file to a location that is not on your device in order to modify it. Once your modifications are done, copy it back to your device and overwrite the old one.
Whether your app is hosted, local, or both, you'll need to edit the line in the config.xml file that controls the start path of the Enterprise Browser. in the config.xml you'll find the startPage value and this is what you'll need to change in order for your app to start where you want it to. For example, if I wanted my app to start at yahoo.com for some reason I would edit the startPage to look like this:
<General> <Name value="Menu"/> <StartPage value="http://www.yahoo.com" name="Yahoo"/> <UseRegularExpressions value="1"/> </General>
If I were starting my app from a local page I would need to prepend the file path with file://. For instance:
<General> <Name value="Menu"/> <StartPage value="file:///index.html" name="Menu"/> <UseRegularExpressions value="1"/> </General>
This address will cause the Enterprise Browser to start my app at the index.html file located in my device's root directory.
NOTE: Notice that there are three forward-slashes in that address; the first two are for the file: protocol and the third specifies the root directory of the device.
So let's create a very basic index page that we can launch from our Enterprise Browser app. Create a new file called index.html and use the contents below.
<body> <h1>My First Enterprise Browser App</h1> <p>This is my first app and all it does right now is point to Google's homepage.</p> <a href="http://www.google.com">Click here to go to Google's homepage</a> </body>
Place this newly created file in your device's root directory.
Now change the startPage in your config.xml to:
<StartPage value="file:///index.html" name="Menu"/>
1) Now start your Enterprise Browser app and you should see something like this:
2) And when you click on the link (assuming you have an active internet connection), you'll be navigated to Google's homepage.
But we don't want to just link to some other page, we want to use some of the APIs at our disposal! Let's make an app that uses the Barcode API to scan an barcode and displays the barcode we scanned on the screen.
Create a new file called helloeb.html and use these contents:
This code will enable the default device scanner and print out the scanned barcode data once a barcode is scanned. Here is what we see when the app is started.
Simply add the line above to add the libraries into your app and copy the file from the aforementioned location to your device.
Note: If you copy the file somewhere besides the folder in which your html pages also reside, you'll need to modify the src path accordingly.
To make your Enterprise Browser app start on this page, change your config.xml to point to this helloeb.html as the start page. I am going to put my helloeb.html file in my device's root directory, so my config.xml will show:
<General> <Name value="Menu"/> <StartPage value="file:///helloeb.html" name="Menu"/> <UseRegularExpressions value="1"/> </General>
The barcode I am using to test this is this one:
Here is what we will see after starting the app and going through the initial splash screen(s).
And here is the app after scanning a barcode.
You can also opt to add only the APIs that you plan on using if you want to minimize the amount of device storage you use. We discuss strategies like this in the Optimization guide.