Library: Add Adw.MessageDialog example

src/Library/demos/Dialogs/main.blp

@@ -0,0 +1,40 @@
+using Gtk 4.0;
+using Adw 1;
+
+Adw.StatusPage {
+  title: "Dialogs";
+  description: _("Present options, choices or information to users");
+
+  Box {
+    orientation: vertical;
+    halign: center;
+
+    Button button_confirmation {
+      label: "Confirmation Dialog";
+      margin-bottom: 30;
+      styles ["pill"]
+    }
+
+     Button button_error {
+      label: "Error Dialog";
+      margin-bottom: 30;
+      styles ["pill"]
+    }
+
+     Button button_advanced {
+      label: "Advanced Error Dialog";
+      margin-bottom: 30;
+      styles ["pill"]
+    }
+
+    LinkButton {
+      label: "API Reference";
+      uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1.2/class.MessageDialog.html";
+    }
+
+     LinkButton {
+      label: "Human Interface Guidelines";
+      uri: "https://developer.gnome.org/hig/patterns/feedback/dialogs.html";
+    }
+  }
+}

src/Library/demos/Dialogs/main.js

@@ -0,0 +1,86 @@
+import Adw from "gi://Adw";
+import Gtk from "gi://Gtk";
+
+const button_confirmation = workbench.builder.get_object("button_confirmation");
+const button_error = workbench.builder.get_object("button_error");
+const button_advanced = workbench.builder.get_object("button_advanced");
+const window = button_confirmation.get_ancestor(Gtk.Window);
+
+function createConfirmationDialog() {
+  let dialog = new Adw.MessageDialog({
+    heading: "Replace File?",
+    body: 'A file named "example.png" already exists. Do you want to replace it?',
+    close_response: "cancel",
+    modal: true,
+    transient_for: window,
+  });
+
+  dialog.add_response("cancel", "Cancel");
+  dialog.add_response("replace", "Replace");
+
+  // Use DESTRUCTIVE appearance to draw attention to the potentially damaging consequences of this action
+  dialog.set_response_appearance("replace", Adw.ResponseAppearance.DESTRUCTIVE);
+
+  dialog.connect("response", (dialog, response) => {
+    console.log(`Selected "${response}" response.`);
+  });
+
+  dialog.present();
+}
+
+function createErrorDialog() {
+  let dialog = new Adw.MessageDialog({
+    heading: "Critical Error",
+    body: "You did something you should not have",
+    close_response: "okay",
+    modal: true,
+    transient_for: window,
+  });
+
+  dialog.add_response("okay", "Okay");
+
+  dialog.connect("response", (dialog, response) => {
+    console.log(`Selected "${response}" response.`);
+  });
+
+  dialog.present();
+}
+
+//Creates a message dialog with an extra child
+function createAdvancedDialog() {
+  let dialog = new Adw.MessageDialog({
+    heading: "Login",
+    body: "A valid password is needed to continue",
+    close_response: "cancel",
+    modal: true,
+    transient_for: window,
+  });
+
+  dialog.add_response("cancel", "Cancel");
+  dialog.add_response("login", "Login");
+
+  // Use SUGGESTED appearance to mark important responses such as the affirmative action
+  dialog.set_response_appearance("login", Adw.ResponseAppearance.SUGGESTED);
+
+  let entry = new Gtk.PasswordEntry({
+    show_peek_icon: true,
+  });
+
+  dialog.set_extra_child(entry);
+
+  dialog.connect("response", (dialog, response) => {
+    if (dialog.get_response_label(response) === "Login") {
+      console.log(
+        `Selected "${response}" response with password "${entry.get_text()}"`,
+      );
+    } else {
+      console.log(`Selected "${response}" response.`);
+    }
+  });
+
+  dialog.present();
+}
+
+button_confirmation.connect("clicked", createConfirmationDialog);
+button_error.connect("clicked", createErrorDialog);
+button_advanced.connect("clicked", createAdvancedDialog);

src/Library/demos/Dialogs/main.json

@@ -0,0 +1,10 @@
+{
+  "name": "Dialogs",
+  "category": "user_interface",
+  "description": "Present options, choices or information to users",
+  "panels": [
+    "code",
+    "preview"
+  ],
+  "autorun": true
+}

src/Library/demos/Dialogs/main.vala

@@ -0,0 +1,89 @@
+#! /usr/bin/env -S vala workbench.vala --pkg gtk4 --pkg libadwaita-1
+
+public void main() {
+  var button_confirmation = workbench.builder.get_object("button_confirmation") as Gtk.Button;
+  var button_error = workbench.builder.get_object("button_error") as Gtk.Button;
+  var button_advanced = workbench.builder.get_object("button_advanced") as Gtk.Button;
+
+  button_confirmation.clicked.connect(_create_confirmation_dialog);
+  button_error.clicked.connect(_create_error_dialog);
+  button_advanced.clicked.connect(_create_advanced_dialog);
+}
+
+private void _create_confirmation_dialog (Gtk.Button button) {
+  // Get the parent window
+  var window_type = GLib.Type.from_name("GtkWindow");
+  Gtk.Window window = button.get_ancestor(window_type) as Gtk.Window;
+
+  Adw.MessageDialog dialog = new Adw.MessageDialog
+    (window,
+    "Replace File?",
+    """A file named "example.png" already exists. Do you want to replace it?""");
+
+  dialog.close_response = "replace";
+
+  dialog.add_response("cancel", "Cancel");
+  dialog.add_response("replace", "Replace");
+
+  //Use DESTRUCTIVE to draw attention to the potentially damaging consequences of using response.
+  dialog.set_response_appearance("replace", Adw.ResponseAppearance.DESTRUCTIVE);
+
+  dialog.response.connect((response) => {
+    message("Selected \"%s\" response.\n", response);
+  });
+
+dialog.present();
+
+}
+
+private void _create_error_dialog (Gtk.Button button) {
+  // Get the parent window
+  var window_type = GLib.Type.from_name("GtkWindow");
+  Gtk.Window window = button.get_ancestor(window_type) as Gtk.Window;
+
+  Adw.MessageDialog dialog = new Adw.MessageDialog
+    (window,
+    "Critical Error",
+    "You did something you should not have");
+
+  dialog.close_response = "okay";
+
+  dialog.add_response("okay", "Okay");
+
+  dialog.response.connect((response) => {
+    message("Selected \"%s\" response.\n", response);
+  });
+
+dialog.present();
+
+}
+
+private void _create_advanced_dialog(Gtk.Button button) {
+  // Get the parent window
+  var window_type = GLib.Type.from_name("GtkWindow");
+  Gtk.Window window = button.get_ancestor(window_type) as Gtk.Window;
+
+  Adw.MessageDialog dialog = new Adw.MessageDialog (
+    window,
+    "Login",
+    "A valid password is needed to continue");
+
+  dialog.close_response = "cancel";
+  dialog.add_response("cancel", "Cancel");
+  dialog.add_response("login", "Login");
+  dialog.set_response_appearance("login", Adw.ResponseAppearance.SUGGESTED);
+
+  var entry = new Gtk.PasswordEntry() {show_peek_icon = true};
+
+  dialog.set_extra_child(entry);
+
+  dialog.response.connect((response) => {
+    if (dialog.get_response_label(response) == "Login") {
+      message("Selected \"%s\" response with password \"%s\".", response, entry.get_text());
+    } else {
+      message("Selected \"%s\" response.", response);
+    }
+  });
+
+  dialog.present();
+}