diff --git a/Rakefile b/Rakefile index c16e67c..c95b814 100644 --- a/Rakefile +++ b/Rakefile @@ -4,6 +4,7 @@ require_relative 'lib/lib_src_file.rb' require_relative 'lib/lib_src2md.rb' require_relative 'lib/lib_gen_main_tex.rb' require_relative 'lib/lib_mk_html_template.rb' +require_relative 'lib/lib_cp_images.rb' secfiles = Sec_files.new(FileList['src/sec*.src.md'].to_a.map{|file| Sec_file.new(file)}) secfiles.renum! @@ -27,6 +28,7 @@ abstract_tex = "latex/"+abstract.to_tex CLEAN.append(FileList["latex/*.tex", "latex/*.aux", "latex/*.log", "latex/*.toc"]) CLOBBER.append("Readme.md").append(*mdfiles) CLOBBER.append(FileList["docs/*.html"]) +CLOBBER.append(FileList["docs/image/*"]) CLOBBER.append(FileList["latex/*.pdf"]) def pair array1, array2 @@ -73,7 +75,9 @@ pair(srcfiles, mdfiles).each do |src, dst, i| end end -task html: %W[#{html_dir}/index.html] + htmlfiles +task html: %W[#{html_dir}/index.html] + htmlfiles do + cp_images srcfiles, "docs/image" +end file "#{html_dir}/index.html" => [abstract] + secfiles do abstract_md = "#{html_dir}/#{abstract.to_md}" diff --git a/docs/Readme_for_developers.html b/docs/Readme_for_developers.html index 63ce217..7ab6e47 100644 --- a/docs/Readme_for_developers.html +++ b/docs/Readme_for_developers.html @@ -272,7 +272,7 @@ Refer to tfetextview API reference in appendix.

Other type of conditions may be available in the future version.

The code analyzing @@@if series command is rather complicated. It is based on the state diagram below.

-
state diagram
+
state diagram

@@@table

This type of @@@ command starts with a line begins with “@@@table”. The contents of this command is a table of GFM or pandoc’s markdown. The command makes a table easy to read. For example, a text file sample.md has a table like this:

diff --git a/docs/image/TfeTextView.png b/docs/image/TfeTextView.png new file mode 100644 index 0000000..0861906 Binary files /dev/null and b/docs/image/TfeTextView.png differ diff --git a/docs/image/TfeTextViewClass.png b/docs/image/TfeTextViewClass.png new file mode 100644 index 0000000..35cebea Binary files /dev/null and b/docs/image/TfeTextViewClass.png differ diff --git a/docs/image/box.png b/docs/image/box.png new file mode 100644 index 0000000..7b31757 Binary files /dev/null and b/docs/image/box.png differ diff --git a/docs/image/cairo.png b/docs/image/cairo.png new file mode 100644 index 0000000..bb0a3bc Binary files /dev/null and b/docs/image/cairo.png differ diff --git a/docs/image/child.png b/docs/image/child.png new file mode 100644 index 0000000..8e0d713 Binary files /dev/null and b/docs/image/child.png differ diff --git a/docs/image/color.png b/docs/image/color.png new file mode 100644 index 0000000..f0c4294 Binary files /dev/null and b/docs/image/color.png differ diff --git a/docs/image/column.png b/docs/image/column.png new file mode 100644 index 0000000..3e11c02 Binary files /dev/null and b/docs/image/column.png differ diff --git a/docs/image/column_view.png b/docs/image/column_view.png new file mode 100644 index 0000000..71ebc14 Binary files /dev/null and b/docs/image/column_view.png differ diff --git a/docs/image/da1.png b/docs/image/da1.png new file mode 100644 index 0000000..a7af64c Binary files /dev/null and b/docs/image/da1.png differ diff --git a/docs/image/dialog_warning.png b/docs/image/dialog_warning.png new file mode 100644 index 0000000..8622e57 Binary files /dev/null and b/docs/image/dialog_warning.png differ diff --git a/docs/image/directorylist.png b/docs/image/directorylist.png new file mode 100644 index 0000000..6db3440 Binary files /dev/null and b/docs/image/directorylist.png differ diff --git a/docs/image/dispose_handler.png b/docs/image/dispose_handler.png new file mode 100644 index 0000000..4e2d713 Binary files /dev/null and b/docs/image/dispose_handler.png differ diff --git a/docs/image/expression.png b/docs/image/expression.png new file mode 100644 index 0000000..9965f27 Binary files /dev/null and b/docs/image/expression.png differ diff --git a/docs/image/gnome_calculator_advanced.png b/docs/image/gnome_calculator_advanced.png new file mode 100644 index 0000000..e12ee07 Binary files /dev/null and b/docs/image/gnome_calculator_advanced.png differ diff --git a/docs/image/gnome_calculator_basic.png b/docs/image/gnome_calculator_basic.png new file mode 100644 index 0000000..d0d6edc Binary files /dev/null and b/docs/image/gnome_calculator_basic.png differ diff --git a/docs/image/list.png b/docs/image/list.png new file mode 100644 index 0000000..09bfbef Binary files /dev/null and b/docs/image/list.png differ diff --git a/docs/image/list3.png b/docs/image/list3.png new file mode 100644 index 0000000..89f9c77 Binary files /dev/null and b/docs/image/list3.png differ diff --git a/docs/image/list4.png b/docs/image/list4.png new file mode 100644 index 0000000..91c1d7a Binary files /dev/null and b/docs/image/list4.png differ diff --git a/docs/image/menu.png b/docs/image/menu.png new file mode 100644 index 0000000..bf20ecd Binary files /dev/null and b/docs/image/menu.png differ diff --git a/docs/image/menu1.png b/docs/image/menu1.png new file mode 100644 index 0000000..8617334 Binary files /dev/null and b/docs/image/menu1.png differ diff --git a/docs/image/menu1_screenshot.png b/docs/image/menu1_screenshot.png new file mode 100644 index 0000000..0fb9537 Binary files /dev/null and b/docs/image/menu1_screenshot.png differ diff --git a/docs/image/menu2.png b/docs/image/menu2.png new file mode 100644 index 0000000..b3fa53a Binary files /dev/null and b/docs/image/menu2.png differ diff --git a/docs/image/menu3.png b/docs/image/menu3.png new file mode 100644 index 0000000..261ef3c Binary files /dev/null and b/docs/image/menu3.png differ diff --git a/docs/image/menu_structure.png b/docs/image/menu_structure.png new file mode 100644 index 0000000..1442abd Binary files /dev/null and b/docs/image/menu_structure.png differ diff --git a/docs/image/open.png b/docs/image/open.png new file mode 100644 index 0000000..378b899 Binary files /dev/null and b/docs/image/open.png differ diff --git a/docs/image/proc_call.png b/docs/image/proc_call.png new file mode 100644 index 0000000..357bcfb Binary files /dev/null and b/docs/image/proc_call.png differ diff --git a/docs/image/rectangle.png b/docs/image/rectangle.png new file mode 100644 index 0000000..e79986e Binary files /dev/null and b/docs/image/rectangle.png differ diff --git a/docs/image/refcount.png b/docs/image/refcount.png new file mode 100644 index 0000000..407740a Binary files /dev/null and b/docs/image/refcount.png differ diff --git a/docs/image/saveas.png b/docs/image/saveas.png new file mode 100644 index 0000000..c9c1775 Binary files /dev/null and b/docs/image/saveas.png differ diff --git a/docs/image/screenshot_gtk_notebook.png b/docs/image/screenshot_gtk_notebook.png new file mode 100644 index 0000000..b61771f Binary files /dev/null and b/docs/image/screenshot_gtk_notebook.png differ diff --git a/docs/image/screenshot_lb1.png b/docs/image/screenshot_lb1.png new file mode 100644 index 0000000..7452b94 Binary files /dev/null and b/docs/image/screenshot_lb1.png differ diff --git a/docs/image/screenshot_lb2.png b/docs/image/screenshot_lb2.png new file mode 100644 index 0000000..858ae6e Binary files /dev/null and b/docs/image/screenshot_lb2.png differ diff --git a/docs/image/screenshot_lb4.png b/docs/image/screenshot_lb4.png new file mode 100644 index 0000000..243ddd7 Binary files /dev/null and b/docs/image/screenshot_lb4.png differ diff --git a/docs/image/screenshot_list4.png b/docs/image/screenshot_list4.png new file mode 100644 index 0000000..c162b25 Binary files /dev/null and b/docs/image/screenshot_list4.png differ diff --git a/docs/image/screenshot_pr3.png b/docs/image/screenshot_pr3.png new file mode 100644 index 0000000..57a4a88 Binary files /dev/null and b/docs/image/screenshot_pr3.png differ diff --git a/docs/image/screenshot_pr4.png b/docs/image/screenshot_pr4.png new file mode 100644 index 0000000..281ae5b Binary files /dev/null and b/docs/image/screenshot_pr4.png differ diff --git a/docs/image/screenshot_tfe2.png b/docs/image/screenshot_tfe2.png new file mode 100644 index 0000000..e41f432 Binary files /dev/null and b/docs/image/screenshot_tfe2.png differ diff --git a/docs/image/screenshot_tfv1.png b/docs/image/screenshot_tfv1.png new file mode 100644 index 0000000..f369509 Binary files /dev/null and b/docs/image/screenshot_tfv1.png differ diff --git a/docs/image/screenshot_tfv3.png b/docs/image/screenshot_tfv3.png new file mode 100644 index 0000000..0f59844 Binary files /dev/null and b/docs/image/screenshot_tfv3.png differ diff --git a/docs/image/stack.png b/docs/image/stack.png new file mode 100644 index 0000000..a2b440c Binary files /dev/null and b/docs/image/stack.png differ diff --git a/docs/image/state_diagram.png b/docs/image/state_diagram.png new file mode 100644 index 0000000..51edbe7 Binary files /dev/null and b/docs/image/state_diagram.png differ diff --git a/docs/image/table.png b/docs/image/table.png new file mode 100644 index 0000000..ee3d100 Binary files /dev/null and b/docs/image/table.png differ diff --git a/docs/image/tfe6.png b/docs/image/tfe6.png new file mode 100644 index 0000000..3133cf6 Binary files /dev/null and b/docs/image/tfe6.png differ diff --git a/docs/image/transformation.png b/docs/image/transformation.png new file mode 100644 index 0000000..ff42044 Binary files /dev/null and b/docs/image/transformation.png differ diff --git a/docs/image/tree2.png b/docs/image/tree2.png new file mode 100644 index 0000000..9d63948 Binary files /dev/null and b/docs/image/tree2.png differ diff --git a/docs/image/turtle.png b/docs/image/turtle.png new file mode 100644 index 0000000..e37513f Binary files /dev/null and b/docs/image/turtle.png differ diff --git a/docs/image/turtle1.png b/docs/image/turtle1.png new file mode 100644 index 0000000..847ce5f Binary files /dev/null and b/docs/image/turtle1.png differ diff --git a/docs/image/turtle2.png b/docs/image/turtle2.png new file mode 100644 index 0000000..c2f9a5c Binary files /dev/null and b/docs/image/turtle2.png differ diff --git a/docs/image/turtle3.png b/docs/image/turtle3.png new file mode 100644 index 0000000..6f89cde Binary files /dev/null and b/docs/image/turtle3.png differ diff --git a/docs/image/turtle_compile_process.png b/docs/image/turtle_compile_process.png new file mode 100644 index 0000000..015ead7 Binary files /dev/null and b/docs/image/turtle_compile_process.png differ diff --git a/docs/image/turtle_koch.png b/docs/image/turtle_koch.png new file mode 100644 index 0000000..f438380 Binary files /dev/null and b/docs/image/turtle_koch.png differ diff --git a/docs/image/turtle_parser_tree.png b/docs/image/turtle_parser_tree.png new file mode 100644 index 0000000..53906a2 Binary files /dev/null and b/docs/image/turtle_parser_tree.png differ diff --git a/docs/image/turtle_square_koch.png b/docs/image/turtle_square_koch.png new file mode 100644 index 0000000..4c514c9 Binary files /dev/null and b/docs/image/turtle_square_koch.png differ diff --git a/docs/image/turtle_tree.png b/docs/image/turtle_tree.png new file mode 100644 index 0000000..0ad22b0 Binary files /dev/null and b/docs/image/turtle_tree.png differ diff --git a/docs/image/window_widget.png b/docs/image/window_widget.png new file mode 100644 index 0000000..713ff43 Binary files /dev/null and b/docs/image/window_widget.png differ diff --git a/docs/sec11.html b/docs/sec11.html index 3f73401..abe75b4 100644 --- a/docs/sec11.html +++ b/docs/sec11.html @@ -113,7 +113,7 @@

Initialization and destruction of instances

-

A new version of the text file editor (tfe) will be made in this section and the following four sections. It is tfe5. There are many changes from the prior version. All the sources are listed in Section 16. They are located in two directories, src/tfe5 and src/tfetextview.

+

A new version of the text file editor (tfe) will be made in this section and the following four sections. It is tfe5. There are many changes from the prior version. All the sources are listed in Section 16. They are located in two directories, src/tfe5 and src/tfetextview.

Encapsulation

We’ve divided C source file into two parts. But it is not enough in terms of encapsulation.

TfeTextViewClass includes its ancestors’ class in it. It is illustrated in the following diagram.

-
The structure of TfeTextView Class
+
The structure of TfeTextView Class

Destruction of TfeTextView

Every Object derived from GObject has a reference count. If an object A refers to an object B, then A keeps a pointer to B in A and at the same time increases the reference count of B by one with the function g_object_ref (B). If A doesn’t need B any longer, then A discards the pointer to B (usually it is done by assigning NULL to the pointer) and decreases the reference count of B by one with the function g_object_unref (B).

If two objects A and B refer to C, then the reference count of C is two. If A no longer needs C, A discards the pointer to C and decreases the reference count in C by one. Now the reference count of C is one. In the same way, if B no longer needs C, B discards the pointer to C and decreases the reference count in C by one. At this moment, no object refers to 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
+
Reference count of B

The idea above is based on an assumption that an object referred by nothing has reference count of zero. When the reference count drops to zero, the object starts its destruction process. The destruction process is split into two phases: disposing and finalizing. In the disposing process, the object invokes the function pointed by dispose in its class to release all references to other objects. In the finalizing process, it invokes the function pointed by finalize in its class to complete the destruction process. These functions are also called handlers or methods. For example, dispose handler or dispose method.

In the destruction process of TfeTextView, the reference count of widgets related to TfeTextView is automatically decreased. But GFile pointed by tv->file needs to decrease its reference count by one. You must write the code in the dispose handler tfe_text_view_dispose.

@@ -420,7 +420,7 @@ }

