mirror of
https://github.com/ToshioCP/Gtk4-tutorial.git
synced 2025-01-20 10:26:32 +01:00
Bug (path to images) fixed.
This commit is contained in:
parent
9a495b0383
commit
3abea822a9
24 changed files with 50 additions and 49 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -3,3 +3,4 @@
|
|||
insertfunc.rb
|
||||
makehtml.rb
|
||||
pickoutfunc.rb
|
||||
src/img.rb
|
||||
|
|
|
@ -62,7 +62,7 @@ def src2md srcmd, md
|
|||
n += 1
|
||||
end
|
||||
else
|
||||
md_buf << line
|
||||
md_buf << line.gsub(/(!\[[^\]]*\])\(..\/([^\)]*)\)/, "\\1(\\2)")
|
||||
end
|
||||
end
|
||||
IO.write(md,md_buf.join)
|
||||
|
|
6
sec1.md
6
sec1.md
|
@ -200,7 +200,7 @@ And GtkWidget is a base object from which all the GUI objects derive.
|
|||
|
||||
GtkWindow includes GtkWidget at the top of its object.
|
||||
|
||||
![GtkWindow and GtkWidget](window_widget.png)
|
||||
![GtkWindow and GtkWidget](image/window_widget.png)
|
||||
|
||||
The function `gtk_window_new` is defined as follows.
|
||||
|
||||
|
@ -251,7 +251,7 @@ Save the program as `pr3.c` and compile and run it.
|
|||
|
||||
A small window appears.
|
||||
|
||||
![Screenshot of the window](screenshot_pr3.png)
|
||||
![Screenshot of the window](image/screenshot_pr3.png)
|
||||
|
||||
Click on the close button then the window disappears and the program finishes.
|
||||
|
||||
|
@ -280,6 +280,6 @@ So you don't need to call `gtk_window_set_application` any more.
|
|||
The program sets the title and the default size of the window.
|
||||
Compile it and run `a.out`, then you will see a bigger window with its title "pr4".
|
||||
|
||||
![Screenshot of the window](screenshot_pr4.png)
|
||||
![Screenshot of the window](image/screenshot_pr4.png)
|
||||
|
||||
Up: [Readme.md](Readme.md), Next: [Section 2](sec2.md)
|
||||
|
|
4
sec10.md
4
sec10.md
|
@ -226,7 +226,7 @@ The buttons are Cancel and Save.
|
|||
- 1-15: `saveas_dialog_response` signal handler.
|
||||
- 5-13: If the response is `GTK_RESPONSE_ACCEPT`, which is set to the argument when the user has clicked on Save button, then gets a pointer to the GFile object, set it to `tv->file`, assign TRUE to `tv->changed`, emits "change-file" signal then call `tfe_text_view_save` to save the buffer to the file.
|
||||
|
||||
![Saveas process](saveas.png)
|
||||
![Saveas process](image/saveas.png)
|
||||
|
||||
When you use GtkFileChooserDialog, you need to divide the program into two parts.
|
||||
They are a function which generates GtkFileChooserDialog and the signal handler.
|
||||
|
@ -317,7 +317,7 @@ In Gtk3, `gtk_dialog_run` function is available.
|
|||
It simplifies the process.
|
||||
However, in Gtk4, `gtk_dialog_run`is unavailable any more.
|
||||
|
||||
![Caller and TfeTextView](open.png)
|
||||
![Caller and TfeTextView](image/open.png)
|
||||
|
||||
1. A caller get a pointer `tv` to TfeTextView by calling `tfe_text_view_new`.
|
||||
2. The caller connects the handler (left bottom in the diagram) and the signal "open-response".
|
||||
|
|
8
sec14.md
8
sec14.md
|
@ -6,7 +6,7 @@ Up: [Readme.md](Readme.md), Prev: [Section 13](sec13.md), Next: [Section 15](se
|
|||
Users often use menus to tell the command to the computer.
|
||||
It is like this:
|
||||
|
||||
![Menu](menu.png)
|
||||
![Menu](image/menu.png)
|
||||
|
||||
Now let's analyze the menu above.
|
||||
There are two types of object.
|
||||
|
@ -19,7 +19,7 @@ They are called "menu".
|
|||
Menu is an ordered list of items.
|
||||
They are similar to arrays.
|
||||
|
||||
![Menu structure](menu_structure.png)
|
||||
![Menu structure](image/menu_structure.png)
|
||||
|
||||
- Menubar is a menu which has three items, which are "File", "Edit" and "View".
|
||||
- The menu item labeled "Edit" has a link to the submenu which has two items.
|
||||
|
@ -209,8 +209,8 @@ The structure of the menu is shown in the diagram below.
|
|||
- 30: Set GtkApplicationWindow to show the menubar.
|
||||
- 31: Show the window.
|
||||
|
||||
![menu and action](menu1.png)
|
||||
![menu and action](image/menu1.png)
|
||||
|
||||
![Screenshot of menu1](menu1_screenshot.png)
|
||||
![Screenshot of menu1](image/menu1_screenshot.png)
|
||||
|
||||
Up: [Readme.md](Readme.md), Prev: [Section 13](sec13.md), Next: [Section 15](sec15.md)
|
||||
|
|
2
sec15.md
2
sec15.md
|
@ -204,7 +204,7 @@ It is the string "s" given at the generation time.
|
|||
The following code includes stateful actions above.
|
||||
This program has menus like this:
|
||||
|
||||
![menu2](menu2.png)
|
||||
![menu2](image/menu2.png)
|
||||
|
||||
- Fullscreen menu toggles the size of the window between maximum and non-maximum.
|
||||
If the window is maximum size, which is called full screen, then a check mark is put before "fullscreen" label.
|
||||
|
|
2
sec16.md
2
sec16.md
|
@ -58,7 +58,7 @@ So, we usually prefer the former ui file style.
|
|||
The following is a screenshot of the sample program in this section.
|
||||
Its name is `menu3`.
|
||||
|
||||
![menu3](menu3.png)
|
||||
![menu3](image/menu3.png)
|
||||
|
||||
The following is the ui file of the menu in `menu3`.
|
||||
|
||||
|
|
8
sec2.md
8
sec2.md
|
@ -48,7 +48,7 @@ Then compile and run it.
|
|||
|
||||
A window with a message "Hello." appears.
|
||||
|
||||
![Screenshot of the label](screenshot_lb1.png)
|
||||
![Screenshot of the label](image/screenshot_lb1.png)
|
||||
|
||||
There's only a little change between `pr4.c` and `lb1.c`.
|
||||
Diff is a good program to know the difference between two files.
|
||||
|
@ -144,7 +144,7 @@ So, if `btn` is clicked, the function `on_click` is invoked.
|
|||
Name the program `lb2.c` and save it.
|
||||
Now compile and run it.
|
||||
|
||||
![Screenshot of the label](screenshot_lb2.png)
|
||||
![Screenshot of the label](image/screenshot_lb2.png)
|
||||
|
||||
A window with the button appears.
|
||||
Click the button (it is a large button, you can click everywhere inside the window), then a string "Clicked." appears on the shell terminal.
|
||||
|
@ -225,7 +225,7 @@ The following procedure shows the way to add two buttons in a window.
|
|||
|
||||
After this, the Widgets are connected as following diagram.
|
||||
|
||||
![Parent-child relationship](box.png)
|
||||
![Parent-child relationship](image/box.png)
|
||||
|
||||
Now, code it.
|
||||
|
||||
|
@ -302,7 +302,7 @@ The next function fills a box with children, giving them equal space.
|
|||
After that, two buttons `btn1` and `btn2` are generated and the signal handlers are set.
|
||||
Then, these two buttons are appended to the box.
|
||||
|
||||
![Screenshot of the box](screenshot_lb4.png)
|
||||
![Screenshot of the box](image/screenshot_lb4.png)
|
||||
|
||||
The handler corresponds to `btn1` changes its label.
|
||||
The handler corresponds to `btn2` destroys the top-level window and the application quits.
|
||||
|
|
2
sec3.md
2
sec3.md
|
@ -69,7 +69,7 @@ In line 30, `tv` is set to `win` as a child.
|
|||
|
||||
Now compile and run it.
|
||||
|
||||
![GtkTextView](screenshot_tfv1.png)
|
||||
![GtkTextView](image/screenshot_tfv1.png)
|
||||
|
||||
There's an I-beam pointer in the window.
|
||||
You can add or delete any character on GtkTextview.
|
||||
|
|
4
sec4.md
4
sec4.md
|
@ -151,7 +151,7 @@ Then compile and run it.
|
|||
$ comp tfv3
|
||||
$ ./a.out tfv3.c
|
||||
|
||||
![File viewer](screenshot_tfv3.png)
|
||||
![File viewer](image/screenshot_tfv3.png)
|
||||
|
||||
Now I want to explain the program `tfv3.c`.
|
||||
First, the function `main` changes in only two lines.
|
||||
|
@ -198,7 +198,7 @@ If it fails, it outputs an error message and destroy the window.
|
|||
|
||||
GtkNotebook is a container widget that contains multiple children with tabs in it.
|
||||
|
||||
![GtkNotebook](screenshot_gtk_notebook.png)
|
||||
![GtkNotebook](image/screenshot_gtk_notebook.png)
|
||||
|
||||
Look at the screenshots above.
|
||||
The left one is a window at the startup.
|
||||
|
|
2
sec5.md
2
sec5.md
|
@ -40,7 +40,7 @@ What we are thinking about now is "child object".
|
|||
A child object includes its parent object.
|
||||
And a child widget object derives everything from the parent widget object.
|
||||
|
||||
![Child widget of GtkTwxtView](child.png)
|
||||
![Child widget of GtkTwxtView](image/child.png)
|
||||
|
||||
We will define TfeTextView as a child widget object of GtkTextView.
|
||||
It has everything that GtkTextView has.
|
||||
|
|
2
sec6.md
2
sec6.md
|
@ -10,7 +10,7 @@ It is better to make "New", "Open", "Save" and "Close" buttons.
|
|||
This section describes how to put those buttons into the window.
|
||||
Signals and handlers will be explained later.
|
||||
|
||||
![Screenshot of the file editor](screenshot_tfe2.png)
|
||||
![Screenshot of the file editor](image/screenshot_tfe2.png)
|
||||
|
||||
The screenshot above shows the layout.
|
||||
The function `on_open` in the source code `tfe2.c` is as follows.
|
||||
|
|
8
sec8.md
8
sec8.md
|
@ -92,7 +92,7 @@ This is very important.
|
|||
It guarantees a child widget to derive all the features from ancestors.
|
||||
The structure of `TfeTextView` is like the following diagram.
|
||||
|
||||
![The structure of the instance TfeTextView](TfeTextView.png)
|
||||
![The structure of the instance TfeTextView](image/TfeTextView.png)
|
||||
|
||||
|
||||
## Generate TfeTextView instance
|
||||
|
@ -349,7 +349,7 @@ Override is rewriting ancestors' class methods in the child class.)
|
|||
TfeTextViewClass includes its ancsestors' class in it.
|
||||
It is illustrated in the following diagram.
|
||||
|
||||
![The structure of TfeTextView Class](TfeTextViewClass.png)
|
||||
![The structure of TfeTextView Class](image/TfeTextViewClass.png)
|
||||
|
||||
## Destruction of TfeTextView
|
||||
|
||||
|
@ -365,7 +365,7 @@ At this moment, no object refers C and the reference count of C is zero.
|
|||
This means C is no longer useful.
|
||||
Then C destructs itself and finally the memories allocated to C is freed.
|
||||
|
||||
![Reference count of B](refcount.png)
|
||||
![Reference count of B](image/refcount.png)
|
||||
|
||||
The idea above is based on an assumption that an object refered by nothing has reference count of zero.
|
||||
When the reference count drops to zero, the object starts its destruction process.
|
||||
|
@ -409,7 +409,7 @@ Look at the following diagram.
|
|||
There are four classes -- GObjectClass (GInitiallyUnownedClass), GtkWidgetClass, GtkTextViewClass and TfeTextViewClass.
|
||||
Each class has its own dispose handler -- `dh1`, `dh2`, `dh3` and `tfe_text_view_dispose`.
|
||||
|
||||
![dispose handers](dispose_handler.png)
|
||||
![dispose handers](image/dispose_handler.png)
|
||||
|
||||
Now, look at the `tfe_text_view_dispose` program above.
|
||||
It first releases the reference to GFile object pointed by `tv->file`.
|
||||
|
|
|
@ -162,7 +162,7 @@ And GtkWidget is a base object from which all the GUI objects derive.
|
|||
|
||||
GtkWindow includes GtkWidget at the top of its object.
|
||||
|
||||
![GtkWindow and GtkWidget](window_widget.png)
|
||||
![GtkWindow and GtkWidget](../image/window_widget.png)
|
||||
|
||||
The function `gtk_window_new` is defined as follows.
|
||||
|
||||
|
@ -213,7 +213,7 @@ Save the program as `pr3.c` and compile and run it.
|
|||
|
||||
A small window appears.
|
||||
|
||||
![Screenshot of the window](screenshot_pr3.png)
|
||||
![Screenshot of the window](../image/screenshot_pr3.png)
|
||||
|
||||
Click on the close button then the window disappears and the program finishes.
|
||||
|
||||
|
@ -234,5 +234,5 @@ So you don't need to call `gtk_window_set_application` any more.
|
|||
The program sets the title and the default size of the window.
|
||||
Compile it and run `a.out`, then you will see a bigger window with its title "pr4".
|
||||
|
||||
![Screenshot of the window](screenshot_pr4.png)
|
||||
![Screenshot of the window](../image/screenshot_pr4.png)
|
||||
|
||||
|
|
|
@ -106,7 +106,7 @@ The buttons are Cancel and Save.
|
|||
- 1-15: `saveas_dialog_response` signal handler.
|
||||
- 5-13: If the response is `GTK_RESPONSE_ACCEPT`, which is set to the argument when the user has clicked on Save button, then gets a pointer to the GFile object, set it to `tv->file`, assign TRUE to `tv->changed`, emits "change-file" signal then call `tfe_text_view_save` to save the buffer to the file.
|
||||
|
||||
![Saveas process](saveas.png)
|
||||
![Saveas process](../image/saveas.png)
|
||||
|
||||
When you use GtkFileChooserDialog, you need to divide the program into two parts.
|
||||
They are a function which generates GtkFileChooserDialog and the signal handler.
|
||||
|
@ -153,7 +153,7 @@ In Gtk3, `gtk_dialog_run` function is available.
|
|||
It simplifies the process.
|
||||
However, in Gtk4, `gtk_dialog_run`is unavailable any more.
|
||||
|
||||
![Caller and TfeTextView](open.png)
|
||||
![Caller and TfeTextView](../image/open.png)
|
||||
|
||||
1. A caller get a pointer `tv` to TfeTextView by calling `tfe_text_view_new`.
|
||||
2. The caller connects the handler (left bottom in the diagram) and the signal "open-response".
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
Users often use menus to tell the command to the computer.
|
||||
It is like this:
|
||||
|
||||
![Menu](menu.png)
|
||||
![Menu](../image/menu.png)
|
||||
|
||||
Now let's analyze the menu above.
|
||||
There are two types of object.
|
||||
|
@ -18,7 +18,7 @@ They are called "menu".
|
|||
Menu is an ordered list of items.
|
||||
They are similar to arrays.
|
||||
|
||||
![Menu structure](menu_structure.png)
|
||||
![Menu structure](../image/menu_structure.png)
|
||||
|
||||
- Menubar is a menu which has three items, which are "File", "Edit" and "View".
|
||||
- The menu item labeled "Edit" has a link to the submenu which has two items.
|
||||
|
@ -162,7 +162,7 @@ The structure of the menu is shown in the diagram below.
|
|||
- 30: Set GtkApplicationWindow to show the menubar.
|
||||
- 31: Show the window.
|
||||
|
||||
![menu and action](menu1.png)
|
||||
![menu and action](../image/menu1.png)
|
||||
|
||||
![Screenshot of menu1](menu1_screenshot.png)
|
||||
![Screenshot of menu1](../image/menu1_screenshot.png)
|
||||
|
||||
|
|
|
@ -196,7 +196,7 @@ It is the string "s" given at the generation time.
|
|||
The following code includes stateful actions above.
|
||||
This program has menus like this:
|
||||
|
||||
![menu2](menu2.png)
|
||||
![menu2](../image/menu2.png)
|
||||
|
||||
- Fullscreen menu toggles the size of the window between maximum and non-maximum.
|
||||
If the window is maximum size, which is called full screen, then a check mark is put before "fullscreen" label.
|
||||
|
|
|
@ -57,7 +57,7 @@ So, we usually prefer the former ui file style.
|
|||
The following is a screenshot of the sample program in this section.
|
||||
Its name is `menu3`.
|
||||
|
||||
![menu3](menu3.png)
|
||||
![menu3](../image/menu3.png)
|
||||
|
||||
The following is the ui file of the menu in `menu3`.
|
||||
|
||||
|
|
|
@ -19,7 +19,7 @@ Then compile and run it.
|
|||
|
||||
A window with a message "Hello." appears.
|
||||
|
||||
![Screenshot of the label](screenshot_lb1.png)
|
||||
![Screenshot of the label](../image/screenshot_lb1.png)
|
||||
|
||||
There's only a little change between `pr4.c` and `lb1.c`.
|
||||
Diff is a good program to know the difference between two files.
|
||||
|
@ -68,7 +68,7 @@ So, if `btn` is clicked, the function `on_click` is invoked.
|
|||
Name the program `lb2.c` and save it.
|
||||
Now compile and run it.
|
||||
|
||||
![Screenshot of the label](screenshot_lb2.png)
|
||||
![Screenshot of the label](../image/screenshot_lb2.png)
|
||||
|
||||
A window with the button appears.
|
||||
Click the button (it is a large button, you can click everywhere inside the window), then a string "Clicked." appears on the shell terminal.
|
||||
|
@ -114,7 +114,7 @@ The following procedure shows the way to add two buttons in a window.
|
|||
|
||||
After this, the Widgets are connected as following diagram.
|
||||
|
||||
![Parent-child relationship](box.png)
|
||||
![Parent-child relationship](../image/box.png)
|
||||
|
||||
Now, code it.
|
||||
|
||||
|
@ -134,7 +134,7 @@ The next function fills a box with children, giving them equal space.
|
|||
After that, two buttons `btn1` and `btn2` are generated and the signal handlers are set.
|
||||
Then, these two buttons are appended to the box.
|
||||
|
||||
![Screenshot of the box](screenshot_lb4.png)
|
||||
![Screenshot of the box](../image/screenshot_lb4.png)
|
||||
|
||||
The handler corresponds to `btn1` changes its label.
|
||||
The handler corresponds to `btn2` destroys the top-level window and the application quits.
|
||||
|
|
|
@ -23,7 +23,7 @@ In line 30, `tv` is set to `win` as a child.
|
|||
|
||||
Now compile and run it.
|
||||
|
||||
![GtkTextView](screenshot_tfv1.png)
|
||||
![GtkTextView](../image/screenshot_tfv1.png)
|
||||
|
||||
There's an I-beam pointer in the window.
|
||||
You can add or delete any character on GtkTextview.
|
||||
|
|
|
@ -95,7 +95,7 @@ Then compile and run it.
|
|||
$ comp tfv3
|
||||
$ ./a.out tfv3.c
|
||||
|
||||
![File viewer](screenshot_tfv3.png)
|
||||
![File viewer](../image/screenshot_tfv3.png)
|
||||
|
||||
Now I want to explain the program `tfv3.c`.
|
||||
First, the function `main` changes in only two lines.
|
||||
|
@ -142,7 +142,7 @@ If it fails, it outputs an error message and destroy the window.
|
|||
|
||||
GtkNotebook is a container widget that contains multiple children with tabs in it.
|
||||
|
||||
![GtkNotebook](screenshot_gtk_notebook.png)
|
||||
![GtkNotebook](../image/screenshot_gtk_notebook.png)
|
||||
|
||||
Look at the screenshots above.
|
||||
The left one is a window at the startup.
|
||||
|
|
|
@ -39,7 +39,7 @@ What we are thinking about now is "child object".
|
|||
A child object includes its parent object.
|
||||
And a child widget object derives everything from the parent widget object.
|
||||
|
||||
![Child widget of GtkTwxtView](child.png)
|
||||
![Child widget of GtkTwxtView](../image/child.png)
|
||||
|
||||
We will define TfeTextView as a child widget object of GtkTextView.
|
||||
It has everything that GtkTextView has.
|
||||
|
|
|
@ -9,7 +9,7 @@ It is better to make "New", "Open", "Save" and "Close" buttons.
|
|||
This section describes how to put those buttons into the window.
|
||||
Signals and handlers will be explained later.
|
||||
|
||||
![Screenshot of the file editor](screenshot_tfe2.png)
|
||||
![Screenshot of the file editor](../image/screenshot_tfe2.png)
|
||||
|
||||
The screenshot above shows the layout.
|
||||
The function `on_open` in the source code `tfe2.c` is as follows.
|
||||
|
|
|
@ -91,7 +91,7 @@ This is very important.
|
|||
It guarantees a child widget to derive all the features from ancestors.
|
||||
The structure of `TfeTextView` is like the following diagram.
|
||||
|
||||
![The structure of the instance TfeTextView](TfeTextView.png)
|
||||
![The structure of the instance TfeTextView](../image/TfeTextView.png)
|
||||
|
||||
|
||||
## Generate TfeTextView instance
|
||||
|
@ -189,7 +189,7 @@ Override is rewriting ancestors' class methods in the child class.)
|
|||
TfeTextViewClass includes its ancsestors' class in it.
|
||||
It is illustrated in the following diagram.
|
||||
|
||||
![The structure of TfeTextView Class](TfeTextViewClass.png)
|
||||
![The structure of TfeTextView Class](../image/TfeTextViewClass.png)
|
||||
|
||||
## Destruction of TfeTextView
|
||||
|
||||
|
@ -205,7 +205,7 @@ At this moment, no object refers C and the reference count of C is zero.
|
|||
This means C is no longer useful.
|
||||
Then C destructs itself and finally the memories allocated to C is freed.
|
||||
|
||||
![Reference count of B](refcount.png)
|
||||
![Reference count of B](../image/refcount.png)
|
||||
|
||||
The idea above is based on an assumption that an object refered by nothing has reference count of zero.
|
||||
When the reference count drops to zero, the object starts its destruction process.
|
||||
|
@ -241,7 +241,7 @@ Look at the following diagram.
|
|||
There are four classes -- GObjectClass (GInitiallyUnownedClass), GtkWidgetClass, GtkTextViewClass and TfeTextViewClass.
|
||||
Each class has its own dispose handler -- `dh1`, `dh2`, `dh3` and `tfe_text_view_dispose`.
|
||||
|
||||
![dispose handers](dispose_handler.png)
|
||||
![dispose handers](../image/dispose_handler.png)
|
||||
|
||||
Now, look at the `tfe_text_view_dispose` program above.
|
||||
It first releases the reference to GFile object pointed by `tv->file`.
|
||||
|
|
Loading…
Reference in a new issue