A gtk4 tutorial for beginners

Overview

Gtk4 Tutorial for beginners

This tutorial illustrates how to write C programs with Gtk4 library. It focuses on beginners so the contents are limited to basic things such as widgets, GObject, signal, menus and build system. Please refer Gnome API reference for further topics.

This tutorial is under development and unstable. Even though the examples written in C language have been tested on gtk4 version 4.0, there might exist bugs. 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. The latest version of the tutorial is located at Gtk4-tutorial githup repository. You can read it without download.

  1. Prerequisite and License
  2. Installation of gtk4 to linux distributions
  3. GtkApplication and GtkApplicationWindow
  4. Widgets (1)
  5. Widgets (2)
  6. Widgets (3)
  7. Define Child object
  8. Ui file and GtkBuilder
  9. Build system
  10. Instance and class
  11. Signals
  12. Functions in TfeTextView
  13. Functions in GtkNotebook
  14. tfeapplication.c
  15. tfe5 source files
  16. Menu and action
  17. Stateful action
  18. Ui file for menu and action entries
  19. GtkMenuButton, accelerators, font, pango and gsettings
  20. Template XML
  21. GtkDrawingArea and Cairo
  22. Combine GtkDrawingArea and TfeTextView
Comments
  • Issue in the Glib Installation Section

    Issue in the Glib Installation Section

    I am working through your tutorial, and it's been a big help with getting started. I did encounter an issue at the very beginning, and including a note about how to resolve this may help other beginners who encounter this issue. In the Glib Installation section, when I ran meson --prefix $HOME/local _build I got the error meson.build:1:0: ERROR: Compiler cc can not compile programs. I was able to resolve it with sudo apt install gcc-multilib The solution was not obvious from the meson-log.txt

    In case its relevant, I'm on Linux Mint 20, which is based on Ubuntu 20.04.

    Edit: For anyone looking for a solution to this problem in the future, I would guess apt-get install libc-dev is what is most likely to fix your issues

    opened by lilithi 5
  • gresource problem chapter 9

    gresource problem chapter 9

    In the end of section 9 you are creating a resources.c file with gresource but in tfe3_r.c, you are not using it.

    Then a C source file resources.c is generated. Modify tfe3.c and save it as tfe3_r.c.

    > #include "resources.c"
    > ... ... ...
    > ... ... ...
    > build = gtk_builder_new_from_resource ("/com/github/ToshioCP/tfe3/tfe3.ui");
    > ... ... ...
    > ... ... ...
    

    Then, compile and run it. The window appears and it is the same as the screenshot at the beginning of this page.

    U still pointing previously created ui file. What is the point here? And after getting resource.c and compiling it with tfe3_r.c, im getting

    /home/dnf/codeblockprojs/tfe3/resources.c|147|multiple definition of `tfe3_get_resource'; obj/Debug/resources.o:/home/dnf/codeblockprojs/tfe3/resources.c:147: first defined here|

    The code is in resources.c:

    .
    .
    static GStaticResource static_resource = { tfe3_resource_data.data, sizeof (tfe3_resource_data.data) - 1 /* nul terminator */, NULL, NULL, NULL };
    
    G_MODULE_EXPORT
    GResource *tfe3_get_resource (void);
    GResource *tfe3_get_resource (void)
    {
      return g_static_resource_get_resource (&static_resource);
    }
    /* GLIB - Library of useful routines for C programming
     * Copyright (C) 1995-1997  Peter Mattis, Spencer Kimball and Josh MacDonald
     *
    .
    .
    

    if i comment out second definition, programs builds and run but i didnt understand what is the problem here.

    opened by feinap 4
  • Found a small typo in section 3.

    Found a small typo in section 3.

    Found a small typo in section 3 :GtkApplicationWindow.

    Extra space in the third line: Now rewrite the program and use GtkAppliction Window.

    ""GtkAppliction Window"" --> ""GtkApplictionWindow""

    By the way, your tutorial is really great! It helped me a lot. Thank yoooooooou!

    opened by imxtx 4
  • A deep GObject tutorial

    A deep GObject tutorial

    Hello! This is not a issue, but a request (very politely).

    First of all thank you very much for your tutorial and code examples, it is helping me a lot in process.

    I would like to ask you for a more complete tutorial section regarding GObject, can you do it?

    Thank you, and keep your amazing work.

    opened by igormorgado 4
  • Created a new tutorial for creating an animated GtkDrawingArea

    Created a new tutorial for creating an animated GtkDrawingArea

    Comments welcome - added as Section 29, ('sec29.src.md') but could probably be slotted in somewhere else.

    This was the result of some other experimentation that I was doing, and could probably do with some code review. I was looking for a simple example of an animated image.

    I don't know what additional optimizations are available for GTK4 code.. like only erasing and redrawing the clock hands.. (would that be a thing?)

    Depending on where it fits in the other sections, it could be changed to use a Makefile.

    Regards, Paul

    opened by PaulSchulz 3
  • `! LaTeX Error: Something's wrong--perhaps a missing \item.` on `rake pdf`

    `! LaTeX Error: Something's wrong--perhaps a missing \item.` on `rake pdf`

    Hi, thanks for the tutorial! I ran rake pdf on HEAD (fbbaa8c) but got this error:

    > rake cleanlatex pdf
    [...]
    (/usr/share/texmf-dist/tex/latex/microtype/mt-msb.cfg) (./abstract.tex
    
    ! LaTeX Error: Something's wrong--perhaps a missing \item.
    
    See the LaTeX manual or LaTeX Companion for explanation.
    Type  H <return>  for immediate help.
     ...
    
    l.12   S
          ection 3 to 21 describes basics and the example is a simple editor
    ?
    

    Generated latex/abstract.tex:

    \hypertarget{about-this-tutorial}{%
    \paragraph{About this tutorial}\label{about-this-tutorial}}
    
    This tutorial is aimed at beginners who are learning Gobject system. One
    [...]
    

    Environments:

    • LuaHBTeX, Version 1.13.2 (TeX Live 2021/Arch Linux)
    • LaTeX2e <2021-11-15> patch level 1
    • L3 programming layer <2021-11-22>
    • pandoc 2.14.1 Compiled with pandoc-types 1.22, texmath 0.12.3.1, skylighting 0.11, citeproc 0.4.1, ipynb 0.1.0.1

    It seems that abstract environments can't contain \paragraphs:

    > cat foo.tex
    \documentclass{article}
    \begin{document}
    \begin{abstract}
    \paragraph{About this tutorial}This tutorial aimed...
    \end{abstract}
    \end{document}
    
    > lualatex foo.tex
    [...]
    (./foo.tex
    [...]
    ! LaTeX Error: Something's wrong--perhaps a missing \item.
    

    and here are related discussions and workarounds:

    • https://tex.stackexchange.com/questions/74371/subdividing-structured-abstracts/74374#74374
    • https://github.com/latex3/latex2e/issues/248
    • https://www.nlm.nih.gov/bsd/policy/structured_abstracts.html
    opened by nmtake 3
  • GtkDirectoryList Error building template

    GtkDirectoryList Error building template

    There are Gtk-CRITICAL when run list3.c example.

    sh-5.1$ ./a.out 
    
    (a.out:33843): Gtk-CRITICAL **: 03:22:40.840: Error building template for list item: .:0:0: No function named `get_file_name`.
    
    (a.out:33843): Gtk-CRITICAL **: 03:22:40.840: Error building template for list item: .:0:0: No function named `get_file_name`.
    
    (a.out:33843): Gtk-CRITICAL **: 03:22:40.840: Error building template for list item: .:0:0: No function named `get_file_name`.
    

    Compiled with gcc `pkg-config --cflags gtk4` c.c `pkg-config --libs gtk4`

    GTK version: 4.2.1-1 Linux: Arch

    opened by gavr123456789 3
  • In Sec. 27 having FactoryList and FactoryGrid in separate .ui files instead of having it as GBytes in main ui file causes error

    In Sec. 27 having FactoryList and FactoryGrid in separate .ui files instead of having it as GBytes in main ui file causes error

    Probably something needs to be added for it to work as a seperate .ui file. It would be nice if this where to be fixed, as it is suggested at the end of the section as well as during the beginning.

    error message: Template declaration (class 'GtkListItem', parent 'GtkWidget') where templates aren't supported

    opened by MightyPrince1 2
  • Question about the struct pointer.

    Question about the struct pointer.

    What's the meaning of this line?

    https://github.com/ToshioCP/Gtk4-tutorial/blob/ee6a19fe3ae212beeb458c2a17f9cc0f3b9ef39e/gfm/sec6.md?plain=1#L162

    In my C learning, struct is define with {}. Maybe I'm too poor to understand it.

    祝好/Best Wishes

    opened by qaqland 2
  • The error was 'GLXBadFBConfig'.

    The error was 'GLXBadFBConfig'.

    I need to fix this,help is needed. Error:----- (a.out:8740): Gtk-WARNING **: 11:21:38.293: Unknown key gtk-button-images in /home/user/.config/gtk-4.0/settings.ini

    (a.out:8740): Gtk-WARNING **: 11:21:38.297: Unknown key gtk-menu-images in /home/user/.config/gtk-4.0/settings.ini

    (a.out:8740): Gtk-WARNING **: 11:21:38.297: Unknown key gtk-toolbar-style in /home/user/.config/gtk-4.0/settings.ini

    (a.out:8740): Gdk-WARNING **: 11:21:38.446: The program 'a.out' received an X Window System error. This probably reflects a bug in the program. The error was 'GLXBadFBConfig'. (Details: serial 229 error_code 167 request_code 152 (GLX) minor_code 0) (Note to programmers: normally, X errors are reported asynchronously; that is, you will receive the error a while after causing it. To debug your program, run it with the GDK_SYNCHRONIZE environment variable to change this behavior. You can then get a meaningful backtrace from your debugger if you break on the gdk_x_error() function.)

    opened by serdio-nerd 2
  • GTK4 library installation

    GTK4 library installation

    Hi,

    I'm learning how to use gtk4 and found your repo 🙂.

    I think giving some hints on how to download and compile the sources for toying might be useful (at least for Debian based distros).

    Here are my personal notes, taken while installing gtk4:

    # Official Sources
    # https://download.gnome.org/sources/gtk/4.0/ → 4.0.2 at this time of writing
    cd /tmp
    curl curl -L https://download.gnome.org/sources/gtk/4.0/gtk-4.0.2.tar.xz -o gtk-4.0.2.tar.xz
    tar xf gtk-4.0.2.tar.xz
    cd gtk-4.0.2
     
    # Dependencies
    sudo apt install meson ninja-build libxml2-utils libgraphene-1.0-dev xsltproc
     
    # Building
    meson setup -Dbuildtype=release --prefix=/tmp/gtk-lib _build .
    cd _build
    ninja
    ninja install # Will install to the dir specified by --prefix above
     
    # Usage
    export PKG_CONFIG_PATH=/tmp/gtk-lib/lib/x86_64-linux-gnu/pkgconfig/
    gcc $(pkg-config --cflags gtk4) -o example-1 example-1.c $(pkg-config --libs gtk4)
     
    # When testing the compiled program (assuming lib isn't in library path)
    export LD_LIBRARY_PATH=/tmp/gtk-lib/lib/x86_64-linux-gnu/
    ./example-1
    

    Hope this helps!

    Edit: Nevermind, I didn't read far enough! :see_no_evil: Section 2 details the needed instructions to install gtk4. May I then simply suggest to add -Dbuildtype=release to the meson command? Otherwise it will build a debug version of the lib. 🙂

    opened by dvergeylen 2
  • https://github.com/ToshioCP/Gtk4-tutorial/blob/main/gfm/sec15.md - can you add the command to compile it from the commandline?

    https://github.com/ToshioCP/Gtk4-tutorial/blob/main/gfm/sec15.md - can you add the command to compile it from the commandline?

    https://github.com/ToshioCP/Gtk4-tutorial/blob/main/gfm/sec15.md - can you add the command to compile it from the commandline?

    I think it would be useful to be able to quickly copy/paste the command. One can assemble it from the www but I think having it in the .md file on the end of that file would be very convenient. Thank you for reading!

    opened by rubyFeedback 1
  • GtkListView with editable text examples for our books

    GtkListView with editable text examples for our books

    Dear Mr. Toshio,

    some weeks ago I created my first GtkColumnView example. I will use that for my SDT tool, and additional use it for a section of my GTK4 book. But I think before introducing ColumnView in my book, I should introduce GtkListView. The whole GtkListView and GtkColumnView stuff is unfortunately not that easy, and the official introductions are not that great and incomplete. I think your GtkListView introduction is currently the best what we have -- as it provides complete examples with and without the use of XML UI files.

    One related question: For my own GtkColumnView Nim code, I needed editable text. One way to get editable text is to use the GtkText widget, connect the activate signal to the GtkText widgets, and use ID numbers assigned in the "bind" callback to store the edited text where we need it. I think for a GtkListView editable entries are rarely needed, but still I wonder how we could change your examples (preferable the fist one, without use of UI files) to use editable text and to save the edits in the model. Is there some property binding available, or would you have to use the activate signal of the GtkEntry widget to store the edited strings somehow?

    I can currently not remember if your GtkListView example allows adding new rows dynamically, and to delete rows. I think your example does not support that currently, but it would be really useful. Reordering rows by drag and drop would be nice as well, but not that important. I have never used drag and drop myself in Nim before, but maybe it is time to learn it. I found a Python example recently (https://discourse.gnome.org/t/reorder-rows-in-a-list-gtk4/8422/4), so it seems to work.

    Unfortunately I will have not much free time in the next months to work on my GTK4 or Nim book, or on the SDT tool. But I will try to continue next year. This summer I unfortunately spent my full holiday on my old tiny chess engine. Maybe wasted time, but the old code which I created seven years ago was just too ugly, and I feel better with the new version :-) And from time to time it is just fun to play some chess against the computer, even when the current GTK GUI is very restricted.

    Best regards,

    Stefan Salewski

    opened by StefanSalewski 1
  • I can help translate this great tutorial into Chinese

    I can help translate this great tutorial into Chinese

    Hi, Toshio. This tutorial is great, thus I want to help you translate it into Chinese. But I'm not familiar with ruby and front-end things. If you want to do this, too, you may need to

    1. Reorganize the src directory to better support multi-languages.
    2. Add a language select button to the navigation bar.

    I will be happy to translate this tutorial if you modify related files to support translation.

    opened by imxtx 4
  • Chaining up of objects in GTK need explaining with examples

    Chaining up of objects in GTK need explaining with examples

    !) how a widget is created and chained up to the parent requires explanation as GTK4 does not handle command line arguments and is required to know the steps to write correct code in GTK.

    opened by gitsop01 3
Owner
ToshioCP
ToshioCP
This repository is a summary of the basic knowledge of recruiting job seekers and beginners in the direction of C/C++ technology, including language, program library, data structure, algorithm, system, network, link loading library, interview experience, recruitment, recommendation, etc.

?? C/C++ 技术面试基础知识总结,包括语言、程序库、数据结构、算法、系统、网络、链接装载库等知识及面试经验、招聘、内推等信息。This repository is a summary of the basic knowledge of recruiting job seekers and beginners in the direction of C/C++ technology, including language, program library, data structure, algorithm, system, network, link loading library, interview experience, recruitment, recommendation, etc.

huihut 26k Sep 29, 2022
IoT for Beginners - 12 Weeks, 24 Lessons, IoT for All!

Azure Cloud Advocates at Microsoft are pleased to offer a 12-week, 24-lesson curriculum all about IoT basics. Each lesson includes pre- and post-lesson quizzes, written instructions to complete the lesson, a solution, an assignment and more. Our project-based pedagogy allows you to learn while building, a proven way for new skills to 'stick'.

Microsoft 11.1k Sep 27, 2022
cpp fundamentals and questions for beginners and intermediates

DSA 60 days Hi people! So we have started grasping dsa concepts and solving problems from 12 July. And we shall continue till September 10 Starting fr

Sushree Satarupa 207 Sep 28, 2022
Small beginners C program examples.

Small beginner C programs.

null 23 Feb 18, 2022
C - A repository containing C code samples and concepts for beginners.

C - A repository containing C code samples and concepts for beginners. A repository containing C concepts I made when I was bored. You can also use th

doxxable3 1 Nov 1, 2021
Roadmap for learning the C++ programming language for beginners and experienced devs.

Roadmap for learning the C++ programming language for beginners and experienced devs. // Дорожная карта по изучению языка программирования C++ для начинающих и практикующих.

Evgeny 1.5k Sep 29, 2022
A project uses for beginners, who wants to learn basic Cpp.

Learning Basic Cpp The basic project for who wants to learn Cpp. Notes: All the files are coded using Microsoft Visual Studio 2019. If you want to cod

null 1 Jan 28, 2022
📚 Modern C++ Tutorial: C++11/14/17/20 On the Fly

The book claims to be "On the Fly". Its intent is to provide a comprehensive introduction to the relevant features regarding modern C++ (before 2020s). Readers can choose interesting content according to the following table of content to learn and quickly familiarize the new features you would like to learn. Readers should be aware that not all of these features are required. Instead, it should be learned when you really need it.

Changkun Ou 18.8k Oct 2, 2022
Nvidia contributed CUDA tutorial for Numba

This is an adapted version of one delivered internally at NVIDIA - its primary audience is those who are familiar with CUDA C/C++ programming, but perhaps less so with Python and its ecosystem.

Numba 165 Sep 20, 2022
Unicorn CPU emulator framework tutorial

使用unicorn-engine开发模拟器 什么是unicorn引擎 Unicorn是基于qemu开发的一个CPU模拟器,支持常见的各种指令集,能在各种系统上运行。 GITHUB项目地址:https://github.com/unicorn-engine/unicorn 官网地址:https://w

null 9 Mar 9, 2022
A Simple 32-bit OS lab tutorial.

一个支点撬动操作系统大山 项目名称:逸仙OS简明教程 ( YatSenOS Volume First ) 所属机构:中山大学操作系统实验课程组 写在前面 本项目已经成功用于2021年中山大学春季操作系统实验课程,课程的地址是https://gitee.com/nelsoncheung/sysu-20

Yat-Sen OS 418 Sep 24, 2022
C++ OpenGL 3D Game Tutorial Series - Learn to code an OpenGL 3D Game in C++ from scratch

C++ OpenGL 3D Game Tutorial Series is a YouTube Tutorial Series, whose purpose is to help all those who want to take their first steps in the game dev

 PardCode 105 Sep 29, 2022
Tutorial: Writing a "bare metal" operating system for Raspberry Pi 4

Tutorial: Writing a "bare metal" operating system for Raspberry Pi 4

Adam Greenwood-Byrne 2.5k Oct 2, 2022
Tutorial how to use Travis CI with C++

travis_cpp_tutorial Branch master develop richel Tutorial how to use Travis CI with C++. View the tutorial (screen friendly) Download the PDF Want to

Richel Bilderbeek 178 Sep 14, 2022
Gtk4 Tutorial for beginners

Gtk4 Tutorial for beginners

ToshioCP 275 Sep 27, 2022
Zephyr Tutorial for Beginners

Zephyr: Tutorial for Beginners This repository contains a step-by-step guide that teaches you how to use Zephyr RTOS. It assumes: no previous experien

null 107 Oct 2, 2022
Juce tutorial for beginners, with DSP introduction.

JUCE Tutorial Juce tutorial for beginners, with DSP basics. My teaching materials :D Warning: working in progress lesson 0: Setup lesson 1: Basic Basi

Wen-Yi Hsiao 5 Aug 25, 2022
Clean tab-less browser based on webkit2 and GTK4.

Rose Browser Simple browser based on webkit2-5.0/GTK4. Showcase Requirements In order to build rose you need gtk4 and webkit2gtk-5.0. In order to use

Rosé 272 Sep 29, 2022
This repository is a summary of the basic knowledge of recruiting job seekers and beginners in the direction of C/C++ technology, including language, program library, data structure, algorithm, system, network, link loading library, interview experience, recruitment, recommendation, etc.

?? C/C++ 技术面试基础知识总结,包括语言、程序库、数据结构、算法、系统、网络、链接装载库等知识及面试经验、招聘、内推等信息。This repository is a summary of the basic knowledge of recruiting job seekers and beginners in the direction of C/C++ technology, including language, program library, data structure, algorithm, system, network, link loading library, interview experience, recruitment, recommendation, etc.

huihut 26k Sep 29, 2022
Qt 6 Core for Beginners with C++ on Udemy

qt6-core-beginners Qt 6 Core for Beginners with C++ on Udemy Section

Bryan Cairns 104 Sep 11, 2022