Each ancestors’ class has been created before TfeTextViewClass is created. Therefore, there are four classes and each class has a pointer to each dispose handler. 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 handlers
+
dispose handlers

Now, look at the tfe_text_view_dispose program above. It first releases the reference to GFile object pointed by tv->file. Then it invokes its parent’s dispose handler in line 8.

G_OBJECT_CLASS (tfe_text_view_parent_class)->dispose (gobject);
diff --git a/docs/sec13.html b/docs/sec13.html index 886fadb..4f58ae2 100644 --- a/docs/sec13.html +++ b/docs/sec13.html @@ -325,7 +325,7 @@
  • 78: Shows the dialog.
    • -
    Saveas process
    +
    Saveas process

    When you use GtkFileChooserDialog, you need to divide the program into two parts. One is a function which creates GtkFileChooserDialog and the other is a signal handler. The function just creates and shows GtkFileChooserDialog. The rest is done by the handler. It gets Gfile from GtkFileChooserDialog and saves the buffer to the file by calling save_file.

    Open function

    @@ -397,7 +397,7 @@

    Now let’s think about the whole process between the caller and TfeTextView. It is shown in the following diagram and you would think that it is really complicated. Because signal is the only way for GtkFileChooserDialog to communicate with others. 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
    +
    Caller and TfeTextView
    1. A caller gets a pointer tv to a TfeTextView instance by calling tfe_text_view_new.
      2. @@ -420,8 +420,8 @@ }

      The important thing is to duplicate tv->file. Otherwise, if the caller frees the GFile object, tv->file is no more guaranteed to point the GFile. Another reason to use g_file_dup is that GFile isn’t thread-safe. If you use GFile in the different thread, the duplication is necessary. See Gio API Reference, g_file_dup.

      The API document and source file of tfetextview.c

      -

      Refer API document of TfeTextView. Its original markdown file is under the directory src/tfetextview.

      -

      All the source files are listed in Section 16. You can find them under src/tfe5 and src/tfetextview directories.

      +

      Refer API document of TfeTextView. Its original markdown file is under the directory src/tfetextview.

      +

      All the source files are listed in Section 16. You can find them under src/tfe5 and src/tfetextview directories.

      diff --git a/docs/sec15.html b/docs/sec15.html index 4092632..cd00168 100644 --- a/docs/sec15.html +++ b/docs/sec15.html @@ -317,7 +317,7 @@ $ executable('tfe', sourcefiles, resources, dependencies: gtkdep)

      In this file, just the source file names are modified from the prior version.

      source files

      -

      The source files of the text editor tfe will be shown in the next section.

      +

      The source files of the text editor tfe will be shown in the next section.

      You can also download the files from the repository. There are two options.

      If you use git, run the terminal and type the following.

      $ git clone https://github.com/ToshioCP/Gtk4-tutorial.git
      -

      The source files are under /src/tfe5 directory.

      +

      The source files are under /src/tfe5 directory.

      diff --git a/docs/sec17.html b/docs/sec17.html index cf8afba..dc9573e 100644 --- a/docs/sec17.html +++ b/docs/sec17.html @@ -116,7 +116,7 @@

      Users often use menus to tell a command to the computer. It is like this:

      -
      Menu
      +
      Menu

      Now let’s analyze the menu above. There are two types of object.

      -
      Menu structure
      +
      Menu structure
      -
      menu and action
      +
      menu and action
      -
      Screenshot of menu1
      +
      Screenshot of menu1
      diff --git a/docs/sec18.html b/docs/sec18.html index c96a1b1..2d2fc86 100644 --- a/docs/sec18.html +++ b/docs/sec18.html @@ -218,7 +218,7 @@

      Example code

      The following code includes stateful actions above. This program has menus like this:

      -
      menu2
      +
      menu2
      -
      Stroke a rectangle
      +
      Stroke a rectangle

      The instruction is as follows:

        @@ -199,7 +199,7 @@

        To compile this, type the following.

        $ gcc `pkg-config --cflags cairo` cairo.c `pkg-config --libs cairo`
        -
        rectangle.png
        +
        rectangle.png

        See the Cairo’s website for more details.

        GtkDrawingArea

        @@ -266,7 +266,7 @@

        Compile and run it, then a window with a black rectangle (square) appears. Try resizing the window. The square always appears at the center of the window because the drawing function is invoked each time the window is resized.

        -
        Square in the window
        +
        Square in the window
        diff --git a/docs/sec24.html b/docs/sec24.html index 8bd881e..4bf5096 100644 --- a/docs/sec24.html +++ b/docs/sec24.html @@ -115,7 +115,7 @@

        Combine GtkDrawingArea and TfeTextView

        Now, we will make a new application which has GtkDrawingArea and TfeTextView in it. Its name is “color”. If you write a name of a color in TfeTextView and click on the run button, then the color of GtkDrawingArea changes to the color given by you.

        -
        color
        +
        color

        The following colors are available.

      -

      In the same way, you can draw other curves. The documentation above shows some fractal curves such as tree, snow and square-koch. The source code in turtle language is located at src/turtle/example directory. You can read these files into turtle editor by clicking on the Open button.

      +

      In the same way, you can draw other curves. The documentation above shows some fractal curves such as tree, snow and square-koch. The source code in turtle language is located at src/turtle/example directory. You can read these files into turtle editor by clicking on the Open button.

      Combination of TfeTextView and GtkDrawingArea objects

      Turtle uses TfeTextView and GtkDrawingArea. It is similar to color program in the previous section.

        @@ -146,7 +146,7 @@ tr 90
      1. The widget is added to the queue. It will be redrawn with the drawing function. The function just copies the surface, which is drawn by the interpreter, into the surface of the GtkDrawingArea.
      -
      Parser, interpreter and drawing function
      +
      Parser, interpreter and drawing function

      The body of the interpreter is written with flex and bison. The codes are not thread safe. So the handler of “clicked” signal of the Run button prevents from reentering.

      void
