3.5.2.1.42. 源码编辑器

在线示例

API 文档

SourceCodeEditor 用于显示和输入源码。它是一个多行文本区域，具有代码高亮显示和可选的打印边距以及带行号的侧栏。

该组件的 XML 元素： sourceCodeEditor

基本上，SourceCodeEditor 主要复制 TextField组件的功能，并具有以下特性：

• 如果 handleTabKey 是 true，Tab 按键被处理为缩进行，当为 false 时，它用于移动光标或焦点到下一个制表位。应在初始化界面时设置此属性，此属性不支持运行时更改。

可以在运行时更改所有以下属性：

• highlightActiveLine 用于高亮光标所在行。

• mode 提供语法高亮支持的语言列表。此列表在 SourceCodeEditor 接口的 Mode 枚举中定义，包括以下语言：Java、HTML、XML、Groovy、SQL、JavaScript、Properties 和不进行高亮显示的 Text。

• printMargin 设置是否显示打印边距。

• showGutter 用于设置显示行号的侧栏是否隐藏。

下面是在运行时调整 SourceCodeEditor 组件的示例。

XML-descriptor:

<hbox spacing="true">
    <checkBox id="highlightActiveLineCheck" align="BOTTOM_LEFT" caption="Highlight Active Line"/>
    <checkBox id="printMarginCheck" align="BOTTOM_LEFT" caption="Print Margin"/>
    <checkBox id="showGutterCheck" align="BOTTOM_LEFT" caption="Show Gutter"/>
    <lookupField id="modeField" align="BOTTOM_LEFT" caption="Mode" required="true"/>
</hbox>
<sourceCodeEditor id="simpleCodeEditor" width="100%"/>

控制器：

@Inject
private CheckBox highlightActiveLineCheck;
@Inject
private LookupField<HighlightMode> modeField;
@Inject
private CheckBox printMarginCheck;
@Inject
private CheckBox showGutterCheck;
@Inject
private SourceCodeEditor simpleCodeEditor;
@Subscribe
protected void onInit(InitEvent event) {
    highlightActiveLineCheck.setValue(simpleCodeEditor.isHighlightActiveLine());
    highlightActiveLineCheck.addValueChangeListener(e ->
            simpleCodeEditor.setHighlightActiveLine(Boolean.TRUE.equals(e.getValue())));
    printMarginCheck.setValue(simpleCodeEditor.isShowPrintMargin());
    printMarginCheck.addValueChangeListener(e ->
            simpleCodeEditor.setShowPrintMargin(Boolean.TRUE.equals(e.getValue())));
    showGutterCheck.setValue(simpleCodeEditor.isShowGutter());
    showGutterCheck.addValueChangeListener(e ->
            simpleCodeEditor.setShowGutter(Boolean.TRUE.equals(e.getValue())));
    Map<String, HighlightMode> modes = new HashMap<>();
    for (HighlightMode mode : SourceCodeEditor.Mode.values()) {
        modes.put(mode.toString(), mode);
    }
    modeField.setOptionsMap(modes);
    modeField.setValue(HighlightMode.TEXT);
    modeField.addValueChangeListener(e ->
            simpleCodeEditor.setMode(e.getValue()));
}

结果是：

SourceCodeEditor 也支持 Suggester 接口提供的代码自动完成功能。要激活自动完成功能，应调用 setSuggester 方法，例如：

@Inject
protected DataGrid<User> usersGrid;
@Inject
private SourceCodeEditor suggesterCodeEditor;
@Inject
private CollectionContainer<User> usersDc;
@Inject
private CollectionLoader<User> usersDl;
@Subscribe
protected void onInit(InitEvent event) {
    suggesterCodeEditor.setSuggester((source, text, cursorPosition) -> {
        List<Suggestion> suggestions = new ArrayList<>();
        usersDl.load();
        for (User user : usersDc.getItems()) {
            suggestions.add(new Suggestion(source, user.getLogin(), user.getName(), null, -1, -1));
        }
        return suggestions;
    });
}

结果：

Ctrl+Space 或者输入 . (点）时会调用智能建议。如需禁用该自动完成功能，设置 suggestOnDot 属性为 false。其默认值为 true。

<sourceCodeEditor id="simpleCodeEditor" width="100%" suggestOnDot="false"/>

SourceCodeEditor 的展示可以使用带 $cuba-sourcecodeeditor-* 前缀的 SCSS 变量进行自定义。可以在创建一个 主题扩展 或者一个 自定义主题 之后在可视化编辑器里修改这些变量的值。

sourceCodeEditor 的属性

align - caption - captionAsHtml - colspan - contextHelpText - contextHelpTextHtmlEnabled - css - dataContainer - datasource - description - descriptionAsHtml - editable - enable - box.expandRatio - handleTabKey - height - highlightActiveLine - icon - id - mode - printMargin - property - required - requiredMessage - rowspan - suggestOnDot - showGutter - stylename - tabIndex - visible - width

API

addValueChangeListener - setContextHelpIconClickHandler