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:

1. 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)

2. 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.

3. 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).

Script Editor Parts

Vertical Ruler Context Menu Commands

A summary of commands available on Vertical Ruler section of the Servoy Editor via right-click context menu:

Command	Summary
Toggle Breakpoint	Adds or removes a breakpoint at the current line
Disable Breakpoint	Disables the breakpoint at the current line
Toggle Watchpoint	Toggles a watchpoint for a variable
Validate	Validates the current file or selection
Add Bookmark	Adds a bookmark at the current line
Add Task	Adds a task at the current line
Show Quick Diff	Shows differences between current and previous versions
Show Revision Information	Displays revision history for the current line
Show Line Numbers	Toggles the display of line numbers
Folding	Manages code folding options
Preferencest	Opens preferences for the editor
Breakpoint Properties...	Opens properties for the selected breakpoint

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:

Command	Summary
Preferences	Opens Preferences for the outline view
Validate	Validates the current file or selection

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:

Command	Summary
Undo Typing	Reverses the last typing action
Revert File	Reverts the file to its last saved state
Save	Saves the current file
Open Declaration	Opens the declaration of the selected element
Open Call Hierarchy	Opens the call hierarchy of the selected element
Quick Outline	Shows the quick outline of the file
Open With	Opens the file with a specified editor
Show In	Shows the selected element in various views
Cut	Cuts the selected text
Copy	Copies the selected text
Paste	Pastes text from the clipboard
Quick Fix	Provides quick fixes for code issues
Refactor	Refactors code elements
Source	Source code-related actions
Search	Searches within the project or workspace
Run As	Runs the solution in a specified environmen
Debug As	Debugs the solution in a specified environment
Compare With	Compares the file with another resource
Replace With	Replaces the file with another resource
Validate	Validates the current file
Preferences	Opens the Preferences dialog
Open in Form Editor	Opens the current file in the Form Editor
Open Form Hierarchy	Opens the form hierarchy of the current file

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

Script Editor Preferences

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

1. 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.

2. Select an existing method, or create a new method.

3. Click OK to go back to the Form Editor, or OK and Show to edit the script in Script Editor.

Via the Solution Explorer Tree--New Method

1. Select an element (global or forms) in the Solution explorer.

2. Access the context menu (right-click).

3. Select Create Method.

4. Specify a Method Name in the New Method window

5. 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.

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:

1. 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.

     
2. 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:

      if (forms.main.foundset.find()) //find will fail if autosave is disabled and there are unsaved records
     {
        columnTextDataProvider = 'a search value'
        columnNumberDataProvider = '>10'
        columnDateDataProvider = '31-12-2010|dd-MM-yyyy'
         forms.main.foundset.search()
     }

   • Move Code inserts only a bare function statement:

     forms.main.controller.find()