Script Editor

From Lianjapedia
Jump to: navigation, search

The Lianja Script Editor

The Lianja Script Editor is a full featured and modern source code editor. It includes support for syntax highlighting, intelligent code completion, code snippets, code folding, intellisense and Intellitips. Go beyond normal Intellisense with "Live" pick lists for cursors, parameter hints for all functions, function and variable discovery and much more.

Bm-noteicon.png
Quick Start Guide

Select the "Apps" workspace.
Select the "Apps Files" Tab in the App Inspector.
Double click a filename to edit it.

Overview

Overview


Panel Description
Files explorer List of files in the App or Library displayed in the App Inspector 'Files' tab or in the Sidebar when the App Inspector is closed. Right-click in the panel for a context menu. New, Edit, Delete and Additional Commands are available from the actionbar at the bottom of the panel.
Script Editor The panel for editing. Multiple files can be open at the same time, each displayed in its own tab. Double-click a tab to open the file in a floating Script Editor window and then double-click the window title bar to dock it again. Right-click in the panel for a context menu. The Find panel and Advanced panel can be displayed/hidden as required.
Help Panel Displays help information for the scripting language of the file currently being edited. Click the x to hide the panel and the ? in the Script Editor panel to show it again.
Bm-noteicon.png
Pro Tip

The Script Editor has a tabbed UI.
Double click a Tab and the editor will be detached into its own floating window.
Double click the window title bar and it will be attached back as a Tab.

Edit a Script

Files are categorized in the Files explorer in the sidebar or App Inspector. Double-clicking a file name opens it in the Script Editor.

Bm-noteicon.png
Pro Tip

As a power user you can create and edit script files in the console.
ed filename.ext

File Extension Category
Lianja/VFP program .prg Script Files
JavaScript file .js JavaScript Files
TypeScript file .ts TypeScript Files
Babel file .esx Babel Files
PHP file .php PHP Files
Python file .py Python Files
Lianja/VFP Server Page file .rsp Lianja Server Pages
JavaScript Server Page file .jssp JavaScript Server Pages
Lianja/VFP form .scp Form Files
Lianja/VFP class library .vcp Class Files
Cascading Style Sheets file .css CSS Files
JavaScript Object Notation .json JSON Files
Hypertext Markup Language file .html HTML Files
Extensible Markup Language file .xml XML Files
Text file .txt TXT Files
Windows Command file .cmd Other Files
Conf file .conf Other Files
Include file .h Other Files
Initialization file .ini Other Files

Note:

  • Files can also be opened for editing by first selecting the file name then clicking on the edit button in the actionbar or right-clicking and selecting 'Open File' or 'Open File in Window' from the context menu.
  • Image Files are also listed in the Files explorers. Double-clicking on an image file opens it using the system default app.
  • Electron template files generated in the Build Workspace are listed in the Apps workspace Files explorer under the Electron Files category. Double-clicking on a .html, .js or .json file name will open it in the Script Editor.

Context Menus

Context Menus


Editing Context Menu

Right-click in the Script Editor panel to display the editing context menu:

Editing Context Menu


Insert Unicode control character

Unicode Control Character Menu


Tab Context Menu

With a file open, right-click on the tab containing the filename to display the tab context menu:

Tab Context Menu


Notes:

  • When 'Quick Deploy' is selected and the file is a Lianja/VFP script file, it is automatically compiled then deployed if the compilation is successful. If 'Quick Deploy All' is selected, all currently open Lianja/VFP script files are automatically compiled then deployed if the compilation is successful.
  • When 'Quick Preview' is selected and the file is a Lianja/VFP script file, it is automatically compiled then deployed if the compilation is successful. If or 'Quick Preview All' is selected, all currently open Lianja/VFP script files are automatically compiled then deployed if the compilation is successful. The App is then previewed live in the default browser.

New Script

New Script


To create a new script of any of the file types listed in the table above, click the + button in the actionbar at the bottom of the Files explorer, or right-click in the Files explorer panel and click 'New ...'.

This will display the 'Create a new file' explorer in the current App directory (Apps workspace) or Lianja Library (Library workspace), allowing a file type to be selected from the pulldown and a file name to be entered.

Saving a Script

Scripts can be saved using any of the following:

