Data Binding with Oracle JET Components in AngularJS

Oracle JET provides a library of data visualizations.

Here you see two of the Oracle JET components, the first is a DVT (Data Visual Toolkit) component and the second a form component:

  • ojStatusMeterGauge. Powerful and cool looking. Here you see it in its circular orientation.

  • ojInputNumber. Handy to have a spinner built in, with a max, min, and step size.

What's especially interesting is that the two are in an AngularJS application, i.e., I had to avoid the convenience of Knockout two-way databindings, since I am not using Knockout in this scenario. Despite that, the two are synchronized. When the gauge value changes, the input updates and vice versa.

Also notice the various error validation and messages that the components provide.

How to achieve the above without using Knockout bindings, e.g., in an AngularJS application?

Here's my view:

<div id="gauge"></div>
<p></p>
Value: <input id="gaugeInput"/> 

And here's my controller. Notice that I'm not using $scope at all. I could incorporate that too, so that an actual property changes, instead of simply, as right now, the two components being synchronized without any actual property changing.

.controller('View1Ctrl', function () {
    $('#gaugeInput').ojInputNumber({
        min: 0, 
        max: 100, 
        value: 50,
        step: 10, 
        readonly: true,
        optionChange: function (e, data) {
            if (data.option == "value") {
                $("#gauge").ojStatusMeterGauge({
                    value: 63, min: 0, max: 100, 
                    thresholds: [{min: 33}, {max: 67}, {}],
                });
                $("#gauge").ojStatusMeterGauge('option', 'value', data['value']);
                $("#gauge").ojStatusMeterGauge('refresh');
                console.log('New value from input:' + data['value']);
            }
        }
    });
    $('#gauge').ojStatusMeterGauge({
        title: "Value: 20<br>Reference Lines: Low 33, Medium 67, High 100",
        min: 0, 
        max: 100, 
        value: 50,  
        orientation: 'circular',
        metricLabel: {rendered: 'on'},
        plotArea: {rendered: 'on'},
        referenceLines: [{value: 33, color:'red'}, {value: 67, color:'green'}],
        indicatorSize: 0.5, 
        readOnly: false,
        optionChange: function (e, data) {
            if (data.option == "value") {
                $("#gaugeInput").attr('value', data['value']);
                console.log('New value from gauge:' + data['value']);
            }
        }
    });
})

Within the "optionChange" you'd be able to set some kind of model property and then refer to it in your view.

Comments:

Post a Comment:
  • HTML Syntax: NOT allowed
About

Geertjan Wielenga (@geertjanw) is a Principal Product Manager in the Oracle Developer Tools group living & working in Amsterdam. He is a Java technology enthusiast, evangelist, trainer, speaker, and writer. He blogs here daily.

The focus of this blog is mostly on NetBeans (a development tool primarily for Java programmers), with an occasional reference to NetBeans, and sometimes diverging to topics relating to NetBeans. And then there are days when NetBeans is mentioned, just for a change.

Search

Archives
« January 2017
SunMonTueWedThuFriSat
1
2
3
4
5
6
7
8
9
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
    
       
Today