@@ -198,7 +198,7 @@ tr 90
    2. 27: The interpreter program has finished so busy is now changed to FALSE.
    3. 29-34: A handler of “resized” signal. If surface isn’t NULL, it destroys the old surface. Then it creates a new surface. Its size is the same as the surface of the GtkDrawingArea instance.
      4. -

      Other part of turtleapplication.c is almost same as the codes of colorapplication.c in the previous section. The codes of turtleapplication.c is in the turtle directory.

      +

      Other part of turtleapplication.c is almost same as the codes of colorapplication.c in the previous section. The codes of turtleapplication.c is in the turtle directory.

      What does the interpreter do?

      Suppose that the turtle runs with the following program.

      distance = 100
@@ -267,7 +267,7 @@ fd distance*2
    4. turtle makes a tree structured data. This part of turtle is called parser.
      5. -
      turtle parser tree
      +
      turtle parser tree
    -
    compile process
    +
    compile process

    Meson controls the process and the instruction is described in meson.build.

    project('turtle', 'c')
@@ -1283,7 +1283,7 @@ expression:
 
  • Finally node_top points the node N_FD and the node N_FD points the node N_NUM.
    • 
 
 
    
-
    tree
    
+
    tree
    
 
    
 
    The following is the grammar rule extracted from turtle.y. The rules there are based on the same idea above. I don’t want to explain the whole rules below. Please look into each line carefully so that you will understand all the rules and actions.
    
 
    program:
