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

Basics

An example of codeEditor:

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

Attributes

id - classNames - colspan - dataContainer - enabled - errorMessage - fontSize - height - helperText - highlightActiveLine - invalid - label - maxHeight - maxWidth - minHeight - minWidth - mode - printMarginColumn - property - readOnly - required - requiredIndicatorVisible - requiredMessage - showGutter - showLineNumbers - showPrintMargin - tabIndex - theme - title - visible - width

fontSize

MDN

Sets the font size for code in the editor. The font size is 1rem by default.

highlightActiveLine

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

mode

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

The default syntax highlighting mode is CodeEditorMode.PLAIN_TEXT.

printMarginColumn

Sets the column for the vertical line, which shows the limit on the length of a line of code. The print margin column is 80 by default.

showGutter

Sets the visibility of the gutter. The gutter is visible by default.

showLineNumbers

Sets the line numbers visibility. The line number is visible by default.

showPrintMargin

Sets the visibility of the vertical line that shows the limit on the length of a line of code. The print margin is visible by default.

theme

Sets the visual theme of codeEditor. The list of supported themes is defined in the CodeEditorTheme enumeration.

The default visual theme is CodeEditorTheme.TEXTMATE.

Handlers

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

To generate a handler stub in Jmix Studio, use the Handlers tab of the Jmix UI inspector panel or the Generate Handler action available in the top panel of the view class and through the Code → Generate menu (Alt+Insert / Cmd+N).

Elements

tooltip - validator