Last updated
Was this helpful?
Last updated
Was this helpful?
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 ).
A summary of commands available on Vertical Ruler section of the Servoy Editor via right-click context menu:
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.
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 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:
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:
keybinding: Ctrl+Z
Reverses the last typing action, restoring the previous state of the text.
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.
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:
Provides source code-related actions for editing and formatting:
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
Debugs the code using specific configurations:
1 JavaScript: Debugs the current file as a JavaScript application
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.
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.
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
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.
To create or add business logic, you can either type directly into Script Editor, or use one of the following methods:
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, or OK and Show to edit the script in Script Editor.
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 or Create 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.
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 or Move 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:
Opens the 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.
Opens 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 the dialog for the annotations, allowing you to customize various settings specific to the annotations.
to its last saved state, discarding any unsaved changes.
Other...: Allows selection of other available editors. Opens the dialog.
: Renames the selected element; keybinding: Alt+Shift+R
: Moves the selected element
: Extracts a local variable from the selected expression; keybinding: Alt+Shift+L
: Changes the method signature of the selected method; keybinding: Alt+Shift+C
: Extracts a new method from the selected code; keybinding: Alt+Shift+M
: Introduces a new parameter to a method.
: Inlines the selected element ; keybinding: Alt+Shift+I
: Removes a block comment; keybinding: Ctrl + Shift + \
: Comments / uncommnets the selected line / block; keybinding: Ctrl+7
: Comments the selected line(s)
: Uncomments the selected line(s)
: Generates the JSDoc comments for the selected variable or function; keybinding: Alt+Shift+J
: Formats the script's content; keybinding: Ctrl + Shift + F
: Formats the element
: Corrects indentation for the selected lines; keybinding: Ctrl + I
: Shifts the selected line(s) to the left
: Shifts the selected line(s) to the right
Run Configurations...: Opens the dialog
Debug Configurations...: Opens the dialog.
Provides options to the current file with various other resources:
Provides options to the current file with various other versions or resources:
Opens the dialog, where you can configure various settings for the editor.
keybinding: Ctrl+Shift+A Opens the current file in the , allowing you to design and edit forms.
keybinding: F4 Opens the . There you see the hierarchy tree (according to parent-child relation).
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
Opens Preferences for the outline view
Validates the current file or selection
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
