mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 08:47:44 +00:00
LibGUI: Introduce GML - a simple GUI Markup Language :^)
This patch replaces the UI-from-JSON mechanism with a more
human-friendly DSL.
The current implementation simply converts the GML into a JSON object
that can be consumed by GUI::Widget::load_from_json(). The parser is
not very helpful if you make a mistake.
The language offers a very simple way to instantiate any registered
Core::Object class by simply saying @ClassName
@GUI::Label {
text: "Hello friends!"
tooltip: ":^)"
}
Layouts are Core::Objects and can be assigned to the "layout" property:
@GUI::Widget {
layout: @GUI::VerticalBoxLayout {
spacing: 2
margins: [8, 8, 8, 8]
}
}
And finally, child objects are simply nested within their parent:
@GUI::Widget {
layout: @GUI::HorizontalBoxLayout {
}
@GUI::Button {
text: "OK"
}
@GUI::Button {
text: "Cancel"
}
}
This feels a *lot* more pleasant to write than the JSON we had. The fact
that no new code was being written with the JSON mechanism was pretty
telling, so let's approach this with developer convenience in mind. :^)
This commit is contained in:
Andreas Kling
parent
18f1c49804
commit
822dc56ef3
24 changed files with 453 additions and 343 deletions
|
|
@ -1,5 +1,5 @@
|
|||
compile_json_gui(CondFormatting.json CondFormattingUI.h cond_fmt_ui_json)
|
||||
compile_json_gui(CondView.json CondFormattingViewUI.h cond_fmt_view_ui_json)
|
||||
compile_gml(CondFormatting.gml CondFormattingGML.h cond_fmt_gml)
|
||||
compile_gml(CondView.gml CondFormattingViewGML.h cond_fmt_view_gml)
|
||||
|
||||
set(SOURCES
|
||||
Cell.cpp
|
||||
|
|
@ -11,8 +11,8 @@ set(SOURCES
|
|||
CellType/String.cpp
|
||||
CellType/Type.cpp
|
||||
CellTypeDialog.cpp
|
||||
CondFormattingUI.h
|
||||
CondFormattingViewUI.h
|
||||
CondFormattingGML.h
|
||||
CondFormattingViewGML.h
|
||||
HelpWindow.cpp
|
||||
JSIntegration.cpp
|
||||
Readers/XSV.cpp
|
||||
|
|
|
|||
|
|
@ -28,8 +28,8 @@
|
|||
#include "Cell.h"
|
||||
#include "Spreadsheet.h"
|
||||
#include <AK/StringBuilder.h>
|
||||
#include <Applications/Spreadsheet/CondFormattingUI.h>
|
||||
#include <Applications/Spreadsheet/CondFormattingViewUI.h>
|
||||
#include <Applications/Spreadsheet/CondFormattingGML.h>
|
||||
#include <Applications/Spreadsheet/CondFormattingViewGML.h>
|
||||
#include <LibGUI/BoxLayout.h>
|
||||
#include <LibGUI/Button.h>
|
||||
#include <LibGUI/CheckBox.h>
|
||||
|
|
@ -356,7 +356,7 @@ void CellTypeDialog::setup_tabs(GUI::TabWidget& tabs, const Vector<Position>& po
|
|||
}
|
||||
|
||||
auto& conditional_fmt_tab = tabs.add_tab<GUI::Widget>("Conditional Format");
|
||||
conditional_fmt_tab.load_from_json(cond_fmt_ui_json);
|
||||
conditional_fmt_tab.load_from_gml(cond_fmt_gml);
|
||||
{
|
||||
auto& view = static_cast<Spreadsheet::ConditionsView&>(*conditional_fmt_tab.find_descendant_by_name("conditions_view"));
|
||||
view.set_formats(&m_conditional_formats);
|
||||
|
|
@ -429,7 +429,7 @@ CellTypeMetadata CellTypeDialog::metadata() const
|
|||
ConditionView::ConditionView(ConditionalFormat& fmt)
|
||||
: m_format(fmt)
|
||||
{
|
||||
load_from_json(cond_fmt_view_ui_json);
|
||||
load_from_gml(cond_fmt_view_gml);
|
||||
|
||||
auto& fg_input = *static_cast<GUI::ColorInput*>(find_descendant_by_name("foreground_input"));
|
||||
auto& bg_input = *static_cast<GUI::ColorInput*>(find_descendant_by_name("background_input"));
|
||||
|
|
|
|||
41
Applications/Spreadsheet/CondFormatting.gml
Normal file
41
Applications/Spreadsheet/CondFormatting.gml
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
@GUI::Widget {
|
||||
name: "main"
|
||||
fill_with_background_color: true
|
||||
|
||||
layout: @GUI::VerticalBoxLayout {
|
||||
spacing: 4
|
||||
}
|
||||
|
||||
@Spreadsheet::ConditionsView {
|
||||
name: "conditions_view"
|
||||
}
|
||||
|
||||
@GUI::Widget {
|
||||
vertical_size_policy: "Fixed"
|
||||
horizontal_size_policy: "Fill"
|
||||
preferred_width: 0
|
||||
preferred_height: 20
|
||||
|
||||
layout: @GUI::HorizontalBoxLayout {
|
||||
spacing: 10
|
||||
}
|
||||
|
||||
@GUI::Button {
|
||||
name: "add_button"
|
||||
text: "Add"
|
||||
horizontal_size_policy: "Fixed"
|
||||
vertical_size_policy: "Fixed"
|
||||
preferred_width: 100
|
||||
preferred_height: 20
|
||||
}
|
||||
|
||||
@GUI::Button {
|
||||
name: "remove_button"
|
||||
text: "Remove"
|
||||
horizontal_size_policy: "Fixed"
|
||||
vertical_size_policy: "Fixed"
|
||||
preferred_width: 100
|
||||
preferred_height: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
{
|
||||
"name": "main",
|
||||
"fill_with_background_color": true,
|
||||
|
||||
"layout": {
|
||||
"class": "GUI::VerticalBoxLayout",
|
||||
"spacing": 4
|
||||
},
|
||||
|
||||
"children": [
|
||||
{
|
||||
"class": "Spreadsheet::ConditionsView",
|
||||
"name": "conditions_view"
|
||||
},
|
||||
{
|
||||
"class": "GUI::Widget",
|
||||
"vertical_size_policy": "Fixed",
|
||||
"horizontal_size_policy": "Fill",
|
||||
"preferred_width": 0,
|
||||
"preferred_height": 20,
|
||||
"layout": {
|
||||
"class": "GUI::HorizontalBoxLayout",
|
||||
"spacing": 10
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"class": "GUI::Button",
|
||||
"name": "add_button",
|
||||
"text": "Add",
|
||||
"horizontal_size_policy": "Fixed",
|
||||
"vertical_size_policy": "Fixed",
|
||||
"preferred_width": 100,
|
||||
"preferred_height": 20
|
||||
},
|
||||
{
|
||||
"class": "GUI::Button",
|
||||
"name": "remove_button",
|
||||
"text": "Remove",
|
||||
"horizontal_size_policy": "Fixed",
|
||||
"vertical_size_policy": "Fixed",
|
||||
"preferred_width": 100,
|
||||
"preferred_height": 20
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
76
Applications/Spreadsheet/CondView.gml
Normal file
76
Applications/Spreadsheet/CondView.gml
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
@GUI::Widget {
|
||||
layout: @GUI::VerticalBoxLayout {
|
||||
spacing: 2
|
||||
}
|
||||
|
||||
@GUI::Widget {
|
||||
layout: @GUI::HorizontalBoxLayout {
|
||||
spacing: 10
|
||||
}
|
||||
|
||||
vertical_size_policy: "Fixed"
|
||||
preferred_height: 25
|
||||
|
||||
@GUI::Label {
|
||||
text: "if..."
|
||||
horizontal_size_policy: "Fixed"
|
||||
vertical_size_policy: "Fixed"
|
||||
preferred_width: 40
|
||||
preferred_height: 25
|
||||
}
|
||||
|
||||
@GUI::TextEditor {
|
||||
name: "formula_editor"
|
||||
horizontal_size_policy: "Fill"
|
||||
vertical_size_policy: "Fixed"
|
||||
preferred_height: 25
|
||||
tooltip: "Use 'value' to refer to the current cell's value"
|
||||
}
|
||||
}
|
||||
|
||||
@GUI::Widget {
|
||||
layout: @GUI::HorizontalBoxLayout {
|
||||
spacing: 10
|
||||
}
|
||||
|
||||
vertical_size_policy: "Fixed"
|
||||
preferred_height: 25
|
||||
|
||||
@GUI::Label {
|
||||
text: "Foreground..."
|
||||
horizontal_size_policy: "Fixed"
|
||||
vertical_size_policy: "Fixed"
|
||||
preferred_width: 150
|
||||
preferred_height: 25
|
||||
}
|
||||
|
||||
@GUI::ColorInput {
|
||||
name: "foreground_input"
|
||||
vertical_size_policy: "Fixed"
|
||||
preferred_height: 25
|
||||
}
|
||||
}
|
||||
|
||||
@GUI::Widget {
|
||||
layout: @GUI::HorizontalBoxLayout {
|
||||
spacing: 10
|
||||
}
|
||||
|
||||
vertical_size_policy: "Fixed"
|
||||
preferred_height: 25
|
||||
|
||||
@GUI::Label {
|
||||
text: "Background..."
|
||||
horizontal_size_policy: "Fixed"
|
||||
vertical_size_policy: "Fixed"
|
||||
preferred_width: 150
|
||||
preferred_height: 25
|
||||
}
|
||||
|
||||
@GUI::ColorInput {
|
||||
name: "background_input"
|
||||
vertical_size_policy: "Fixed"
|
||||
preferred_height: 25
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
{
|
||||
"class": "GUI::Widget",
|
||||
"layout": {
|
||||
"class": "GUI::VerticalBoxLayout",
|
||||
"spacing": 2
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"class": "GUI::Widget",
|
||||
"layout": {
|
||||
"class": "GUI::HorizontalBoxLayout",
|
||||
"spacing": 10
|
||||
},
|
||||
"vertical_size_policy": "Fixed",
|
||||
"preferred_height": 25,
|
||||
"children": [
|
||||
{
|
||||
"class": "GUI::Label",
|
||||
"name": "if_label",
|
||||
"horizontal_size_policy": "Fixed",
|
||||
"vertical_size_policy": "Fixed",
|
||||
"text": "if...",
|
||||
"preferred_width": 40,
|
||||
"preferred_height": 25
|
||||
},
|
||||
{
|
||||
"class": "GUI::TextEditor",
|
||||
"name": "formula_editor",
|
||||
"horizontal_size_policy": "Fill",
|
||||
"vertical_size_policy": "Fixed",
|
||||
"tooltip": "Use 'value' to refer to the current cell's value",
|
||||
"preferred_height": 25
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"class": "GUI::Widget",
|
||||
"layout": {
|
||||
"class": "GUI::HorizontalBoxLayout",
|
||||
"spacing": 10
|
||||
},
|
||||
"vertical_size_policy": "Fixed",
|
||||
"preferred_height": 25,
|
||||
"children": [
|
||||
{
|
||||
"class": "GUI::Label",
|
||||
"name": "fg_color_label",
|
||||
"horizontal_size_policy": "Fixed",
|
||||
"vertical_size_policy": "Fixed",
|
||||
"text": "Foreground...",
|
||||
"preferred_width": 150,
|
||||
"preferred_height": 25
|
||||
},
|
||||
{
|
||||
"class": "GUI::ColorInput",
|
||||
"name": "foreground_input",
|
||||
"horizontal_size_policy": "Fill",
|
||||
"vertical_size_policy": "Fixed",
|
||||
"preferred_height": 25,
|
||||
"preferred_width": 25
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"class": "GUI::Widget",
|
||||
"layout": {
|
||||
"class": "GUI::HorizontalBoxLayout",
|
||||
"spacing": 10
|
||||
},
|
||||
"vertical_size_policy": "Fixed",
|
||||
"preferred_height": 25,
|
||||
"children": [
|
||||
{
|
||||
"class": "GUI::Label",
|
||||
"name": "bg_color_label",
|
||||
"horizontal_size_policy": "Fixed",
|
||||
"vertical_size_policy": "Fixed",
|
||||
"text": "Background...",
|
||||
"preferred_width": 150,
|
||||
"preferred_height": 25
|
||||
},
|
||||
{
|
||||
"class": "GUI::ColorInput",
|
||||
"name": "background_input",
|
||||
"horizontal_size_policy": "Fill",
|
||||
"vertical_size_policy": "Fixed",
|
||||
"preferred_height": 25,
|
||||
"preferred_width": 25
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue