The JavaScript Editor

The QIE JavaScript editor includes several advanced features which simplify the scripting process and help to prevent scripting errors. Syntax validation, auto complete and script formatting features are controlled by the File, Edit and View menu options. Other features discussed below are built into QIE and require no configuration.

File Menu

The file menu includes options for syntax validation. The QIE JavaScript editor validates scripts in real-time as they are edited. See Syntax Validation below.

Item	Description
Auto Validate Syntax	When enabled this option validates JavaScript syntax in real-time.
Validate Script Now	This option is used to validate JavaScript on demand when Auto Validate Syntax is disabled.
Import	Import a script from a text file.
Export	Export this script to a text file.

Edit Menu

The edit menu contains standard edit functions. The table below displays the hot key combinations.

Item	Hot Key
Undo	Ctrl + Z
Redo	Ctrl + Y
Select All	Ctrl + A
Delete	Delete

Indent

Auto-Indent automates formatting of scripts for readability and debugging. It is automatic while the script is being created. The hot key or menu options can be used to reformat an existing script.

Item	Hot Key
Indent	Tab
Un-Indent	Shft + Tab
Auto Indent	Shft + Alt + I

Line Commands

The table below details the commands and hot key combinations for line manipulation in a script.

Item	Hot Key
Copy Lines	Alt + Shft + Down / Alt + Shft + Up
Duplicate Selection	Ctrl + shft + D
Move lines	Alt + Down / Alt + Up
Multi-Cursor Up/Down	Ctrl + Alt + Down / Ctrl + Alt + Up
Remove line	Ctrl + D
Remove to Line End	ALT + Delete
Remove to Line Start	Alt + Backspace
Toggle Block Comment	CTRL + Shft +/
Toggle comment line	Ctrl + /

Quote Commands

The table below details commands under Edit → Quote Commands for converting a text selection to or from a JavaScript string literal. Unquote Selection reverses whichever quote variant was applied.

Item	Behavior
Backtick Template Literal Selection	Wraps the selection in backticks (`…`); newlines are preserved inside the literal.
Double Quote Selection (\n)	Wraps each line in "…" and joins them with \n" +\n", producing a multi-line JS string concatenation with LF endings.
Double Quote Selection (\r\n)	Same as above but with \r\n line endings.
Single Quote Selection (\n)	Same as Double Quote (\n) but with single quotes.
Single Quote Selection (\r\n)	Same as Double Quote (\r\n) but with single quotes.
Unquote Selection	Reverses any of the above: removes surrounding quotes/backticks and unescapes the line-ending escape sequences.

Word Commands

The table below details commands and hot key combinations for word manipulation in a script.

Item	Hot Key
Remove word left	(Ctrl + backspace)
Remove word right	(ctrl + delete)
Select word left	(ctrl + shft + left)
Select word right	(ctrl + shft + right)
To lowercase	(ctrl + shft + U)
To uppercase	(ctrl + u)

Find

Item	Hot Key
Find	Ctrl + F
Replace	Ctrl + R
Find Next	F3
Find Previous	Shft + F3

View Menu

Option	Hot Key		Description
Format Code	Ctrl +Alt + F	Reformats XML or JSON code for ease of use.
View Formatted XML	F5	Opens a browser window with the formatted XML.
View Formatted CSV	Shft + F5	Opens a .csv file in a table format.
Node Path Lookup	F2	Opens the Node Path Lookup dialog. See Node Path Lookup Dialog.
Node Tag Lookup	Shft + F2	Opens the Node Tag Lookup dialog. See Node Tag Lookup Dialog.
Regex Evaluator	F4	Opens the Regex Evaluator dialog. See Regex Evaluator Dialog.
View Node Path	Ctrl + Alt +V
Font Size	Alt ++, Alt +-, Alt+0	Increase, decrease or reset font size.
Go To	Ctrl + E, Ctrl + G, Ctrl+P, Ctrl +B	Go to error line, line number, matching bracket or declaration.
WordWrap	CB	Checkbox to turn on word wrap.
Show Whitespace	CB	Checkbox to turn on Show Whitespace
Auto Complete	CB	Enables auto complete.
Live AutoComplete	CB	Enables live auto complete.

Syntax Highlighting

Instead of simply displaying the script in plain text, QIE automatically highlights the script to help visually differentiate the different components. The table below details the syntax highlighting.

Color Description

Purple Purple is used to identify predefined QIE objects. The core objects in QIE are source,

message, messageCache, and channelCache.

Yellow Yellow is used for the functions that can be called or used on the QIE and JavaScript objects

