Show dialogs - fakeivchenko/lwjwae GitHub Wiki

Dialogs of the platform open files and folders, pick where to save, and ask a question, from Java and from the page, as modal dialogs over the window. Export notes through a native dialog shows the save dialog; this guide shows the others.

A question before clearing a list, on Linux and on Windows 11

The dialog to open photos, on Linux and on Windows 11

From Java

public class Dialogs {
  public static void main(String[] args) {
    Application.launch(
        WindowParameters.of("Dialogs", 600, 460),
        window -> {
          window.bind("pickPhotos", Void.class, _ -> Dialogs.pickPhotos(window));
          window.bind("clearAll", Void.class, _ -> Dialogs.clearAll(window));
          window.loadResource("dialogs/index.html");
        });
  }

  /** Photos to open, several at once, of two types. */
  private static List<String> pickPhotos(Window window) {
    List<Path> photos =
        window
            .showOpenDialog(
                OpenDialogParameters.builder()
                    .title("Pick photos")
                    .multiple(true)
                    .fileTypes(List.of(FileType.of("Photos", "jpg", "png")))
                    .build())
            .join();
    return photos.stream().map(Path::toString).toList();
  }

  /** Asks before it does something that can't be undone. */
  private static Boolean clearAll(Window window) {
    return window
        .showMessageDialog(
            MessageDialogParameters.builder()
                .title("Clear the list")
                .message("Clear every photo from the list?")
                .detail("The photos stay on the disk; only the list forgets them.")
                .level(MessageLevel.WARNING)
                .buttons(MessageButtons.OK_CANCEL)
                .build())
        .join();
  }
}
Dialog Method Result
Open files or folders showOpenDialog(OpenDialogParameters): title, directory, fileTypes, multiple, directories The picked paths, none for a cancel
Save showSaveDialog(SaveDialogParameters): title, directory, fileName, fileTypes The path, or empty
Message showMessageDialog(MessageDialogParameters): title, message, detail, level, buttons true for OK or yes

The short forms cover the common cases: pickFile(types), pickFiles(types), pickFolder(), pickSaveFile(name, types), alert(message), and confirm(message). level is INFO, WARNING, ERROR, or QUESTION, and buttons is OK, OK_CANCEL, or YES_NO. Every dialog returns a CompletableFuture; cancelling it closes the dialog.

From the page

lwjwae.dialog opens the same dialogs, with the same options:

document.querySelector("#folder").addEventListener("click", async () => {
  const folders = await lwjwae.dialog.open({ title: "Pick a folder", directories: true });
  show(folders);
});
document.querySelector("#ask").addEventListener("click", async () => {
  const yes = await lwjwae.dialog.message({
    title: "A question", message: "Keep the photos in their folders?", level: "question", buttons: "yesNo",
  });
  answer.textContent = yes ? "Yes" : "No";
});

open resolves to an array of paths, save to a path or null, and message to true for OK or yes. fileTypes is [{ name, extensions }], and a signal option closes the dialog when it aborts.

Platforms

Open and save Message
Windows The common item dialog; the file types are its filters A message box; the detail follows the message after a blank line
macOS A sheet of the window; the title shows above the files, and the file types merge into one list An alert sheet: the message in bold, the detail under it, no title
Linux GtkFileChooserNative: the dialog of the desktop portal inside a sandbox such as Flatpak, GTK's own outside one A GtkMessageDialog, with the buttons in the language of the user
⚠️ **GitHub.com Fallback** ⚠️