RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 23:47:45 +00:00
Code Issues Activity Actions

LibGUI: Introduce GML - a simple GUI Markup Language :^)

Browse source 
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 2020-12-20 11:47:44 +01:00
parent 18f1c49804
commit 822dc56ef3
24 changed files with 453 additions and 343 deletions
Download patch file Download diff file Expand all files Collapse all files

15
Applications/Browser/BrowserWindow.gml Normal file
View file

@ -0,0 +1,15 @@
@GUI::Widget {
name: "browser"
fill_with_background_color: true
layout: @GUI::VerticalBoxLayout {
spacing: 2
}
@GUI::TabWidget {
name: "tab_widget"
container_padding: 0
uniform_tabs: true
text_alignment: "CenterLeft"
}
}

19
Applications/Browser/BrowserWindow.json
View file

@ -1,19 +0,0 @@
{
"name": "browser",
"fill_with_background_color": true,
"layout": {
"class": "GUI::VerticalBoxLayout",
"spacing": 2
},
"children": [
{
"class": "GUI::TabWidget",
"name": "tab_widget",
"container_padding": 0,
"uniform_tabs": true,
"text_alignment": "CenterLeft"
}
]
}

8
Applications/Browser/CMakeLists.txt
View file

@ -1,5 +1,5 @@
compile_json_gui(BrowserWindow.json BrowserWindowUI.h browser_window_ui_json)
compile_json_gui(Tab.json TabUI.h tab_ui_json)
compile_gml(BrowserWindow.gml BrowserWindowGML.h browser_window_gml)
compile_gml(Tab.gml TabGML.h tab_gml)
set(SOURCES
BookmarksBarWidget.cpp
@ -11,8 +11,8 @@ set(SOURCES
main.cpp
Tab.cpp
WindowActions.cpp
BrowserWindowUI.h
TabUI.h
BrowserWindowGML.h
TabGML.h
)
serenity_bin(Browser)

4
Applications/Browser/Tab.cpp
View file

@ -32,7 +32,7 @@
#include "InspectorWidget.h"
#include "WindowActions.h"
#include <AK/StringBuilder.h>
#include <Applications/Browser/TabUI.h>
#include <Applications/Browser/TabGML.h>
#include <LibGUI/Action.h>
#include <LibGUI/Application.h>
#include <LibGUI/BoxLayout.h>
@ -88,7 +88,7 @@ static void start_download(const URL& url)
Tab::Tab(Type type)
: m_type(type)
{
load_from_json(tab_ui_json);
load_from_gml(tab_gml);
m_toolbar_container = static_cast<GUI::ToolBarContainer&>(*find_descendant_by_name("toolbar_container"));
auto& toolbar = static_cast<GUI::ToolBar&>(*find_descendant_by_name("toolbar"));

22
Applications/Browser/Tab.gml Normal file
View file

@ -0,0 +1,22 @@
@GUI::Widget {
layout: @GUI::VerticalBoxLayout {
}
@GUI::ToolBarContainer {
name: "toolbar_container"
@GUI::ToolBar {
name: "toolbar"
}
}
@GUI::Widget {
name: "webview_container"
layout: @GUI::VerticalBoxLayout {
}
}
@GUI::StatusBar {
name: "statusbar"
}
}

29
Applications/Browser/Tab.json
View file

@ -1,29 +0,0 @@
{
"layout": {
"class": "GUI::VerticalBoxLayout"
},
"children": [
{
"class": "GUI::ToolBarContainer",
"name": "toolbar_container",
"children": [
{
"class": "GUI::ToolBar",
"name": "toolbar"
}
]
},
{
"class": "GUI::Widget",
"name": "webview_container",
"layout": {
"class": "GUI::VerticalBoxLayout"
}
},
{
"class": "GUI::StatusBar",
"name": "statusbar"
}
]
}

4
Applications/Browser/main.cpp
View file

@ -30,7 +30,7 @@
#include "Tab.h"
#include "WindowActions.h"
#include <AK/StringBuilder.h>
#include <Applications/Browser/BrowserWindowUI.h>
#include <Applications/Browser/BrowserWindowGML.h>
#include <LibCore/ArgsParser.h>
#include <LibCore/ConfigFile.h>
#include <LibCore/File.h>
@ -138,7 +138,7 @@ int main(int argc, char** argv)
window->set_title("Browser");
auto& widget = window->set_main_widget<GUI::Widget>();
widget.load_from_json(browser_window_ui_json);
widget.load_from_gml(browser_window_gml);
auto& tab_widget = static_cast<GUI::TabWidget&>(*widget.find_descendant_by_name("tab_widget"));

8
Applications/Spreadsheet/CMakeLists.txt
View file

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

8
Applications/Spreadsheet/CellTypeDialog.cpp
View file

@ -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
View 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
}
}
}

47
Applications/Spreadsheet/CondFormatting.json
View file

@ -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
View 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
}
}
}

93
Applications/Spreadsheet/CondView.json
View file

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

4
Applications/TextEditor/CMakeLists.txt
View file

@ -1,9 +1,9 @@
compile_json_gui(MainWindow.json MainWindowUI.h main_window_ui_json)
compile_gml(MainWindow.gml MainWindowGML.h main_window_gml)
set(SOURCES
main.cpp
TextEditorWidget.cpp
MainWindowUI.h
MainWindowGML.h
)
serenity_bin(TextEditor)

105
Applications/TextEditor/MainWindow.gml Normal file
View file

