Kotlin UI DSL Version 1
Kotlin UI DSL allows creating UI forms with input components bound to state objects. The forms are built by using a declarative Kotlin syntax. It shares similarities with Jetpack Compose for Android and is intended to build UI forms or part of forms for, e.g. dialogs and settings pages.
The Kotlin UI DSL is not intended to build general UIs, like tool windows controls that trigger some actions and do not contain any input components bound to state objects. For this purpose, use custom Swing components from the IntelliJ Platform or the standard ones.
This document covers the Kotlin UI DSL in IntelliJ Platform 2019.2. A lot of the features described in this document are not available for plugins targeting earlier versions.
The Kotlin UI DSL Version 1 functions are located in the
panel to create UI:
Rows are created vertically from top to bottom, in the same order as lines of code that call
row. Inside one row, you add components from left to right in the same order calls to factory method or
() appear in each row. Every component is effectively placed in its own grid cell.
The label for the row can be specified as a parameter for the
Rows can be nested. Components in a nested row block are considered to be subordinate to the containing row and are indented accordingly.
To put multiple components in the same grid cell, wrap them in a
To put a component on the right side of a grid row, use the
There are two ways to add child components. The recommended way is to use factory methods
link, etc. It allows you to create consistent UI and reuse common patterns.
These methods also support property bindings, allowing you to automatically load the value displayed in the component from a property and to store it back. The easiest way to do that is to pass a reference to a Kotlin bound property:
Note that the bound property reference syntax also can be used to reference Java fields, but not getter/setter pairs.
Alternatively, many factory methods support specifying a getter/setter pair for cases when a property mapping is more complicated:
If you want to add a component for which there are no factory methods, you can simply invoke an instance of your component, using the
() overloaded operator:
See examples above.
Radio button groups are created using the
buttonGroup block. There are two ways to use it. If the selected radio button corresponds to a specific value of a single property, pass the property binding to the
buttonGroup method and the specific values to
If the selected radio button is controlled by multiple boolean properties, use
buttonGroup with no binding and specify property bindings for all but one of the radio buttons:
textField method for a simple text field:
For entering numbers, use
For password text fields, there is no factory function available, so you need to use
To specify the size of a text field, either pass the
columns parameter as shown in the
intTextField example above, or use
comboBox method with either a bound property, or a getter/setter pair:
To open URL in the browser, use
titledRow method and put the controls under the separator into the nested block:
Integrating Panels with Property Bindings
A panel returned by the
panel method is an instance of
DialogPanel. This base class supports the standard
If you're using a
DialogPanel as the main panel of a
apply() method will be automatically called when the dialog is closed using OK action. The other methods are unused in this case.
focused() method to specify which control should be focused when the dialog is initialized:
Reference: Settings Guide
Enabling and Disabling Controls
enableIf method to bind the enabled state of a control to the values entered in other controls. The parameter of the method is a predicate.
The available predicates are:
selectedto check the selected state of a checkbox or radio button
selectedValueMatchesto check the selected item in a combo box.
Predicates can be combined with
or infix functions:
Sample usages in IntelliJ Platform IDEs:
One Cell Is Minimum, Second One Is Maximum
CCFlags.pushX for some component in the second cell.