Procedural and Declarative JavaScript

Two distinct types of JavaScript exist, JavaScript that is declarative and JavaScript that is procedural. Declarative code acts to set up or declare shared or public resources such as global variables, properties, and functions that can be called later using the public handles from procedural code. Procedural code acts immediately on shared or public, or local or private resources.

The rule operates equally to the sets of code, but declarative code is usually associated with OnStartUp() events or events in hidden objects that the user does not typically see.

Changes to procedural code require that the event they are declared in be fired before the change is observed. Procedural code changes occur immediately in real time. The code associated with the OnClick() event of a button can be changed. In instrumented.bqy, click the button to run with the new code and observe the behavior.

Changes to declarative code also require the event they are declared in be fired before the change is observed. Causing an event that uses the results of a declaration is not the same as causing the event that creates the declaration. Consequently, changes to declarations require re-declaration before calls on the re-declarations can display the changes made in Dashboard Architect.

Consider example 1:

 

MyEIS.Button_X

Instrumented.bqy

Dashboard Architect

eval(<QIQDebug_call>)

ListBox1.RemoveAll()

ListBox1.Add(“select a Country”)

ListBox1.Add(“Australia”)

ListBox1.Add(“Britain”)

ListBox1.Add(“France”)

ListBox1.Add(“Germany”)

ListBox1.Add(“United States”)

When the user clicks Button_X on the MyEIS section, the Debug Server is called and returns the JavaScript held by Dashboard Architect for the OnClick() event of Button_X.

As soon as the code is changed, the button can be clicked again. The Debug Server is called and finds the new code. It returns the code to instrumented.bqy. The code is passed to the JavaScript eval() function. The new behavior is immediately observed.

An example is illustrated in the section called Query EIS, in the Arch_tut.bqy that is provided as a sample with the Dashboard Architect installation.

Consider example 2:

 

OnStartUp

Instrumented.bqy

Dashboard Architect

eval(<QIQDebug_call>)

var eis=ActiveDocument.Sections[“MyEIS”]

eis.Shapes[“Button_X”].OnClick()

 

MyEIS.Button_X

Instrumented.bqy

Dashboard Architect

eval(<QIQDebug_call>)

function fill_ListBox(lbx){

lbx.RemoveAll()

lbx.Add(“select a Country”)

lbx.Add(“Australia”)

lbx.Add(“Britain”)

lbx.Add(“France”)

lbx.Add(“Germany”)

lbx.Add(“United States”)

}

ActiveDocument.fill_ListBox=fill_ListBox

 MyEIS.Button_Y

Instrumented.bqy

Dashboard Architect

eval(<QIQDebug_call>)

ActiveDocument.fill_ListBox(ListBox1)

  1. Upon start up, the document calls the Debug Server for code. For example, the OnClick() event of Button_X is caused, creating a function called fill_ListBox available as a property of ActiveDocument.

  2. When a user clicks Button_Y on the MyEIS section, the fill_ListBox function is called and identical behavior occurs as in example 1.

  3. A change is made to the JavaScript in the OnClick() event of Button_X.

  4. Button_Y is pressed.

  5. Unlike example 1, the code is executed as if no changes were made, when in fact Button_X was just changed. The reason is because unless the OnClick() event of Button_X (or the OnStartUp() event of the document) is caused, the changes to the code of Button_X are not sent to instrumented.bqy. Therefore, Button_X must be clicked first and then Button_Y for the new code to be effectual.

The Fire Current Event button (Fire Current Event) is provided for the purpose of executing the event associated with the JavaScript currently in view.

It is vital to remember the distinction between simple procedural code (statements that perform operations directly as in the first example) and declarative code (code that creates functions to be called and used later) as in the second example.

It is highly recommended to open the Console window, when Fire Current Event button is clicked so errors are seen and reported. If an error occurs, the cog associated with the failed JavaScript event handler, changes to red (Red Code Requests button) in the Code Requests pane of the output window.