System Menu-> File-> Save Save script file currently being edited.
System Menu-> File-> Save All Save all currently open script files.
[Ctrl] + s Save script file currently being edited.
[Ctrl] + [Shift] + s Save all currently open script files.
Save.png Save script file currently being edited.
Pages.png Save script file currently being edited and switch to the Pages workspace (Page Builder).

Find Panel and Advanced Panel

Find


From the Find Panel, you can position on a specific line number and do search and replace operations.

The Advanced Panel has a number of tabs providing the results of App or Library wide searches along with script and compilation output.

To hide the Find and Advanced Panels, click their x.

Press [Ctrl] + f to display the Find Panel and click 'Advanced...' to display the Advanced Panel.

Find Panel Operations

Operation Description
Search Bar Enter a search value in the Search Bar field then press [Return]. This will search through all scripts in the current App (Apps workspace) or in the Library (Library workspace). If a match is found, occurrences are listed in a grid along with their filename and line number in the Find Results tab of the Advanced Panel. Double-clicking on a grid row opens the selected file in the Script Editor and positions on the line number. If no match is found the grid will be empty. The number of occurrences found is given in a message at the bottom of the Find Panel. From v7.1.
Goto Enter a line number then press [Return] to position on that line number. Specifying a number greater than the number of lines will position at the end of the file.
Find Enter a search value in the Find field then press [Return] or click the right arrow at the end of the Find field to position on the next occurrence of the value. Use the left and right arrows to navigate up and down through the matching values. If no match is found the highlight is positioned on the first line of the file. Use the pulldown to select previous searches.
Replace Enter a search value in the Find field and press [Return] or click the right or left arrow at the end of the Find field to position on the occurrence of the value to be replaced. Enter a replace value in the Replace with field then click the left or right arrow at the end of the Replace with field to make the replacement. To replace additional occurrences, click the arrows at the end of the Replace with field to navigate and replace.
Find All Enter a search value in the Find field then click Find All. This will search through the current script and position on the first matching occurrence of the search value if found. All matching occurrences are listed in a grid along with the filename and line number in the Find Results tab of the Advanced Panel. Clicking on a grid row positions on the line number. The keyboard shortcuts Ctrl + . (>) and Ctrl + , (<) can be used to navigate to the next and previous matching value respectively. From v7.1. Previously this operated across all scripts, functionality now handled by the Search Bar (see above).
Replace Enter a search value in the Find field and press Return or click the right or left arrow to position on the occurrence of the value to be replaced. Enter a replacement value in the Replace with field then click the left or right arrow to make the replacement. To replace additional occurrences, click the arrows to navigate and replace.
Replace All Enter a search value in the Find field and press Return or click the right or left arrow to position on the first occurrence of the value to be replaced. Enter a replacement value in the Replace with field then Replace All to replace all occurrences in the current file.

Advanced Panel Tabs

To refresh a tab, click the Refresh icon in the bottom left hand corner of the panel.

Tab Description
Find Results Displays the results from Find All operations. If a match is found, occurrences are listed in a grid along with their filename and line number. Double-clicking on a grid row opens the selected file in the Script Editor and positions on the line number. If no match is found the grid will be empty.
Tasks Displays tasks from the scripts in a grid along with their filename and line number. Double-clicking on a grid row opens the selected file in the Script Editor and positions on the line number. If no tasks are found the grid will be empty. Tasks can be inserted into scripts by adding a 'todo:' comment, e.g.
// todo: this is a task (.prg)
or
# todo: this is a task (.py)

The Tasks tab shows the tasks from the currently open script only. To view all tasks, select the All Tasks tab and click the Refresh icon.

All Tasks Click the Refresh icon to display tasks from all scripts in a grid along with their filename and line number. Double-clicking on a grid row opens the selected file in the Script Editor and positions on the line number. If no tasks are found the grid will be empty. Tasks can be inserted into scripts by adding a 'todo:' comment, e.g.
// todo: this is a task (.prg)
or
# todo: this is a task (.py)
Procs Displays procedure and function declarations from the scripts in a grid along with their filename and line number. Double-clicking on a grid row opens the selected file in the Script Editor and positions on the line number. This grid is refreshed automatically when a file is opened in the Script Editor unless the Advanced Panel is hidden. If no declarations are found the grid will be empty.

The Procs tab shows the declarations from the currently open script only. To view all declarations, select the All Procs tab and click the Refresh icon.

