Avoid the Big Bang: Preventing Collisions with Self-Contained Controls

Blog



Avoid the Big Bang: Preventing Collisions with Self-Contained Controls

JavaScript functions for the FormView, ViewBox, and ControlBar can be defined in several locations. These locations include the UX Component level, the Control level, and the Object level. Functions defined at the UX Component or Control level are created in the global JavaScript namespace. This means the functions can be referenced anywhere in your entire app. However, this comes with a caveat: multiple functions defined at the Component or Control level with the same name will overwrite each other. To understand why this happens, we need to look at how the creation of functions are handled in JavaScript.

computerCrash2

When you create a function in JavaScript, a variable is created with the name of the function and is assigned the function. Defining a function using the function keyword is the same as declaring a variable and assigning it a function. For example, the following statements both create a function named 'foo':
function foo () {
};

var foo = function () {
};

In essence, when you create a JavaScript function, a variable is created with the function's name and is assigned a function object. As with any other variable in JavaScript, the function variable can be reassigned to any other value, including another function, object, or value. The following is perfectly valid JavaScript:
function foo () {
};

alert("foo is a " + typeof(foo));

foo = 12

alert("foo is a " + typeof(foo));

If you run this code in a web browser, you will see two alerts:
selfContainedCtrls1 selfContainedCtrls2

 

At the beginning of the script, 'foo' is declared as a function. However, when 'foo' is assigned the value 12, it becomes a number and the function 'foo' no longer exists.

Defining JavaScript at the Object Level


When JavaScript is defined at the Control level, it is stored in the Control's definition. If you copy the Control between components, the JavaScript will also be copied. However, since functions declared at the Control level are stored in the global JavaScript namespace, it's easy to accidentally create two functions in two Controls in a component that have the same name. In Alpha Anywhere v4.3, a third option for defining JavaScript has been added that allows you to defined functions at the Object level: "This object".

selfContainedCtrls5

JavaScript defined using "This object" is created as methods that are called on the control. For example,
var cb = {dialog.object}.getControl('CONTROLBAR1');
cb.foo();

Because functions are created as methods on the object, you do not need to worry about function name collisions when multiple Controls or Components are loaded on the same page.

Tips for Preventing Function Name Collisions at the Component Level


For the ContorlBar, FormView, and ViewBox control, creating functions using "This object" prevents function name collisions. For JavaScript functions that need to be declared at the Component or Control level, however, collisions can still occur. You can mitigate function name collisions, however, by adding functions to the {dialog.object} JavaScript object or directly to the object for other Controls in the Component.

You can extend the {dialog.object} with your own functions and properties. Be careful, however, that you don't accidentally overwrite an existing property! The easiest way to do this is to create your own object in the {dialog.object} object that contains all of your functions. For example,
{dialog.object}._myMethods = {};
{dialog.object}._myMethods.foo = function () {
alert("This is foo");
};

You can do something similar with other Controls by getting an pointer to the Control and adding your own methods:
var listObj = {dialog.object}.getControl("MY_LIST_CONTROL");

listObj._myMethods = {};

listObj._myMethods.foo = function () {
alert("This is foo in my List");
};

Note that only some types of Controls will have an object that you can extend with your own methods. Basic control types, such as Text Boxes, Checkboxes, and Radio Buttons do not have an object you can access using {dialog.object}.getControl(). The Window and Panel container Controls have objects, but they are retrieved using different methods. An object to a window can be retrieved with the {dialog.object}.getWindow() method. For Panels, use the {dialog.object}.getPanel() or {dialog.object}.getPanelObject() methods.

To learn more about using This object to define JavaScript functions and creating self-contained controls, check out the video below:

Defining Javasript in a ControlBar - Understanding the 'This Object' Option

Click here to download the component in the video

To learn more about Client Side JavaScript in UX Components, click here.
Improving Connected Cars Through App Security (InfoGraphic)
Alpha Anywhere Version 4.3 is available now

About Author

Sarah Mitchell
Sarah Mitchell

Technical Writer and Documentation Expert at Alpha Software

Related Posts
How to Choose the Right Mobile Development Tools for Midsize Enterprises
How to Choose the Right Mobile Development Tools for Midsize Enterprises
New Search Rules: Google is Rolling Out Mobile-First Indexing
New Search Rules: Google is Rolling Out Mobile-First Indexing
Updating Mobile Apps Just Got WAY Easier
Updating Mobile Apps Just Got WAY Easier

Comment

Subscribe To Blog

Subscribe to Email Updates