@@ -1546,7 +1546,7 @@ drawline (90, 100)
    
 
    The following diagram shows the structure of the stack. First, procedure 1 is called. The procedure has two parameters. In the procedure 1, another procedure procedure 2, which has one parameter, is called. And in the procedure 2, procedure 3, which has three parameters, is called.
    
 
    Programs push data to a stack from a low address memory to a high address memory. In the following diagram, the lowest address is at the top and the highest address is at the bottom. That is the order of the address. However, “the top of the stack” is the last pushed data and “the bottom of the stack” is the first pushed data. Therefore, “the top of the stack” is the bottom of the rectangle in the diagram and “the bottom of the stack” is the top of the rectangle.
    
 
    
-
    Stack
    
+
    Stack
    
 
    
 
    There are four functions to access the stack.

    Turtle has its own coordinate. The origin is at the center of the surface, and positive direction of x and y axes are right and up respectively. But surfaces have its own coordinate. Its origin is at the top-left corner of the surface and positive direction of x and y are right and down respectively. A plane with the turtle’s coordinate is called user space, which is the same as cairo’s user space. A plane with the surface’s coordinate is called device space.

    Cairo provides a transformation which is an affine transformation. It transforms a user-space coordinate (x, y) into a device-space coordinate (z, w).

    -
    transformation
    +
    transformation

    init_cairo gets the width and height of the surface (See the program below).

    -

    The file list1.c is located under the directory src/misc. Make a shell script below and save it to your bin directory. (If you’ve installed Gtk4 from the source to $HOME/local, then your bin directory is $Home/local/bin. Otherwise, $Home/bin is your private bin directory.)

    +

    The file list1.c is located under the directory src/misc. Make a shell script below and save it to your bin directory. (If you’ve installed Gtk4 from the source to $HOME/local, then your bin directory is $Home/local/bin. Otherwise, $Home/bin is your private bin directory.)

    gcc `pkg-config --cflags gtk4` $1.c `pkg-config --libs gtk4`

    Change the current directory to the directory includes list1.c and type as follows.

    $ chmod 755 $HOME/local/bin/comp # or chmod 755 $Home/bin/comp
