codeEditor
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 |
|
---|---|
Java Class |
|
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 |
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
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
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.
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 |
---|---|---|
Sets the font size for code in the editor. |
|
|
Sets the highlight of the active line. If the highlighting is enabled, the line the cursor is on will be highlighted. |
|
|
Sets the highlight of the current gutter line. If the highlighting is enabled, the gutter line the cursor is on will be highlighted. |
|
|
Sets syntax highlighting for a specific mode. The list of supported modes is defined in the |
|
|
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. |
|
|
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. |
|
|
Controls whether line numbers are displayed in the editor. This feature helps with navigation and referencing specific lines within the code. |
|
|
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. |
|
|
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. |
|
|
Sets the visual theme of |
|
|
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 |
|