@ -0,0 +1,105 @@
@GUI::Widget {
name: "main"
fill_with_background_color: true
layout: @GUI::VerticalBoxLayout {
spacing: 2
}
@GUI::ToolBarContainer {
@GUI::ToolBar {
name: "toolbar"
}
}
@GUI::HorizontalSplitter {
@GUI::TextEditor {
name: "editor"
}
@Web::OutOfProcessWebView {
name: "webview"
visible: false
}
}
@GUI::Widget {
name: "find_replace_widget"
visible: false
fill_with_background_color: true
horizontal_size_policy: "Fill"
vertical_size_policy: "Fixed"
preferred_height: 48
layout: @GUI::VerticalBoxLayout {
margins: [2, 2, 2, 4]
}
@GUI::Widget {
name: "find_widget"
fill_with_background_color: true
horizontal_size_policy: "Fill"
vertical_size_policy: "Fixed"
preferred_height: 22
layout: @GUI::HorizontalBoxLayout {
}
@GUI::Button {
name: "find_previous_button"
text: "Find previous"
horizontal_size_policy: "Fixed"
vertical_size_policy: "Fill"
preferred_width: 150
}
@GUI::Button {
name: "find_next_button"
text: "Find next"
horizontal_size_policy: "Fixed"
vertical_size_policy: "Fill"
preferred_width: 150
}
}
@GUI::Widget {
name: "replace_widget"
fill_with_background_color: true
horizontal_size_policy: "Fill"
vertical_size_policy: "Fixed"
preferred_height: 22
layout: @GUI::HorizontalBoxLayout {
}
@GUI::Button {
name: "replace_previous_button"
text: "Replace previous"
horizontal_size_policy: "Fixed"
vertical_size_policy: "Fill"
preferred_width: 100
}
@GUI::Button {
name: "replace_next_button"
text: "Replace next"
horizontal_size_policy: "Fixed"
vertical_size_policy: "Fill"
preferred_width: 100
}
@GUI::Button {
name: "replace_all_button"
text: "Replace all"
horizontal_size_policy: "Fixed"
vertical_size_policy: "Fill"
preferred_width: 100
}
}
}
@GUI::StatusBar {
name: "statusbar"
}
}

120
Applications/TextEditor/MainWindow.json
View file

@ -1,120 +0,0 @@
{
"name": "main",
"fill_with_background_color": true,
"layout": {
"class": "GUI::VerticalBoxLayout",
"spacing": 2
},
"children": [
{
"class": "GUI::ToolBarContainer",
"children": [
{
"class": "GUI::ToolBar",
"name": "toolbar"
}
]
},
{
"class": "GUI::HorizontalSplitter",
"children": [
{
"class": "GUI::TextEditor",
"name": "editor"
},
{
"class": "Web::OutOfProcessWebView",
"name": "webview",
"visible": false
}
]
},
{
"class": "GUI::Widget",
"name": "find_replace_widget",
"visible": false,
"fill_with_background_color": true,
"horizontal_size_policy": "Fill",
"vertical_size_policy": "Fixed",
"preferred_height": 48,
"layout": {
"class": "GUI::VerticalBoxLayout",
"margins": [ 2, 2, 2, 4 ]
},
"children": [
{
"class": "GUI::Widget",
"name": "find_widget",
"fill_with_background_color": true,
"horizontal_size_policy": "Fill",
"vertical_size_policy": "Fixed",
"preferred_height": 22,
"layout": {
"class": "GUI::HorizontalBoxLayout"
},
"children": [
{
"class": "GUI::Button",
"name": "find_previous_button",
"text": "Find previous",
"horizontal_size_policy": "Fixed",
"vertical_size_policy": "Fill",
"preferred_width": 150
},
{
"class": "GUI::Button",
"name": "find_next_button",
"text": "Find next",
"horizontal_size_policy": "Fixed",
"vertical_size_policy": "Fill",
"preferred_width": 150
}
]
},
{
"class": "GUI::Widget",
"name": "replace_widget",
"fill_with_background_color": true,
"horizontal_size_policy": "Fill",
"vertical_size_policy": "Fixed",
"preferred_height": 22,
"layout": {
"class": "GUI::HorizontalBoxLayout"
},
"children": [
{
"class": "GUI::Button",
"name": "replace_previous_button",
"text": "Replace previous",
"horizontal_size_policy": "Fixed",
"vertical_size_policy": "Fill",
"preferred_width": 100
},
{
"class": "GUI::Button",
"name": "replace_next_button",
"text": "Replace next",
"horizontal_size_policy": "Fixed",
"vertical_size_policy": "Fill",
"preferred_width": 100
},
{
"class": "GUI::Button",
"name": "replace_all_button",
"text": "Replace all",
"horizontal_size_policy": "Fixed",
"vertical_size_policy": "Fill",
"preferred_width": 100
}
]
}
]
},
{
"class": "GUI::StatusBar",
"name": "statusbar"
}
]
}

4
Applications/TextEditor/TextEditorWidget.cpp
View file

@ -30,7 +30,7 @@
#include <AK/Optional.h>
#include <AK/StringBuilder.h>
#include <AK/URL.h>
#include <Applications/TextEditor/MainWindowUI.h>
#include <Applications/TextEditor/MainWindowGML.h>
#include <LibCore/File.h>
#include <LibCore/MimeData.h>
#include <LibDesktop/Launcher.h>
@ -61,7 +61,7 @@
TextEditorWidget::TextEditorWidget()
{
load_from_json(main_window_ui_json);
load_from_gml(main_window_gml);
auto& toolbar = static_cast<GUI::ToolBar&>(*find_descendant_by_name("toolbar"));