Prev Next

A Web Application

What You Will Learn in this Section

So far we’ve been able to test our expression evaluator with the Gogo command shell. In this section we create a small web application that calls the evaluator from the web.

We will create a small GUI in HTML 5 and Javascript based on Angular that uses the OSGi enRoute simple REST facility to call the evaluator service.

For many Java developers, Javascript, CSS, and HTML 5 are foreign and scary. However, this example requires very little knowledge of these resources. And won’t you admit that it’s cool to write something you can show your girl/boy friend without getting blank stares? If you’re absolutely not interested in web applications then you can skip this section.

API Diagram

Make sure you are in the top directory:

	$ cd ~/workspaces/osgi.enroute.examples.eval


	osgi.enroute.examples.eval $ mkdir application
	osgi.enroute.examples.eval $ cd application
	application $ vi pom.xml
	// edit pom

The pom for this project looks like:

	<description>A web application to evaluate expressions</description>

The Application Java Source Code

Our application class must provide access to the expression evaluator via REST. For this reason, there is a simple REST provider that leverages the OSGi model. The primary purpose of this support is to make it trivially easy to call Java code running in OSGi as a service from a Javascript application.

The secondary purpose of the application class is to act as a root for the requirements graph. It defines a number of requirements that cannot be analyzed from the code. We add those requirements using annotations. These annotations will then be converted to OSGi requirements by bnd.

	application $ mkdir -p src/main/java/osgi/enroute/examples/eval/application
	application $ vi src/main/java/osgi/enroute/examples/eval/application/
	// Add the source code

The source code is:

package osgi.enroute.examples.eval.application;

import org.osgi.service.component.annotations.Component;
import org.osgi.service.component.annotations.Reference;

import osgi.enroute.configurer.api.RequireConfigurerExtender;
import osgi.enroute.examples.eval.api.Eval;
import osgi.enroute.twitter.bootstrap.capabilities.RequireBootstrapWebResource;
import osgi.enroute.webserver.capabilities.RequireWebServerExtender;

@RequireAngularWebResource(resource={"angular.js","angular-resource.js", "angular-route.js"}, priority=1000)
public class EvalApplication implements REST {

