User Interfaces from AX to Niagara 4

Introduction

In Niagara AX, the primary user interface is rendered in Java using our own bajaui framework. In the browser, this is rendered using a Java Applet. As support for the Java Applet is declining, the Niagara framework needs to adapt accordingly. That’s why we’re transitioning our User Interface from Java to HTML5. HTML5 doesn’t require any browser plug-ins and will work with any modern web browser on a variety of devices.

What’s New?

Because Niagara AX has been so successful, there are a lot of User Interfaces written in Java. In order to make the transition from Java to HTML5 as pain free as possible for our customers, a number of new technologies have been added to Niagara 4…

We have still retained a lot of the other web technologies added in previous versions. This includes Hx, oBIX and Apache Velocity.

From Niagara 4.0 onwards, we switched from our own home baked Web Server to Jetty. As well as being able to create servlets via BServletView (BHxView) and BWebServlets, you can also inject standard HttpServlets from Niagara Web Archive Modules.

From Niagara AX 3.8 U1 and Niagara 4.2 onwards, you can use WebStart to load your Java UI content. A client still requires Java to be installed but none of the installed web browsers require the Java plug-in.

Script Tags in Niagara 4

When using BajaScript version one in Niagara AX, the following script tag was required for BajaScript to work…

<script type="text/javascript" src="module://bajaScript/com/tridium/bajascript/bs.min.js"></script>

The more complex the web application, the more script tags. This can have some negative effects on you web application…

As more developers transition their UI from Java to HTML5, we need a modular way to manage JavaScript. To solve this problem, we use RequireJS. This is a popular open source way of creating modular JavaScript.

How do I use RequireJS in my web application?

As well as the RequireJS script tag, a special JavaScript configuration object is created and injected into the page by Niagara. So how do you start using this?