JavaScriptUISpecification

1 JavaScript UI Specification

JavaScript UI Specification

This specification defines visual features of "JavaScript Editor Support" module.

Module

Module Name: "JavaScript Editor Support"
Category: "Languages Support"
Description: "Support for editing JavaScript files."

Templates

There are three templates:

Scripting / Empty JavaScript File:

Description: "Creates empty JavaScript file. You can edit the file in the IDE's Source Editor. And you can run it using the editor context menu. To change this template, choose Tools | Template Manager and open the template in the editor."
Content: creates empty file

Scripting / JavaScript Method:

Description: "Creates JavaScript file with one method declaration. You can edit the file in the IDE's Source Editor. And you can run it using the editor context menu. To change this template, choose Tools | Template Manager and open the template in the editor."
Content:

/*
 * To change this template, choose Tools | Template Manager
 * and open the template in the editor.
 */

/*
 * Method foo.
 */
function foo (parameter) {
    return i;
}

Scripting / JavaScript Object:

Description: "Creates JavaScript file with one object declaration. You can edit the file in the IDE's Source Editor. And you can run it using the editor context menu. To change this template, choose Tools | Template Manager and open the template in the editor."
Content:

/*
 * To change this template, choose Tools | Template Manager
 * and open the template in the editor.
 */

/*
 * ClassName constructor.
 */
function ClassName (parameter) {
    this.parameter = parameter;
}


/*
 * Method ClassName.method1.
 */
ClassName.prototype.method1 = function () {
    return this.parameter;
}

Syntax Coloring

JavaScript module supports following tokens, semantic elements and colors:

line comment	color inherited from IDE defaults
block comment	color inherited from IDE defaults
identifier	color inherited from IDE defaults
keyword	color inherited from IDE defaults
operator	color inherited from IDE defaults
string	color inherited from IDE defaults
special characters in strings like "\n", "\t", "\x11" (see JavaScript specification)	they have the same color like strings, but they are bolded
number	color inherited from IDE defaults
regular expressions	color: 0x008000 bold
function name	color inherited from IDE defaults + bold
parameters	color: 0xA06001
local variables	color: 0x098618

Navigator

JavaScript Navigator shows tree of global variables, local variables, object literals and functions. Definition of navigator node's display name and tooltip:

Statement Type	Example	Display Name	Tooltip	Icon
variable declaration	var i = 10;	i	i = 10;	variable icon
function declaration	function foo (a, b) {...}	foo (a, b)	-	function icon
function declaration	var foo = function (a, b) {...}	foo (a, b)	-	function icon
object literal declaration	var foo = {a:10, b:10}	foo	foo = {a:10, b:10}	class icon
property declaration	foo:10	foo	foo:10	variable icon

Single click on navigator node scrolls editor to definition of statement (variable, function) and highlights it.
Double click on navigator node scrolls editor to definition of statement and moves focus to editor to the first character of statement.
There are no actions in navigator node's popup menu.

Code Folding

We are folding:

function bodies (fold type name: "Methods")
multi line comments (fold type name: "Comments")

In the case that JavaScript is embeded in PHP, we have one common fold type ("Methods") used for both languages.

Code Completion

JavaScript code completion shows list of all keywords, global variable names and function names for identifiers and keywords. List is sorted alphabetically.

Editor Popup Menu Actions

Select in >	Standard action
-------------	Separator
Run	Runs JavaScript internally (enabled on JDK 1.6 only)
Go To Declaration	Moves cursor to variable declaration (enabled on variables only)
-------------	Separator
Cut	Standard action
Copy	Standard action
Paste	Standard action
-------------	Separator
Code Folds >	Standard action

Code Folds submenu:

Collapse Fold
Expand Fold
---------------
Collapse All
Expand All
---------------
Collapse Method
Expand Method
---------------
Collapse Comment
Expand Comment

Indentation

Text between backets, curly brackets and parenthesis is indented. Text after "if ()", "while ()", "for ()" and "else" is indented. Some more complicated cases are not supported. For example:

if (a)
    while (b)
        e = i++;

Cursor is not moved to the first level, when you press enter after semicolon in given case. It will be moved under while keyword.

Bracket Completion

Bracket completion is enabled for following separators: {} [[ | ]] "" () So, it means:

closing brackets are added automatically
there is no second closing bracket added, if it is the next character after cursor
closing bracket is removed automatically, if the opening one is deleted by Backspace key

JavaScript escape sequences

JavaScript escape sequences (\0 \b \t \n \v \f \r \" \'
\x11 \u2222) are bolded in strings.

Retrieved from "http://wiki.netbeans.org/JavaScriptUISpecification"

JavaScriptUISpecification

Contents