From 52e651a1689886d5f44133619b46a6f1dd4e0c0c Mon Sep 17 00:00:00 2001 From: Megadash452 Date: Sun, 2 Oct 2022 15:23:48 +0000 Subject: [PATCH 01/10] Created Tutorial page; TODOs pending. --- docs/tutorial.rst | 452 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 452 insertions(+) create mode 100644 docs/tutorial.rst diff --git a/docs/tutorial.rst b/docs/tutorial.rst new file mode 100644 index 0000000..09f2d8a --- /dev/null +++ b/docs/tutorial.rst @@ -0,0 +1,452 @@ +======== +Tutorial +======== + +.. margin at column 75 + +Read this if you want to learn how to use Blueprint and never used +the XML syntax that can be read by GtkBuilder. + +For compatibility with Blueprint IDE extensions, blueprint files +should end with `.blp`. + + +Namespaces +---------- + +Blueprint needs the widget library to be imported. These include Gtk, +Libadwaita, Shumate, etc. To import a namespace, write `using` followed +by the library and version number. + +.. code-block:: + using Gtk 4.0; + using Adw 1; + +The Gtk import is required in all blueprints and the minor version +number must be 0. + + +Comments +-------- + +Blueprint has inline or multi-line comments + +.. code-block:: + // This is an inline comment + /* This is + a multiline + comment */ + +Multi-line comments can't have inner multi-line comments. The compiler +will interpret the inner comment's closing token as the outer comment's +closing token. For example, the following will not compile: + +.. code-block:: + // Bad comment below: + /* Outer comment + /* Inner comment */ + */ + + +Widgets +------- + +Create widgets in the following format: + +.. code-block:: + Namespace.WidgetClass { + + } + +The Gtk namespace is implied for widgets, so you can just write the +widget class + +.. code-block:: + Box { + + } + +Other namespaces must be written explicitly. + +.. code-block:: + Adw.Leaflet { + + } + +Consult the widget library's documentation for a list of widgets. Here is +for `Link Gtk `. + +Naming Widgets +~~~~~~~~~~~~~~ + +Widgets can be given **name**s so that they can be referenced by other +widgets in the blueprint. + +.. code-block:: + Namespace.WidgetClass widget-name { + + } + +Any time you want to use this widget as a property (more about that in the +next section) or something else, write the widget's **name** (e.g. +`main-window`). + + +Properties +---------- + +Every widget has properties defined by their GObject class. For example, +Libadwaita Toast properties can be found +`Link here `_. +Write properties inside the curly brackets of a widget: + +.. code-block:: + Namespace.WidgetClass { + property-name: value; + } + +Properties are *all lowercase* (except strings) and must end with a +semicolon (;). + +Property Types +~~~~~~~~~~~~~~ + +These are the **types** of values that can be used in properties: + - Booleans: `true`, `false` + - Numbers: e.g. `1`, `1.5`, `-2`, `-2.5` + - Strings (single- or double-quoted): e.g. `"a string"`, `'another string'` + - Enums + - Widgets + +Properties are **strongly typed**, so you can't use, for example, a string +for the orientation property, which requires an `Orientation` enum +vartiant as its value. + +Enum Properties +~~~~~~~~~~~~~~~ + +In the Gtk documentation, enum variants have long names and are +capitalized. For example, these are the +`Link Orientation `_ +enum variants: + + - GTK_ORIENTATION_HORIZONTAL + - GTK_ORIENTATION_VERTICAL + +In the blueprint, you would only write the *variant* part of the enum in +*lowercase*, just like you would in the XML. + +.. code-block:: + Box { + orientation: horizontal; + } + +Widget Properties +~~~~~~~~~~~~~~~~~ + +Some widgets take other widgets as properties. For example, the +`Gtk.StackSidebar` has a stack property which takes a `Gtk.Stack` widget. +You can create a new widget for the value, or you can reference another +widget by its **name**. + +.. code-block:: + StackSidebar { + stack: Stack { }; + } + +OR + +.. code-block:: + StackSidebar { + stack: my-stack; + } + + Stack my-stack { + + } + +Note the use of a semicolon at the end of the property in both cases. +Widget properties are not exempt of this rule. + + +Property Bindings +----------------- + +If you want a widget's property to have the same value as another widget's +property (without hard-coding the value), you could `bind` two widgets' +properties of the same type. Bindings must reference a *source* widget by +**name**. As long as the two properties have the same type, you can bind +properties of different names and of widgets with different widget classes. + +.. code-block:: + Box my-box { + halign: fill; // Source + } + + Button { + valign: bind my-box.halign; // Target + } + +Binding Flags +~~~~~~~~~~~~~ + +Modify the behavior of bindings with flags. Flags are written after the +binding. + +.. code-block:: + Box my-box { + hexpand: true; // Source + } + + Button { + vexpand: bind my-box.hexpand inverted bidirectional; // Target + } + +no-sync-create + .. TODO: I'm not exactly sure what this does + Only update the target value when the *Source* value changes, not when + the binding is first created. + +bidirectional + When either the *Source* or *Target* value is modified, the other's + value will be updated. For example, if the logic of the program + changes the Button's vexpand value to `false`, then the Box's halign + value will also be updated to `false`. + +inverted + If the property is a boolean, the value of the bind can be negated + with this flag. For example, if the Box's hexpand property is `true`, + the Button's vexpand property will be `false` in the code below. + + +Signals +------- + +Gtk allows you to register signals in your program. This can be done by +getting the object from the GtkBuilder and connecting a handler to the +signal. Or register the handler with the application and reference it in +the blueprint. + +Signals have an *event name*, a *handler* (aka callback), and optionally +some *flags*. Each widget will have a set of defined signals. Consult the +widget's documentation for a list of its signals. + +To register a handler with the application, consult the documentation for +your language's bindings of Gtk. + +.. code-block:: + WidgetClass { + event-name => handler_name() flags; + } + +.. TODO: add a list of flags and their descriptions + +By default, signals in the blueprint will pass the widget that the signal +is for as an argument to the *handler*. However, you can specify the +widget that is passed to the handler by referencing its name inside the +parenthesis. + +.. code-block:: + Label my-label { + label: "Hide me"; + } + + Button { + clicked => hide_widget(my-label); + } + + +Custom Widget Classes +--------------------- + +Some programs have custom widgets defined in their logic, and so blueprint +won't know that they exist. Writing widgets not defined in the GIR will +result in an error. Prepend a custom widget with a `.` to prevent the +compiler from trying to validate the widget. This is essentially leaving +out the *namespace*. + +To register a custom widget with the application consult the documentation +for your language's bindings of Gtk. + +.. code-block:: + .MyCustomWidget { + + } + + +Templates +--------- +.. TODO + + +CSS Style Classes +----------------- +.. Unsure if to group styles with widget-specific items +Widgets can be given style classes that can be used with your CSS or +`Link predefined styles `_ +in libraries like Libadwaita. + +.. code-block:: + Button { + label: "Click me"; + styles ["my-style", "pill"] + } + +Note the lack of a *colon* after "styles" and a *semicolon* at the end of +the line. This syntax looks like the properties syntax, but it compiles to +XML completely different from properties. + +The syntax may change to `styles! [...]` in the future so that it is not +confused with the properties syntax. + +Consult your language's bindings of Gtk to use a CSS file. + +Non-property Elements +~~~~~~~~~~~~~~~~~~~~~ +.. TODO: ^^^ should it be called that? + +Some widgets will have elements which are not properties, but they sort +of act like properties. Most of the time they will be specific only to a +certain widget. *Styles* is one of these elements, except that styles can +be used for any widget. Similarly to how every widget has styles, +`Gtk.ComboBoxText` has *items*: + +.. code-block:: + Gtk.ComboBoxText { + items [ + item1: "Item 1", + item2: _("Items can be translated"), + "The item ID is not required", + ] + } + +See the `Link examples page `_ for a list of more of these +widget-specific items. + + +Menus +----- + +Menus are usually the widgets that are placed along the top-bar of a +window, or pop up when you right-click some other widget. In Blueprint a +`menu` is a `Gio.MenuModel` that can be shown by MenuButtons or other +widgets. + +Similarly to how it is explained in +`Link Gtk.PopoverMenu `_, +in Blueprint `menu`s have *items*, *sections*, and *submenus*. `Menu`s can +also be given a **name** like a widget. Please read the **Menu Model** +section of `Gtk.PopoverMenu` for more details on the menu model. + +Here is an example of a menu: + +.. code-block:: + menu my-menu { + section { + label: "File"; + item { + label: "Open"; + action: "win.open"; + icon-name: "document-open-symbolic"; + } + item { + label: "Save"; + action: "win.save"; + icon-name: "document-save-symbolic"; + } + submenu { + label: "Save As"; + icon-name: "document-save-as-symbolic"; + item { + label: "PDF"; + action: "win.save_as_pdf"; + } + } + } + } + +There is a shorthand for *items*. Items require at least a label. The +action and icon-name are optional. + +.. code-block:: + menu { + item ( "Item 2" ) + item ( "Item 2", "app.action", "icon-name" ) + } + +A widget that uses a `menu` is `Gtk.MenuButton`. It has the *menu-model* +property, which takes a menu. You can write the menu inline with the +property, or write the menu separately and reference it by **name**. + +.. code-block:: + MenuButton { + menu-model: my-menu; + } + + +Child Types +----------- + +Child types describe how a child widget is placed on a parent widget. For +example, HeaderBars widgets can have children placed either at the *start* +or the *end* of the Headerbar. Child widgets of HeaderBars can have the +*start* or *end* types. Values for child types a widget can have are +defined in the widget's documentation. + +Child types in blueprint are written between square brackets [] and before +the child the type is for. + +The following blueprint code... + +.. code-block:: + HeaderBar { + [start] + Button { + label: "Button"; + } + } + +\... would look like this: + + --------------------------- + | Button | + --------------------------- + +And the following blueprint code... + +.. code-block:: + HeaderBar { + [end] + Button { + label: "Button"; + } + } + +\... would look like this: + + --------------------------- + | Button | + --------------------------- + + +Translatable Strings +-------------------- + +Mark any string as translatable using this syntax: `_("...")`. + +Two strings that are the same in English could be translated in different +ways in other languages because of different *contexts*. Translatable +strings with context look like this: `C_("...", "context")`. An example +where a context is needed is the word "have", which in Spanish could +translate to "tener" or "haber". + +.. code-block:: + Label { + label: C_("have", "1st have"); + } + + Label { + label: C_("have", "2nd have"); + } + +See `Link translations page `_ for more details. \ No newline at end of file From 4dd55ab2aa0d5724fc0221d2747b976e27b268c1 Mon Sep 17 00:00:00 2001 From: "FeRD (Frank Dana)" Date: Wed, 19 Oct 2022 01:19:44 +0000 Subject: [PATCH 02/10] Apply 1 suggestion(s) to 1 file(s) --- docs/tutorial.rst | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/tutorial.rst b/docs/tutorial.rst index 09f2d8a..47ed955 100644 --- a/docs/tutorial.rst +++ b/docs/tutorial.rst @@ -95,9 +95,9 @@ next section) or something else, write the widget's **name** (e.g. Properties ---------- -Every widget has properties defined by their GObject class. For example, -Libadwaita Toast properties can be found -`Link here `_. +Every widget has properties defined by their GObject class. +For example, the Libadwaita documentation lists the +`properties of the Toast class `_. Write properties inside the curly brackets of a widget: .. code-block:: From cce1af5f093b4f3bd2490d086844487785f7d350 Mon Sep 17 00:00:00 2001 From: "FeRD (Frank Dana)" Date: Wed, 19 Oct 2022 01:32:19 +0000 Subject: [PATCH 03/10] Apply 6 suggestion(s) to 1 file(s) --- docs/tutorial.rst | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/docs/tutorial.rst b/docs/tutorial.rst index 47ed955..6274f29 100644 --- a/docs/tutorial.rst +++ b/docs/tutorial.rst @@ -127,7 +127,7 @@ Enum Properties In the Gtk documentation, enum variants have long names and are capitalized. For example, these are the -`Link Orientation `_ +`Orientation `_ enum variants: - GTK_ORIENTATION_HORIZONTAL @@ -195,11 +195,11 @@ binding. .. code-block:: Box my-box { - hexpand: true; // Source + hexpand: true; // Source } Button { - vexpand: bind my-box.hexpand inverted bidirectional; // Target + vexpand: bind my-box.hexpand inverted bidirectional; // Target } no-sync-create @@ -283,7 +283,7 @@ CSS Style Classes ----------------- .. Unsure if to group styles with widget-specific items Widgets can be given style classes that can be used with your CSS or -`Link predefined styles `_ +`predefined styles `_ in libraries like Libadwaita. .. code-block:: @@ -320,7 +320,7 @@ be used for any widget. Similarly to how every widget has styles, ] } -See the `Link examples page `_ for a list of more of these +See `examples `_ for a list of more of these widget-specific items. @@ -332,11 +332,10 @@ window, or pop up when you right-click some other widget. In Blueprint a `menu` is a `Gio.MenuModel` that can be shown by MenuButtons or other widgets. -Similarly to how it is explained in -`Link Gtk.PopoverMenu `_, -in Blueprint `menu`s have *items*, *sections*, and *submenus*. `Menu`s can -also be given a **name** like a widget. Please read the **Menu Model** -section of `Gtk.PopoverMenu` for more details on the menu model. +In Blueprint, `menu`s have *items*, *sections*, and *submenus*. +Like widgets, `menu`s can also be given a **name**. +The `Menu Model section of the Gtk.PopoverMenu documentation `_ +has complete details on the menu model. Here is an example of a menu: @@ -449,4 +448,4 @@ translate to "tener" or "haber". label: C_("have", "2nd have"); } -See `Link translations page `_ for more details. \ No newline at end of file +See `translations `_ for more details. \ No newline at end of file From 9e293a31e676f62fbdde2b2fbea7f097e27adcc7 Mon Sep 17 00:00:00 2001 From: "FeRD (Frank Dana)" Date: Wed, 19 Oct 2022 01:45:33 +0000 Subject: [PATCH 04/10] Apply 1 suggestion(s) to 1 file(s) --- docs/tutorial.rst | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/tutorial.rst b/docs/tutorial.rst index 6274f29..60a3542 100644 --- a/docs/tutorial.rst +++ b/docs/tutorial.rst @@ -73,8 +73,9 @@ Other namespaces must be written explicitly. } -Consult the widget library's documentation for a list of widgets. Here is -for `Link Gtk `. +Consult the widget library's documentation for a list of widgets. +A good place to start is +`the Gtk4 widget list `. Naming Widgets ~~~~~~~~~~~~~~ From c74c5ac232d8f1ffbedc96fd74c6741351af0d1d Mon Sep 17 00:00:00 2001 From: Megadash452 Date: Wed, 19 Oct 2022 02:22:51 +0000 Subject: [PATCH 05/10] Tutorial: changed terminology *name* to *id* --- docs/tutorial.rst | 60 ++++++++++++++++++++++------------------------- 1 file changed, 28 insertions(+), 32 deletions(-) diff --git a/docs/tutorial.rst b/docs/tutorial.rst index 60a3542..3111f6f 100644 --- a/docs/tutorial.rst +++ b/docs/tutorial.rst @@ -80,17 +80,17 @@ A good place to start is Naming Widgets ~~~~~~~~~~~~~~ -Widgets can be given **name**s so that they can be referenced by other +Widgets can be given **name/ID**s so that they can be referenced by other widgets in the blueprint. .. code-block:: - Namespace.WidgetClass widget-name { + Namespace.WidgetClass widget_id { } Any time you want to use this widget as a property (more about that in the -next section) or something else, write the widget's **name** (e.g. -`main-window`). +next section) or something else, write the widget's **ID** (e.g. +`main_window`). Properties @@ -106,7 +106,7 @@ Write properties inside the curly brackets of a widget: property-name: value; } -Properties are *all lowercase* (except strings) and must end with a +Properties values are *all lowercase* (except strings) and must end with a semicolon (;). Property Types @@ -148,7 +148,7 @@ Widget Properties Some widgets take other widgets as properties. For example, the `Gtk.StackSidebar` has a stack property which takes a `Gtk.Stack` widget. You can create a new widget for the value, or you can reference another -widget by its **name**. +widget by its **ID**. .. code-block:: StackSidebar { @@ -159,10 +159,10 @@ OR .. code-block:: StackSidebar { - stack: my-stack; + stack: my_stack; } - Stack my-stack { + Stack my_stack { } @@ -176,16 +176,16 @@ Property Bindings If you want a widget's property to have the same value as another widget's property (without hard-coding the value), you could `bind` two widgets' properties of the same type. Bindings must reference a *source* widget by -**name**. As long as the two properties have the same type, you can bind +**ID**. As long as the two properties have the same type, you can bind properties of different names and of widgets with different widget classes. .. code-block:: - Box my-box { + Box my_box { halign: fill; // Source } Button { - valign: bind my-box.halign; // Target + valign: bind my_box.halign; // Target } Binding Flags @@ -195,12 +195,12 @@ Modify the behavior of bindings with flags. Flags are written after the binding. .. code-block:: - Box my-box { - hexpand: true; // Source + Box my_box { + hexpand: true; // Source } Button { - vexpand: bind my-box.hexpand inverted bidirectional; // Target + vexpand: bind my_box.hexpand inverted bidirectional; // Target } no-sync-create @@ -217,7 +217,7 @@ bidirectional inverted If the property is a boolean, the value of the bind can be negated with this flag. For example, if the Box's hexpand property is `true`, - the Button's vexpand property will be `false` in the code below. + the Button's vexpand property will be `false` in the code above. Signals @@ -237,23 +237,23 @@ your language's bindings of Gtk. .. code-block:: WidgetClass { - event-name => handler_name() flags; + event_name => handler_name() flags; } .. TODO: add a list of flags and their descriptions By default, signals in the blueprint will pass the widget that the signal is for as an argument to the *handler*. However, you can specify the -widget that is passed to the handler by referencing its name inside the +widget that is passed to the handler by referencing its **id** inside the parenthesis. .. code-block:: - Label my-label { + Label my_label { label: "Hide me"; } Button { - clicked => hide_widget(my-label); + clicked => hide_widget(my_label); } @@ -297,14 +297,10 @@ Note the lack of a *colon* after "styles" and a *semicolon* at the end of the line. This syntax looks like the properties syntax, but it compiles to XML completely different from properties. -The syntax may change to `styles! [...]` in the future so that it is not -confused with the properties syntax. - Consult your language's bindings of Gtk to use a CSS file. Non-property Elements ~~~~~~~~~~~~~~~~~~~~~ -.. TODO: ^^^ should it be called that? Some widgets will have elements which are not properties, but they sort of act like properties. Most of the time they will be specific only to a @@ -334,14 +330,14 @@ window, or pop up when you right-click some other widget. In Blueprint a widgets. In Blueprint, `menu`s have *items*, *sections*, and *submenus*. -Like widgets, `menu`s can also be given a **name**. +Like widgets, `menu`s can also be given a **ID**. The `Menu Model section of the Gtk.PopoverMenu documentation `_ has complete details on the menu model. Here is an example of a menu: .. code-block:: - menu my-menu { + menu my_menu { section { label: "File"; item { @@ -375,12 +371,12 @@ action and icon-name are optional. } A widget that uses a `menu` is `Gtk.MenuButton`. It has the *menu-model* -property, which takes a menu. You can write the menu inline with the -property, or write the menu separately and reference it by **name**. +property, which takes a menu. Write the menu at the root of the blueprint +(meaning not inside any widgets) and reference it by **ID**. .. code-block:: MenuButton { - menu-model: my-menu; + menu-model: my_menu; } @@ -436,17 +432,17 @@ Mark any string as translatable using this syntax: `_("...")`. Two strings that are the same in English could be translated in different ways in other languages because of different *contexts*. Translatable -strings with context look like this: `C_("...", "context")`. An example +strings with context look like this: `C_("context", "...")`. An example where a context is needed is the word "have", which in Spanish could translate to "tener" or "haber". .. code-block:: Label { - label: C_("have", "1st have"); + label: C_("1st have", "have"); } Label { - label: C_("have", "2nd have"); + label: C_("2nd have", "have"); } -See `translations `_ for more details. \ No newline at end of file +See `translations `_ for more details. From 14d1892254b5a1dd552c2678a58c34bbc60036c0 Mon Sep 17 00:00:00 2001 From: Megadash452 Date: Wed, 19 Oct 2022 02:24:20 +0000 Subject: [PATCH 06/10] Tutorial: added doc for binding flag `no-sync-create` --- docs/tutorial.rst | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/docs/tutorial.rst b/docs/tutorial.rst index 3111f6f..6683b65 100644 --- a/docs/tutorial.rst +++ b/docs/tutorial.rst @@ -192,7 +192,9 @@ Binding Flags ~~~~~~~~~~~~~ Modify the behavior of bindings with flags. Flags are written after the -binding. +binding. The default behavior is that the *Target*'s value will be +changed to the *Source*'s value when the binding is created and when the +*Source* value changes. .. code-block:: Box my_box { @@ -204,9 +206,10 @@ binding. } no-sync-create - .. TODO: I'm not exactly sure what this does - Only update the target value when the *Source* value changes, not when - the binding is first created. + Prevent setting the *Tartget* with the *Source*'s value, + updating the target value when the *Source* value changes, not when + the binding is first created. Useful when the *Target* property has + another initial value that is not the *Source* value. bidirectional When either the *Source* or *Target* value is modified, the other's From 0fe58ffc37707015110a11e52b18a7a590855b3e Mon Sep 17 00:00:00 2001 From: Megadash452 Date: Wed, 19 Oct 2022 02:30:23 +0000 Subject: [PATCH 07/10] Tutorial: Fixed .rst rendering issues --- docs/tutorial.rst | 66 ++++++++++++++++++++++++++++++++--------------- 1 file changed, 45 insertions(+), 21 deletions(-) diff --git a/docs/tutorial.rst b/docs/tutorial.rst index 6683b65..9305b51 100644 --- a/docs/tutorial.rst +++ b/docs/tutorial.rst @@ -8,17 +8,18 @@ Read this if you want to learn how to use Blueprint and never used the XML syntax that can be read by GtkBuilder. For compatibility with Blueprint IDE extensions, blueprint files -should end with `.blp`. +should end with ``.blp``. Namespaces ---------- Blueprint needs the widget library to be imported. These include Gtk, -Libadwaita, Shumate, etc. To import a namespace, write `using` followed +Libadwaita, Shumate, etc. To import a namespace, write ``using`` followed by the library and version number. .. code-block:: + using Gtk 4.0; using Adw 1; @@ -32,6 +33,7 @@ Comments Blueprint has inline or multi-line comments .. code-block:: + // This is an inline comment /* This is a multiline @@ -42,6 +44,7 @@ will interpret the inner comment's closing token as the outer comment's closing token. For example, the following will not compile: .. code-block:: + // Bad comment below: /* Outer comment /* Inner comment */ @@ -54,6 +57,7 @@ Widgets Create widgets in the following format: .. code-block:: + Namespace.WidgetClass { } @@ -62,6 +66,7 @@ The Gtk namespace is implied for widgets, so you can just write the widget class .. code-block:: + Box { } @@ -69,6 +74,7 @@ widget class Other namespaces must be written explicitly. .. code-block:: + Adw.Leaflet { } @@ -84,13 +90,14 @@ Widgets can be given **name/ID**s so that they can be referenced by other widgets in the blueprint. .. code-block:: + Namespace.WidgetClass widget_id { } Any time you want to use this widget as a property (more about that in the next section) or something else, write the widget's **ID** (e.g. -`main_window`). +``main_window``). Properties @@ -102,6 +109,7 @@ For example, the Libadwaita documentation lists the Write properties inside the curly brackets of a widget: .. code-block:: + Namespace.WidgetClass { property-name: value; } @@ -113,14 +121,14 @@ Property Types ~~~~~~~~~~~~~~ These are the **types** of values that can be used in properties: - - Booleans: `true`, `false` - - Numbers: e.g. `1`, `1.5`, `-2`, `-2.5` - - Strings (single- or double-quoted): e.g. `"a string"`, `'another string'` + - Booleans: ``true``, ``false`` + - Numbers: e.g. ``1``, ``1.5``, ``-2``, ``-2.5`` + - Strings (single- or double-quoted): e.g. ``"a string"``, ``'another string'`` - Enums - Widgets Properties are **strongly typed**, so you can't use, for example, a string -for the orientation property, which requires an `Orientation` enum +for the orientation property, which requires an ``Orientation`` enum vartiant as its value. Enum Properties @@ -138,6 +146,7 @@ In the blueprint, you would only write the *variant* part of the enum in *lowercase*, just like you would in the XML. .. code-block:: + Box { orientation: horizontal; } @@ -146,11 +155,12 @@ Widget Properties ~~~~~~~~~~~~~~~~~ Some widgets take other widgets as properties. For example, the -`Gtk.StackSidebar` has a stack property which takes a `Gtk.Stack` widget. +``Gtk.StackSidebar`` has a stack property which takes a ``Gtk.Stack`` widget. You can create a new widget for the value, or you can reference another widget by its **ID**. .. code-block:: + StackSidebar { stack: Stack { }; } @@ -158,6 +168,7 @@ widget by its **ID**. OR .. code-block:: + StackSidebar { stack: my_stack; } @@ -174,12 +185,13 @@ Property Bindings ----------------- If you want a widget's property to have the same value as another widget's -property (without hard-coding the value), you could `bind` two widgets' +property (without hard-coding the value), you could ``bind`` two widgets' properties of the same type. Bindings must reference a *source* widget by **ID**. As long as the two properties have the same type, you can bind properties of different names and of widgets with different widget classes. .. code-block:: + Box my_box { halign: fill; // Source } @@ -197,6 +209,7 @@ changed to the *Source*'s value when the binding is created and when the *Source* value changes. .. code-block:: + Box my_box { hexpand: true; // Source } @@ -214,13 +227,13 @@ no-sync-create bidirectional When either the *Source* or *Target* value is modified, the other's value will be updated. For example, if the logic of the program - changes the Button's vexpand value to `false`, then the Box's halign - value will also be updated to `false`. + changes the Button's vexpand value to ``false``, then the Box's halign + value will also be updated to ``false``. inverted If the property is a boolean, the value of the bind can be negated - with this flag. For example, if the Box's hexpand property is `true`, - the Button's vexpand property will be `false` in the code above. + with this flag. For example, if the Box's hexpand property is ``true``, + the Button's vexpand property will be ``false`` in the code above. Signals @@ -239,6 +252,7 @@ To register a handler with the application, consult the documentation for your language's bindings of Gtk. .. code-block:: + WidgetClass { event_name => handler_name() flags; } @@ -251,6 +265,7 @@ widget that is passed to the handler by referencing its **id** inside the parenthesis. .. code-block:: + Label my_label { label: "Hide me"; } @@ -265,7 +280,7 @@ Custom Widget Classes Some programs have custom widgets defined in their logic, and so blueprint won't know that they exist. Writing widgets not defined in the GIR will -result in an error. Prepend a custom widget with a `.` to prevent the +result in an error. Prepend a custom widget with a ``.`` to prevent the compiler from trying to validate the widget. This is essentially leaving out the *namespace*. @@ -273,6 +288,7 @@ To register a custom widget with the application consult the documentation for your language's bindings of Gtk. .. code-block:: + .MyCustomWidget { } @@ -291,6 +307,7 @@ Widgets can be given style classes that can be used with your CSS or in libraries like Libadwaita. .. code-block:: + Button { label: "Click me"; styles ["my-style", "pill"] @@ -309,9 +326,10 @@ Some widgets will have elements which are not properties, but they sort of act like properties. Most of the time they will be specific only to a certain widget. *Styles* is one of these elements, except that styles can be used for any widget. Similarly to how every widget has styles, -`Gtk.ComboBoxText` has *items*: +``Gtk.ComboBoxText`` has *items*: .. code-block:: + Gtk.ComboBoxText { items [ item1: "Item 1", @@ -329,17 +347,18 @@ Menus Menus are usually the widgets that are placed along the top-bar of a window, or pop up when you right-click some other widget. In Blueprint a -`menu` is a `Gio.MenuModel` that can be shown by MenuButtons or other +``menu`` is a ``Gio.MenuModel`` that can be shown by MenuButtons or other widgets. -In Blueprint, `menu`s have *items*, *sections*, and *submenus*. -Like widgets, `menu`s can also be given a **ID**. +In Blueprint, ``menu``s have *items*, *sections*, and *submenus*. +Like widgets, ``menu``s can also be given a **ID**. The `Menu Model section of the Gtk.PopoverMenu documentation `_ has complete details on the menu model. Here is an example of a menu: .. code-block:: + menu my_menu { section { label: "File"; @@ -368,16 +387,18 @@ There is a shorthand for *items*. Items require at least a label. The action and icon-name are optional. .. code-block:: + menu { item ( "Item 2" ) item ( "Item 2", "app.action", "icon-name" ) } -A widget that uses a `menu` is `Gtk.MenuButton`. It has the *menu-model* +A widget that uses a ``menu`` is ``Gtk.MenuButton``. It has the *menu-model* property, which takes a menu. Write the menu at the root of the blueprint (meaning not inside any widgets) and reference it by **ID**. .. code-block:: + MenuButton { menu-model: my_menu; } @@ -398,6 +419,7 @@ the child the type is for. The following blueprint code... .. code-block:: + HeaderBar { [start] Button { @@ -414,6 +436,7 @@ The following blueprint code... And the following blueprint code... .. code-block:: + HeaderBar { [end] Button { @@ -431,15 +454,16 @@ And the following blueprint code... Translatable Strings -------------------- -Mark any string as translatable using this syntax: `_("...")`. +Mark any string as translatable using this syntax: ``_("...")``. Two strings that are the same in English could be translated in different ways in other languages because of different *contexts*. Translatable -strings with context look like this: `C_("context", "...")`. An example +strings with context look like this: ``C_("context", "...")``. An example where a context is needed is the word "have", which in Spanish could translate to "tener" or "haber". .. code-block:: + Label { label: C_("1st have", "have"); } From ba8ec804562f407a6b22af346c0a799544725858 Mon Sep 17 00:00:00 2001 From: "FeRD (Frank Dana)" Date: Wed, 19 Oct 2022 12:04:47 +0000 Subject: [PATCH 08/10] Apply 6 suggestion(s) to 1 file(s) --- docs/tutorial.rst | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/docs/tutorial.rst b/docs/tutorial.rst index 9305b51..138a24a 100644 --- a/docs/tutorial.rst +++ b/docs/tutorial.rst @@ -86,7 +86,7 @@ A good place to start is Naming Widgets ~~~~~~~~~~~~~~ -Widgets can be given **name/ID**s so that they can be referenced by other +Widgets can be given a **name/ID** so that they can be referenced by other widgets in the blueprint. .. code-block:: @@ -301,7 +301,9 @@ Templates CSS Style Classes ----------------- -.. Unsure if to group styles with widget-specific items + +.. TODO: Unsure if to group styles with widget-specific items + Widgets can be given style classes that can be used with your CSS or `predefined styles `_ in libraries like Libadwaita. @@ -350,8 +352,8 @@ window, or pop up when you right-click some other widget. In Blueprint a ``menu`` is a ``Gio.MenuModel`` that can be shown by MenuButtons or other widgets. -In Blueprint, ``menu``s have *items*, *sections*, and *submenus*. -Like widgets, ``menu``s can also be given a **ID**. +In Blueprint, a ``menu`` can have *items*, *sections*, and *submenus*. +Like widgets, a ``menu`` can also be given an **ID**. The `Menu Model section of the Gtk.PopoverMenu documentation `_ has complete details on the menu model. @@ -413,7 +415,7 @@ or the *end* of the Headerbar. Child widgets of HeaderBars can have the *start* or *end* types. Values for child types a widget can have are defined in the widget's documentation. -Child types in blueprint are written between square brackets [] and before +Child types in blueprint are written between square brackets ``[]`` and before the child the type is for. The following blueprint code... @@ -429,6 +431,8 @@ The following blueprint code... \... would look like this: +.. code-block:: + --------------------------- | Button | --------------------------- @@ -446,6 +450,8 @@ And the following blueprint code... \... would look like this: +.. code-block:: + --------------------------- | Button | --------------------------- From 13e477aa25c9e0951dc14f89810f10fad3df25df Mon Sep 17 00:00:00 2001 From: Megadash452 Date: Wed, 19 Oct 2022 12:39:14 +0000 Subject: [PATCH 09/10] Tutorial: Fixed a broken link, and some other tweaks. --- docs/tutorial.rst | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/docs/tutorial.rst b/docs/tutorial.rst index 138a24a..07495e3 100644 --- a/docs/tutorial.rst +++ b/docs/tutorial.rst @@ -81,13 +81,13 @@ Other namespaces must be written explicitly. Consult the widget library's documentation for a list of widgets. A good place to start is -`the Gtk4 widget list `. +`the Gtk4 widget list `_. Naming Widgets ~~~~~~~~~~~~~~ -Widgets can be given a **name/ID** so that they can be referenced by other -widgets in the blueprint. +Widgets can be given a **name/ID** so that they can be referenced by your +program or other widgets in the blueprint. .. code-block:: @@ -178,7 +178,7 @@ OR } Note the use of a semicolon at the end of the property in both cases. -Widget properties are not exempt of this rule. +Inline widget properties are not exempt of this rule. Property Bindings @@ -261,7 +261,7 @@ your language's bindings of Gtk. By default, signals in the blueprint will pass the widget that the signal is for as an argument to the *handler*. However, you can specify the -widget that is passed to the handler by referencing its **id** inside the +widget that is passed to the handler by referencing its **ID** inside the parenthesis. .. code-block:: @@ -278,11 +278,11 @@ parenthesis. Custom Widget Classes --------------------- -Some programs have custom widgets defined in their logic, and so blueprint +Some programs have custom widgets defined in their logic, so blueprint won't know that they exist. Writing widgets not defined in the GIR will result in an error. Prepend a custom widget with a ``.`` to prevent the -compiler from trying to validate the widget. This is essentially leaving -out the *namespace*. +compiler from trying to validate the widget. This is essentially saying +the widget has no *namespace*. To register a custom widget with the application consult the documentation for your language's bindings of Gtk. @@ -340,7 +340,7 @@ be used for any widget. Similarly to how every widget has styles, ] } -See `examples `_ for a list of more of these +See :doc:`examples ` for a list of more of these widget-specific items. @@ -348,7 +348,7 @@ Menus ----- Menus are usually the widgets that are placed along the top-bar of a -window, or pop up when you right-click some other widget. In Blueprint a +window, or pop up when you right-click some other widget. In Blueprint, a ``menu`` is a ``Gio.MenuModel`` that can be shown by MenuButtons or other widgets. @@ -410,7 +410,7 @@ Child Types ----------- Child types describe how a child widget is placed on a parent widget. For -example, HeaderBars widgets can have children placed either at the *start* +example, HeaderBar widgets can have children placed either at the *start* or the *end* of the Headerbar. Child widgets of HeaderBars can have the *start* or *end* types. Values for child types a widget can have are defined in the widget's documentation. From e1f972ef164a9ac9b2888c909d7910d9479e7f8e Mon Sep 17 00:00:00 2001 From: "FeRD (Frank Dana)" Date: Wed, 19 Oct 2022 14:00:09 +0000 Subject: [PATCH 10/10] Apply 5 suggestion(s) to 1 file(s) --- docs/tutorial.rst | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/tutorial.rst b/docs/tutorial.rst index 07495e3..7fdbf5a 100644 --- a/docs/tutorial.rst +++ b/docs/tutorial.rst @@ -115,7 +115,7 @@ Write properties inside the curly brackets of a widget: } Properties values are *all lowercase* (except strings) and must end with a -semicolon (;). +semicolon (``;``). Property Types ~~~~~~~~~~~~~~ @@ -280,7 +280,7 @@ Custom Widget Classes Some programs have custom widgets defined in their logic, so blueprint won't know that they exist. Writing widgets not defined in the GIR will -result in an error. Prepend a custom widget with a ``.`` to prevent the +result in an error. Prepend a custom widget with a period (``.``) to prevent the compiler from trying to validate the widget. This is essentially saying the widget has no *namespace*. @@ -327,7 +327,7 @@ Non-property Elements Some widgets will have elements which are not properties, but they sort of act like properties. Most of the time they will be specific only to a certain widget. *Styles* is one of these elements, except that styles can -be used for any widget. Similarly to how every widget has styles, +be used for any widget. Similar to how every widget has styles, ``Gtk.ComboBoxText`` has *items*: .. code-block:: @@ -411,11 +411,11 @@ Child Types Child types describe how a child widget is placed on a parent widget. For example, HeaderBar widgets can have children placed either at the *start* -or the *end* of the Headerbar. Child widgets of HeaderBars can have the +or the *end* of the HeaderBar. Child widgets of HeaderBars can have the *start* or *end* types. Values for child types a widget can have are defined in the widget's documentation. -Child types in blueprint are written between square brackets ``[]`` and before +Child types in blueprint are written between square brackets (``[`` ``]``) and before the child the type is for. The following blueprint code...