Karol Lewandowski d8e83b57ea
UI Guidelines (#1308)
* Add UI Guidelines to  SDK docs

* Add UI Guidelines to  SDK docs

* Fixing build errors

* optimize PNGs

* add UI guidelines landing page placeholder

* IJ SDK Docs <-> UI guidelines crosslinks updated

* split_button.md: remove reference to removed setting

* use <ui-path>

* use MD instead of <note>

* use %gh-ic% links

* drop_down.md: fix <control>

* code samples: fix most obvious issues

* remove obsolete `_defaults.md`

* ijs.tree: UI cleanup

* Delete "under construction" pages

* Fix headers

* Add link-summary

* Remove invalid links

* Delete unused files

* Remove ''@2x' from image file names

* Use Markdown syntax for some images and tables

* Rename non-unique files to unique

* Remove alpha in images where content is unreadable

* align quotation marks

* Controls: cleanup/fixes, add code links, edit

* tooltip.md: fix HTML

* misc fixes

* typography.md: fix table contents

* typography.md: fix table header

* UI guidelines landing page + TOC fixes

* remove unused icons_list.md

* Normalize image paths

* validation_errors.md: Fix broken tab

* "correct"/"incorrect" labels styling

* Resize images to 50%

* button.topic: fixes

* grammar, spelling, minor edits

* remove '&nbsp;'

* fix 99px

* cleanup

* UI_kit.md: minor

* Fix "MRK058: Large image in paragraph rendered as a block element by default."

* button.topic: Add img[alt]

* mnemonics.md: Update "Contact Us" link to the IJSDK YouTrack

* split_button.md: Use ui-path

* UI landing: add feedback snippet

* Improve code snippets formatting and naming

* Fix code samples

* Fix code samples

* Add Kotlin variants for code samples

* Add icons_list.md

* crosslinks

* Change external link to https://intellij-icons.jetbrains.design/

* icons list -> https://intellij-icons.jetbrains.design

* Hide info about reducing split button to simple action button (now it is available through the registry only)

* reformat

* icons_style.md: Images in new line

---------

Co-authored-by: marianna.kononenko <marianna.kononenko@jetbrains.com>
Co-authored-by: Yann Cébron <yann.cebron@jetbrains.com>
2024-05-16 13:51:56 +02:00

5.3 KiB

Creating, showing, and getting the input provided by users in dialogs.

Dialogs

UI Guidelines: ,

DialogWrapper

The DialogWrapper is the base class which is supposed to be used for all modal dialogs (and some non-modal dialogs) shown in IntelliJ Platform.

It provides the following features:

  • Button layout (platform-specific order of OK/Cancel buttons, macOS-specific Help button)
  • Context help
  • Remembering the size of the dialog
  • Non-modal validation (displaying an error message text when the data entered into the dialog is not valid)
  • Keyboard shortcuts:
    • Esc for closing the dialog
    • Left/Right for switching between buttons
    • Y/N for Yes/No actions if they exist in the dialog
  • Optional Do not ask again checkbox

There's also a DSL-like API via DialogBuilder.

Usage

When using the DialogWrapper class for a dialog, follow these required steps:

  • Call the base class constructor and provide either a Project in the frame of which the dialog will be displayed, or a parent component for the dialog.
  • Call the setTitle() method to set the title for the dialog
  • Call the init() method from the constructor of the dialog class
  • Implement the createCenterPanel() method to return the component comprising the main contents of the dialog.

Optionally:

  • Override the getPreferredFocusedComponent() method and return the component that should be focused when the dialog is first displayed.
  • Override the getDimensionServiceKey() method to return the identifier which will be used for persisting the dialog dimensions.
  • Override the getHelpId() method to return the context help topic associated with the dialog (see Context Help).

The DialogWrapper class is often used together with GUI Designer forms. In this case, bind a GUI Designer form to the class extending DialogWrapper, bind the top-level panel of the form to a field and return that field from the createCenterPanel() method. When using Kotlin, use Kotlin UI DSL to provide the dialog's contents.

See topic in UI Guidelines for recommendations on arranging UI controls in dialogs.

Existing dialogs can be inspected at runtime using UI Inspector, e.g., to locate the underlying implementation of UI components.

To display the dialog, call the show() method and then use the getExitCode() method to check how the dialog was closed (see DialogWrapper#OK_EXIT_CODE|CANCEL_EXIT_CODE|CLOSE_EXIT_CODE). The showAndGet() method can be used to combine these two calls.

To customize the buttons displayed in the dialog (replacing the standard OK/Cancel/Help set of buttons), override either the createActions() or createLeftActions() methods. Both of these methods return an array of Swing Action objects. If a button closes the dialog, use DialogWrapperExitAction as the base class for the action. Use action.putValue(DialogWrapper.DEFAULT_ACTION, true) to set the default button.

Input Validation

Please see also topic in UI Guidelines.

To validate the data entered into the dialog, override the doValidate() method. The method will be called automatically by timer. If the currently entered data is valid, return null. Otherwise, return a ValidationInfo object which encapsulates an error message, and an optional component associated with the invalid data. When specifying a component, an error icon will be displayed next to it, and it will be focused when the user tries to invoke the OK action.

Example

Simple definition of a DialogWrapper:

public class SampleDialogWrapper extends DialogWrapper {

  public SampleDialogWrapper() {
    super(true); // use current window as parent
    setTitle("Test DialogWrapper");
    init();
  }

  @Nullable
  @Override
  protected JComponent createCenterPanel() {
    JPanel dialogPanel = new JPanel(new BorderLayout());

    JLabel label = new JLabel("Testing");
    label.setPreferredSize(new Dimension(100, 100));
    dialogPanel.add(label, BorderLayout.CENTER);

    return dialogPanel;
  }
}

Show SampleDialogWrapper dialog when user clicks on button:

JButton testButton = new JButton();
testButton.addActionListener(actionEvent -> {
  if (new SampleDialogWrapper().showAndGet()) {
    // user pressed OK
  }
});