codeEditor 源码编辑器
codeEditor 是一个多行显示的代码编辑器,带有语法高亮和可选的代码辅助编辑功能。
XML 元素 |
|
|---|---|
Java 类 |
|
基本用法
下面的示例中,配置了 codeEditor 与其相关的显示控制:
<hbox width="100%" wrap="true">
<checkbox id="highlightCheckbox" label="Highlight active line" value="true"/>
<checkbox id="highlightGutterCheckbox" label="Highlight gutter line" value="true"/>
<checkbox id="gutterCheckbox" label="Show Gutter" value="true"/>
<checkbox id="lineNumbersCheckbox" label="Line numbers" value="true"/>
<checkbox id="printMarginCheckbox" label="Print margin" value="true"/>
<checkbox id="useSoftTabsCheckbox" label="Use soft tabs" value="true"/>
<checkbox id="textWrapCheckbox" label="Text wrap" value="false"/>
</hbox>
<codeEditor id="codeEditor"/>
@ViewComponent
protected CodeEditor codeEditor;
@Subscribe("highlightCheckbox")
protected void onHighlightCheckboxValueChange(ComponentValueChangeEvent<JmixCheckbox, Boolean> event) {
codeEditor.setHighlightActiveLine(event.getValue());
}
@Subscribe("highlightGutterCheckbox")
protected void onHighlightGutterCheckboxValueChange(ComponentValueChangeEvent<JmixCheckbox, Boolean> event) {
codeEditor.setHighlightGutterLine(event.getValue());
}
@Subscribe("gutterCheckbox")
protected void onGutterCheckboxValueChange(ComponentValueChangeEvent<JmixCheckbox, Boolean> event) {
codeEditor.setShowGutter(event.getValue());
}
@Subscribe("lineNumbersCheckbox")
protected void onLineNumbersCheckboxValueChange(ComponentValueChangeEvent<JmixCheckbox, Boolean> event) {
codeEditor.setShowLineNumbers(event.getValue());
}
@Subscribe("printMarginCheckbox")
protected void onPrintMarginCheckboxValueChange(ComponentValueChangeEvent<JmixCheckbox, Boolean> event) {
codeEditor.setShowPrintMargin(event.getValue());
}
@Subscribe("useSoftTabsCheckbox")
protected void onUseSoftTabsCheckboxValueChange(ComponentValueChangeEvent<JmixCheckbox, Boolean> event) {
codeEditor.setUseSoftTabs(event.getValue());
}
@Subscribe("textWrapCheckbox")
protected void onTextWrapCheckboxValueChange(ComponentValueChangeEvent<JmixCheckbox, Boolean> event) {
codeEditor.setTextWrap(event.getValue());
}
数据感知的 codeEditor
下面的示例生成了一个数据感知的 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 | OrderReport 实体的 InstanceContainer 容器。 |
| 2 | 容器内实体的内联 fetch plan。 |
| 3 | 将组件与数据容器和属性进行关联。dataContainer 属性使用 orderReportDc 数据容器,property 引用 code 实体属性。 |
模式
mode 属性设置编辑器需要支持的编程语言或标记语言。该设置可以启用所选语言的语法高亮。
默认语法高亮模式是 CodeEditorMode.PLAIN_TEXT。
示例:
<hbox width="100%" wrap="true">
<select id="modeComboBox" label="Mode"/>
<select id="themeComboBox" label="Theme"/>
</hbox>
<codeEditor id="codeEditor"/>
@ViewComponent
protected CodeEditor codeEditor;
@Subscribe("modeComboBox")
protected void onModeComboBoxValueChange(
ComponentValueChangeEvent<JmixSelect<CodeEditorMode>, CodeEditorMode> event) {
codeEditor.setMode(event.getValue());
codeEditor.setValue(resources.getResourceAsString(DEFAULT_FILE_PATH + event.getValue()));
}
这个例子中,以编程的方法修改了模式并加载所选语言的内容。
主题
theme 属性用于定义编辑器的视觉外观和样式。选择预定义的主题,可以更改代码编辑器的配色方案、字体和其他外观元素。
支持的主题列表通过 CodeEditorTheme 枚举定义。
@ViewComponent
protected CodeEditor codeEditor;
@Subscribe("themeComboBox")
protected void onThemeComboBoxValueChange(
ComponentValueChangeEvent<JmixSelect<CodeEditorTheme>, CodeEditorTheme> event) {
codeEditor.setTheme(event.getValue());
}
自动完成
codeEditor 组件支持自动完成功能。
如果设置 defaultSuggestionsEnabled 属性为 true,自动完成功能可以根据语言 模式 建议默认的选项:
<hbox width="100%" wrap="true" alignItems="BASELINE">
<select id="modeSelect" label="Mode"/>
<checkbox id="defaultSuggestionsCheckbox" label="Default suggestions" value="true"/>
<checkbox id="liveSuggestionsCheckbox" label="Live suggestions" value="true"/>
</hbox>
<codeEditor id="codeEditor" height="100%" minHeight="15em"
defaultSuggestionsEnabled="true"
liveSuggestionsEnabled="true"/>
private static final String DEFAULT_FILE_PATH = "io/jmix/uisamples/codeeditorexample/";
@ViewComponent
private CodeEditor codeEditor;
@ViewComponent
private JmixSelect<CodeEditorMode> modeSelect;
@Autowired
private Resources resources;
@Subscribe
public void onInit(InitEvent event) {
ComponentUtils.setItemsMap(modeSelect, getModeItemsMap());
modeSelect.setValue(CodeEditorMode.SQL);
}
@Subscribe("defaultSuggestionsCheckbox")
public void onDefaultSuggestionsCheckboxValueChange(ComponentValueChangeEvent<JmixCheckbox, Boolean> event) {
codeEditor.setDefaultSuggestionsEnabled(event.getValue());
}
@Subscribe("liveSuggestionsCheckbox")
public void liveSuggestionsCheckboxValueChange(ComponentValueChangeEvent<JmixCheckbox, Boolean> event) {
codeEditor.setLiveSuggestionsEnabled(event.getValue());
}
@Subscribe("modeSelect")
public void onModeSelectValueChange(
ComponentValueChangeEvent<JmixSelect<CodeEditorMode>, CodeEditorMode> event) {
codeEditor.setMode(event.getValue());
codeEditor.setValue(resources.getResourceAsString(DEFAULT_FILE_PATH + event.getValue()));
}
private Map<CodeEditorMode, String> getModeItemsMap() {
LinkedHashMap<CodeEditorMode, String> map = new LinkedHashMap<>();
map.put(CodeEditorMode.JAVA, "Java");
map.put(CodeEditorMode.CSS, "CSS");
map.put(CodeEditorMode.XML, "XML");
map.put(CodeEditorMode.JSON, "JSON");
map.put(CodeEditorMode.JAVASCRIPT, "JavaScript");
map.put(CodeEditorMode.HTML, "HTML");
map.put(CodeEditorMode.TEXT, "Text");
map.put(CodeEditorMode.GROOVY, "Groovy");
map.put(CodeEditorMode.PROPERTIES, "Properties");
map.put(CodeEditorMode.SQL, "SQL");
map.put(CodeEditorMode.PYTHON, "Python");
map.put(CodeEditorMode.SWIFT, "Swift");
map.put(CodeEditorMode.C_CPP, "C++");
return map;
}
可以用 suggester 提供自定义的选项,示例:
<codeEditor id="codeEditor" height="100%" minHeight="15em"
suggestOn="\."/>
@Autowired
private DataManager dataManager;
@Install(to = "codeEditor", subject = "suggester")
public List<Suggestion> codeEditorSuggestions(Suggester.SuggestionContext context) {
return loadCustomers().stream()
.map(customer -> new Suggestion(customer.getInstanceName(), customer.getInstanceName(), "Customer"))
.toList();
}
private List<Customer> loadCustomers() {
return dataManager.load(Customer.class)
.all()
.fetchPlan(FetchPlan.INSTANCE_NAME)
.list();
}
默认情况下,自动完成的弹窗会在用户按下快捷键时打开:
-
Windows 和 Linux:Ctrl-Space
-
macOS:⌥-Space 或 ⌃-Space,根据系统设置不同。
如果 suggestOn 设置为一个正则表达式,则自动完成的弹窗会在用户输入匹配字符串时打开。例如,当 suggestOn="\." 时,用户输入 "." 就会打开自动完成弹窗。
如果 liveSuggestionsEnabled 属性设置为 true,提示窗会根据用户的输入自动显示,而不需要手动触发或设置 suggestOn 属性。一旦用户输入单词字符时,会请求所有的建议选项。请注意,实时自动完成在内容比较多或者有复杂的建议时会非常耗资源,因此 liveSuggestionsEnabled 默认为 false。
XML 属性
下面是 codeEditor 的特殊属性:
| 名称 | 描述 | 默认值 |
|---|---|---|
|
||
设置编辑器内源代码的字体大小 |
|
|
设置是否高亮当前行。 |
|
|
设置是否高亮侧边栏。如果启用,则当前行的侧边栏将高亮显示。 |
|
|
用户输入时,自动打开 建议选项 弹窗。 |
|
|
设置特定模式的语法高亮。支持的模式通过 |
|
|
设置代码宽度垂直线的位置。主要是控制代码显示和打印的宽度。 |
|
|
设置侧边栏的可见性。侧边栏中一般显示代码的行号。 |
|
|
设置行号的可见性。 |
|
|
设置代码宽度垂直线的可见性。 |
|
|
触发 自动完成 的正则表达式,用于匹配用户输入。 |
— |
|
设置长代码行是否自动换行。 |
|
|
设置 |
|
|
设置 tab 字符(制表符)的显示模式。在软制表符模式中,制表符显示为多个空格;在硬制表符模式中显示为 |
|
下面是 codeEditor 支持的其他通用属性:
id - alignSelf - classNames - colspan - css - dataContainer - enabled - errorMessage - focusShortcut - height - helperText - label - maxHeight - maxWidth - minHeight - minWidth - property - readOnly - required - requiredMessage - tabIndex - title - visible - width