forked from AuroraMiddleware/gtk
Merge branch 'ebassi/getting-started-links' into 'master'
docs: Fix links in the Getting Started page See merge request GNOME/gtk!4018
This commit is contained in:
commit
169effefc2
@ -3,13 +3,13 @@ Slug: gtk-getting-started
|
|||||||
|
|
||||||
GTK is a [widget toolkit](http://en.wikipedia.org/wiki/Widget_toolkit).
|
GTK is a [widget toolkit](http://en.wikipedia.org/wiki/Widget_toolkit).
|
||||||
Each user interface created by GTK consists of widgets. This is implemented
|
Each user interface created by GTK consists of widgets. This is implemented
|
||||||
in C using [GObject](#gobject), an object-oriented framework for C. Widgets
|
in C using [class@GObject.Object], an object-oriented framework for C. Widgets
|
||||||
are organized in a hierarchy. The window widget is the main container.
|
are organized in a hierarchy. The window widget is the main container.
|
||||||
The user interface is then built by adding buttons, drop-down menus, input
|
The user interface is then built by adding buttons, drop-down menus, input
|
||||||
fields, and other widgets to the window. If you are creating complex user
|
fields, and other widgets to the window. If you are creating complex user
|
||||||
interfaces it is recommended to use GtkBuilder and its GTK-specific markup
|
interfaces it is recommended to use GtkBuilder and its GTK-specific markup
|
||||||
description language, instead of assembling the interface manually. You can
|
description language, instead of assembling the interface manually. You can
|
||||||
also use a visual user interface editor, like [glade](https://glade.gnome.org/).
|
also use a visual user interface editor, like [Glade](https://glade.gnome.org/).
|
||||||
|
|
||||||
GTK is event-driven. The toolkit listens for events such as a click
|
GTK is event-driven. The toolkit listens for events such as a click
|
||||||
on a button, and passes the event to your application.
|
on a button, and passes the event to your application.
|
||||||
@ -17,7 +17,7 @@ on a button, and passes the event to your application.
|
|||||||
This chapter contains some tutorial information to get you started with
|
This chapter contains some tutorial information to get you started with
|
||||||
GTK programming. It assumes that you have GTK, its dependencies and a C
|
GTK programming. It assumes that you have GTK, its dependencies and a C
|
||||||
compiler installed and ready to use. If you need to build GTK itself first,
|
compiler installed and ready to use. If you need to build GTK itself first,
|
||||||
refer to the [Compiling the GTK libraries](#gtk-compiling) section in this
|
refer to the [Compiling the GTK libraries](building.html) section in this
|
||||||
reference.
|
reference.
|
||||||
|
|
||||||
## Basics
|
## Basics
|
||||||
@ -68,7 +68,7 @@ gcc $( pkg-config --cflags gtk4 ) -o example-0 example-0.c $( pkg-config --libs
|
|||||||
```
|
```
|
||||||
|
|
||||||
For more information on how to compile a GTK application, please
|
For more information on how to compile a GTK application, please
|
||||||
refer to the [Compiling GTK Applications](#gtk-compiling)
|
refer to the [Compiling GTK Applications](compiling.html)
|
||||||
section in this reference.
|
section in this reference.
|
||||||
|
|
||||||
All GTK applications will, of course, include `gtk/gtk.h`, which declares
|
All GTK applications will, of course, include `gtk/gtk.h`, which declares
|
||||||
@ -106,16 +106,16 @@ The call to [ctor@Gtk.ApplicationWindow.new] will create a new
|
|||||||
window will have a frame, a title bar, and window controls depending on the
|
window will have a frame, a title bar, and window controls depending on the
|
||||||
platform.
|
platform.
|
||||||
|
|
||||||
A window title is set using [method@Gtk.Window.set_title]. This function
|
A window title is set using [`method@Gtk.Window.set_title`]. This function
|
||||||
takes a `GtkWindow` pointer and a string as input. As our `window` pointer
|
takes a `GtkWindow` pointer and a string as input. As our `window` pointer
|
||||||
is a `GtkWidget` pointer, we need to cast it to `GtkWindow`; instead of
|
is a `GtkWidget` pointer, we need to cast it to `GtkWindow`; instead of
|
||||||
casting `window` via a typical C cast like `(GtkWindow*)`, `window` can be
|
casting `window` via a typical C cast like `(GtkWindow*)`, `window` can be
|
||||||
cast using the macro `GTK_WINDOW()`. `GTK_WINDOW()` will check if the
|
cast using the macro `GTK_WINDOW()`. `GTK_WINDOW()` will check if the
|
||||||
pointer is an instance of the `GtkWindow` class, before casting, and emit a
|
pointer is an instance of the `GtkWindow` class, before casting, and emit a
|
||||||
warning if the check fails. More information about this convention can be
|
warning if the check fails. More information about this convention can be
|
||||||
found [here](https://developer.gnome.org/gobject/stable/gtype-conventions.html).
|
found [in the GObject documentation](https://docs.gtk.org/gobject/concepts.html#conventions).
|
||||||
|
|
||||||
Finally the window size is set using [method@Gtk.Window.set_default_size]
|
Finally the window size is set using [`method@Gtk.Window.set_default_size`]
|
||||||
and the window is then shown by GTK via [method@Gtk.Widget.show].
|
and the window is then shown by GTK via [method@Gtk.Widget.show].
|
||||||
|
|
||||||
When you close the window, by (for example) pressing the X button, the
|
When you close the window, by (for example) pressing the X button, the
|
||||||
@ -212,10 +212,10 @@ The `GtkBox` widget is created with [ctor@Gtk.Box.new], which takes a
|
|||||||
this box will contain can either be laid out horizontally or vertically.
|
this box will contain can either be laid out horizontally or vertically.
|
||||||
This does not matter in this particular case, as we are dealing with only
|
This does not matter in this particular case, as we are dealing with only
|
||||||
one button. After initializing box with the newly created `GtkBox`, the code
|
one button. After initializing box with the newly created `GtkBox`, the code
|
||||||
adds the box widget to the window widget using [method@Gtk.Window.set_child].
|
adds the box widget to the window widget using [`method@Gtk.Window.set_child`].
|
||||||
|
|
||||||
Next the `button` variable is initialized in similar manner.
|
Next the `button` variable is initialized in similar manner.
|
||||||
[ctor@Gtk.Button.new_with_label] is called which returns a
|
[`ctor@Gtk.Button.new_with_label`] is called which returns a
|
||||||
[class@Gtk.Button] to be stored in `button`. Afterwards `button` is added to
|
[class@Gtk.Button] to be stored in `button`. Afterwards `button` is added to
|
||||||
our `box`.
|
our `box`.
|
||||||
|
|
||||||
@ -241,8 +241,8 @@ More information about creating buttons can be found
|
|||||||
[here](https://wiki.gnome.org/HowDoI/Buttons).
|
[here](https://wiki.gnome.org/HowDoI/Buttons).
|
||||||
|
|
||||||
The rest of the code in `example-1.c` is identical to `example-0.c`. The next
|
The rest of the code in `example-1.c` is identical to `example-0.c`. The next
|
||||||
section will elaborate further on how to add several GtkWidgets to your GTK
|
section will elaborate further on how to add several [class@Gtk.Widget]s to your
|
||||||
application.
|
GTK application.
|
||||||
|
|
||||||
## Packing
|
## Packing
|
||||||
|
|
||||||
@ -251,10 +251,18 @@ a window. When you do so, it becomes important to control how each widget is
|
|||||||
positioned and sized. This is where packing comes in.
|
positioned and sized. This is where packing comes in.
|
||||||
|
|
||||||
GTK comes with a large variety of _layout containers_ whose purpose it
|
GTK comes with a large variety of _layout containers_ whose purpose it
|
||||||
is to control the layout of the child widgets that are added to them.
|
is to control the layout of the child widgets that are added to them, like:
|
||||||
See [Layout containers](#LayoutContainers) for an overview.
|
|
||||||
|
|
||||||
The following example shows how the GtkGrid container lets you
|
- [class@Gtk.Box]
|
||||||
|
- [class@Gtk.Grid]
|
||||||
|
- [class@Gtk.Revealer]
|
||||||
|
- [class@Gtk.Stack]
|
||||||
|
- [class@Gtk.Overlay]
|
||||||
|
- [class@Gtk.Paned]
|
||||||
|
- [class@Gtk.Expander]
|
||||||
|
- [class@Gtk.Fixed]
|
||||||
|
|
||||||
|
The following example shows how the [class@Gtk.Grid] container lets you
|
||||||
arrange several buttons:
|
arrange several buttons:
|
||||||
|
|
||||||
![Grid packing](grid-packing.png)
|
![Grid packing](grid-packing.png)
|
||||||
@ -353,11 +361,11 @@ draw function.
|
|||||||
The contents of a widget often need to be partially or fully redrawn, e.g.
|
The contents of a widget often need to be partially or fully redrawn, e.g.
|
||||||
when another window is moved and uncovers part of the widget, or when the
|
when another window is moved and uncovers part of the widget, or when the
|
||||||
window containing it is resized. It is also possible to explicitly cause a
|
window containing it is resized. It is also possible to explicitly cause a
|
||||||
widget to be redrawn, by calling [method@Gtk.Widget.queue_draw]. GTK takes
|
widget to be redrawn, by calling [`method@Gtk.Widget.queue_draw`]. GTK takes
|
||||||
care of most of the details by providing a ready-to-use cairo context to the
|
care of most of the details by providing a ready-to-use cairo context to the
|
||||||
draw function.
|
draw function.
|
||||||
|
|
||||||
The following example shows how to use a draw function with GtkDrawingArea.
|
The following example shows how to use a draw function with [class@Gtk.DrawingArea].
|
||||||
It is a bit more complicated than the previous examples, since it also
|
It is a bit more complicated than the previous examples, since it also
|
||||||
demonstrates input event handling with event controllers.
|
demonstrates input event handling with event controllers.
|
||||||
|
|
||||||
@ -690,16 +698,16 @@ gcc $( pkg-config --cflags gtk4 ) -o example-3 example-3.c $( pkg-config --libs
|
|||||||
|
|
||||||
Note that `GtkBuilder` can also be used to construct objects that are
|
Note that `GtkBuilder` can also be used to construct objects that are
|
||||||
not widgets, such as tree models, adjustments, etc. That is the reason
|
not widgets, such as tree models, adjustments, etc. That is the reason
|
||||||
the method we use here is called [method@Gtk.Builder.get_object] and returns
|
the method we use here is called [`method@Gtk.Builder.get_object`] and
|
||||||
a `GObject` instead of a `GtkWidget`.
|
returns a `GObject` instead of a `GtkWidget`.
|
||||||
|
|
||||||
Normally, you would pass a full path to [method@Gtk.Builder.add_from_file] to
|
Normally, you would pass a full path to [`method@Gtk.Builder.add_from_file`] to
|
||||||
make the execution of your program independent of the current directory.
|
make the execution of your program independent of the current directory.
|
||||||
A common location to install UI descriptions and similar data is
|
A common location to install UI descriptions and similar data is
|
||||||
`/usr/share/appname`.
|
`/usr/share/appname`.
|
||||||
|
|
||||||
It is also possible to embed the UI description in the source code as a
|
It is also possible to embed the UI description in the source code as a
|
||||||
string and use [method@Gtk.Builder.add_from_string] to load it. But keeping the
|
string and use [`method@Gtk.Builder.add_from_string`] to load it. But keeping the
|
||||||
UI description in a separate file has several advantages: It is then possible
|
UI description in a separate file has several advantages: It is then possible
|
||||||
to make minor adjustments to the UI without recompiling your program, and,
|
to make minor adjustments to the UI without recompiling your program, and,
|
||||||
more importantly, graphical UI editors such as [Glade](http://glade.gnome.org)
|
more importantly, graphical UI editors such as [Glade](http://glade.gnome.org)
|
||||||
@ -762,17 +770,17 @@ main (int argc, char *argv[])
|
|||||||
```
|
```
|
||||||
|
|
||||||
All the application logic is in the application class, which is a subclass of
|
All the application logic is in the application class, which is a subclass of
|
||||||
GtkApplication. Our example does not yet have any interesting functionality.
|
`GtkApplication`. Our example does not yet have any interesting functionality.
|
||||||
All it does is open a window when it is activated without arguments, and open
|
All it does is open a window when it is activated without arguments, and open
|
||||||
the files it is given, if it is started with arguments.
|
the files it is given, if it is started with arguments.
|
||||||
|
|
||||||
To handle these two cases, we override the activate() vfunc, which gets
|
To handle these two cases, we override the `activate()` vfunc, which gets
|
||||||
called when the application is launched without commandline arguments, and
|
called when the application is launched without commandline arguments, and
|
||||||
the `open()` virtual function, which gets called when the application is
|
the `open()` virtual function, which gets called when the application is
|
||||||
launched with commandline arguments.
|
launched with commandline arguments.
|
||||||
|
|
||||||
To learn more about `GApplication` entry points, consult the GIO
|
To learn more about `GApplication` entry points, consult the GIO
|
||||||
[documentation](https://developer.gnome.org/gio/stable/GApplication.html#GApplication.description).
|
[documentation](https://docs.gtk.org/gio/class.Application.html).
|
||||||
|
|
||||||
```c
|
```c
|
||||||
#include <gtk/gtk.h>
|
#include <gtk/gtk.h>
|
||||||
@ -841,8 +849,8 @@ example_app_new (void)
|
|||||||
```
|
```
|
||||||
|
|
||||||
Another important class that is part of the application support in GTK is
|
Another important class that is part of the application support in GTK is
|
||||||
`GtkApplicationWindow`. It is typically subclassed as well. Our subclass does
|
[class@Gtk.ApplicationWindow]. It is typically subclassed as well. Our
|
||||||
not do anything yet, so we will just get an empty window.
|
subclass does not do anything yet, so we will just get an empty window.
|
||||||
|
|
||||||
```c
|
```c
|
||||||
#include <gtk/gtk.h>
|
#include <gtk/gtk.h>
|
||||||
@ -907,10 +915,10 @@ and it accepts files as commandline arguments.
|
|||||||
|
|
||||||
### Populating the window
|
### Populating the window
|
||||||
|
|
||||||
In this step, we use a GtkBuilder template to associate a
|
In this step, we use a `GtkBuilder` template to associate a
|
||||||
GtkBuilder ui file with our application window class.
|
`GtkBuilder` ui file with our application window class.
|
||||||
|
|
||||||
Our simple ui file gives the window a title, and puts a GtkStack
|
Our simple ui file gives the window a title, and puts a `GtkStack`
|
||||||
widget as the main content.
|
widget as the main content.
|
||||||
|
|
||||||
```xml
|
```xml
|
||||||
@ -934,9 +942,9 @@ widget as the main content.
|
|||||||
|
|
||||||
To make use of this file in our application, we revisit our
|
To make use of this file in our application, we revisit our
|
||||||
`GtkApplicationWindow` subclass, and call
|
`GtkApplicationWindow` subclass, and call
|
||||||
`gtk_widget_class_set_template_from_resource()` from the class init
|
[`method@Gtk.WidgetClass.set_template_from_resource`] from the class init
|
||||||
function to set the ui file as template for this class. We also
|
function to set the ui file as template for this class. We also
|
||||||
add a call to `gtk_widget_init_template()` in the instance init
|
add a call to [`method@Gtk.Widget.init_template`] in the instance init
|
||||||
function to instantiate the template for each instance of our
|
function to instantiate the template for each instance of our
|
||||||
class.
|
class.
|
||||||
|
|
||||||
@ -963,7 +971,7 @@ example_app_window_class_init (ExampleAppWindowClass *class)
|
|||||||
|
|
||||||
You may have noticed that we used the `_from_resource()` variant of the function
|
You may have noticed that we used the `_from_resource()` variant of the function
|
||||||
that sets a template. Now we need to use
|
that sets a template. Now we need to use
|
||||||
[GLib's resource functionality](https://developer.gnome.org/gio/stable/GResource.html)
|
[GLib's resource functionality](https://docs.gtk.org/gio/struct.Resource.html)
|
||||||
to include the ui file in the binary. This is commonly done by listing all resources
|
to include the ui file in the binary. This is commonly done by listing all resources
|
||||||
in a `.gresource.xml` file, such as this:
|
in a `.gresource.xml` file, such as this:
|
||||||
|
|
||||||
@ -985,7 +993,7 @@ glib-compile-resources exampleapp.gresource.xml --target=resources.c --generate-
|
|||||||
```
|
```
|
||||||
|
|
||||||
The gnome module of the [Meson build system](https://mesonbuild.com)
|
The gnome module of the [Meson build system](https://mesonbuild.com)
|
||||||
provides the [gnome.compile_resources()](https://mesonbuild.com/Gnome-module.html#gnomecompile_resources)
|
provides the [`gnome.compile_resources()`](https://mesonbuild.com/Gnome-module.html#gnomecompile_resources)
|
||||||
method for this task.
|
method for this task.
|
||||||
|
|
||||||
Our application now looks like this:
|
Our application now looks like this:
|
||||||
@ -1001,7 +1009,7 @@ To this end, we add a member to the struct of our application window subclass
|
|||||||
and keep a reference to the `GtkStack` there. The first member of the struct
|
and keep a reference to the `GtkStack` there. The first member of the struct
|
||||||
should be the parent type from which the class is derived. Here,
|
should be the parent type from which the class is derived. Here,
|
||||||
`ExampleAppWindow` is derived from `GtkApplicationWindow`. The
|
`ExampleAppWindow` is derived from `GtkApplicationWindow`. The
|
||||||
`gtk_widget_class_bind_template_child()` function arranges things so that after
|
[`func@Gtk.widget_class_bind_template_child`] function arranges things so that after
|
||||||
instantiating the template, the `stack` member of the struct will point to the
|
instantiating the template, the `stack` member of the struct will point to the
|
||||||
widget of the same name from the template.
|
widget of the same name from the template.
|
||||||
|
|
||||||
@ -1081,7 +1089,7 @@ tell it to display information about our stack.
|
|||||||
|
|
||||||
The stack switcher gets all its information it needs to display tabs from
|
The stack switcher gets all its information it needs to display tabs from
|
||||||
the stack that it belongs to. Here, we are passing the label to show for
|
the stack that it belongs to. Here, we are passing the label to show for
|
||||||
each file as the last argument to the [method@Gtk.Stack.add_titled]
|
each file as the last argument to the [`method@Gtk.Stack.add_titled`]
|
||||||
function.
|
function.
|
||||||
|
|
||||||
Our application is beginning to take shape:
|
Our application is beginning to take shape:
|
||||||
@ -1121,7 +1129,7 @@ resulting menu model with the menu button that we've added to the headerbar.
|
|||||||
Since menus work by activating GActions, we also have to add a suitable set
|
Since menus work by activating GActions, we also have to add a suitable set
|
||||||
of actions to our application.
|
of actions to our application.
|
||||||
|
|
||||||
Adding the actions is best done in the startup() vfunc, which is guaranteed
|
Adding the actions is best done in the `startup()` vfunc, which is guaranteed
|
||||||
to be called once for each primary application instance:
|
to be called once for each primary application instance:
|
||||||
|
|
||||||
```c
|
```c
|
||||||
@ -1179,7 +1187,7 @@ example_app_class_init (ExampleAppClass *class)
|
|||||||
|
|
||||||
Our preferences menu item does not do anything yet, but the Quit menu item
|
Our preferences menu item does not do anything yet, but the Quit menu item
|
||||||
is fully functional. Note that it can also be activated by the usual Ctrl-Q
|
is fully functional. Note that it can also be activated by the usual Ctrl-Q
|
||||||
shortcut. The shortcut was added with `gtk_application_set_accels_for_action()`.
|
shortcut. The shortcut was added with [`method@Gtk.Application.set_accels_for_action`].
|
||||||
|
|
||||||
The application menu looks like this:
|
The application menu looks like this:
|
||||||
|
|
||||||
@ -1191,7 +1199,7 @@ A typical application will have a some preferences that should be remembered
|
|||||||
from one run to the next. Even for our simple example application, we may
|
from one run to the next. Even for our simple example application, we may
|
||||||
want to change the font that is used for the content.
|
want to change the font that is used for the content.
|
||||||
|
|
||||||
We are going to use `GSettings` to store our preferences. `GSettings` requires
|
We are going to use [class@Gio.Settings] to store our preferences. `GSettings` requires
|
||||||
a schema that describes our settings:
|
a schema that describes our settings:
|
||||||
|
|
||||||
```xml
|
```xml
|
||||||
@ -1218,10 +1226,9 @@ a schema that describes our settings:
|
|||||||
```
|
```
|
||||||
|
|
||||||
Before we can make use of this schema in our application, we need to compile
|
Before we can make use of this schema in our application, we need to compile
|
||||||
it into the binary form that GSettings expects. GIO provides
|
it into the binary form that GSettings expects. GIO provides macros to do
|
||||||
[macros](https://developer.gnome.org/gio/2.36/ch31s06.html) to do this in
|
this in Autotools-based projects, and the gnome module of the Meson build
|
||||||
autotools-based projects, and the gnome module of the Meson build system
|
system provides the [`gnome.compile_schemas()`](https://mesonbuild.com/Gnome-module.html#gnomecompile_schemas)
|
||||||
provides the [gnome.compile_schemas()](https://mesonbuild.com/Gnome-module.html#gnomecompile_schemas)
|
|
||||||
method for this task.
|
method for this task.
|
||||||
|
|
||||||
Next, we need to connect our settings to the widgets that they are supposed
|
Next, we need to connect our settings to the widgets that they are supposed
|
||||||
@ -1681,7 +1688,8 @@ What our application looks like now:
|
|||||||
Widgets and other objects have many useful properties.
|
Widgets and other objects have many useful properties.
|
||||||
|
|
||||||
Here we show some ways to use them in new and flexible ways, by wrapping
|
Here we show some ways to use them in new and flexible ways, by wrapping
|
||||||
them in actions with `GPropertyAction` or by binding them with `GBinding`.
|
them in actions with [class@Gio.PropertyAction] or by binding them with
|
||||||
|
[class@GObject.Binding].
|
||||||
|
|
||||||
To set this up, we add two labels to the header bar in our window template,
|
To set this up, we add two labels to the header bar in our window template,
|
||||||
named `lines_label` and `lines`, and bind them to struct members in the
|
named `lines_label` and `lines`, and bind them to struct members in the
|
||||||
|
Loading…
Reference in New Issue
Block a user