@@ -250,7 +250,7 @@ $ comp list1
 $ ./a.out

    Then, list1.c has been compiled and executed.

    -
    list1
    +
    list1

    I think the program is not so difficult. If you feel some difficulty, read this section again, especially GtkSignalListItemFactory subsubsection.

    GtkBuilderListItemFactory

    @@ -276,7 +276,7 @@ $ ./a.out

    Remember that the classname (GtkListItem) in a ui template is used as the “this” pointer referring to the object that is being instantiated.

    Therefore, GtkListItem instance is used as the this object of the lookup tag when it is evaluated. this object will be explained in section 28.

    -

    The C source code is as follows. Its name is list2.c and located under src/misc directory.

    +

    The C source code is as follows. Its name is list2.c and located under src/misc directory.

    #include <gtk/gtk.h>
 
 /* ----- activate, open, startup handlers ----- */
@@ -412,7 +412,7 @@ $ ./a.out
  • closure tag has type attribute and function attribute. Function attribute specifies the function name and type attribute specifies the type of the return value of the function. The contents of closure tag (it is between <closure…> and</closure>) is parameters of the function. <lookup name="item">GtkListItem</lookup> gives the value of the item property of the GtkListItem. This will be the second argument of the function. The first parameter is always the GListItem instance.
  • gtk_file_name function first check the info parameter. Because it can be NULL when GListItem item is unbound. If its GFileInfo, then return the filename (copy of the filename).
    • -

    The whole program (list3.c) is as follows. The program is located in src/misc directory.

    +

    The whole program (list3.c) is as follows. The program is located in src/misc directory.

    #include <gtk/gtk.h>
 
 char *
