Envas Part 1 - Introduction

We designed Envas to enable the creation of Niagara-integrated web applications. Its first versions were written for Niagara AX, even before Tridium introduced Bajascript as official support for working with the HTML frontend. With the arrival of Niagara N4, we thought that N4 widgets in our projects would replace Envas. However, many unique Envas features are so important to us that we are continuing to develop and actively use it in our projects.

What technology does Envas use?

The main component of the Envas framework is the open-source project Vaadin. We take advantage of the fact that Niagara has an integrated webserver (in N4 it is Jetty) that can work with web servlets. Envas, therefore, wraps Vaadin servlet technology into Niagara, allowing direct access to the Niagara API. During many years of development, we have integrated into the Envas framework, besides Vaadin HTML user interface, also other components such as charts, reporting, access to relational databases, JSON API, message bus and some others.

Differences Between Envas and Niagara Web Technologies

In Niagara 4, the user interface is moving in a new direction with a heavy focus on HTML5 applications and open web technologies - JavaScript, HTML5 and CSS. Unfortunately, developing in HTML5 and JavaScript is a different process from the Java-based process for developing in the Niagara Framework.

Envas preserves the know-how you gained when working with the Niagara framework. You continue using Java and Niagara framework when creating web applications. Writing an application in the Envas framework is very similar to working in the Swing Framework.

To demonstrate the fundamental differences in the technology, we give a simple case - an input field showing the current property value.

Niagara4 Web Toolkit (example from the docDevelopers module): The widget is written in JavaScript, the events are handled in JavaScript callbacks. The code is running in the web browser.

// JavaScript

MyFirstWidget.prototype.doInitialize = function (jq) {
    jq.html('<input type="text" value="value goes here" />');
};

MyFirstWidget.prototype.doLoad = function (ramp) {
    var jq = this.jq().find('input');

    function update() {
        jq.val(ramp.getOut().getValueDisplay());
    }

    this.getSubscriber().attach("changed", update);
    update();
};

Envas. The widget is the Java object. Because the code is running in the station's JVM, the NvBoundProperty object can subscribe for the component events via the standard Niagara subscription API. Envas generates the HTML5 element on your web page and manages for you the subscription, transport and updates of the changed values in the browser (push).

// Java

VerticalLayout    layout = new VerticalLayout();
TextField      textField = new TextField();
BOrd                 ord = BOrd.make("station:|slot:/Drivers/Components/Ramp/out");
NvBoundProperty property = new NvBoundProperty(ord);

boundProperty.bind(textField);
layout.addComponent(textField);

So where can we use the Envas framework?

The main areas for using the Envas framework are complex applications running in the context of Niagara. An example could be energy management, tenant billing, statistical data analysis or just widgets replacing the standard Niagara objects such as customized Alarm Console. The Envas applications are deployed as Niagara modules.

In the next blog, I will show you how to install Envas and how to start writing your first application - Hello World. Stay tuned.

CATEGORIES