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. :^)
abyesilyurt · Jul 11, 2019 · 2dc0ea1 · 2dc0ea1
1 parent 974c0f9
commit 2dc0ea1
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 55 deletions.
diff --git a/Applications/FontEditor/.gitignore b/Applications/FontEditor/.gitignore
@@ -0,0 +1 @@
+UI_*.h
diff --git 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,89 +28,66 @@ 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) {
  m_glyph_map_widget->update_glyph(glyph);
  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
@@ -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 @@ class FontEditorWidget final : public GWidget {
 
  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
@@ -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
@@ -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
@@ -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);