	Eval eval;
	public double getEval(String string) throws Exception {
		return eval.eval(string);

A short explanation of the annotations:

  • @RequireAngularWebResource – Instead of listing Javascript and CSS dependencies in the index.html file we can define what gets included with the annotation. This provides for a single definition of what resources should be included. This Angular annotation includes the angular Javascript resources.
  • @RequireBootstrapWebResource – Includes the Bootstrap CSS
  • @RequireWebServerExtender – The Webserver extender makes it easy to provide static context. It also provides the runtime support for the web resources.


We want the application to look like:

The application

About Angular

For many Java developers the web is a scary place. In OSGi enRoute we chose Angular for the GUI not expecting every Java OSGi developer to jump on that band wagon (this band wagon changes every 3 months anyway) but it allows very simple powerful and scalable applications.

The key concept of Angular is that it updates the GUI directly from the Javascript variables. This allows very clean separation between the business logic, the traditional model, and the GUI. The GUI itself is modeled with HTML 5 and also often contains logic. However, this view/control logic should be restricted to the control and view aspects and not contain business logic.

About HTML 5

Most Java developers still consider HTML to be a variant of XML. It is not, it is much more relaxed. In many cases it is not necessary to quote attribute values and many tags are not required to be closed. Though this sounds offensive to people used to XML it is actually more readable and sometimes not closing a tag prevents accidental whitespace between tags to kill a carefully crafted layout.

Static Web Content

The OSGi enRoute webserver bundle will map any directory named static in a bundle to the web server’s root. In OSGi enRoute applications, the convention is to use the fully qualified name of the application as the root. This content is generally not accessed directly except for the index.html file in this directory. We therefore have the following static web resource files:



The index.html file is the root of our Javascript application. It is an Angular application. It uses URL based routing, this makes it slightly more complex than the absolute simplest Angular application but it then makes turning it into something useful much harder.

In the index.html file we are using macros and/or properties. We therefore need to let bnd expand the file. This is needed because the web resources use the Bundle Symbolic Name and the actual version used in the bundle, which might differ slightly from the Maven version.

The index.html should be stored in src/main/resources/static/osgi.enroute.examples.eval/index.html, this will make it available on the web server under /osgi.enroute.examples.eval/index.html.

application $ mkdir -p src/main/resources/static/osgi.enroute.examples.eval
application $ vi src/main/resources/static/osgi.enroute.examples.eval/index.html
// add the subsequent content

The first part of the index.html file is quite straightforward HTML 5 code made compatible with the Internet Explorer quirks.

<!DOCTYPE html>
<html lang="en">
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!--[if lt IE 9]>
		      <script src=""></script>
		      <script src=""></script>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="">
		<meta name="author" content="">
		<link rel="icon" href=/osgi.enroute.examples.eval/favicon.ico">

The following link will include the CSS that the application needs. The CSS (in our case Bootstrap) was indicated by the @RequireBootstrap annotation on the application class. The /osgi.enroute.webresource/ URL is mapped to a servlet that will be able to find all the required web resources for the given Bundle-SymbolicName and Bundle Version. The ${bsn} macro and ${Bundle-Version} macro are expanded by bnd.

			rel	="stylesheet" 

Angular requires an ng-app attribute for the name of the application.

	<body ng-app="osgi.enroute.examples.eval">

We use Bootstrap to create a container for the content.

		<div class="container">

			<div class="header">

The first part is a navigation bar where we have our 2 views listed. The Home view is our application, executing an expression evaluation. The second one is an About window. We use the URL routing mechanism to go to the right view.

				<ul class="nav nav-pills pull-right">
						ng-class="{active: page() == '/'}">
							<a href="#/">Home</a>
					<li ng-class="{active: page() == '/about'}">
						<a href="#/about">About</a>
						OSGi enRoute Example Application

A simple alert area. This allows us to report errors like communication errors. We add a close button to remove the alerts one by one.

					ng-repeat		="alert in alerts" 
					class			="alert alert-{{alert.type || 'alert'}} alert-dismissible">
						class="close pull-right">
						<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>

This is the Angular magic. This element will be replaced by the content (htm/main/home.htm or htm/main/about.htm) depending on the URL.

	  		<div ng-view>

A simple footer. If you set the Bundle-Vendor header in the bnd.bnd file then it will be used here. Otherwise it will use the generic Company title. Also note how we can use the build time stamp. You can use any bnd Macro.

			<div class="footer">
				<p>&copy; ${def;Bundle-Vendor;Company} ${tstamp;YYYY}</p>

This is where the magic happens for Javascript web resources. We include any resource that ends with .js that has been required by the bundle. At the end, also the content of the web directory in the bundle is appended.

		<script src="/osgi.enroute.webresource/${bsn}/${Bundle-Version}/*.js"></script>


To replace the bnd macros with their value we must tell bnd to pre-process the resource. We therefore need to create a bnd.bnd file:

application $ vi bnd.bnd
// Add content

This requires the following line in the bnd.bnd file:

-includeresource: \

The Views

The app has two views. They are stored in src/main/resources/static/osgi.enroute.examples.eval/main/htm.

application $ mkdir -p src/main/resources/static/osgi.enroute.examples.eval/main/htm


The home.htm is the main view.

application $ vi src/main/resources/static/osgi.enroute.examples.eval/htm/main/home.htm
// add the content

It looks like:


	<p>Enter an arithmetic expression like <code>sin(pi)</code>

The input field for the expression.

	   		<span class="input-group-btn">
	        <button class="btn btn-default" type="button" ng-click=eval(expression)>
	<div style="min-height:500px">

Prints all the answers

		<div ng-repeat="i in answers track by $index">


A simple about box.

application $ vi src/main/resources/static/osgi.enroute.examples.eval/htm/main/about.htm
// add the content
	<p>This is a demo application to demonstrate how to build OSGi enRoute Applications with 

The Javascript Code

The Javascript code must be placed in a directory in the src/resources/main/web. Any content in this directory is treated as a web resource and automatically included in the index.html page. The name of the files is irrelevant but the extension is since the selection in the index.html file takes place on extension.

application $ mkdir -p src/main/resources/web


application $ vi src/main/resources/web/main.js
// add the content

We create a Javascript ‘module’. This is an anonymous function.

'use strict';
(function() {

We now create an Angular module. The name of the module must match the ng-app attribute in the index.html file.

	var MODULE = 
		angular.module('osgi.enroute.examples.eval', [ 'ngRoute' ] );

The next section configures the routing table. The routing table matches a pattern in the URL and then selects the content of the ng-view element in the index.html page.

	MODULE.config( function($routeProvider) {
		$routeProvider.when('/', { controller: mainProvider, templateUrl: '/osgi.enroute.examples.eval/htm/main/home.htm'});
		$routeProvider.when('/about', { templateUrl: '/osgi.enroute.examples.eval/htm/main/about.htm'});

Initialize when the module is ready to run. We add the data structure to hold the alerts and provide access to the current page name for the nav bar. function($rootScope, $location) {
		$rootScope.alerts = [];
		$rootScope.closeAlert = function(index) {
			$rootScope.alerts.splice(index, 1);
		$ = function() {
			return $location.path();

A list of answers, i.e. the history.

	var answers = [ ];

This controller is called when the URL ends in #home. We set the history and add an eval method. This method will call the server. If we receive an answer, we add it to the history. Angular will then make sure it gets printed.

	var mainProvider = function($scope, $http) {
		$scope.eval = function(expr) {
						function(d) {
							answers.push( + " = " + expr);
						}, function(d) {
							$scope.alerts.push( { type: 'danger', msg: 'Failed with ['+ d.status + '] '+ d.statusText });


You should add the application module to the parent pom and then build the bundle:

application $ vi ../pom.xml
// add application module
application $ mvn install


To run this application we need to add this bundle to the bndrun file. This requires the following steps in the bndrun project.

application $ cd ../bndrun
bndrun $ vi pom.xml
// edit the dependencies section

The dependencies section should look like:


Then add the new -runrequires for the application:

bndrun $ vi osgi.enroute.examples.eval.bndrun
// Update -runrequires
-runrequires: \

Then run mvn install to get the new list of -runbundles. This will give us a much larger list because we now get all the web support:

bndrun $ mvn install
-runbundles: \

Add the new -runbundles to the bndrun file and run mvn install again.

bndrun $ vi osgi.enroute.examples.eval.bndrun
// Update the -runbundles
bndrun $ mvn install
bndrun $ java -jar osgi.enroute.examples.eval.jar
2016-10-04 11:44:50.960:INFO::main: Logging initialized @673ms
2016-10-04 11:44:50.989:WARN:oejs.session:main: Sessions created by this manager are immortal (default maxInactiveInterval={})0
2016-10-04 11:44:50.992:INFO:oejs.Server:main: jetty-9.3.8.v20160314
2016-10-04 11:44:51.029:INFO:oejsh.ContextHandler:main: Started o.e.j.s.ServletContextHandler@1757cd72{/,null,AVAILABLE}
2016-10-04 11:44:51.030:INFO:oejs.Server:main: Started @742ms
2016-10-04 11:44:51.049:INFO:oejs.ServerConnector:main: Started ServerConnector@68c72235{HTTP/1.1,[http/1.1]}{}
             ____             _       
   ___ _ __ |  _ \ ___  _   _| |_ ___ 
  / _ \ '_ \| |_) / _ \| | | | __/ _ \
 |  __/ | | |  _ < (_) | |_| | |_  __/
  \___|_| |_|_| \_\___/ \__,_|\__\___|


The output from Gogo and the log can be garbled.

We can now open a browser on http://localhost:8080/osgi.enroute.examples.eval

What we get is the home page of our application, with a text entry field to try out the expression evaluator!


If you go to the root of the webserver you get an empty page. It is possible to get the active web application(s) listed here. For this, we need to add some metadata to the application project.

bndrun $ cd ../application
application $ vi bnd.bnd
// Add the following content
Bundle-Description: \
	Provides a Web based application to evaluate the evaluator
EnRoute-Application: 	osgi.enroute.examples.eval

-includeresource: \

If we now build and then run again then we should see the application listed on the home page.

application $ mvn install
application $ cd ../bndrun
bndrun $ mvn install
bndrun $ java -jar osgi.enroute.examples.eval.jar

This list is created by the web server if nothing else is registered at the root. This list looks like:

OSGi enRoute Index

Click on the link and you should get the application in the browser.

We can now open a browser on http://localhost:8080 to try this out.

Prev Next