@@ -499,7 +499,7 @@ $ chmod +x $HOME/bin/comp
    $ comp list3
 $ ./a.out
    -
    screenshot list3
    +
    screenshot list3
    diff --git a/docs/sec27.html b/docs/sec27.html index a09e323..ccbc295 100644 --- a/docs/sec27.html +++ b/docs/sec27.html @@ -115,7 +115,7 @@

    GtkGridView and activate signal

    GtkGridView is similar to GtkListView. It displays a GListModel as a grid, which is like a square tessellation.

    -
    Grid
    +
    Grid

    This is often seen when you use a file browser like nautilus.

    In this section, let’s make a very simple file browser list4. It just shows the files in the current directory. And a user can choose list or grid by clicking on buttons in the tool bar. Each item in the list or grid has an icon and a filename. In addition, list4 provides the way to open the tfe text editor to show a text file. A user can do that by double clicking on an item or pressing enter key when an item is selected.

    @@ -125,7 +125,7 @@ 
    GtkListView (model property) => GtkSingleSelection (model property) => GtkDirectoryList
 GtkGridView (model property) => GtkSingleSelection (model property) => GtkDirectoryList
    -
    DirectoryList
    +
    DirectoryList

    The following is the part of the ui file list4.ui. It defines GtkListView, GtkSingleSelection and GtkDirectoryList. It also defines GtkGridView and GtkSingleSelection.

    <object class="GtkListView" id="list">
@@ -449,14 +449,14 @@ GtkGridView (model property) => GtkSingleSelection (model property) => Gtk
 
 
    If your distribution supports Gtk4, using g_app_info_launch_default_for_uri is convenient. The function automatically determines the default application from the file and launches it. For example, if the file is text, then it launches gedit with the file. Such functionality comes from desktop.
    
 
    Compilation and execution
    
