~~NOTRANS~~
~~Title: Binding an External Editor~~

The [[:jvx:client:gui:bind_editors_model|UIEditor]] is the standard component for binding editors to the data model. It works great for default data types like text, number, date, or image. But sometimes it's better to use custom editors with advanced features, e.g., if your text contains source code, you could use a text editor with syntax highlighting or auto completion.

You have different options to solve this problem. The first one is to write your own cell editor based on the ICellEditor interface. This isn't difficult but sometimes a lot of work and could be tricky. This solution is recommended if you need the cell editor for multiple UI implementations. If you want a quick and easy solution, simply use our wrapper component. Usually, it works without coding and is simple to integrate in your existing application. We used this solution in [[:visionx:home|VisionX]] for our [[https://blog.sibvisions.com/2018/02/20/visionx-css-styling-feature/|CSS editor]].

The integration is super simple:
<file java>
panStylesheets.add(new ExternalEditor(new TextEditorComponent(spArea, textArea), dataBook, "CSS"));
</file>

The **ExternalEditor** will be bound to a data book and a specific column, like any other cell editor.


The creation of the textArea is not tricky:
<file java>
RSyntaxTextArea textArea = new RSyntaxTextArea(20, 60);
textArea.setSyntaxEditingStyle(SyntaxConstants.SYNTAX_STYLE_CSS);
textArea.setAutoIndentEnabled(true);
textArea.setBracketMatchingEnabled(true);
textArea.setCaretPosition(0);
textArea.setClearWhitespaceLinesEnabled(false);
textArea.setWhitespaceVisible(false);
textArea.setCloseCurlyBraces(true);
textArea.setLineWrap(false);
textArea.setEditable(true);
textArea.setMarkOccurrences(true);
textArea.setTabSize(4);
</file>

You need a scroll pane as well:

<file java>
RTextScrollPane spArea = new RTextScrollPane(textArea, true);
</file>

And the theme for syntax highlighting:

<file java>
Theme.load(ResourceUtil.getResourceAsStream("/org/fife/ui/rsyntaxtextarea/themes/eclipse.xml")).apply(textArea);
</file>

Finally, the auto completion:

<file java>
CompletionProvider provider = new CssCompletionProvider();

AutoCompletion ac = new AutoCompletion(provider);
ac.install(textArea);
</file>