Enable the calculator dizmo for dizmoLive

In this blog post, we’ll show how you to update our classic Calculator dizmo to work with dizmoLive. Currently, if you share the Calculator with dizmoLive, the receiver on target side does not update its display when calculations are done on the source side. Since dizmoLive only transports data tree updates, we have to modify the Calculator dizmo to take that into account.

Currently, the Calculator dizmo reacts to clicks on the digit and operator buttons. It computes the result based on these and then updates its display.

Model-View-Controller

To enable a dizmo for dizmoLive, the basic idea is to decouple the view (representation) of the data from the data itself. In the case of Calculator, the data is the current result of a calculation. If you decouple the view from the data, the MVC (model-view-controller) pattern is usually used. We have covered that topic in older blog posts, see Make your dizmos ready for dizmoLive using the Model-View-Controller pattern and How to write a to-do dizmo with backbone.js.

Dizmos actually follow the MV* pattern, since they do not implement a controller. A view is usually a representation of data and you would update the view manually after you update the data or a button is clicked.

But what if the data changes without a user interaction, like in dizmoLive? Or what if you could make sure that every time the data changes, the view is automatically updated? That way, if you change the data, you don’t have to take care of updating the view manually.

Let’s see how the Calculator dizmo currently implements view updates (View the Calculator dizmo on Github: Main.js). Look for the clear function:

clear: function() {
     this.x="0";
     this.displayX();
}

Here, the variable ‘x’ is updated with ‘0’ when the clear button is pressed, and then the function displayX is called, to update the display of Calculator with the new value.

In the MV* concept, the view should update itself as soon as the data has changed. First, we need to move the main variables of Calculator to the data tree, instead of just keeping them in memory. The variable ‘x’ is used to hold the result of the current calculation. Let’s rewrite the clear function:

clear: function() {
     dizmo.privateStorage.setProperty("state/x","0");
}

This will store the current value of x in the private data tree. This value is automatically replicated to the target if Calculator is shared via dizmoLive.

Now, we want to get rid of the explicit call to action of the the displayX function, which updates the calculator display based on the x variable. For that, subscriptions come into play.

Subscriptions

With subscriptions, as soon data in the storage is changed, a function is called upon (as opposed to a procedure that checks continuously if the data has changed). The dizmo API supports subscriptions. In the Calculator dizmo, we’ll want to update its display as soon as we detect a value change of the state/x key.

To do that, update the initEvents function in Main.js and add the code for the subscription:

dizmo.privateStorage.subscribeToProperty("state/x",function(path,new_val,old_val){
  // when x changes, update the display
  that.displayX(new_val);
});

Now, as soon as the value of the key state/x* changes, the displayX function is called.

The displayX function also needs to be modified so that it stores any updates of x back into the data tree.

displayX: function (x) {
  jQuery('#readout').html(x);
  this.dizmo.my.publish(x);
  if (x === 'NaN') x = 0;
  if (x === 'Infinity') x = 0;
  dizmo.privateStorage.setProperty("state/x",x);
  this.checkSize();
 },

We now have decoupled the view and the data from each other. Which means, when sharing the Calculator dizmo through dizmoLive, pressing the clear button on the calculator saves the data, which is then replicated to the dizmoLive partner. And there we have it, the subscription is called and updates the remote Calculator display!

Conclusion

Now, what’s left to do is to move all the Calculator variables to the data tree so that the dizmo is replicable at all times. For example, you can start a calculation on the source side of a dizmoLive connection and then continue on the target side.

You can find the full source code of the updated Calculator dizmo on Github.