Miroirs/Gtk4-tutorial
1
0
Fork 0
mirror of https://github.com/ToshioCP/Gtk4-tutorial.git synced 2025-01-28 19:58:41 +01:00
Code Issues Projects Releases Packages Wiki Activity

Rake creates the follong files from the source which is updated by pull requests.

Browse source
This commit is contained in:
Toshio Sekiya 2022-03-04 17:09:56 +09:00
parent 5fd6595c38
commit 61f81bb6fe
2 changed files with 51 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
gfm/sec4.md
View file

@ -6,10 +6,10 @@ Up: [Readme.md](../Readme.md), Prev: [Section 3](sec3.md), Next: [Section 5](se
### GtkLabel ### GtkLabel
We made a window and show it on the screen in the previous section. In the previous section we made a window and displayed it on the screen.
Now we go on to the next topic, widgets in the window. Now we go on to the next topic, where we add widgets to this window.
The simplest widget is GtkLabel. The simplest widget is GtkLabel.
It is a widget with a string in it. It is a widget with text in it.
~~~C ~~~C
1 #include <gtk/gtk.h> 1 #include <gtk/gtk.h>
@ -77,7 +77,7 @@ $ cd misc; diff pr4.c lb1.c
This tells us: This tells us:
- The definition of a variable `lab` is added. - The definition of a new variable `lab` is added.
- The title of the window is changed. - The title of the window is changed.
- A label is created and connected to the window as a child. - A label is created and connected to the window as a child.
@ -89,20 +89,20 @@ But these two relationships are totally different.
Don't be confused. Don't be confused.
In the program `lb1.c`, `lab` is a child widget of `win`. In the program `lb1.c`, `lab` is a child widget of `win`.
Child widgets are always located in their parent widget on the screen. Child widgets are always located in their parent widget on the screen.
See the window appeared on the screen. See how the window has appeared on the screen.
The window includes the label. The application window includes the label.
The window `win` doesn't have any parents. The window `win` doesn't have any parents.
We call such a window top-level window. We call such a window top-level window.
One application can have two or more top-level windows. An application can have more than one top-level window.
### GtkButton ### GtkButton
Next widget is GtkButton. The next widget to introduce is GtkButton.
It has a label or icon on it. It displays a button on the screen with a label or icon on it.
In this subsection, we will make a button with a label. In this subsection, we will make a button with a label.
When a button is clicked on, it emits a "clicked" signal. When the button is clicked, it emits a "clicked" signal.
The following program shows how to catch the signal and do something. The following program shows how to catch the signal to then do something.
~~~C ~~~C
1 #include <gtk/gtk.h> 1 #include <gtk/gtk.h>
@ -149,16 +149,16 @@ Finally, connects a "clicked" signal of the button to a handler (function) `clic
So, if `btn` is clicked, the function `click_cb` is invoked. So, if `btn` is clicked, the function `click_cb` is invoked.
The suffix "cb" means "call back". The suffix "cb" means "call back".
Name the program `lb2.c` and save it. Name the program `lb2.c` and save it.
Now compile and run it. Now compile and run it.
![Screenshot of the label](../image/screenshot_lb2.png) ![Screenshot of the label](../image/screenshot_lb2.png)
A window with the button appears. A window with the button appears.
Click the button (it is a large button, you can click everywhere in the window), then a string "Clicked." appears on the terminal. Click the button (it is a large button, you can click everywhere in the window), then a string "Clicked." appears on the terminal.
It shows the handler was invoked by clicking the button. It shows the handler was invoked by clicking the button.
It's fairly good for us to make sure that the clicked signal was caught and the handler was invoked. It's good that we make sure that the clicked signal was caught and the handler was invoked by using `g_print`.
However, using g_print is out of harmony with Gtk which is a GUI library. However, using g_print is out of harmony with Gtk which is a GUI library.
So, we will change the handler. So, we will change the handler.
The following code is `lb3.c`. The following code is `lb3.c`.
@ -216,17 +216,17 @@ $ cd misc; diff lb2.c lb3.c
< <
~~~ ~~~
The change is: The changes are:
- The function `g_print` in `lb2.c` was deleted and two lines above are inserted instead. - The function `g_print` in `lb2.c` was deleted and the two lines above are inserted instead.
- The label of `btn` is changed from "Click me" to "Quit". - The label of `btn` is changed from "Click me" to "Quit".
- The fourth argument of `g_signal_connect` is changed from `NULL` to `win`. - The fourth argument of `g_signal_connect` is changed from `NULL` to `win`.
Most important is the fourth argument of `g_signal_connect`. The most important change is the fourth argument of `g_signal_connect`.
It is described as "data to pass to handler" in the definition of `g_signal_connect` in [GObject API Reference](https://docs.gtk.org/gobject/func.signal_connect.html). This argument is described as "data to pass to handler" in the definition of `g_signal_connect` in [GObject API Reference](https://docs.gtk.org/gobject/func.signal_connect.html).
Therefore, `win` which is a pointer to GtkApplicationWindow is passed to the handler as a second parameter `user_data`. Therefore, `win` which is a pointer to GtkApplicationWindow is passed to the handler as a second parameter `user_data`.
Then, the handler cast it to a pointer to GtkWindow and call `gtk_window_destroy` to destroy the top-level window. The handler then casts it to a pointer to GtkWindow and calls `gtk_window_destroy` to destroy the top-level window.
Then, the application quits. The application then quits.
### GtkBox ### GtkBox
@ -327,5 +327,4 @@ Then, these two buttons are appended to the box.
The handler corresponds to `btn1` toggles its label. The handler corresponds to `btn1` toggles its label.
The handler corresponds to `btn2` destroys the top-level window and the application quits. The handler corresponds to `btn2` destroys the top-level window and the application quits.
Up: [Readme.md](../Readme.md), Prev: [Section 3](sec3.md), Next: [Section 5](sec5.md) Up: [Readme.md](../Readme.md), Prev: [Section 3](sec3.md), Next: [Section 5](sec5.md)

62
gfm/sec5.md
View file

@ -20,16 +20,16 @@ See the sample program `tfv1.c` below.
7 GtkTextBuffer *tb; 7 GtkTextBuffer *tb;
8 gchar *text; 8 gchar *text;
9 9
10 text = 10 text =
11 "Once upon a time, there was an old man who was called Taketori-no-Okina." 11 "Once upon a time, there was an old man who was called Taketori-no-Okina. "
12 "It is a japanese word that means a man whose work is making bamboo baskets.\n" 12 "It is a japanese word that means a man whose work is making bamboo baskets.\n"
13 "One day, he went into a mountain and found a shining bamboo." 13 "One day, he went into a mountain and found a shining bamboo. "
14 "\"What a mysterious bamboo it is!,\" he said." 14 "\"What a mysterious bamboo it is!,\" he said. "
15 "He cut it, then there was a small cute baby girl in it." 15 "He cut it, then there was a small cute baby girl in it. "
16 "The girl was shining faintly." 16 "The girl was shining faintly. "
17 "He thought this baby girl is a gift from Heaven and took her home.\n" 17 "He thought this baby girl is a gift from Heaven and took her home.\n"
18 "His wife was surprized at his tale." 18 "His wife was surprized at his tale. "
19 "They were very happy because they had no children." 19 "They were very happy because they had no children. "
20 ; 20 ;
21 win = gtk_application_window_new (GTK_APPLICATION (app)); 21 win = gtk_application_window_new (GTK_APPLICATION (app));
22 gtk_window_set_title (GTK_WINDOW (win), "Taketori"); 22 gtk_window_set_title (GTK_WINDOW (win), "Taketori");
@ -56,7 +56,6 @@ See the sample program `tfv1.c` below.
43 g_object_unref (app); 43 g_object_unref (app);
44 return stat; 44 return stat;
45 } 45 }
46
~~~ ~~~
Look at line 25. Look at line 25.
@ -76,22 +75,23 @@ Now compile and run it.
![GtkTextView](../image/screenshot_tfv1.png) ![GtkTextView](../image/screenshot_tfv1.png)
There's an I-beam pointer in the window. There's an I-beam pointer in the window.
You can add or delete any characters on the GtkTextview. You can add or delete any characters on the GtkTextview,
And your change is kept in the GtkTextBuffer. and your changes are kept in the GtkTextBuffer.
If you add more characters than the limit of the window, the height of the window extends. If you add more characters beyond the limit of the window, the height increases and the window extends.
If the height gets bigger than the height of the display screen, you won't be able to control the size of the window back to the original size. If the height gets bigger than the height of the display screen, you won't be
It's a problem and it shows that there exists a bug in the program. able to control the size of the window, and change it back to the original size.
You can solve it by putting a GtkScrolledWindow between the GtkApplicationWindow and GtkTextView. This is a problem and shows that there is a bug in our program.
This can solve it by adding a GtkScrolledWindow between the GtkApplicationWindow and GtkTextView.
### GtkScrolledWindow ### GtkScrolledWindow
What we need to do is: What we need to do is:
- Create a GtkScrolledWindow instance and insert it to the GtkApplicationWindow as a child. - Create a GtkScrolledWindow and insert it as a child of the GtkApplicationWindow; and
- insert the GtkTextView to the GtkScrolledWindow as a child. - Insert the GtkTextView widget to the GtkScrolledWindow as a child.
Modify `tfv1.c` and save it as `tfv2.c`. Modify `tfv1.c` and save it as `tfv2.c`.
The difference between these two files is very little. The difference between these two files is small.
~~~ ~~~
$ cd tfv; diff tfv1.c tfv2.c $ cd tfv; diff tfv1.c tfv2.c
@ -111,7 +111,7 @@ $ cd tfv; diff tfv1.c tfv2.c
> app = gtk_application_new ("com.github.ToshioCP.tfv2", G_APPLICATION_FLAGS_NONE); > app = gtk_application_new ("com.github.ToshioCP.tfv2", G_APPLICATION_FLAGS_NONE);
~~~ ~~~
Though you can modify the source file by this diff output, It's good for you to show `tfv2.c`. Here is the complete code of `tfv2.c`.
~~~C ~~~C
1 #include <gtk/gtk.h> 1 #include <gtk/gtk.h>
@ -124,16 +124,16 @@ Though you can modify the source file by this diff output, It's good for you to
8 GtkTextBuffer *tb; 8 GtkTextBuffer *tb;
9 gchar *text; 9 gchar *text;
10 10
11 text = 11 text =
12 "Once upon a time, there was an old man who was called Taketori-no-Okina." 12 "Once upon a time, there was an old man who was called Taketori-no-Okina. "
13 "It is a japanese word that means a man whose work is making bamboo baskets.\n" 13 "It is a japanese word that means a man whose work is making bamboo baskets.\n"
14 "One day, he went into a mountain and found a shining bamboo." 14 "One day, he went into a mountain and found a shining bamboo. "
15 "\"What a mysterious bamboo it is!,\" he said." 15 "\"What a mysterious bamboo it is!,\" he said. "
16 "He cut it, then there was a small cute baby girl in it." 16 "He cut it, then there was a small cute baby girl in it. "
17 "The girl was shining faintly." 17 "The girl was shining faintly. "
18 "He thought this baby girl is a gift from Heaven and took her home.\n" 18 "He thought this baby girl is a gift from Heaven and took her home.\n"
19 "His wife was surprized at his tale." 19 "His wife was surprized at his tale. "
20 "They were very happy because they had no children." 20 "They were very happy because they had no children. "
21 ; 21 ;
22 win = gtk_application_window_new (GTK_APPLICATION (app)); 22 win = gtk_application_window_new (GTK_APPLICATION (app));
23 gtk_window_set_title (GTK_WINDOW (win), "Taketori"); 23 gtk_window_set_title (GTK_WINDOW (win), "Taketori");
@ -163,12 +163,10 @@ Though you can modify the source file by this diff output, It's good for you to
47 g_object_unref (app); 47 g_object_unref (app);
48 return stat; 48 return stat;
49 } 49 }
50
~~~ ~~~
Now compile and run it. Compile and run it.
This time the window doesn't extend even if you type a lot of characters. Notice how this time the window doesn't extend when you type a lot of characters,
It just scrolls. it just scrolls and displays a slider.
Up: [Readme.md](../Readme.md), Prev: [Section 4](sec4.md), Next: [Section 6](sec6.md) Up: [Readme.md](../Readme.md), Prev: [Section 4](sec4.md), Next: [Section 6](sec6.md)