All Procs Click the Refresh icon to display procedure and function declarations from all scripts in a grid along with their filename and line number. Double-clicking on a grid row opens the selected file in the Script Editor and positions on the line number. This grid is refreshed automatically when a file is opened in the Script Editor unless the Advanced Panel is hidden. If no declarations are found the grid will be empty.
Classes Displays class declarations from the scripts in a grid along with their filename and line number. Double-clicking on a grid row opens the selected file in the Script Editor and positions on the line number. If no declarations are found the grid will be empty.

The Classes tab shows the declarations from the currently open script only. To view all declarations, select the All Classes tab and click the Refresh icon.

All Classes Click the Refresh icon to display class declarations from all scripts in a grid along with their filename and line number. Double-clicking on a grid row opens the selected file in the Script Editor and positions on the line number. If no declarations are found the grid will be empty.
Script Output Is automatically selected and displays script output when a script is run using the Run file headerbar toolbutton.
Compile Output Is automatically selected and displays compile output when a script is compiled using the Compile file headerbar toolbutton. Typescript files can be compiled, creating a JavaScript file after successful compilation. Lianja/VFP programs (.prg) can be compiled, creating a .dbo file after successful compilation. Compile output reports any compilation errors or a compilation successful message.
Themes Allows you to select from a pre-defined color scheme or configure your own. See below for the available options.

Run file and Compile file Toolbuttons

Run.png Run file
Compile.png Compile file

Themes

The color theme of the Script Editor can be changed.

The theme can be chosen from a pre-built selection, or you can create your own theme, assigning colors to the different display categories: background, foreground, keyword, declaration, single line comment, multi-line comment, class, object, string, placeholder, number, operator.

Available Themes




Select the Themes tab at the bottom of the Advanced panel.

Available themes are listed in the pulldown. Select a theme to apply it.


Create a Theme




To create your own theme, first click the New button and enter a unique theme name.


Choose a Color




Then click on the display categories to choose their colors.

Here the chosen color will be used for the editor background.


Scripting Languages




Select a scripting language from the pulldown to see how sample code looks when using your theme.


Save




Once your theme is complete, click the Save button and your theme will be saved and applied.


Available Themes




Your theme will also now be listed in the available themes pulldown.


Keyboard Reference

Key Sequence Description
[Ctrl] + z Undo
[Ctrl] + [Shift] + z Redo
[Ctrl] + y Redo
[Ctrl] + x Cut
[Ctrl] + c Copy
[Ctrl] + v Paste
[Delete] Delete
[Ctrl] + a Select All
[Ctrl] + f Find: opens the Find Panel if it is not already open and positions the cursor in the Find entry field.
[Ctrl] + r Replace: opens the Find Panel if it is not already open and positions the cursor in the Replace entry field.
[Ctrl] + l Goto Line: opens the Find Panel if it is not already open and positions the cursor in the Goto entry field.
[Ctrl] + d Delete Line
[Ctrl] + b Beautify Code: beautifies the code with statement block indentation.
[Ctrl] + t
[Ctrl] + /
Comment toggle: adds // to the beginning of the selected uncommented line(s), removes // from the beginning of the selected commented line(s).
[Ctrl] + [Shift] + t Uncomment: removes // from the beginning of the selected commented line(s).
[Ctrl] + u Upper Case: converts the selected text to upper case.
[Ctrl] + [Shift] + u Lower Case: converts the selected text to lower case.
[Ctrl] + i Indent
[Ctrl] + [Shift] + i Unindent
[Ctrl] + s Save
[Ctrl] + [Shift] + s Save All
[Alt] + s Snippet Manager
[Alt] + f Fold All
[Alt] + u Unfold All
[Alt] + c Toggle Code Folding on/off
[Alt] + i Toggle Intellisense on/off
Mouse over variable press and release [Shift] Highlights all occurrences of the variable under the cursor in the file

The Lianja CodeAssistant for Lianja/VFP

The Lianja CodeAssistant includes:

Intellisense

Lianja provides Intellisense for commands, functions, object variables and cursors. Intellisense is implemented in a background thread so that it is kept up-to-date in real time.

Bm-noteicon.png
Pro Tip

Move the mouse cursor over a variable in the file.
Press and release the Shift key.
All occurrences of that variable will be highlighted.

Command Intellisense

Typing the first letter of a command pops up a pick list of commands beginning with that letter.

l

Command Intellisense

As you continue to type, the list is filtered.

lo

Command Intellisense

