Getting Started-Overview of Script Editor
Last updated
Last updated
This section describes the parts of the Script Editor and gives the basics on opening and working with scripts in Script Editor.
The Script Editor view displays the JavaScript functions and variables related to a Servoy resource. During editing, the Script Editor interacts with the surrounding views, including the Solution Explorer on its left, the Properties view on the right, and the Problems view at the bottom.
The Script Editor itself consists of the following parts:
Vertical Ruler – This ruler shows line numbers and icons for cautions and warnings. The sidebar is customizable through the contextual menu (right-click on the sidebar) for the following options:
Showing Line Numbers (toggle)
Enabling Folding (with options available for expanding/collapsing, as well as collapsing blocks and comments in the submenu)
Showing Quick Diff (addressed in the Code Navigation section)
Outline Bar – This bar is a navigational tool that includes the complete code range. Colored bars indicating markers, such as cautions, warnings, and bookmarks, are shown relative to their position in the entire document. Users can click on any of these bars to jump to the item flagged by the bars.
Editor Area – This is the script editing area. Code coloring is turned on by default. This and other options, such as fonts, can be customized via the context menu item Preferences (see this section).
A summary of commands available on Vertical Ruler section of the Servoy Editor via right-click context menu:
Command | Summary |
---|---|
Adds or removes a breakpoint at the current line | |
Disables the breakpoint at the current line | |
Toggles a watchpoint for a variable | |
Validates the current file or selection | |
Adds a bookmark at the current line | |
Adds a task at the current line | |
Shows differences between current and previous versions | |
Displays revision history for the current line | |
Toggles the display of line numbers | |
Manages code folding options | |
Opens preferences for the editor | |
Opens properties for the selected breakpoint |
Adds or removes a breakpoint at the current line in the code editor. Breakpoints are used to pause the execution of the application at specific points, allowing you to inspect the state of the application and debug issues.
Disables the breakpoint at the current line without removing it. This allows you to temporarily ignore the breakpoint during debugging sessions.
Toggles a watchpoint for a variable, allowing you to monitor changes to the variable's value during execution. Watchpoints are useful for tracking the behavior of specific variables and identifying unexpected changes.
Validates the current file or selection, checking for errors and inconsistencies. This command helps ensure that your code adheres to syntax and style guidelines.
Adds a bookmark at the current line, allowing you to quickly navigate to this location later. Bookmarks are useful for marking important sections of your code for easy access.
Opens the Add Task wizard, where you can add a task at the current cursor position. Tasks can be used for TODOs, reminders, or marking sections of code that need further attention.
keybinding: Ctrl+Shift+Q
Shows differences between the current version of the file and its previous versions. This command is useful for tracking changes and reviewing modifications.
Displays revision history for the current line, showing changes made over time. This command helps you understand the evolution of your code and identify when specific changes were made.
Toggles the display of line numbers in the code editor. Line numbers are helpful for navigation and referencing specific parts of your code.
Manages code folding options, allowing you to collapse and expand sections of code for better readability. Options include:
Enable Folding: Enables code folding; keybinding: Ctrl+Numpad_Divide
Expand All: Expands all folded code sections; keybinding: Ctrl+Numpad_Multiply
Collapse All: Collapses all code sections; keybinding: Ctrl+Shift+Numpad_Divide
Reset Structure: Resets the code folding structure
Collapse Blocks: Collapses blocks of code
Collapse Comments: Collapses comment sections
Opens Preferences for the editor, allowing you to customize various settings such as indentation, color themes, and keybindings. This command helps tailor the editor to your personal workflow.
Opens properties for the selected breakpoint, allowing you to configure its behavior, such as conditions for breaking and log messages. This command provides fine-grained control over how breakpoints operate during debugging.
A summary of commands available on Outline Bar section of the Servoy Editor via right-click context menu:
Command | Summary |
---|---|
Opens Preferences for the outline view | |
Validates the current file or selection |
Opens the Preferences dialog for the annotations, allowing you to customize various settings specific to the annotations.
Validates the current file or selection, checking for errors, warnings, and inconsistencies. This command is crucial for ensuring that your code adheres to syntax and style guidelines, helping to catch issues early in the development process. Validation can help prevent runtime errors and improve the overall quality of the code.
A summary of commands available on Editor Area section of the Servoy Editor via right-click context menu:
Command | Summary |
---|---|
Reverses the last typing action | |
Reverts the file to its last saved state | |
Saves the current file | |
Opens the declaration of the selected element | |
Opens the call hierarchy of the selected element | |
Shows the quick outline of the file | |
Opens the file with a specified editor | |
Shows the selected element in various views | |
Cuts the selected text | |
Copies the selected text | |
Pastes text from the clipboard | |
Provides quick fixes for code issues | |
Refactors code elements | |
Source code-related actions | |
Searches within the project or workspace | |
Runs the solution in a specified environmen | |
Debugs the solution in a specified environment | |
Compares the file with another resource | |
Replaces the file with another resource | |
Validates the current file | |
Opens the Preferences dialog | |
Opens the current file in the Form Editor | |
Opens the form hierarchy of the current file |
keybinding: Ctrl+Z
Reverses the last typing action, restoring the previous state of the text.
Reverts the file to its last saved state, discarding any unsaved changes.
keybinding: Ctrl+S
Saves the current file, ensuring that all changes are written to disk.
keybinding: F3
Opens the declaration of the selected element, such as a variable or method. This command navigates to where the element is defined.
keybinding: Ctrl+Alt+H
Opens the call hierarchy of the selected element, showing where it is called from and what it calls. This command helps trace the flow of execution.
keybinding: Ctrl+O
Provides options to open the file with different editors:
Generic Text Editor: Opens the file in the Generic Text Editor.
JavaScript Editor [DLTK]: Opens the file in the JavaScript Editor [DLTK].
Text Editor: Opens the file in the Text Editor.
System Editor: Opens the file in the system's default editor.
In-Place Editor: Opens the file in the In-Place Editor.
Default Editor: Opens the file in the default editor for the file type.
Other...: Allows selection of other available editors. Opens the editor selection dialog.
keybinding: Alt+Shift+W
Opens a sub-list of available views where the file can be displayed in:
Solution Explorer
Outline
Form Hierarchy
Script Explorer
System Explorer
Properties
keybinding: Ctrl+X
Cuts the selected text and places it on the clipboard.
keybinding: Ctrl+C
Copies the selected text to the clipboard without removing it from the document.
keybinding: Ctrl+V
Pastes the text from the clipboard at the current cursor position.
keybinding: Ctrl+1
Displays suggested actions. Provides quick fixes for issues in the code, such as auto-correcting errors or applying suggested improvements.
keybinding: Alt+Shift+T
Provides a menu with various refactoring options to improve the structure and design of the code without changing its behavior. Refactoring helps make the code more maintainable and readable. Opens a sub-list of available commands:
Rename...: Renames the selected element; keybinding: Alt+Shift+R
Move...: Moves the selected element
Extract Local Variable...: Extracts a local variable from the selected expression; keybinding: Alt+Shift+L
Change Method Signature...: Changes the method signature of the selected method; keybinding: Alt+Shift+C
Extract Method...: Extracts a new method from the selected code; keybinding: Alt+Shift+M
Introduce Parameter...: Introduces a new parameter to a method.
Inline...: Inlines the selected element ; keybinding: Alt+Shift+I
Provides source code-related actions for editing and formatting:
Remove Block Comment: Removes a block comment; keybinding: Ctrl + Shift + \
Toggle Comment: Comments / uncommnets the selected line / block; keybinding: Ctrl+7
Comment: Comments the selected line(s)
Uncomment: Uncomments the selected line(s)
Generate Element Comment: Generates the JSDoc comments for the selected variable or function; keybinding: Alt+Shift+J
Format: Formats the script's content; keybinding: Ctrl + Shift + F
Format Element: Formats the element
Correct Indentation: Corrects indentation for the selected lines; keybinding: Ctrl + I
Shift Left: Shifts the selected line(s) to the left
Shift Right: Shifts the selected line(s) to the right
Provides options to search within the project or workspace, helping you locate references or declarations of elements:
References: Opens a sub-list of available places where the references to the selected element should be searched in:
Workspace: searches for references to the selected element in the entire workspace; keybinding: Ctrl+Alt+G
Project: searches for references to the selected element in the current project
Hierarchy: searches for references to the selected element within the current hierarchy
Working Set: searches for references to the selected element within a specified working set
Declarations: Opens a sub-list of available places where the declarations of the selected element should be searched in:
Workspace: searches for declarations of the selected element in the entire workspace
Project: searches for declarations of the selected element in the current project
Hierarchy: searches for declarations of the selected element within the current hierarchy
Working Set: searches for declarations of the selected element within a specified working set
Runs the code using specific configurations:
1 JavaScript: Runs the current file as a JavaScript application
Run Configurations...: Opens the Run configurations dialog
Debugs the code using specific configurations:
1 JavaScript: Debugs the current file as a JavaScript application
Debug Configurations...: Opens the Debug configurations dialog.
Provides options to compare the current file with various other resources:
Each Other: Compares selected resources with each other.
Local History...: Compares the file with its local history.
HEAD Revision: Compares the file with the HEAD revision in version control.
Index: Compares the file with the index in version control.
Index With HEAD: Compares the index with the HEAD revision in version control.
Branch, Tag, or Reference... Compares the file with a specific branch, tag, or reference.
Commit...: Compares the file with a specific commit in version control.
Provides options to replace the current file with various other versions or resources:
Local History...: Replaces the file with a version from local history.
Previous from Local History: Replaces the file with the previous version from local history.
HEAD Revision: Replaces the file with the HEAD revision in version control.
Index: Replaces the file with the version from the index in version control.
Branch, Tag, or Reference...: Replaces the file with a specific branch, tag, or reference.
Commit...: Replaces the file with a specific commit in version control.
Validates the current file, checking for errors and inconsistencies.
Opens the Preferences dialog, where you can configure various settings for the editor.
keybinding: Ctrl+Shift+A
Opens the current file in the Form Editor, allowing you to design and edit forms.
keybinding: F4
Opens the Form Hierarchy. There you see the hierarchy tree (according to parent-child relation).
Settings for the Script Editor can be accessed via the context menu item Preferences. Clicking on this item reveals a filtered set for the Preferences pane, which reveals options for editing General and JavaScript editor preferences. Examples of customizable settings include:
Code syntax coloring
Use of smart carets