3.5.2.1.42. 源码编辑器

在线示例

API 文档

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

该组件的 XML 元素: sourceCodeEditor

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

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

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

  • highlightActiveLine 用于高亮光标所在行。
  • mode 提供语法高亮支持的语言列表。此列表在 SourceCodeEditor 接口的 Mode 枚举中定义,包括以下语言:Java、HTML、XML、Groovy、SQL、JavaScript、Properties 和不进行高亮显示的 Text。
  • printMargin 设置是否显示打印边距。
  • showGutter 用于设置显示行号的侧栏是否隐藏。

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

XML-descriptor:

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

控制器:

  1. @Inject
  2. private CheckBox highlightActiveLineCheck;
  3. @Inject
  4. private LookupField<HighlightMode> modeField;
  5. @Inject
  6. private CheckBox printMarginCheck;
  7. @Inject
  8. private CheckBox showGutterCheck;
  9. @Inject
  10. private SourceCodeEditor simpleCodeEditor;
  11. @Subscribe
  12. protected void onInit(InitEvent event) {
  13. highlightActiveLineCheck.setValue(simpleCodeEditor.isHighlightActiveLine());
  14. highlightActiveLineCheck.addValueChangeListener(e ->
  15. simpleCodeEditor.setHighlightActiveLine(Boolean.TRUE.equals(e.getValue())));
  16. printMarginCheck.setValue(simpleCodeEditor.isShowPrintMargin());
  17. printMarginCheck.addValueChangeListener(e ->
  18. simpleCodeEditor.setShowPrintMargin(Boolean.TRUE.equals(e.getValue())));
  19. showGutterCheck.setValue(simpleCodeEditor.isShowGutter());
  20. showGutterCheck.addValueChangeListener(e ->
  21. simpleCodeEditor.setShowGutter(Boolean.TRUE.equals(e.getValue())));
  22. Map<String, HighlightMode> modes = new HashMap<>();
  23. for (HighlightMode mode : SourceCodeEditor.Mode.values()) {
  24. modes.put(mode.toString(), mode);
  25. }
  26. modeField.setOptionsMap(modes);
  27. modeField.setValue(HighlightMode.TEXT);
  28. modeField.addValueChangeListener(e ->
  29. simpleCodeEditor.setMode(e.getValue()));
  30. }

结果是:

gui SourceCodeEditor 1

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

  1. @Inject
  2. protected DataGrid<User> usersGrid;
  3. @Inject
  4. private SourceCodeEditor suggesterCodeEditor;
  5. @Inject
  6. private CollectionContainer<User> usersDc;
  7. @Inject
  8. private CollectionLoader<User> usersDl;
  9. @Subscribe
  10. protected void onInit(InitEvent event) {
  11. suggesterCodeEditor.setSuggester((source, text, cursorPosition) -> {
  12. List<Suggestion> suggestions = new ArrayList<>();
  13. usersDl.load();
  14. for (User user : usersDc.getItems()) {
  15. suggestions.add(new Suggestion(source, user.getLogin(), user.getName(), null, -1, -1));
  16. }
  17. return suggestions;
  18. });
  19. }

结果:

gui SourceCodeEditor 2

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

  1. <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