When the required command is highlighted, press [Tab] or [Return] to select it and display a pick list of its keywords and clauses.

Command Intellisense

Similarly, typing a command followed by a space pops up the context sensitive pick list of keywords and clauses for the command being typed.

list<space> 

Command Intellisense

Selecting a clause from the pick list e.g for <lExp> will guide you as you type in the statement.

Command Intellisense

At any time you can type [Ctrl] + [Space] to enable/disable the command pick list.

Command Abbreviations

Command abbreviations are a coding productivity aid used to speed input of two-word commands. Any combination of letters that uniquely identifies a command by the first letter(s) of the first word followed by the first letter of the second word can be used.

For example, typing

s

Displays a pick list of all the commands beginning with 's'.

Command Intellisense: Abbreviations

But typing

 sd

Offers 'save datasession' only, as no commands begin with 'sd' and no other two-word commands have a second word beginning with 'd'.

Command Intellisense: Abbreviations

Command Intellisense: Abbreviations


Here are some more examples of abbreviations:


od -> open database

ld -> list databases

lm -> list memory

clod -> close database


Special Command Intellisense

Some commands have special pick lists depending on context.

open database<space>

This will popup a pick list containing database names.

Databases

use<space>

This will popup a pick list containing table names.

Tables

modify command<space> 

or

ed<space>

or

mc<space>

This will popup a pick list containing program script filenames.

Program Scripts

Function Intellisense

Typing a function name followed by an open bracket pops up an intellitip for the function and auto-inserts the function template.

