FontEditor: Initial port to using a VisualBuilder generated UI.

Here goes the first attempt at using VisualBuilder to make an application.

There are many features missing that we are gonna have to implement,
noticeably custom widgets (for the glyph editor and glyph map widgets)
but this patch already moves most of the UI layout to a form file. :^)

6 files changed, 43 insertions, 55 deletions

diff --git a/Applications/FontEditor/.gitignore b/Applications/FontEditor/.gitignore
new file mode 100644
index 0000000000..0e7af5b54f
--- /dev/null
+++ b/Applications/FontEditor/.gitignore
@@ -0,0 +1 @@
+UI_*.h
diff --git a/Applications/FontEditor/FontEditor.cpp b/Applications/FontEditor/FontEditor.cpp
index 8d289082ca..87113a4cae 100644
--- a/Applications/FontEditor/FontEditor.cpp
+++ b/Applications/FontEditor/FontEditor.cpp
@@ -1,6 +1,7 @@
 #include "FontEditor.h"
 #include "GlyphEditorWidget.h"
 #include "GlyphMapWidget.h"
+#include "UI_FontEditorBottom.h"
 #include <LibGUI/GButton.h>
 #include <LibGUI/GCheckBox.h>
 #include <LibGUI/GGroupBox.h>
@@ -27,68 +28,45 @@ FontEditorWidget::FontEditorWidget(const String& path, RefPtr<Font>&& edited_fon
     m_glyph_editor_widget = new GlyphEditorWidget(*m_edited_font, this);
     m_glyph_editor_widget->move_to({ 5, 5 });
 
-    auto* font_group_box = new GGroupBox("Font metadata", this);
-    font_group_box->set_relative_rect(5, 195, 210, 70);
+    m_ui = make<UI_FontEditorBottom>();
+    add_child(*m_ui->main_widget);
+    m_ui->main_widget->set_relative_rect(5, 110, 380, 240);
 
-    m_name_textbox = new GTextBox(font_group_box);
-    m_name_textbox->set_relative_rect(10, 20, 180, 20);
-    m_name_textbox->set_text(m_edited_font->name());
-    m_name_textbox->on_change = [this] {
-        m_edited_font->set_name(m_name_textbox->text());
+    m_ui->name_textbox->set_text(m_edited_font->name());
+    m_ui->name_textbox->on_change = [this] {
+        m_edited_font->set_name(m_ui->name_textbox->text());
     };
 
-    auto* fixed_width_checkbox = new GCheckBox(font_group_box);
-    fixed_width_checkbox->set_relative_rect(10, 45, 190, 20);
-    fixed_width_checkbox->set_text("Fixed width");
-    fixed_width_checkbox->set_checked(m_edited_font->is_fixed_width());
+    m_ui->fixed_width_checkbox->set_text("Fixed width");
+    m_ui->fixed_width_checkbox->set_checked(m_edited_font->is_fixed_width());
 
-    m_path_textbox = new GTextBox(this);
-    m_path_textbox->set_relative_rect(5, 270, 210, 20);
-    m_path_textbox->set_text(m_path);
-    m_path_textbox->on_change = [this] {
-        m_path = m_path_textbox->text();
+    m_ui->path_textbox->set_text(m_path);
+    m_ui->path_textbox->on_change = [this] {
+        m_path = m_ui->path_textbox->text();
     };
 
-    auto* save_button = new GButton(this);
-    save_button->set_text("Save");
-    save_button->set_relative_rect({ 5, 300, 105, 20 });
-    save_button->on_click = [this](GButton&) {
+    m_ui->save_button->set_text("Save");
+    m_ui->save_button->on_click = [this](GButton&) {
         dbgprintf("write to file: '%s'\n", m_path.characters());
         m_edited_font->write_to_file(m_path);
     };
 
-    auto* quit_button = new GButton(this);
-    quit_button->set_text("Quit");
-    quit_button->set_relative_rect({ 110, 300, 105, 20 });
-    quit_button->on_click = [](GButton&) {
+    m_ui->quit_button->set_text("Quit");
+    m_ui->quit_button->on_click = [](auto&) {
         exit(0);
     };
 
-    auto* info_label = new GLabel(this);
-    info_label->set_text_alignment(TextAlignment::CenterLeft);
-    info_label->set_relative_rect({ 5, 110, 100, 20 });
+    m_ui->info_label->set_text_alignment(TextAlignment::CenterLeft);
 
-    auto* width_label = new GLabel("Glyph width:", this);
-    width_label->set_text_alignment(TextAlignment::CenterLeft);
-    width_label->set_relative_rect({ 5, 135, 100, 20 });
+    m_ui->demo_label_1->set_font(m_edited_font);
+    m_ui->demo_label_1->set_text("quick fox jumps nightly above wizard.");
 
-    auto* width_spinbox = new GSpinBox(this);
-    width_spinbox->set_range(0, 32);
-    width_spinbox->set_relative_rect({ 5, 155, m_glyph_editor_widget->preferred_width(), 20 });
+    m_ui->demo_label_2->set_font(m_edited_font);
+    m_ui->demo_label_2->set_text("QUICK FOX JUMPS NIGHTLY ABOVE WIZARD!");
 
-    auto* demo_label_1 = new GLabel(this);
-    demo_label_1->set_font(m_edited_font);
-    demo_label_1->set_text("quick fox jumps nightly above wizard.");
-    demo_label_1->set_relative_rect({ 110, 120, 300, 20 });
-
-    auto* demo_label_2 = new GLabel(this);
-    demo_label_2->set_font(m_edited_font);
-    demo_label_2->set_text("QUICK FOX JUMPS NIGHTLY ABOVE WIZARD!");
-    demo_label_2->set_relative_rect({ 110, 140, 300, 20 });
-
-    auto update_demo = [demo_label_1, demo_label_2] {
-        demo_label_1->update();
-        demo_label_2->update();
+    auto update_demo = [this] {
+        m_ui->demo_label_1->update();
+        m_ui->demo_label_2->update();
     };
 
     m_glyph_editor_widget->on_glyph_altered = [this, update_demo](u8 glyph) {
@@ -96,20 +74,20 @@ FontEditorWidget::FontEditorWidget(const String& path, RefPtr<Font>&& edited_fon
         update_demo();
     };
 
-    m_glyph_map_widget->on_glyph_selected = [this, info_label, width_spinbox](u8 glyph) {
+    m_glyph_map_widget->on_glyph_selected = [this](u8 glyph) {
         m_glyph_editor_widget->set_glyph(glyph);
-        width_spinbox->set_value(m_edited_font->glyph_width(m_glyph_map_widget->selected_glyph()));
-        info_label->set_text(String::format("0x%b (%c)", glyph, glyph));
+        m_ui->width_spinbox->set_value(m_edited_font->glyph_width(m_glyph_map_widget->selected_glyph()));
+        m_ui->info_label->set_text(String::format("0x%b (%c)", glyph, glyph));
     };
 
-    fixed_width_checkbox->on_checked = [this, width_spinbox, update_demo](bool checked) {
+    m_ui->fixed_width_checkbox->on_checked = [this, update_demo](bool checked) {
         m_edited_font->set_fixed_width(checked);
-        width_spinbox->set_value(m_edited_font->glyph_width(m_glyph_map_widget->selected_glyph()));
+        m_ui->width_spinbox->set_value(m_edited_font->glyph_width(m_glyph_map_widget->selected_glyph()));
         m_glyph_editor_widget->update();
         update_demo();
     };
 
-    width_spinbox->on_change = [this, update_demo](int value) {
+    m_ui->width_spinbox->on_change = [this, update_demo](int value) {
         m_edited_font->set_glyph_width(m_glyph_map_widget->selected_glyph(), value);
         m_glyph_editor_widget->update();
         m_glyph_map_widget->update_glyph(m_glyph_map_widget->selected_glyph());
diff --git a/Applications/FontEditor/FontEditor.h b/Applications/FontEditor/FontEditor.h
index e6777c4b46..033daf3301 100644
--- a/Applications/FontEditor/FontEditor.h
+++ b/Applications/FontEditor/FontEditor.h
@@ -7,6 +7,8 @@ class GlyphEditorWidget;
 class GlyphMapWidget;
 class GTextBox;
 
+struct UI_FontEditorBottom;
+
 class FontEditorWidget final : public GWidget {
 public:
     FontEditorWidget(const String& path, RefPtr<Font>&&, GWidget* parent = nullptr);
@@ -17,8 +19,8 @@ private:
 
     GlyphMapWidget* m_glyph_map_widget { nullptr };
     GlyphEditorWidget* m_glyph_editor_widget { nullptr };
-    GTextBox* m_name_textbox { nullptr };
-    GTextBox* m_path_textbox { nullptr };
 
     String m_path;
+
+    OwnPtr<UI_FontEditorBottom> m_ui;
 };
diff --git a/Applications/FontEditor/FontEditorBottom.frm b/Applications/FontEditor/FontEditorBottom.frm
new file mode 100644
index 0000000000..3ea9030d66
--- /dev/null
+++ b/Applications/FontEditor/FontEditorBottom.frm
@@ -0,0 +1 @@
+{"name":"FontEditorBottom","widgets":[{"enabled":true,"forecolor":"#000000ff","autofill":false,"x":5,"tooltip":"[null]","name":"info_label","height":16,"width":66,"y":15,"class":"GLabel","text":"info_label","backcolor":"#d4d0c8ff","visible":true},{"enabled":true,"forecolor":"#00000000","autofill":false,"x":95,"tooltip":null,"name":"demo_label_1","height":16,"width":276,"y":15,"class":"GLabel","text":"demo_label_1","backcolor":"#00000000","visible":true},{"enabled":true,"forecolor":"#00000000","autofill":false,"x":95,"tooltip":null,"name":"demo_label_2","height":16,"width":276,"y":40,"class":"GLabel","text":"demo_label_2","backcolor":"#00000000","visible":true},{"enabled":true,"forecolor":"#00000000","autofill":false,"x":5,"tooltip":null,"name":"label1","height":16,"width":66,"y":40,"class":"GLabel","text":"Glyph width:","backcolor":"#00000000","visible":true},{"forecolor":"#00000000","name":"width_spinbox","height":21,"backcolor":"#00000000","enabled":true,"value":0,"tooltip":null,"max":32,"visible":true,"y":60,"width":71,"autofill":false,"x":5,"class":"GSpinBox","min":0},{"enabled":true,"forecolor":"#00000000","autofill":false,"x":5,"tooltip":null,"name":"gb1","height":71,"width":216,"y":95,"class":"GGroupBox","backcolor":"#00000000","title":"Font metadata","visible":true},{"tooltip":null,"forecolor":"#00000000","name":"name_textbox","y":115,"autofill":false,"x":15,"class":"GTextBox","backcolor":"#00000000","ruler_visible":false,"height":21,"enabled":true,"text":"","visible":true,"width":196},{"tooltip":null,"checked":false,"forecolor":"#00000000","name":"fixed_width_checkbox","y":140,"autofill":false,"x":15,"class":"GCheckBox","backcolor":"#00000000","height":21,"enabled":true,"text":"Fixed width","visible":true,"width":101},{"tooltip":null,"forecolor":"#00000000","name":"path_textbox","y":175,"autofill":false,"x":5,"class":"GTextBox","backcolor":"#00000000","ruler_visible":false,"height":21,"enabled":true,"text":"","visible":true,"width":216},{"enabled":true,"forecolor":"#00000000","autofill":false,"x":5,"tooltip":null,"name":"save_button","height":21,"width":106,"y":205,"class":"GButton","text":"Save","backcolor":"#00000000","visible":true},{"enabled":true,"forecolor":"#00000000","autofill":false,"x":115,"tooltip":null,"name":"quit_button","height":21,"width":106,"y":205,"class":"GButton","text":"Quit","backcolor":"#00000000","visible":true}]}
diff --git a/Applications/FontEditor/Makefile b/Applications/FontEditor/Makefile
index de4875e813..e45cef7eb7 100644
--- a/Applications/FontEditor/Makefile
+++ b/Applications/FontEditor/Makefile
@@ -9,3 +9,9 @@ OBJS = \
 APP = FontEditor
 
 include ../Makefile.common
+
+FontEditor.cpp: UI_FontEditorBottom.h
+
+UI_FontEditorBottom.h: FontEditorBottom.frm
+	../../DevTools/FormCompiler/FormCompiler $< > $@
+
diff --git a/Applications/FontEditor/main.cpp b/Applications/FontEditor/main.cpp
index d2bc0967ce..96aaf1af44 100644
--- a/Applications/FontEditor/main.cpp
+++ b/Applications/FontEditor/main.cpp
@@ -26,7 +26,7 @@ int main(int argc, char** argv)
 
     auto* window = new GWindow;
     window->set_title("Font Editor");
-    window->set_rect({ 50, 50, 390, 325 });
+    window->set_rect({ 50, 50, 390, 342 });
     auto* font_editor = new FontEditorWidget(path, move(edited_font));
     window->set_main_widget(font_editor);
     window->set_should_exit_event_loop_on_close(true);