Using an Object to Control Elements on Servoy Forms

This is an object-oriented Servoy tutorial on how to use an object to control groups of elements that are on a form. Suppose for example, that you had various labels and buttons that need to be shown depending on the type of record you are on. You could write a function that loops through all the elements on the form, and based on some element naming strategy, perhaps determine which group they belong to, and then use some logic to turn them on or off. On the other hand, since you now know all about objects from the other posts at this site, how about we put the lessons to good use and do something cool?

Right, let’s get started. I’m going to show you three ways to solve the problem using an object. The object will take groups of elements (will just work with labels) and toggle them on or off using a key (also referred to as group). All three of the object-oriented approaches are better than looping through elements using a naming strategy (IMHO), but the last version, as you will see, is simply brilliant, if I do say so myself.

If you want to try this example yourself, simply create three labels on a form called “lbl_001”, “lbl_002” and “lbl_003”. The naming strategy is not important; you can name them whatever you want, just adjust the sample code accordingly. Use some buttons on the form to trigger the code and test the three scenarios.

In the first example, we will simply dip our toe into object-oriented programming waters, and create groups of objects using a key with properties, where each property holds the element name. We do this by creating an ElementGroup constructor function, which has the methods we will need to toggle elements by name from the properties of a key we create. This looks like this:

function ElementGroup(){
 var groupOn = function(key){
  for(var prop in this[key]){
   elements[this[key][prop]].visible = true;
  }
 };
 var groupOff = function(key){
  for(var prop in this[key]){
   elements[this[key][prop]].visible = false;
  } 
 };
        return {
  groupOn: groupOn,
  groupOff: groupOff
 }
}

Okay, that’s simple enough. Now lets create a new object using the ElementGroup constructor function, and add to it our element names as properties in two distinct groups. You can call the groups  and properties anything you want. I called my groups “groupA” and “groupB”, and my properties “a” and “b” (lame, I know). Next, call the object’s groupOff function and pass in the group name you want to turn off. You should see the labels in that group disappear from the form. After that, you guessed it, you can toggle them back on by calling groupOn. That’s it! How easy was that?

var oElements = new ElementGroup();

oElements.groupA = {
 a: "lbl_001",
 b: "lbl_003"
};
oElements.groupB = {
 a: "lbl_002",
 b: "lbl_003"
}
// Test using props
oElements.groupOff("groupA");
oElements.groupOn("groupA");

I can see your not convinced. I hear you, you don’t want to waste time typing property names; time is money. Got it! Forget the properties. Let’s do it again, but this time using an array to hold the names of the elements in each group.

function ElementGroup(){
 var groupOn = function(key){
  var iSize = this[key].length;
  for (var i = 0; i < iSize; i++) {
   elements[this[key][i]].visible = true;
  }
 };
 var groupOff = function(key){
  var iSize = this[key].length;
  for (var i = 0; i < iSize; i++) {
   elements[this[key][i]].visible = false;
  }
 };
 return {
  groupOn : groupOn,
  groupOff : groupOff,
 }
}

Here is how we would use it:

var oElements = new ElementGroup();

oElements.groupC = [
 "lbl_001",
 "lbl_003"
];
oElements.groupD = [
 "lbl_002",
 "lbl_003"
];
// Test using element names in an array
oElements.groupOff("groupC");
oElements.groupOn("groupC");

Your still not convinced? Your tough to please! Okay, here is the final way to do it. Servoy elements are objects themselves, so why should we have to waste time typing element names? Let’s use Servoy auto-completion to type “element.lbl_oo1”. Is that lazy enough for you? Okay, let’s do it that way, since you insist.

function ElementGroup(){
 var groupOn = function(key){
  var iSize = this[key].length;
  for (var i = 0; i < iSize; i++) {
   elements[this[key][i].getName()].visible = true;
  }
 };
 var groupOff = function(key){
  var iSize = this[key].length;
  for (var i = 0; i < iSize; i++) {
   elements[this[key][i].getName()].visible = false;
  }
 };
 return {
  groupOn: groupOn,
  groupOff: groupOff,
 }
}

Here is how we would use it:

var oElements = new ElementGroup();

oElements.groupC = [
 elements.lbl_001,
 elements.lbl_003
];
oElements.groupD = [
 elements.lbl_002,
 elements.lbl_003
];
// Test using elements in an array
oElements.groupOff("groupC");
oElements.groupOn("groupC");

Did you fall off your chair by accident? I know, cool, right?

Well, that’s it, my preferred way of handling grouped elements on a Servoy form. It’s super simple to use, perfect for the lazy typist, easy to maintain and extend, and elegant. You can add as many groups of elements as you want with as many elements as you want in each group. You can even modify the constructor function to handle sub-groupings, like “groupA” that turns on “subGroup1”, “subGroup2” and “subGroup4”, all with one function call. You can even modify the constructor to accept a form name so it can be a utility method accessible from all modules. You can easily extend the constructor so it does more than just toggle things on or off. How about moving a panel of elements from one area on the form to another, when other panels are hidden? What about enabling, disabling buttons, or loading tabs and removing tabs? What? You didn’t think I was going to put icing on the cake, did you? I have to keep a few tricks up my sleeve; besides, you need the practice.

So there you have it. Elegant, efficient, maintainable and extendable. Object-oriented programming is sexy! Now you know why I wrote Servoy tutorial after Servoy tutorial about object-oriented programming; you need to know this stuff. Once you work with objects, you’ll never go back to “function spaghetti code” again. What are you waiting for?