s = substr(

Function Intellisense

After typing in the code for the highlighted argument, type a comma (,) or press Tab or Return to move on to the next argument.

s = substr(products.productname, at( 

Function Intellisense

Type ) to close. Nested intellitips are stacked and unstacked when a ) is typed.

Object Variable Intellisense

Typing an object variable name followed by a . pops up a pick list of properties and methods for the object variable. Hovering the mouse over items in the pick list displays a tooltip with a short description of the item.

Object variable Intellisense requires any of the following to be present in the file being edited.

local|private|public|parameter|lparameter name as classname

or

name = createObject("classname")

or

obj.addObject("name","classname")

or

name = Lianja.getElementByID("Id")
name = Lianja.get("id")

In the latter case, the specified 'id' is introspected to identify the class based on the pages, sections and formitems in the currently open App.

Object Variable Intellisense

The Lianja system object is known to the script editor so now typing:

lianja.

Pops up the intellisense for it.

Lianja System Object

Object Variable Intellisense Heuristics

When typing a variable name followed by a . (dot), if the variable is untyped and it begins with "page" it is implied that it is a PageBuilder class and the pick list for that will be displayed. Similarly, if the variable begins with "section" it is implied that it is a Section, and if the variable begins with "field" it is implied that it is a FormItem.

As well as the PageBuilder properties and methods, the Page's pick list also includes its sections:

PageBuilder Object's properties, methods and sections

As well as the Section properties and methods, the Section's pick list also includes its formitems:

Section Object's properties, methods and formitems

Section Object's Formitem properties and methods

Grid Section



Note that for a Section, you can also access the internal Grid (Grid Section), Pageframe (TabView Section) or Webview (Webview Section).

If you follow the suggested format for naming object variables as described on MSDN then Lianja will use heuristics to determine the class of untyped object variables.

Naming format: Image

Cursor Intellisense

Tables that are open during editing are known to the editor so when for example you have the products table open and you type:

products.

The columns in the products table are displayed as a pick list.

Cursor Intellisense

Hovering the mouse over a column name will display a tooltip containing useful information regarding the column e.g. data type, width, decimals.

You can toggle Intellisense on and off by pressing [Ctrl] + [Space].

IntelliTips

Command Intellitip



Moving the mouse cursor over a command while pressing the control key will popup the IntelliTip for the command.


Function Intellitip



Moving the mouse cursor over a function name followed by a ( while pressing the control key will popup the IntelliTip for the function.


Column Intellitip



Moving the mouse cursor over a variable name or an objectname.propertyname or a cursorname.columnname while pressing the control key will popup a tooltip displaying the current value.


You can toggle IntelliTips on and off by pressing [Ctrl] + /.

Statement Completion

Typing a statement closing tag (e.g. endif in an if statement block) followed by the return key will close the statement block off for you and move the cursor onto the next line at the previous block indentation.

Auto Indenting

When you press the return key while typing commands the cursor will move onto the next line and auto indent for you.

Code Snippets

Code snippets are a productivity aid when coding. As you type a command, any code snippets that match it are displayed in a pick list.

e.g. Here is the snippet called 'ife' for an if...else...endif statement.

if ${condition}
    ${insert your code here}
else
    ${insert your else code here}
endif
Code Snippet: if...else...endif



Typing if displays the matching snippets 'if' and 'if else'. Press [Return] to select 'if' or double-click on 'if else' to select 'if else'.


Typing ife displays the matching snippet 'if else'. Press [Return] to select 'if else'.


After selecting 'if else' the snippet is inserted.


Snippets can contain code insertion marks:

${name}

or with a default value:

${name:something}

or for optional input:

${name:}

If the parameter insertion point contains a colon (:) pressing [Tab] will insert the text following the colon.

e.g. Here is the for...endfor snippet. Pressing [Tab] on 'var' and 'start' will insert 'i' and '1' respectively.

for ${var:i} = ${start:1} to ${end}    
    ${insert your code here}
endfor

After typing in a parameter, press [Tab] to move onto the next one.

There is also an invisible code insertion mark which causes the cursor to move to that position after the snippet is inserted.

${}

Note: code snippet files (found in lianja\help\) can also be empty, in which case the name of the file is inserted with '_' replaced by a space. For example, the snippet file 'list_structure.snippet' appears as 'list structure' in the pick list and, if selected, will insert list structure into the command line.

Snippet Manager



You can edit your own snippets in the Snippet Manager by pressing [Alt] + s or selecting the option from the system menu.


Here, I've created the 'sw' snippet to open the southwind database and certain tables.



Insert Snippet



Now, when I type sw, the 'sw' snippet appears in the picklist and pressing [Return] inserts the snippet code.


Note that the ${} invisible code insertion mark at the end of the snippet, is not inserted, but rather determines the cursor position after snippet insertion.



Code Beautifier

While editing you can press [Ctrl] + b to beautify your code with statement block indentation.

Code Folding

Code Folding



Code blocks such as if...endif, for...endfor, scan...endscan and do case...endcase are automatically indicated in the left margin with a small + or - icon at the start of the block and an arrow at the end.

Click the - icon to fold the code block.

Click the + icon to unfold a folded code block.


Code Folding



Hovering with the mouse over a - icon highlights the whole code block by changing the background color.


Code Folding



Hovering with the mouse over a + icon displays the folded code in an intellitip.


Code Folding Keyboard Reference

Key Sequence Description
[Alt] + f Fold All
[Alt] + u Unfold All
[Alt] + c Toggle Code Folding on/off

Custom Foldable Blocks

Define custom foldable block



You can create your own foldable code block using regions.

Here, the usage information has been placed in a region.


Precede the block with the following line, giving it a helpful description:

#region description

and terminate the block with:

#endregion
Folded custom foldable block



The indicator and hover actions are the same as for built-in code blocks.

Here, the block has been folded.


Note that regions cannot be nested.

Integration with the Documentation Wiki

Documentation Wiki Integration



Pressing [F1] fetches and displays the help page from the online Documentation Wiki for the command or function being typed or for the selected command.


Documentation wiki Integration



For commands with the same first word, follow the links to show the required command.


Extending Lianja with your own Intellisense Definitions

If you have existing libraries of classes or functions, you can place your own intellisense files in the lianja\help directory. If you look at the existing files in that directory you will see that they are just text files that are pre-loaded at startup. e.g.

intellitips_vfp_yourcompany.properties (for function definitions)

intellisense_vfp_yourcompany.properties (for class definitions)

Alternatively, you can create a file called references_vfp.config and place it in your app directory. This file can contain function and global variable type definitions that intellisense will use as hints.

The file should contain triple-slash comments like this:

/// <function="funcname(name as type, name2 as type ,[name3 as type]) returns type" />
/// <public="name as type" />

type can be any Lianja classname or Any, Character, Numeric, Logical, Date, Datetime, Currency, Array, Object

Any of the files you edit can also include type definitions by adding:

/// <reference path="filename" />

where filename should exist in the lianja help directory. Or alternatively, prefix the name with lib:/ or app:/ to reference definition files in an App or in the library.

See Also

Editor Settings, Guide to the Apps Workspace (Video), Lianja 3 App Inspector (Video)