JavaScriptUISpecification

Contents


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.

Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo