This commit is contained in:
shulkk 2022-06-21 19:56:15 -05:00
parent 94f1dd98f8
commit e0386d5b21
4 changed files with 209 additions and 20 deletions

81
docs/index.md Normal file
View file

@ -0,0 +1,81 @@
# Gtk4 Tutorial for beginners
#### Contents of this Repository
This tutorial illustrates how to write C programs with the Gtk4 library.
It focuses on beginners so the contents are limited to the basics.
The table of contents is at the end of this abstract.
- Section 3 to 21 describes the basics, with the example of a simple editor `tfe` (Text File Editor).
- Section 22 to 25 describes GtkDrawingArea.
- Section 26 to 29 describes the list model and the list view (GtkListView, GtkGridView and GtkColumnView).
It also describes GtkExpression.
The latest version of the tutorial is located at [Gtk4-tutorial github repository](https://github.com/ToshioCP/Gtk4-tutorial).
You can read it from there directly without having to download anything.
#### Gtk4 Documentation
Please refer to [Gtk API Reference](https://docs.gtk.org/gtk4/index.html)
and [Gnome Developer Documentation Website](https://developer.gnome.org/) for further information.
These websites are newly opened lately (Aug/2021).
The old documentation is located at [Gtk Reference Manual](https://developer-old.gnome.org/gtk4/stable/) and [Gnome Developer Center](https://developer-old.gnome.org/).
The new website is in progress at present, so you might need to refer to the old version.
If you want to know about GObject and the type system, please refer to [GObject tutorial](https://github.com/ToshioCP/Gobject-tutorial).
The GObject details are easy to understand and also necessary to know when writing Gtk4 programs.
#### Contribution
This tutorial is under development and unstable.
Even though the codes of the examples have been tested on Gtk4 version 4.0, bugs may still exist.
If you find any bugs, errors or mistakes in the tutorial and C examples, please let me know.
You can post it to [github issues](https://github.com/ToshioCP/Gtk4-tutorial/issues).
You can also post corrected files as a commit to [pull request](https://github.com/ToshioCP/Gtk4-tutorial/pulls).
When you make corrections, correct the source files, which are under the 'src' directory,
then run `rake` to create to create the output file. The GFM files under the 'gfm' directory are automatically updated.
If you have a question, feel free to post it as an issue.
All questions are helpful and will make this tutorial get better.
#### How to get a HTML or PDF version
If you want to get a HTML or PDF version, you can make them with `rake`, which is a ruby version of make.
Type `rake html` for HTML.
Type `rake pdf` for PDF.
There is a documentation \("[How to build Gtk4 Tutorial](Readme_for_developers.html)"\) that describes how to make them.
## Table of contents
1. [Prerequisite and License](sec1.html)
1. [Installing Gtk4 into Linux distributions](sec2.html)
1. [GtkApplication and GtkApplicationWindow](sec3.html)
1. [Widgets (1)](sec4.html)
1. [Widgets (2)](sec5.html)
1. [String and memory management](sec6.html)
1. [Widgets (3)](sec7.html)
1. [Defining a Child object](sec8.html)
1. [The User Interface (UI) file and GtkBuilder](sec9.html)
1. [Build system](sec10.html)
1. [Initialization and destruction of instances](sec11.html)
1. [Signals](sec12.html)
1. [Functions in TfeTextView](sec13.html)
1. [Functions in GtkNotebook](sec14.html)
1. [tfeapplication.c](sec15.html)
1. [tfe5 source files](sec16.html)
1. [Menu and action](sec17.html)
1. [Stateful action](sec18.html)
1. [Ui file for menu and action entries](sec19.html)
1. [GtkMenuButton, accelerators, font, pango and gsettings](sec20.html)
1. [Template XML and composite widget](sec21.html)
1. [GtkDrawingArea and Cairo](sec22.html)
1. [Periodic Events](sec23.html)
1. [Combine GtkDrawingArea and TfeTextView](sec24.html)
1. [Tiny turtle graphics interpreter](sec25.html)
1. [GtkListView](sec26.html)
1. [GtkGridView and activate signal](sec27.html)
1. [GtkExpression](sec28.html)
1. [GtkColumnView](sec29.html)
This website uses [Bootstrap](https://getbootstrap.jp/).

109
docs/template.html Normal file
View file

@ -0,0 +1,109 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>$title$</title>
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
span.underline{text-decoration: underline;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
pre{overflow: visible;}
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
{ counter-reset: source-line 0; }
pre.numberSource code > span
{ position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::after
{ content: counter(source-line);
position: relative; left: -1em; text-align: right; vertical-align: baseline;
border: none; display: inline-block;
-webkit-touch-callout: none; -webkit-user-select: none;
-khtml-user-select: none; -moz-user-select: none;
-ms-user-select: none; user-select: none;
padding: 0 4px; width: 4em;
color: #aaaaaa;
}
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; }
div.sourceCode
{ }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
div.sourceCode { margin: 10px; padding: 16px 10px 8px 10px; border: 2px solid silver; background-color: ghostwhite; overflow-x:scroll}
pre:not(.sourceCode) { margin: 10px; padding: 16px 10px 8px 10px; border: 2px solid silver; background-color: ghostwhite; overflow-x:scroll}
table {margin-left: auto; margin-right: auto; border-collapse: collapse; border: 1px solid;}
th {padding: 2px 6px; border: 1px solid; background-color: ghostwhite;}
td {padding: 2px 6px; border: 1px solid;}
img {display: block; margin-left: auto; margin-right: auto;}
figcaption {text-align: center;}
</style>
</head>
<body style="padding-top: 70px;">
<div class="container">
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<span class="navbar-brand">Gtk4 tutorial</span>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
</ul>
</div>
</div>
</nav>
$body$
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

View file

@ -683,16 +683,16 @@ It is a good practice for you to add more features.
~~~
$ LANG=C wc tfe5/meson.build tfe5/tfeapplication.c tfe5/tfe.gresource.xml tfe5/tfe.h tfe5/tfenotebook.c tfe5/tfenotebook.h tfetextview/tfetextview.c tfetextview/tfetextview.h tfe5/tfe.ui
10 17 294 tfe5/meson.build
99 304 3205 tfe5/tfeapplication.c
6 9 153 tfe5/tfe.gresource.xml
4 6 87 tfe5/tfe.h
140 378 3601 tfe5/tfenotebook.c
15 21 241 tfe5/tfenotebook.h
229 671 8017 tfetextview/tfetextview.c
35 60 701 tfetextview/tfetextview.h
61 100 2073 tfe5/tfe.ui
599 1566 18372 total
10 17 294 tfe5/meson.build
99 304 3205 tfe5/tfeapplication.c
6 9 153 tfe5/tfe.gresource.xml
4 6 87 tfe5/tfe.h
140 378 3601 tfe5/tfenotebook.c
15 21 241 tfe5/tfenotebook.h
229 671 8017 tfetextview/tfetextview.c
35 60 701 tfetextview/tfetextview.h
61 100 2073 tfe5/tfe.ui
599 1566 18372 total
~~~

View file

@ -31,15 +31,14 @@ Fedora, Arch, Debian and OpenSUSE are also possible.
See [Installing GTK from packages](https://www.gtk.org/docs/installations/linux#installing-gtk-from-packages).
The following table shows the distributions which support Gtk4.
|Distribution| version |Gtk4 | Gnome40 |
|:----------:|:-------------------------:|:---:|:-------------:|
| Fedora | 36 |4.4.2| Gnome42 |
| Ubuntu | 22.04 (lts) | 4.4 | Gnome41(4.6.2)|
| Debian | bookworm(testing) |4.6.5| Gnome42 |
| Debian | sid(rolling release) |4.6.5| Gnome42 |
| Arch | rolling release |4.6.5| Gnome42 |
| Gentoo | rolling release |4.6.5| Gnome42 |
| OpenSUSE |Tumbleweed(rolling release)|4.6.5| Gnome42 |
|Distribution| version |Gtk4 | Gnome40 |
|:----------:|:-------------------------:|:---:|:------------:|
| Fedora | 36 |4.4.2| Gnome42 |
| Ubuntu | 22.04lts | 4.4 |Gnome41(4.6.2)|
| Debian | bookworm(testing) |4.6.5| Gnome42 |
| Arch | rolling release |4.6.5| Gnome42 |
| Gentoo | rolling release |4.6.5| Gnome42 |
| OpenSUSE |Tumbleweed(rolling release)|4.6.5| Gnome42 |
If you've installed Gtk4 from the packages, you don't need to read the rest of this section.
@ -254,7 +253,7 @@ See [Gnome 40 website](https://forty.gnome.org/) first.
*However, Gnome40 is not necessary to compile and run Gtk4 applications.*
There are six choices at present.
There are seven choices at present.
- Gnome OS
- Arch Linux