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.
The following colors are available. (without new line charactor)
In addition the following two options are also available.
This application can only do very simple things. However, it tells us that if we add powerful parser to it, we will be able to make it more efficient. I want to show it to you in the later section by making a turtle graphics language like Logo program language.
In this section, we focus on how to bind the two objects.
First, We need to make the ui file of the widgets. Title bar, four buttons in the tool bar, textview and drawing area. The ui file is as follows.
@@@include color/color.ui @@@
boxh1
makes a tool bar which
has four buttons, Run
, Open
, Save
and Close
. This is similar to the tfe
text
editor in Section 9. There are two differences.
Run
button replaces New
button. A signal
element is added to each button object. It has “name” attribute which is
a signal name and “handler” attribute which is the name of its signal
handler. Options “-WI, –export-dynamic” CFLAG is necessary when you
compile the application. You can achieve this by adding “export_dynamic:
true” argument to the executable function in meson.build
.
And be careful that the handler must be defined without ‘static’
class.boxh2
includes
GtkScrolledWindow and GtkDrawingArea. GtkBox has “homogeneous property”
with TRUE value, so the two children have the same width in the box.
TfeTextView is a child of GtkScrolledWindow.The xml file for the resource compiler is almost same as before. Just substitute “color” for “tfe”.
@@@include color/color.gresource.xml @@@
The main point of this program is a drawing function.
@@@include color/colorapplication.c draw_func @@@
The surface
variable in line 3 is a static variable.
static cairo_surface_t *surface = NULL;
The drawing function just copies the surface
to its own
surface with the cairo_paint
function. The surface (pointed
by the static variable surface
) is built by the
run
function.
@@@include color/colorapplication.c run @@@
contents
.surface
points a surface instance,
it is painted as follows.contents
and copied to the surface with cairo_paint
.The drawing area just reflects the surface
. But one
problem is resizing. If a user resizes the main window, the drawing area
is also resized. It makes size difference between the surface and the
drawing area. So, the surface needs to be resized to fit the drawing
area.
It is accomplished by connecting the “resize” signal on the drawing area to a handler.
(GTK_DRAWING_AREA (da), "resize", G_CALLBACK (resize_cb), NULL); g_signal_connect
The handler is as follows.
@@@include color/colorapplication.c resize_cb @@@
If the variable surface
sets a surface instance, it is
destroyed. A new surface is created and its size fits the drawing area.
The surface is assigned to the variable surface
. The
function run
is called and the surface is colored.
The signal is emitted when:
So, the first surface is created when it is realized.
This is the main file.
Run
signal handler is the point in this program.The following is colorapplication.c
.
@@@include color/colorapplication.c @@@
main
. It creates a new application
instance. And connects three signals startup, shutdown and activate to
their handlers. It runs the application. It releases the reference to
the application and returns with stat
value.This file is almost same as before. An argument “export_dynamic: true” is added to executable function.
@@@include color/meson.build @@@
Type the following to compile the program.
$ meson _build
$ ninja -C _build
The application is made in _build
directory. Type the
following to execute it.
$ _build/color
Type “red”, “green”, “blue”, “white”, black”, “light” or “dark” in
the TfeTextView. No new line charactor is needed. Then, click on the
Run
button. Make sure the color of GtkDrawingArea
changes.
In this program TfeTextView is used to change the color. You can use buttons or menus instead of textview. Probably it is more appropriate. Using textview is unnatural. It is a good practice to make such application by yourself.