DisplaySettings: Convert the GUI to GML :^)

Applications/DisplaySettings/CMakeLists.txt

@@ -1,5 +1,8 @@
+compile_gml(DisplaySettingsWindow.gml DisplaySettingsWindowGML.h display_settings_window_gml)
+
 set(SOURCES
     DisplaySettings.cpp
+    DisplaySettingsWindowGML.h
     main.cpp
     MonitorWidget.cpp
 )

Applications/DisplaySettings/DisplaySettings.cpp

@@ -1,5 +1,6 @@
 /*
  * Copyright (c) 2019-2020, Jesse Buhagiar <jooster669@gmail.com>
+ * Copyright (c) 2020, Andreas Kling <kling@serenityos.org>
  * All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -26,6 +27,7 @@
 
 #include "DisplaySettings.h"
 #include <AK/StringBuilder.h>
+#include <Applications/DisplaySettings/DisplaySettingsWindowGML.h>
 #include <LibCore/ConfigFile.h>
 #include <LibCore/DirIterator.h>
 #include <LibGUI/Application.h>
@@ -41,6 +43,8 @@
 #include <LibGfx/Palette.h>
 #include <LibGfx/SystemTheme.h>
 
+REGISTER_WIDGET(DisplaySettings, MonitorWidget)
+
 DisplaySettingsWidget::DisplaySettingsWidget()
 {
     create_resolution_list();
@@ -87,34 +91,11 @@ void DisplaySettingsWidget::create_wallpaper_list()
 void DisplaySettingsWidget::create_frame()
 {
     m_root_widget = GUI::Widget::construct();
-    m_root_widget->set_layout<GUI::VerticalBoxLayout>();
-    m_root_widget->set_fill_with_background_color(true);
-    m_root_widget->layout()->set_margins({ 4, 4, 4, 4 });
-
-    auto& settings_content = m_root_widget->add<GUI::Widget>();
-    settings_content.set_layout<GUI::VerticalBoxLayout>();
-    settings_content.set_background_color(Color::Blue);
-    settings_content.set_background_role(Gfx::ColorRole::Window);
-    settings_content.layout()->set_margins({ 4, 4, 4, 4 });
-
-    /// Wallpaper Preview /////////////////////////////////////////////////////////////////////////
-
-    m_monitor_widget = settings_content.add<MonitorWidget>();
-    m_monitor_widget->set_fixed_size(338, 248);
-
-    /// Wallpaper Row /////////////////////////////////////////////////////////////////////////////
+    m_root_widget->load_from_gml(display_settings_window_gml);
 
-    auto& wallpaper_selection_container = settings_content.add<GUI::Widget>();
-    wallpaper_selection_container.set_layout<GUI::HorizontalBoxLayout>();
-    wallpaper_selection_container.layout()->set_margins({ 0, 4, 0, 0 });
-    wallpaper_selection_container.set_fixed_height(22);
+    m_monitor_widget = static_cast<DisplaySettings::MonitorWidget&>(*m_root_widget->find_descendant_by_name("monitor_widget"));
 
-    auto& wallpaper_label = wallpaper_selection_container.add<GUI::Label>();
-    wallpaper_label.set_text_alignment(Gfx::TextAlignment::CenterLeft);
-    wallpaper_label.set_fixed_width(70);
-    wallpaper_label.set_text("Wallpaper:");
-
-    m_wallpaper_combo = wallpaper_selection_container.add<GUI::ComboBox>();
+    m_wallpaper_combo = static_cast<GUI::ComboBox&>(*m_root_widget->find_descendant_by_name("wallpaper_combo"));
     m_wallpaper_combo->set_only_allow_values_from_model(true);
     m_wallpaper_combo->set_model(*GUI::ItemListModel<AK::String>::create(m_wallpapers));
     m_wallpaper_combo->on_change = [this](auto& text, const GUI::ModelIndex& index) {
@@ -139,11 +120,9 @@ void DisplaySettingsWidget::create_frame()
         m_monitor_widget->update();
     };
 
-    auto& button = wallpaper_selection_container.add<GUI::Button>();
-    button.set_tooltip("Select Wallpaper from file system.");
+    auto& button = static_cast<GUI::Button&>(*m_root_widget->find_descendant_by_name("wallpaper_open_button"));
     button.set_icon(Gfx::Bitmap::load_from_file("/res/icons/16x16/open.png"));
     button.set_button_style(Gfx::ButtonStyle::CoolBar);
-    button.set_fixed_size(22, 22);
     button.on_click = [this](auto) {
         Optional<String> open_path = GUI::FilePicker::get_open_filepath(root_widget()->window(), "Select wallpaper from file system.");
 
@@ -155,19 +134,7 @@ void DisplaySettingsWidget::create_frame()
         m_wallpaper_combo->set_only_allow_values_from_model(true);
     };
 
-    /// Mode //////////////////////////////////////////////////////////////////////////////////////
-
-    auto& mode_selection_container = settings_content.add<GUI::Widget>();
-    mode_selection_container.set_layout<GUI::HorizontalBoxLayout>();
-    mode_selection_container.layout()->set_margins({ 0, 4, 0, 0 });
-    mode_selection_container.set_fixed_height(22);
-
-    auto& mode_label = mode_selection_container.add<GUI::Label>();
-    mode_label.set_text_alignment(Gfx::TextAlignment::CenterLeft);
-    mode_label.set_fixed_width(70);
-    mode_label.set_text("Mode:");
-
-    m_mode_combo = mode_selection_container.add<GUI::ComboBox>();
+    m_mode_combo = static_cast<GUI::ComboBox&>(*m_root_widget->find_descendant_by_name("mode_combo"));
     m_mode_combo->set_only_allow_values_from_model(true);
     m_mode_combo->set_model(*GUI::ItemListModel<AK::String>::create(m_modes));
     m_mode_combo->on_change = [this](auto&, const GUI::ModelIndex& index) {
@@ -175,18 +142,7 @@ void DisplaySettingsWidget::create_frame()
         m_monitor_widget->update();
     };
 
-    /// Resolution Row ////////////////////////////////////////////////////////////////////////////
-
-    auto& resolution_selection_container = settings_content.add<GUI::Widget>();
-    resolution_selection_container.set_layout<GUI::HorizontalBoxLayout>();
-    resolution_selection_container.set_fixed_height(22);
-
-    auto& m_resolution_label = resolution_selection_container.add<GUI::Label>();
-    m_resolution_label.set_text_alignment(Gfx::TextAlignment::CenterLeft);
-    m_resolution_label.set_fixed_width(70);
-    m_resolution_label.set_text("Resolution:");
-
-    m_resolution_combo = resolution_selection_container.add<GUI::ComboBox>();
+    m_resolution_combo = static_cast<GUI::ComboBox&>(*m_root_widget->find_descendant_by_name("resolution_combo"));
     m_resolution_combo->set_only_allow_values_from_model(true);
     m_resolution_combo->set_model(*GUI::ItemListModel<Gfx::IntSize>::create(m_resolutions));
     m_resolution_combo->on_change = [this](auto&, const GUI::ModelIndex& index) {
@@ -194,51 +150,26 @@ void DisplaySettingsWidget::create_frame()
         m_monitor_widget->update();
     };
 
-    /// Background Color Row //////////////////////////////////////////////////////////////////////
-
-    auto& color_selection_container = settings_content.add<GUI::Widget>();
-    color_selection_container.set_layout<GUI::HorizontalBoxLayout>();
-    color_selection_container.set_fixed_height(22);
-
-    auto& color_label = color_selection_container.add<GUI::Label>();
-    color_label.set_text_alignment(Gfx::TextAlignment::CenterLeft);
-    color_label.set_fixed_width(70);
-    color_label.set_text("Color:");
-
-    m_color_input = color_selection_container.add<GUI::ColorInput>();
+    m_color_input = static_cast<GUI::ColorInput&>(*m_root_widget->find_descendant_by_name("color_input"));
     m_color_input->set_color_has_alpha_channel(false);
-    m_color_input->set_fixed_width(90);
     m_color_input->set_color_picker_title("Select color for desktop");
     m_color_input->on_change = [this] {
         m_monitor_widget->set_background_color(m_color_input->color());
         m_monitor_widget->update();
     };
 
-    /// Add the apply and cancel buttons //////////////////////////////////////////////////////////
-
-    auto& bottom_widget = settings_content.add<GUI::Widget>();
-    bottom_widget.set_layout<GUI::HorizontalBoxLayout>();
-    bottom_widget.layout()->add_spacer();
-    bottom_widget.set_fixed_height(22);
-
-    auto& ok_button = bottom_widget.add<GUI::Button>();
-    ok_button.set_text("OK");
-    ok_button.set_fixed_size(60, 22);
+    auto& ok_button = static_cast<GUI::Button&>(*m_root_widget->find_descendant_by_name("ok_button"));
     ok_button.on_click = [this](auto) {
         send_settings_to_window_server();
         GUI::Application::the()->quit();
     };
 
-    auto& cancel_button = bottom_widget.add<GUI::Button>();
-    cancel_button.set_text("Cancel");
-    cancel_button.set_fixed_size(60, 22);
+    auto& cancel_button = static_cast<GUI::Button&>(*m_root_widget->find_descendant_by_name("cancel_button"));
     cancel_button.on_click = [](auto) {
         GUI::Application::the()->quit();
     };
 
-    auto& apply_button = bottom_widget.add<GUI::Button>();
-    apply_button.set_text("Apply");
-    apply_button.set_fixed_size(60, 22);
+    auto& apply_button = static_cast<GUI::Button&>(*m_root_widget->find_descendant_by_name("apply_button"));
     apply_button.on_click = [this](auto) {
         send_settings_to_window_server();
     };

Applications/DisplaySettings/DisplaySettings.h

@@ -50,7 +50,7 @@ private:
     Vector<Gfx::IntSize> m_resolutions;
 
     RefPtr<GUI::Widget> m_root_widget;
-    RefPtr<MonitorWidget> m_monitor_widget;
+    RefPtr<DisplaySettings::MonitorWidget> m_monitor_widget;
     RefPtr<GUI::ComboBox> m_wallpaper_combo;
     RefPtr<GUI::ComboBox> m_mode_combo;
     RefPtr<GUI::ComboBox> m_resolution_combo;

Applications/DisplaySettings/DisplaySettingsWindow.gml

@@ -0,0 +1,117 @@
+@GUI::Widget {
+    fill_with_background_color: true
+
+    layout: @GUI::VerticalBoxLayout {
+        margins: [4, 4, 4, 4]
+    }
+
+    @DisplaySettings::MonitorWidget {
+        name: "monitor_widget"
+        fixed_width: 338
+        fixed_height: 248
+    }
+
+    @GUI::Widget {
+        fixed_height: 22
+        layout: @GUI::HorizontalBoxLayout {
+            margins: [0, 4, 0, 0]
+        }
+
+        @GUI::Label {
+            text: "Wallpaper:"
+            text_alignment: "CenterLeft"
+            fixed_width: 70
+        }
+
+        @GUI::ComboBox {
+            name: "wallpaper_combo"
+        }
+
+        @GUI::Button {
+            name: "wallpaper_open_button"
+            tooltip: "Select Wallpaper from file system."
+            fixed_width: 22
+            fixed_height: 22
+        }
+    }
+
+    @GUI::Widget {
+        fixed_height: 22
+        layout: @GUI::HorizontalBoxLayout {
+            margins: [0, 4, 0, 0]
+        }
+
+        @GUI::Label {
+            text: "Modes:"
+            text_alignment: "CenterLeft"
+            fixed_width: 70
+        }
+
+        @GUI::ComboBox {
+            name: "mode_combo"
+        }
+    }
+
+    @GUI::Widget {
+        fixed_height: 22
+        layout: @GUI::HorizontalBoxLayout {
+            margins: [0, 4, 0, 0]
+        }
+
+        @GUI::Label {
+            text: "Resolution:"
+            text_alignment: "CenterLeft"
+            fixed_width: 70
+        }
+
+        @GUI::ComboBox {
+            name: "resolution_combo"
+        }
+    }
+
+
+    @GUI::Widget {
+        fixed_height: 22
+        layout: @GUI::HorizontalBoxLayout {
+            margins: [0, 4, 0, 0]
+        }
+
+        @GUI::Label {
+            text: "Color:"
+            text_alignment: "CenterLeft"
+            fixed_width: 70
+        }
+
+        @GUI::ColorInput {
+            name: "color_input"
+            fixed_width: 90
+        }
+    }
+
+    @GUI::Widget {
+        fixed_height: 22
+        layout: @GUI::HorizontalBoxLayout {
+        }
+
+        @GUI::Widget {
+        }
+
+        @GUI::Button {
+            name: "ok_button"
+            text: "OK"
+            fixed_width: 60
+        }
+
+        @GUI::Button {
+            name: "cancel_button"
+            text: "Cancel"
+            fixed_width: 60
+        }
+
+        @GUI::Button {
+            name: "apply_button"
+            text: "Apply"
+            fixed_width: 60
+        }
+    }
+}

Applications/DisplaySettings/MonitorWidget.cpp

@@ -26,6 +26,9 @@
 
 #include "MonitorWidget.h"
 #include <LibGUI/Painter.h>
+#include <LibGfx/Bitmap.h>
+
+namespace DisplaySettings {
 
 MonitorWidget::MonitorWidget()
 {
@@ -111,3 +114,5 @@ void MonitorWidget::paint_event(GUI::PaintEvent& event)
         painter.draw_text(m_monitor_rect, m_desktop_resolution.to_string(), Gfx::TextAlignment::Center, Color::White);
     }
 }
+
+}

Applications/DisplaySettings/MonitorWidget.h

@@ -26,15 +26,14 @@
 
 #pragma once
 
-#include "LibGfx/Bitmap.h"
 #include <LibGUI/Widget.h>
 
+namespace DisplaySettings {
+
 class MonitorWidget final : public GUI::Widget {
     C_OBJECT(MonitorWidget);
 
 public:
-    MonitorWidget();
-
     bool set_wallpaper(String path);
     String wallpaper();
 
@@ -48,6 +47,8 @@ public:
     Gfx::Color background_color();
 
 private:
+    MonitorWidget();
+
     virtual void paint_event(GUI::PaintEvent& event) override;
 
     Gfx::IntRect m_monitor_rect;
@@ -59,3 +60,5 @@ private:
     Gfx::IntSize m_desktop_resolution;
     Gfx::Color m_desktop_color;
 };
+
+}