Getting Started-Overview of Script Editor
Overview
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).
Vertical Ruler Context Menu Commands
A summary of commands available on Vertical Ruler section of the Servoy Editor via right-click context menu:
Toggle 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.
Disable Breakpoint
Disables the breakpoint at the current line without removing it. This allows you to temporarily ignore the breakpoint during debugging sessions.
Toggle Watchpoint
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.
Validate
Validates the current file or selection, checking for errors and inconsistencies. This command helps ensure that your code adheres to syntax and style guidelines.
Add Bookmark
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.
Add Task
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.
Show Quick Diff
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.
Show Revision Information
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.
Show Line Numbers
Toggles the display of line numbers in the code editor. Line numbers are helpful for navigation and referencing specific parts of your code.
Folding
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
Preferences
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.
Breakpoint Properties
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.
Outline Bar Context Menu Commands
A summary of commands available on Outline Bar section of the Servoy Editor via right-click context menu:
Preferences
Opens the Preferences dialog for the annotations, allowing you to customize various settings specific to the annotations.
Validate
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.
Editor Area Context Menu Commands
A summary of commands available on Editor Area section of the Servoy Editor via right-click context menu:
Undo Typing
keybinding: Ctrl+Z
Reverses the last typing action, restoring the previous state of the text.
Revert File
Reverts the file to its last saved state, discarding any unsaved changes.
Save
keybinding: Ctrl+S
Saves the current file, ensuring that all changes are written to disk.
Open Declaration
keybinding: F3
Opens the declaration of the selected element, such as a variable or method. This command navigates to where the element is defined.
Open Call Hierarchy
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.
Quick Outline
keybinding: Ctrl+O
Open With
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.
Show In
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
Cut
keybinding: Ctrl+X
Cuts the selected text and places it on the clipboard.
Copy
keybinding: Ctrl+C
Copies the selected text to the clipboard without removing it from the document.
Paste
keybinding: Ctrl+V
Pastes the text from the clipboard at the current cursor position.
Quick Fix
keybinding: Ctrl+1
Displays suggested actions. Provides quick fixes for issues in the code, such as auto-correcting errors or applying suggested improvements.
Refactor
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
Source
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
Search
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
Run As
Runs the code using specific configurations:
1 JavaScript: Runs the current file as a JavaScript application
Run Configurations...: Opens the Run configurations dialog
Debug As
Debugs the code using specific configurations:
1 JavaScript: Debugs the current file as a JavaScript application
Debug Configurations...: Opens the Debug configurations dialog.
Compare With
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.
Replace With
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.
Validate
Validates the current file, checking for errors and inconsistencies.
Preferences
Opens the Preferences dialog, where you can configure various settings for the editor.
Open in Form Editor
keybinding: Ctrl+Shift+A
Opens the current file in the Form Editor, allowing you to design and edit forms.
Open Form Hierarchy
keybinding: F4
Opens the Form Hierarchy. There you see the hierarchy tree (according to parent-child relation).
Setting General Preferences for Script Editor
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
Vertical ruler folding
Code templates
Types of annotation marks (caution, warnings, etc) shown in the rulers and in text
Opening the Script Editor
To open a script in Script Editor, use one of the following methods:
In the Solutions Explorer, right-click on the resource that you wish to open and select
Open in Script Editor
.In an open Form Editor window, access the context menu on a blank area and select
Open in Script Editor
.In an open Form Editor window, use the keyboard shortcut
CTRL+SHIFT+Z
(shift-cmd-z
).
Note
To go back to the Form Editor, use CTRL+SHIFT+A
(shift-cmd-a
).
In an open Form Editor window, select the desired object and in the Properties view, and click on the applicable event. A button will appear, which you can click to open the corresponding script file.
Note If you have an element, such as a button, selected in Form Editor, switching to the Script Editor view will take you right to the line associated with the element.
Creating Business Logic in Script Editor
To create or add business logic, you can either type directly into Script Editor, or use one of the following methods:
From the Form Editor
Select an element in the Form Editor and double-click the appropriate Events item in the Properties panel. (This is the way most users will create a method, once they are familiar with Servoy.)
A Select Method window will appear.
Select an existing method, or create a new method.
Click
OK
to go back to the Form Editor, orOK and Show
to edit the script in Script Editor.
Via the Solution Explorer Tree--New Method
Select an element (global or forms) in the Solution explorer.
Access the context menu (right-click).
Select
Create Method
.Specify a Method Name in the New Method window
Select
Create Public
orCreate Private
as needed.
You can also insert existing business logic resources form Solution Explorer into your script. This method is discussed in the following section.
Moving Code from the Solution Explorer into the Script Editor
The Script Editor allows users to quickly insert existing code resources (eg. methods, functions, and variables) within the Solution into the open Script Editor Window. To view a list of available methods:
Highlight a resource in the Solution Editor that contains the code you want to insert.
You can use methods/functions found anywhere in the Solution Explorer, including in Globals, individual Forms, JS Lib, all the way down to Plugins.
You can preview information about the method by hovering over the code resource name.
Click on the
Move Sample Code
orMove Code
button.Move Sample Code
inserts an example of how the selected code is can be used, along with informational comments:Move Code
inserts only a bare function statement:
Last updated