-
    The source files are located in src/list4 directory. To compile and execute list4, type as follows.
    
+
    The source files are located in src/list4 directory. To compile and execute list4, type as follows.
    
 
    $ cd list4 # or cd src/list4. It depends your current directory.
 $ meson _build
 $ ninja -C _build
 $ _build/list4
    
 
    Then a file list appears as a list style. Click on a button on the tool bar so that you can change the style to grid or back to list. Double click “list4.c” item, then tfe text editor runs with the argument “list4.c”. The following is the screenshot.
    
 
    
-
    Screenshot
    
+
    Screenshot
    
 
    
 
    “gbytes” property of GtkBuilderListItemFactory
    
 
    GtkBuilderListItemFactory has “gbytes” property. The property contains a byte sequence of ui data. If you use this property, you can put the contents of factory_list.ui and factory_grid.uiinto list4.ui. The following shows a part of the new ui file (list5.ui).
    
@@ -510,7 +510,7 @@ $ _build/list4
    </object>

    CDATA section begins with “<[CDATA[" and ends with "]]>”. The contents of CDATA section is recognized as a string. Any character, even if it is a key syntax marker such as ‘<’ or ‘>’, is recognized literally. Therefore, the text between “<[CDATA[" and "]]>” is inserted to “bytes” property as it is.

    This method decreases the number of ui files. But, the new ui file is a bit complicated especially for the beginners. If you feel some difficulty, it is better for you to separate the ui file.

    -

    A directory src/list5 includes the ui file above.

    +

    A directory src/list5 includes the ui file above.

    diff --git a/docs/sec28.html b/docs/sec28.html index c51c92e..cd056bc 100644 --- a/docs/sec28.html +++ b/docs/sec28.html @@ -118,7 +118,7 @@ 
    1 + 2 = 3

    1+2 is an expression. It shows the way how to calculate. 3 is the value comes from the expression. Evaluation is to calculate the expression and get the value.

    GtkExpression is a way to get a value. Evaluation is like a calculation. A value is got by evaluating the expression.

    -

    First, I want to show you the C file of the example for GtkExpression. Its name is exp.c and located under src/expression directory. You don’t need to understand the details now, just look at it. It will be explained in the next subsection.

    +

    First, I want to show you the C file of the example for GtkExpression. Its name is exp.c and located under src/expression directory. You don’t need to understand the details now, just look at it. It will be explained in the next subsection.

    #include <gtk/gtk.h>
 
 GtkWidget *win1;
@@ -527,13 +527,13 @@
 
    You’ve probably been noticed that ui file is easier and clearer than the corresponding C program. One of the most useful case of GtkExpression is building GtkListItem instance with GtkBuilderListItemFatory. Such case has already been described in the prior two sections.
    
 
    It will be used in the next section to build GtkListItem in GtkColumnView, which is the most useful view object for GListModel.
    
 
    Compilation and execution
    
-
    All the sources are in src/expression directory. Change your current directory to the directory and run meson and ninja. Then, execute the application.
    
+
    All the sources are in src/expression directory. Change your current directory to the directory and run meson and ninja. Then, execute the application.
    
 
    $ meson _build
 $ ninja -C _build
 $ build/exp
    
 
    Then, two windows appear.
    
 
    
-
    Expression
    
+
    Expression
    
 
    
 
    If you put some text in the field of the entry, then the same text appears in the second GtkLabel. Because the “label” property of the second GtkLabel instance is bound to the text in the GtkEntryBuffer.
    
 
    If you resize the window, then the size appears in the title bar because the “title” property is bound to “default-width” and “default-height” properties.
    
diff --git a/docs/sec29.html b/docs/sec29.html
index 3490b6f..b68f42a 100644
--- a/docs/sec29.html
+++ b/docs/sec29.html
@@ -113,7 +113,7 @@
 
    GtkColumnView
    
 
    GtkColumnView is like GtkListView, but it has multiple columns. Each column is GtkColumnViewColumn.
    
 
    
-
    Column View
    
+
    Column View
    
 
    
 
      
 
    • GtkColumnView has “model” property. The property points a GtkSelectionModel object.
      • 
@@ -122,7 +122,7 @@
 
    
 
    The following diagram shows the image how it works.
    
 
    
-
    ColumnView
    
+
    ColumnView
    
 
    
 
    The example in this section is a window that displays information of files in a current directory. The information is the name, size and last modified datetime of files. So, there are three columns.
    
 
    In addition, the example uses GtkSortListModel and GtkSorter to sort the information.
    