(e.g. source.checkNodeExists('EVN-2'))

Light Blue Light Blue is used for the JavaScript var keyword.

Dark Blue Dark Blue is used to identify variables, JavaScript keywords, and imported Java objects like

StringUtils.

Green Green is used for Strings, and String parameter values.

Bracket Match Highlighting

The QIE JavaScript editor automatically highlights matching brackets. When the cursor is placed next to an opening or closing bracket in the editor, the corresponding matching bracket is be highlighted in blue. This makes it easy to determine if a bracket in the script is missing or an extra bracket has been entered.

Syntax Validation

Because the best time to catch a script error is before it occurs, the QIE JavaScript editor validates scripts in real-time as they are edited. The status of the real-time script validation is displayed in the editor status bar area.

If a syntax error is detected, the associated error message is displayed. Selecting View -> Go to Error or pressing Ctrl+E moves the cursor to the position of the error.

QIE uses a 3^rd party open-source syntax validation library called JSHint. In most situations the default syntax validation options should be used. However, there are some situations where a syntax validation option may need to be manually enabled or disabled. This can be done within a script by using the following syntax anywhere above the first line where the validation error is being reported:

/*jshint {option}:{true or false}*/

The following is a list of the most common JSHint script validation options available in QIE. For a complete list of JSHint options, refer to the JSHint documentation.

Option	Default	Description
bitwise	true	This option prohibits the use of bitwise operators such as ^ (XOR), | (OR) and others. There are two reasons why you would want to enable this option: Since JavaScript does not have integers (only double precision floating-point numbers) the bitwise operators here are very slow. Bitwise operations are very rare in JavaScript programs and very often & is simply a mistyped &&.
curly	true	This option requires you to always put curly braces around blocks in loops and conditionals. JavaScript allows you to omit curly braces when the block consists of only one statement. Generally, unless you are careful, it is safer to require curly braces around all blocks.
eqeqeq	true	This option prohibits the use of == and != in favor of === and !==. The former try to coerce values before comparing them which can lead to some unexpected results. The latter do not do any coercion so they are generally safer. If you would like to learn more about type coercion in JavaScript, Qvera recommends Truth, Equality and JavaScript by Angus Croll.
forin	true	This option requires all 'for in' loops to filter objects' items. The 'for in' statement allows for looping through the names of all of the properties of an object including those inherited throughout the prototype chain. This behavior can lead to unexpected items in your object so it is generally safer to always filter inherited properties out.
immed	true	This option prohibits the use of immediate function invocations without wrapping them in parentheses. Wrapping parentheses assists readers of your code in understanding that the expression is the result of a function, and not the function itself.
latedef	true	This option prohibits the use of a variable before it was defined. JavaScript has function scope only and, in addition to that, all variables are always moved (or hoisted) to the top of the function. This behavior can lead to some very nasty bugs and that's why it is safer to always use variables only after they have been explicitly defined.
newcap	true	This option requires you to capitalize names of constructor functions. Capitalizing functions that are intended to be used with new operator is just a convention that helps programmers to visually distinguish constructor functions from other types of functions to help spot mistakes when using this. When this option flags code, the editor reports Missing 'new' prefix when invoking a constructor. Resolve by adding new before the call, renaming the function to a lowercase initial, or disabling the check with /*jshint newcap:false*/.
noarg	true	This option prohibits the use of arguments.caller and arguments.callee. Both .caller and .callee make quite a few optimizations impossible so they were deprecated in future versions of JavaScript. In fact, EcmaScript 5 forbids the use of arguments.callee in strict mode.
noempty	true	This option warns when you have an empty block in your code. JSLint was originally warning for all empty blocks and it is simply optional.
nonew	true	This option prohibits the use of constructor functions for side-effects.
plusplus	false	This option prohibits the use of unary increment (++) and decrement (--) operators.
regexp	true	This option prohibits the use of unsafe period (.) in regular expressions.
undef	true	This option prohibits the use of explicitly undeclared variables. This option is very useful for spotting leaking and mistyped variables.
strict	false	This option requires all functions to run in EcmaScript 5's strict mode. Strict mode is a way to opt in to a restricted variant of JavaScript. Strict mode eliminates some JavaScript pitfalls that did not cause errors by changing them to produce errors and it fixes mistakes that made it difficult for JavaScript engines to perform certain optimizations.
trailing	true	This option makes it an error to leave a trailing whitespace in your code. Trailing whitespaces can be a source of nasty bugs with multi-line strings in JavaScript.