bajaux

The bajaux framework enables developers to create widgets for Niagara using HTML5.

From Niagara AX to Niagara 4.

It's important to note, this is not a JavaScript clone of the view framework used in Workbench (i.e. bajaux Widget !== BWidget). The intention was to build a new and improved widget framework for JavaScript that uses all of the good ideas from the original Java view design.

Why bajaux?

In Niagara AX, the three main divisions of UI are...

  • Workbench: Java.
  • Hx: Java, HTML, JS and CSS.
  • Mobile: HTML, JS and CSS.

This means...

  • Each UI technology requires a developer skill set.
  • Work has to be repeated in each technology.
  • Different technologies have different User experiences. For example, typically Hx UI is less sophisticated than Workbench UI.
  • Typically Workbench gets the new funky features and Hx is left to play catch up.

The biggest problem here is the repetition of work. It would be great if we could just create a widget once and have it render in each UI technology. That way when a customer asks for an enhancement, we can do this work once and have it available in every medium without having to duplicate work.

With bajaux this is precisely what we get. We can write some UI once. It'll then render in Workbench and Hx. Beyond Niagara 4.0, this will also render in Mobile.

Not only will our widget render in Workbench, it will also integrate into the given environment. For instance, commands defined for any widgets will render in Workbench's Java tool bar. Also users can drag and drop from Workbench's nav tree onto a bajaux widget!

In Niagara AX, bajaui splits up the UI behavior into a number of classes. Here are some of the core ones...

  • BWidget: has properties but nothing can be loaded. This is the simplest UI element in bajaui.
  • BWbFieldEditor: a small field editor used on a Property Sheet.
  • BWbView: a full screen view that can have commands associated with it.

Overview

Widget

In bajaux, we just have Widget. A Widget contains all of the above behaviors into one UI class. This is done for simplicity.

A Widget has the following behaviors...

  • Initialization: a Widget can dynamically create pieces of UI and attach them to the DOM.
  • Activation: a Widget can be activated/deactivated.
  • Destroy: a Widget can release any resources it holds when removed from the DOM.
  • Enabling: a Widget can be enabled/disabled.
  • Visibility: a Widget can be made visible/invisible.
  • Modification: a Widget can potentially have its contents modified.
  • Loaded: a value (BajaScript or otherwise) can be loaded into a Widget.
  • Read: a value can be read from a Widget.
  • Saved: if a Widget has been modified, its changes can be saved.
  • Validated: a Widget can validate changes entered by the user.
  • Display Name: a Widget has a display name.
  • Description: a Widget has a description.
  • Icon: a Widget has an icon.
  • Commands: a Widget can have many commands added to it (more on this below).

If you're familiar with Niagara AX UI programming then hopefully the above concepts should be familiar to you.

####Form Factors

In Niagara AX...

  • A View is something that occupies most of the UI area in Workbench.
  • A Field Editor is quite small and appears alongside other Field Editors on a Property Sheet.

However, these extend from different classes and inherit different sets of functionality. In bajaux, we've separated out the form factor from the capabilities of the Widget. The form factor describes the kind of element in which a Widget may be instantiated, not the behavior of that Widget. This allows Widgets to alter their behavior and layout to function appropriately, whether taking up the full browser window or just one row in a property sheet.

For instance, in bajaux...

  • An AX View is a Widget + Max Form Factor.
  • An AX Field Editor is a Widget + Mini Form Factor.
  • For Widgets that appear on a dashboard (there is no equivalent in Niagara AX), or in a modal dialog, there is the Compact Form Factor.

Subscription

One of the nice features of Niagara AX is BWbComponentView. When extending this Java class, any subclasses automatically get Component subscription/unsubscription handled for them.

The bajaux framework has the same concept. A Widget can be made into a Subscriber Widget by a special Subscriber MixIn. A Subscriber MixIn will use BajaScript to automatically ensure a Component is subscribed and ready before it's loaded. It will also ensure any Components are unsubscribed when the UI is destroyed.

Command

A Command is something that can be invoked by a user and is associated with a Widget.

A Command can do the following...

  • Invoked: a Command can be invoked by a user.
  • Name: a Command can have a unique name.
  • Display name: a Command can have a locale dependent display name.
  • Enabled: a Command can be enabled/disabled.
  • Flags: a Command can have some flags to indicate whether it should appear in a menu bar, tool bar or both.

As well as a standard Command, there's also ToggleCommand. A ToggleCommand can have its state toggled. Think of it like a tick box that can be turned on or off.

A number of Command and ToggleCommand objects can be arranged into a tree like structure by use of a CommandGroup. This is useful when being presented with lots of UI.

Asynchronous Programming

Any modern JavaScript framework has to deal with asynchronous behavior. The bajaux framework has been designed with this in mind from the ground up. Therefore, most of the callbacks that can be overridden can optionally return a promise that can perform an asynchronous operation before resolving. For instance, let's say some extra network calls have to be made during a widget's loading process. The widget's doLoad method can return a promise. The promise can then be resolved when the network calls have completed.

Responsive Layout

Need to layout a bajaux Widget differently for mobile versus desktop? The responsive mixin can be applied to a Widget so different styles can be used depending on its current width and height.

Getting Started

Click here to get started!

Also try opening the docDeveloper palette in Niagara to start working with our sample bajaux playground components!