@@ -498,13 +498,13 @@
 
 
    exp.c is simple and short thanks to exp.ui.
    
 
    Compilation and execution.
    
-
    All the source files are in src/column directory. Change your current directory to the directory and type the following.
    
+
    All the source files are in src/column directory. Change your current directory to the directory and type the following.
    
 
    $ meson _build
 $ ninja -C _build
 $ _build/column
    
 
    Then, a window appears.
    
 
    
-
    Column View
    
+
    Column View
    
 
    
 
    If you click the header of a column, then the whole lists are sorted by the column. If you click the header of another column, then the whole lists are sorted by the newly selected column.
    
 
    GtkColumnView is very useful and it can manage very big GListModel. It is possible to use it for file list, application list, database frontend and so on.
    
diff --git a/docs/sec3.html b/docs/sec3.html
index 32179e1..bb0f051 100644
--- a/docs/sec3.html
+++ b/docs/sec3.html
@@ -234,7 +234,7 @@ $
    GtkWidget -- GtkWindow

    GtkWindow includes GtkWidget at the top of its object.

    -
    GtkWindow and GtkWidget
    +
    GtkWindow and GtkWidget

    The function gtk_window_new is defined as follows.

    GtkWidget *
@@ -258,7 +258,7 @@ GtkWidget -- GtkWindow
    $ ./a.out

    A small window appears.

    -
    Screenshot of the window
    +
    Screenshot of the window

    Click on the close button then the window disappears and the program finishes.

    GtkApplicationWindow

    @@ -276,7 +276,7 @@ $ ./a.out

    When you create GtkApplicationWindow, you need to give GtkApplication instance as an argument. Then it automatically connect these two instances. 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 of the window
    diff --git a/docs/sec4.html b/docs/sec4.html index c9a99b9..afeb657 100644 --- a/docs/sec4.html +++ b/docs/sec4.html @@ -149,7 +149,7 @@ $ ./a.out

    A window with a message “Hello.” appears.

    -
    Screenshot of the label
    +
    Screenshot of the label

    There’s only a little change between pr4.c and lb1.c. A program diff is good to know the difference between two files.

    $ cd misc; diff pr4.c lb1.c
@@ -215,7 +215,7 @@ $ ./a.out

    Look at the line 17 to 19. First, it creates a GtkButton instance btn with a label “Click me”. Then, adds the button to the window win as a child. Finally, connects a “clicked” signal of the button to a handler (function) click_cb. So, if btn is clicked, the function click_cb is invoked. The suffix “cb” means “call back”.

    Name the program lb2.c and save it. Now compile and run it.

    -
    Screenshot of the label
    +
    Screenshot of the label

    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. It shows the handler was invoked by clicking the button.

    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. So, we will change the handler. The following code is lb3.c.

    @@ -282,7 +282,7 @@ $ ./a.out

    After this, the Widgets are connected as the following diagram.

    -
    Parent-child relationship
    +
    Parent-child relationship

    The program lb4.c includes these widgets. It is as follows.

    #include <gtk/gtk.h>
@@ -349,7 +349,7 @@ gtk_box_set_homogeneous (GTK_BOX (box), TRUE);

    The first argument arranges the children of the box vertically. The second argument is the size between the children. The next function fills the box with the children, giving them the same space.

    After that, two buttons btn1 and btn2 are created and the signal handlers are set. Then, these two buttons are appended to the box.

    -
    Screenshot of the box
    +
    Screenshot of the box

    The handler corresponds to btn1 toggles its label. The handler corresponds to btn2 destroys the top-level window and the application quits.

    diff --git a/docs/sec5.html b/docs/sec5.html index 2bafdca..c635726 100644 --- a/docs/sec5.html +++ b/docs/sec5.html @@ -166,7 +166,7 @@

    In line 30, tv is added to win as a child.

    Now compile and run it.

    -
    GtkTextView
    +
    GtkTextView

    There’s an I-beam pointer in the window. You can add or delete any characters on the GtkTextview, and your changes are kept in the GtkTextBuffer. 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, and change it back to the original size. 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

    diff --git a/docs/sec7.html b/docs/sec7.html index 3db47af..8afe53f 100644 --- a/docs/sec7.html +++ b/docs/sec7.html @@ -227,7 +227,7 @@ G_APPLICATION_HANDLES_OPEN This application handles opening files (in the prima 
    $ comp tfv3
 $ ./a.out tfv3.c
    -
    File viewer
    +
    File viewer

    Let’s explain how the program tfv3.c works. First, the function main has only two changes from the previous version.

    -
    Change the foreground color
    +
    Change the foreground color

    Other simple commands