codeEditor

LIVE DEMO

codeEditor is a component to display and enter source code. It is a multi-line text area featured with code highlighting and optional print margin and gutter with line numbers.

codeEditor is based on the Ace embeddable code editor written in JavaScript.

XML Element

codeEditor

Java Class

CodeEditor

Attributes

id - alignSelf - classNames - colspan - css - dataContainer - defaultSuggestionsEnabled - enabled - errorMessage - focusShortcut - fontSize - height - helperText - highlightActiveLine - highlightGutterLine - label - liveSuggestionsEnabled - maxHeight - maxWidth - minHeight - minWidth - mode - printMarginColumn - property - readOnly - required - requiredMessage - showGutter - showLineNumbers - showPrintMargin - tabIndex - suggestOn - textWrap - theme - title - useSoftTabs - visible - width

Handlers

AttachEvent - BlurEvent - ClientValidatedEvent - ComponentValueChangeEvent - CompositionEndEvent - CompositionStartEvent - CompositionUpdateEvent - DetachEvent - FocusEvent - InputEvent - KeyDownEvent - KeyPressEvent - KeyUpEvent - statusChangeHandler - validator

Elements

tooltip - validator

Basics

An example of codeEditor:

<codeEditor id="codeEditor"
            mode="XML"
            width="50%"/>
code editor basics

Data Binding

Data binding refers to linking a visual component to a data container. Changes in the visual component or corresponding data container can trigger updates to one another. See Using Data Components for more details.

The following example produces a data-aware codeEditor.

<data>
    <instance id="orderReportDc"
              class="com.company.onboarding.entity.OrderReport"> (1)
        <loader id="orderReportDl"/>
        <fetchPlan extends="_base"/> (2)
    </instance>
</data>
    <codeEditor mode="XML"
                dataContainer="orderReportDc"
                property="code"/> (3)
1 InstanceContainer for the OrderReport entity.
2 Inline fetch plan of the entity instance located in the container.
3 Binding the component to a data container and property. The dataContainer attribute contains a link to the orderReportDc data container, and the property attribute refers to the code entity attribute.

Mode

LIVE DEMO

The mode attribute specifies the programming language or markup language that the editor should be configured for. This setting determines the syntax highlighting that is relevant to the chosen language.

The default syntax highlighting mode is CodeEditorMode.PLAIN_TEXT.

Example:

<codeEditor id="myCodeEditor"
            mode="JAVASCRIPT"/>

This example sets the mode attribute to JAVASCRIPT, configuring the editor for JavaScript code.

Theme

LIVE DEMO

The theme attribute is used to define the visual appearance and style of the editor. It lets you choose a pre-defined theme that alters the color scheme, font, and other aesthetic elements of the code editor.

The list of supported themes is defined in the CodeEditorTheme enumeration.

Suggestion

LIVE DEMO

The codeEditor component supports autocompletion features.

Autocompletion can suggest default options depending on the language mode if you set the defaultSuggestionsEnabled attribute to true:

<codeEditor mode="GROOVY" defaultSuggestionsEnabled="true"/>

You can provide your own options using the suggester handler, for example:

<codeEditor id="codeEditorWithCustomSuggestions"/>
@Install(to = "codeEditorWithCustomSuggestions", subject = "suggester")
private List<Suggestion> codeEditorWithCustomSuggestionsSuggester(Suggester.SuggestionContext context) {
    String text = context.getText();
    int cursorPosition = context.getCursorPosition();
    // If autocompletion is requested after "user."
    if (cursorPosition == text.indexOf("user.") + 5) {
        // Return a list of suggestions for properties of the User entity
        return metadata.getClass(User.class).getProperties().stream()
                .map(property -> new Suggestion(property.getName(), property.getName()))
                .toList();
    } else {
        return List.of();
    }
}

By default, autocompletion popup is opened when the user presses a shortcut:

  • Windows and Linux: Ctrl-Space

  • macOS: ⌥-Space or ⌃-Space, depending on system settings

If the suggestOn attribute is set to a regular expression, the autocompletion popup opens automatically when the user enters a matching string. For example, if suggestOn="\.", the autocompletion will trigger after the user enters a dot.

If the liveSuggestionsEnabled attribute is set to true, suggestions will appear automatically as the user types, without requiring a manual trigger or setting the suggestOn attribute. All suggesters will be requested for options as soon as the user enters a word character. Note that live autocompletion can be resource-intensive with large content or with complex suggesters, so liveSuggestionsEnabled is false by default.

Validation

To check values entered into the codeEditor component, you can use a validator in a nested validators element.

The following predefined validators are available for codeEditor:

XML Element

validators

elements

custom - email - notBlank - notEmpty - notNull - regexp - size

Attributes

In Jmix there are many common attributes that serve the same purpose for all components.

The following are attributes specific to codeEditor:

Name

Description

Default

defaultSuggestionsEnabled

Autocompletion suggests default options depending on the language mode.

false

fontSize

Sets the font size for code in the editor.

1rem

highlightActiveLine

Sets the highlight of the active line. If the highlighting is enabled, the line the cursor is on will be highlighted.

true

highlightGutterLine

Sets the highlight of the current gutter line. If the highlighting is enabled, the gutter line the cursor is on will be highlighted.

true

liveSuggestionsEnabled

Open suggestions popup automatically as the user types.

false

mode

Sets syntax highlighting for a specific mode. The list of supported modes is defined in the CodeEditorMode enumeration. See Mode.

CodeEditorMode.PLAIN_TEXT

printMarginColumn

Controls the position of the print margin column. This column is a visual vertical line that helps with code formatting and readability, particularly during printing.

80

showGutter

Determines whether the gutter (the vertical area on the left side of the editor) is displayed. The gutter typically shows line numbers, making it easier to navigate and reference specific lines in the code.

true

showLineNumbers

Controls whether line numbers are displayed in the editor. This feature helps with navigation and referencing specific lines within the code.

true

showPrintMargin

Is used to control the visibility of the print margin line. This line is a vertical guideline that appears in the code editor and helps developers visually separate the code that will fit on a printed page from the code that will be cut off.

true

suggestOn

A regular expression to trigger autocompletion when the user enters a matching string.

textWrap

It determines whether long lines of code should be wrapped (broken into multiple lines) to fit within the editor’s viewable area or if they should be displayed as a single line that extends beyond the window’s width.

false

theme

Sets the visual theme of codeEditor. See Theme.

CodeEditorTheme.TEXTMATE

useSoftTabs

Sets the tab character representing mode. In soft tabs mode, the tab character is displayed as a series of spaces. In hard tabs mode, the tab character is displayed as the special \t character.

true