[gtk-web/gtk4-prep: 3/3] Update hello world

[Matthias Clasen <matthiasc src gnome org>]

commit 0a75320f3e87b429cdf76fda706bd8bf26ded40f
Author: Matthias Clasen <mclasen redhat com>
Date:   Mon Oct 5 22:29:46 2020 -0400

    Update hello world
    
    Update the hello world example to be a GTK 4 version,
    simplify it a bit, and update the explanation to match.
    
    Links here will have to be updates when 4.0 is released.

 _docs/getting-started/hello-world.md | 58 ++++++++----------------------------
 1 file changed, 12 insertions(+), 46 deletions(-)
---
diff --git a/_docs/getting-started/hello-world.md b/_docs/getting-started/hello-world.md
index beb2bb13..9079d500 100644
--- a/_docs/getting-started/hello-world.md
+++ b/_docs/getting-started/hello-world.md
@@ -46,21 +46,16 @@ activate (GtkApplication *app,
 {
   GtkWidget *window;
   GtkWidget *button;
-  GtkWidget *button_box;
 
   window = gtk_application_window_new (app);
   gtk_window_set_title (GTK_WINDOW (window), "Window");
   gtk_window_set_default_size (GTK_WINDOW (window), 200, 200);
 
-  button_box = gtk_button_box_new (GTK_ORIENTATION_HORIZONTAL);
-  gtk_container_add (GTK_CONTAINER (window), button_box);
-
   button = gtk_button_new_with_label ("Hello World");
   g_signal_connect (button, "clicked", G_CALLBACK (print_hello), NULL);
-  g_signal_connect_swapped (button, "clicked", G_CALLBACK (gtk_window_close), window);
-  gtk_container_add (GTK_CONTAINER (button_box), button);
+  gtk_window_set_child (GTK_WINDOW (window), button);
 
-  gtk_widget_show_all (window);
+  gtk_window_present (GTK_WINDOW (window));
 }
 
 int
@@ -82,12 +77,12 @@ main (int    argc,
 You can compile the program above with GCC using:
 
 ```shell
-gcc `pkg-config --cflags gtk+-3.0` -o hello-world-gtk hello-world-gtk.c `pkg-config --libs gtk+-3.0`
+gcc -o hello-world-gtk hello-world-gtk.c `pkg-config --cflags --libs gtk4`
 ```
 
 <div class="alert alert-tertiary">
 For more information on how to compile a GTK application, please refer to
-the [Compiling GTK Applications](https://developer.gnome.org/gtk3/stable/gtk-compiling.html)
+the [Compiling GTK Applications](https://developer.gnome.org/gtk4/unstable/gtk-compiling.html)
 section in the GTK API reference.
 </div>
 
@@ -96,7 +91,7 @@ section in the GTK API reference.
 ### Initialising the App
 
 In a GTK application, the purpose of the `main()` function is to create a
-[`GtkApplication`](https://developer.gnome.org/gtk3/stable/GtkApplication.html)
+[`GtkApplication`](https://developer.gnome.org/gtk4/unstable/GtkApplication.html)
 object and run it. In this example a `GtkApplication` instance is created and
 initialized using `gtk_application_new()`.
 
@@ -122,7 +117,7 @@ proceed into the `activate()` function of the application. Inside the
 `activate()` function we want to construct our GTK window, so that a window
 is shown when the application is launched. The call to
 `gtk_application_window_new()` will create a new
-[`GtkApplicationWindow`](https://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html)
+[`GtkApplicationWindow`](https://developer.gnome.org/gtk4/unstable/GtkApplicationWindow.html)
 instance and store it inside the `window` pointer. The window will have a frame,
 a title bar, and window controls depending on the platform.
 
@@ -136,7 +131,7 @@ casting, and emit a warning if the check fails. More information about this
 convention can be found [here](https://developer.gnome.org/gobject/stable/gtype-conventions.html).
 
 Finally the window size is set using `gtk_window_set_default_size()` and the
-window is then shown by GTK via `gtk_widget_show_all()`.
+window is then shown by GTK via `gtk_window_present()`.
 
 When you exit the window, by for example pressing the X, the
 `g_application_run()` in the main loop returns with a number which is saved
@@ -147,24 +142,11 @@ returned to the operating system, and the GTK application exits.
 ### Adding Button
 
 As seen above, `hello-world-gtk.c` adds a button to our window, with the
-label "Hello World". Two new `GtkWidget` pointers are declared to accomplish
-this, `button` and `button_box`. The `button_box` variable is created to
-store a [`GtkButtonBox`](https://developer.gnome.org/gtk3/stable/GtkButtonBox.html)
-which is GTK's way of controlling the size and layout of buttons. The
-`GtkButtonBox` is created and assigned to `gtk_button_box_new()` which takes
-a [`GtkOrientation`](https://developer.gnome.org/gtk3/stable/gtk3-Standard-Enumerations.html#GtkOrientation)
-enumeration value as parameter. The buttons which this box will contain can
-either be stored horizontally or vertically but this does not matter in this
-particular case as we are dealing with only one button. After initializing
-`button_box` with horizontal orientation, the code adds the `button_box`
-widget to the window widget using `gtk_container_add()`.
-
-### Adding Label
-
-Next the button variable is initialized in similar manner.
-`gtk_button_new_with_label()` is called which returns a
+label "Hello World". A new `GtkWidget` pointer is declared to accomplish
+this, `button`, and is initialized by calling `gtk_button_new_with_label()`,
+which returns a
 [`GtkButton`](https://developer.gnome.org/gtk3/stable/GtkButton.html) to be
-stored inside `button`. Afterwards `button` is added to our `button_box`.
+stored inside `button`. Afterwards `button` is added to our `window`.
 Using `g_signal_connect` the button is connected to a function in our app
 called `print_hello()`, so that when the button is clicked, GTK will call
 this function. As the `print_hello()` function does not use any data as
@@ -172,25 +154,9 @@ input, NULL is passed to it. `print_hello()` calls `g_print()` with the
 string "Hello World" which will print Hello World in a terminal if the GTK
 application was started from one.
 
-### Controlling Event Handling
-
-After connecting `print_hello()`, another signal is connected to the
-"clicked" state of the button using `g_signal_connect_swapped()`. This
-functions is similar to a 
[`g_signal_connect()`](https://developer.gnome.org/gobject/stable/gobject-Signals.html#g-signal-connect)
-with the difference lying in how the callback function is treated.
-Using `g_signal_connect_swapped()` allows you to specify what the callback
-function should take as the instance parameter by letting you pass it as
-data. In this case the function being called back is `gtk_window_close()`
-and the `window` pointer is passed to it. This has the effect that when the
-button is clicked, the window is closed as if the "close" button had been
-pressed. In contrast, if a normal `g_signal_connect()` were used to connect
-the "clicked" signal with `gtk_window_close()`, then GTK would warn that
-the button is not a `GtkWindow` instance. More information about creating
-buttons can be found [here](https://wiki.gnome.org/HowDoI/Buttons).
-
 ## Next steps
 
 The GTK documentation contains a full example on how to create [a complex
-application](https://developer.gnome.org/gtk3/stable/ch01s04.html), capable
+application](https://developer.gnome.org/gtk4/unstable/ch01s06.html), capable
 of opening files, storing and loading settings, using menus and more complex
 widgets.