codeEditor

LIVE DEMO

codeEditor is a component to display and enter source code.

codeEditor is a multi-line text area featured with code highlighting and optional print margin and gutter with line numbers.

XML Element

codeEditor

Java Class

CodeEditor

Attributes

id - alignSelf - classNames - colspan - css - dataContainer - enabled - errorMessage - focusShortcut - fontSize - height - helperText - highlightActiveLine - highlightGutterLine - label - maxHeight - maxWidth - minHeight - minWidth - mode - printMarginColumn - property - readOnly - required - requiredMessage - showGutter - showLineNumbers - showPrintMargin - tabIndex - 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.

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

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

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

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