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. :^)

Applications/FontEditor/.gitignore

@@ -0,0 +1 @@
+UI_*.h

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());

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;
 };

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}]}

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 $< > $@
+

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);