<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META NAME="GENERATOR" CONTENT="lfparser_2.46">
<META NAME="LFCATEGORY" CONTENT="SoftwareDevelopment">
<link rel="icon" href="../../common/images/lf-16.png" type="image/png">
<TITLE>lf295, SoftwareDevelopment: Programmazione di GUI con GTK</TITLE>
<style type="text/css">
<!--
td.top {font-family: Arial,Geneva,Verdana,Helvetica,sans-serif; font-size:12 }
pre { font-family:monospace,Courier }
pre.code { font-family:monospace,Courier;background-color:#aedbe8; }
p.cl { color:#EE9500 }
a.nodec { text-decoration:none }
p.trans { font-size:8pt; text-align:right }
p.clbox { width:50%; alignment:center; background-color:#FFD700;
border-style:none; border-width:medium; border-color:#FFD700;
padding:0.5cm; text-align:center }
p.code { width:80%; alignment:center; background-color:#aedbe8;
border-style:none; border-width:medium; border-color:#aedbe8;
padding:0.1cm; text-align:left }
p.foot { background-color:#AAAAAA; color:#FFFFFF; border-style:none;
border-width:medium; border-color:#AAAAAA; padding:0.5cm ;
margin-top:0.1cm; margin-right:1cm; margin-left:1cm;
text-align:center }
.mark { background-color:#e6e6ff }
-->
</style>
</HEAD>
<BODY bgcolor="#ffffff" text="#000000">
<!-- this is generated html code. NEVER use this file for your
translation work. Instead get the file with the same article number
and .meta.shtml in its name. Translate this meta file and then
use lfparser program to generate the final article -->
<!-- lfparser can be obtained from http://main.linuxfocus.org/~guido/dev/lfparser.html -->
<!-- this is used by a number of tools:
=LF=AUTHOR: Özcan Güngör
=LF=CAT___: SoftwareDevelopment
=LF=TITLE_: Programmazione di GUI con GTK
=LF=NUMBER: 295
=LF=ANAME_: article295.shtml
-->
<!-- 2pdaIgnoreStart -->
<!-- start navegation bar, style=2 -->
<!-- top navegation bar -->
<TABLE summary="topbar_1" cellspacing="0" cellpadding="0" border="0" align="center" width="90%">
<TR bgcolor="#2e2292">
<TD class="top"><TABLE summary="topbar_1_logo" cellspacing="0" cellpadding="0" border="0" width=
"100%">
<TR><TD width="319"><IMG src="../../common/images/logolftop_319x45.gif"
alt="[LinuxFocus-icon]" width="319" height="45" align="left"
border="0"></TD>
<TD class="top">
<TABLE summary="topbar_1_links" width="100%">
<TR align="right">
<TD class="top">
<A class="nodec" href="index.shtml"><FONT color=
"#DDDDDD" size="2"><--</FONT></A> |
<A class="nodec" href="../index.shtml"><FONT color=
"#DDDDDD" size="2">Home</FONT></A> |
<A class="nodec" href="../map.html"><FONT color=
"#DDDDDD" size="2">Mappa</FONT></A> |
<A class="nodec" href="../indice.html"><FONT color=
"#DDDDDD" size="2">Indice</FONT></A> |
<A class="nodec" href="../Search/index.shtml"><FONT color=
"#DDDDDD" size="2">Cerca</FONT></A> </TD>
</TR>
<TR align="right">
<TD class="top">
<HR width="100%" noshade size="1">
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
<!-- end top navegation bar -->
<!-- blue bar -->
<TABLE summary="topbar_2" cellspacing="0" cellpadding="0" border="0" align="center"
width="90%">
<TR bgcolor="#00ffff">
<TD><IMG src="../../common/images/transpix.gif" width="1" height=
"2" alt=""></TD>
</TR>
</TABLE>
<!-- end blue bar -->
<!-- bottom navegation bar -->
<TABLE summary="topbar_3" cellspacing="0" cellpadding="0" border="0" align="center"
width="94%">
<TR bgcolor="#000000">
<TD>
<TABLE summary="topbar_3_links" cellspacing="0" cellpadding="1" border="0" width=
"100%">
<TR align="center">
<TD WIDTH="20%"><A class="nodec" href="../News/index.shtml"><FONT color=
"#FFFFFF">News</FONT></A> </TD>
<TD WIDTH="5%"><FONT color="#FFFFFF">|</FONT> </TD>
<TD WIDTH="20%"><A class="nodec" href="../Archives/index.html"><FONT color=
"#FFFFFF">Archivo</FONT></A> </TD>
<TD WIDTH="5%"><FONT color="#FFFFFF">|</FONT> </TD>
<TD WIDTH="20%"><A class="nodec" href="../Links/index.html"><FONT color=
"#FFFFFF">Link</FONT></A> </TD>
<TD WIDTH="5%"><FONT color="#FFFFFF">|</FONT> </TD>
<TD WIDTH="20%"><A class="nodec" href="../aboutus.html"><FONT color=
"#FFFFFF">Cose LF</FONT></A> </TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
<!-- end bottom navegation bar -->
<!-- stop navegation bar -->
<!-- SSI_INFO -->
<!-- tr_staticssi include virtual -->
<!-- tr_staticssi exec cmd -->
<!-- addedByLfdynahead ver 1.4 --><TABLE ALIGN="right" border=0><TR><TD ALIGN="right"><FONT SIZE="-1" FACE="Arial,Helvetica">Questo documento è disponibile in: <A href="../../English/May2003/article295.shtml">English</a> <A href="../../Castellano/May2003/article295.shtml">Castellano</a> <A href="../../ChineseGB/May2003/article295.shtml">ChineseGB</a> <A href="../../Deutsch/May2003/article295.shtml">Deutsch</a> <A href="../../Francais/May2003/article295.shtml">Francais</a> <A href="../../Italiano/May2003/article295.shtml">Italiano</a> <A href="../../Nederlands/May2003/article295.shtml">Nederlands</a> <A href="../../Russian/May2003/article295.shtml">Russian</a> <A href="../../Turkce/May2003/article295.shtml">Turkce</a> <A href="../../Polish/May2003/article295.shtml">Polish</a> </FONT></TD></TR></TABLE><br>
<!-- SSI_INFO STOP -->
<!-- 2pdaIgnoreStop -->
<!-- SHORT BIO ABOUT THE AUTHOR -->
<TABLE ALIGN=LEFT BORDER=0 WIDTH="190" summary="about the author">
<TR>
<TD>
<img src="../../common/images/OzcanGungor.jpg" alt="Ozcan Gungor" width="114" height="147">
<BR> Özcan Güngör <br> <small><ozcangungor(at)netscape.net></small>
<BR><BR>
<I>L'autore:</I><BR>
<!-- aboutauthor_start -->
Uso Linux dal 1997. Libertà, flessibilità e opensource.
Queste sono le caratteristiche che mi piacciono.
<!-- aboutauthor_stop -->
<!-- TRANSLATED TO it -->
<BR><BR><I>Tradotto in Italiano da:</I><BR>
Alessandro Pellizzari <small><alex(at)neko.it></small>
<br>
<!--
=LF=TRANSTO=it: Alessandro Pellizzari
-->
<!-- TRANSLATED TO STOP -->
<BR><i>Contenuto</i>:
<UL>
<LI><A HREF="#295lfindex0">Cos'è GTK?</A></LI>
<LI><A HREF="#295lfindex1">Compilazione</A></LI>
<LI><A HREF="#295lfindex2">Un primo programma</A></LI>
<LI><A HREF="#295lfindex3">Segnali ed Eventi</A></LI>
<LI><A HREF="#295lfindex4">Un normale bottone</A></LI>
<LI><A HREF="http://cgi.linuxfocus.org/cgi-bin/lftalkback?anum=295">Discussioni su quest'articolo</A></LI>
</UL>
</TD></TR></TABLE>
<!-- HEAD OF THE ARTICLE -->
<br>
<table border="0"><tr><td>
<H2>Programmazione di GUI con GTK</H2>
<img src="../../common/images/illustration295.jpg" alt="GTK" width="195" height="172">
<!-- ABSTRACT OF THE ARTICLE -->
<P><i>Premessa</i>:
<P>
<!-- articleabstract_start -->
<p>
In questa serie di articoli impareremo come scrivere interfacce grafiche
(GUI) con GTK. Non ho idea di quanto durerà. Per capire
questi articoli dovreste conoscere le seguenti caratteristiche del
linguaggio C:</p><ul><li>Variabili</li><li>Funzioni</li><li>Puntatori</li></ul><br>
<!-- articleabstract_stop -->
<br><!-- HR divider --><center><font color="#8282e0"><b>_________________ _________________ _________________</b></font></center><br>
</td></tr></table>
<!-- BODY OF THE ARTICLE -->
<A NAME="295lfindex0"> </A>
<H2>Cos'è GTK?</H2>
<p>GTK (GIMP Toolkit) è una libreria per la creazione di Interfacce
Utente Grafiche (GUI, Graphical User Interface). È disponibile
sotto licenza GPL. Usando questa libreria potete creare programmi
open-source, free o commerciali.</p>
<p>La libreria si chiama GIMP Toolkit (GTK) perché originariamente
è stata creata per sviluppare GIMP (General Image Manipulation Program).
Gli autori di GTK sono:</p>
<ul>
<li><a href="mailto:petm(at)xcf.berkley.edu">Peter
Mattis</a></li>
<li><a href="mailto:spencer(at)xcf.berkley.edu">Spencer
Kimball</a></li>
<li><a href="mailto:jmacd(at)xcf.berkley.edu">Josh
MacDonald</a></li>
</ul>
<p>GTK è un'interfaccia utente orientata agli oggetti.
Anche se è scritta in C, usa le idee di classe e funzione di callback.</p>
<A NAME="295lfindex1"> </A>
<H2>Compilazione</H2>
<p>Per compilare programmi GTK, dovete dire a gcc cosa sono e dove
si trovano le librerie GTK. Il programma <i>gtk-config</i> "conosce"
queste cose.</p>
# gtk-config --cflags --libs
<p>L'output di questo comando è simile al seguente (dipende dal sistema):</p>
-I/opt/gnome/include/gtk-1.2 -I/opt/gnome/include/glib-1.2
-I/opt/gnome/lib/glib /include -I/usr/X11R6/include
-L/opt/gnome/lib -L/usr/X11R6/lib -lgtk -lgdk -rdynamic
-lgmodule -lglib -ldl -l Xext -lX11 -lm
<p>I parametri hanno il seguente significato:</p>
-l libreria: Cerca una libreria con nome lib<i>libreria</i>.a nei path definiti.<br>
-L path: Aggiunge un percorso dove cercare le librerie.<br>
-I path: Aggiunge un percorso dove cercare i file header.<br>
<p>(NdT: il comando si riferisce alla versione fino alla 1.2 di Gtk+. Dalla
versione 2.0 si usa pkg-config con una sintassi diversa)</p>
<p>Per compilare un programma GTK di nome hello.c, si può usare il
seguente comando:</p>
<p class="code">gcc -o hello hello.c `gtk-config --cflags
--libs`</p>
<p>Quello che segue il parametro -o è il nome del programma compilato.</p>
<A NAME="295lfindex2"> </A>
<H2>Un primo programma</H2>
<p>Assumiamo che GTK sia installato nel vostro sistema.
L'ultima versione di GTK può essere trovata a <a href=
"ftp://ftp.gtk.org">ftp.gtk.org</a>.</p>
<p>Scriviamo il nostro primo programma. Questo programma crea una finestra
200x200, vuota.</p>
<pre class="code">
#include <gtk/gtk.h>
int main( int argc,
char *argv[] )
{
GtkWidget *window;
gtk_init (&argc, &argv);
window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
gtk_widget_show (window);
gtk_main ();
return(0);
}
</pre>
<p>GtkWidget è un tipo variabile per definire diverse componenti
come finestre, bottoni, etichette... In questo esempio viene definita
una finestra nel modo seguente:</p>
GtkWidget *window;
<p>void gtk_init(int *argc, char ***argv)
inizializza il toolkit, passandogli i parametri scritti nella linea
di comando. Questa funzione deve essere usata dopo aver definito i
componenti.</p>
<p>GtkWidget *gtk_window_new(GtkWindowType windowtype)
crea una nuova finestra. Il tipo di finestra puó essere:</p>
<ul>
<li>GTK_WINDOW_TOPLEVEL</li>
<li>GTK_WINDOW_DIALOG</li>
<li>GTK_WINDOW_POPUP</li>
</ul>
<p>void gtk_widget_show(GtkWidget *widget)
viene usato per far apparire il componente nella finestra. Dopo
aver definito un componente e averne cambiato gli attributi bisogna
usare questa funzione.</p>
<p>void gtk_main(void)
prepara le finestre e tutti i componenti per farli apparire sullo schermo.
Questa funzione deve essere usata alla fine dei programmi GTK.</p>
<p>Usiamo un po' di proprietà della finestra, come titolo, dimensioni,
posizione, ...</p>
<p>void gtk_window_set_title(GtkWindow *window, const gchar *title)
viene usata per impostare o cambiare il titolo della <i>window</i>.
Il primo parametro della funzione è di tipo GtkWindow. Ma <i>window</i>
é di tipo GtkWidget. Durante la compilazione verremo avvisati di questo.
Anche se il programma compilato funziona, è meglio correggerlo.
GTK_WINDOW(GtkWidget *widget) viene usato per questo motivo.
Il secondo parametro <i>title</i> é di tipo gchar. gchar viene definito
nella libreria glib ed é la stessa cosa del tipo char.</p>
<p>void gtk_window_set_default_size(GtkWindow *window, gint
width, gint height)
imposta la dimensione di <i>window</i>. Come gchar, gint viene
definito in glib ed é la stessa cosa di int.</p>
La funzione
<p class="code">void gtk_window_set_position(GtkWindow *window,
GtkWindowPosition position)</p>
imposta la posizione di <i>window</i>.
<i>position</i> può essere:<br>
<br>
<ul>
<li>GTK_WIN_POS_NONE</li>
<li>GTK_WIN_POS_CENTER</li>
<li>GTK_WIN_POS_MOUSE</li>
<li>GTK_WIN_POS_CENTER_ALWAYS</li>
</ul>
<p>Ecco un esempio:</p>
<pre class="code">
#include <gtk/gtk.h>
int main( int argc,
char *argv[] )
{
GtkWidget *window;
gtk_init (&argc, &argv);
window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
gtk_window_set_title(GTK_WINDOW(window),"Ýlk Program");
gtk_window_set_position(GTK_WINDOW(window),GTK_WIN_POS_CENTER);
gtk_window_set_default_size(GTK_WINDOW(window),300,300);
gtk_widget_show (window);
gtk_main ();
return(0);
}
</pre>
<A NAME="295lfindex3"> </A>
<H2>Segnali ed Eventi</H2>
<p>Nelle GUI si possono usare mouse e tastiera, per esempio
si può clickare su un pulsante. Si deve quindi usare la seguente
funzione GTK:</p>
<p class="code">guint gtk_signal_connect_object(GtkObject
*object, const gchar *name, GtkSignalFu nc func, GtkObject
*slot_object);</p>
<p><i>object</i> é il componente che emette il segnale.
Per esempio, se volete sapere quando un pulsante viene clickato,
<i>object</i> sarà il pulsante. <i>name</i> è il nome dell'evento
e può essere:</p>
<ul>
<li>event</li>
<li>button_press_event</li>
<li>button_release_event</li>
<li>motion_notify_event</li>
<li>delete_event</li>
<li>destroy_event</li>
<li>expose_event</li>
<li>key_press_event</li>
<li>key_release_event</li>
<li>enter_notify_event</li>
<li>leave_notify_event</li>
<li>configure_event</li>
<li>focus_in_event</li>
<li>focus_out_event</li>
<li>map_event</li>
<li>unmap_event</li>
<li>property_notify_event</li>
<li>selection_clear_event</li>
<li>selection_request_event</li>
<li>selection_notify_event</li>
<li>proximity_in_event</li>
<li>proximity_out_event</li>
<li>drag_begin_event</li>
<li>drag_request_event</li>
<li>drag_end_event</li>
<li>drop_enter_event</li>
<li>drop_leave_event</li>
<li>drop_data_available_event</li>
<li>other_event</li>
</ul>
<p><i>func</i> è il nome della funzione che verrà richiamata
quando accadrà l'evento. Ecco un esempio:</p>
<pre class="code">
#include <gtk/gtk.h>
void close( GtkWidget *widget,gpointer *data)
{
gtk_main_quit();
}
int main( int argc,char *argv[] )
{
GtkWidget *window;
gtk_init (&argc, &argv);
window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
gtk_signal_connect (GTK_OBJECT (window), "destroy",
GTK_SIGNAL_FUNC (close), NULL);
gtk_widget_show (window);
gtk_main ();
return(0);
}
</pre>
La funzione
<p class="code">gtk_signal_connect (GTK_OBJECT (window),
"destroy", GTK_SIGNAL_FUNC (close), NULL)</p>
rimane in ascolto di ricevere l'evento di distruzione della finestra.
Quando si tenta di chiudere la finestra viene chiamata la funzione
<i>close</i>. La funzione <i>close</i> chiama gtk_main_quit() e
il programma finisce.<br>
<br>
<p>Piú avanti verranno spiegati i dettagli dei segnali e degli eventi.</p>
<A NAME="295lfindex4"> </A>
<H2>Un normale bottone</H2>
<p>I bottoni vengono generalmente usati per fare determinate azioni
quando vengono clickati. In GTK ci sono due modi per creare i bottoni:</p>
<ol>
<li>GtkWidget* gtk_button_new (void);</li>
<li>GtkWidget* gtk_button_new_with_label (const gchar
*label);</li>
</ol>
<p>La prima funzione crea un bottone senza etichetta (non c'è scritto
niente dentro il bottone). La seconda crea un bottone con un'etichetta
(<i>label</i> viene scritto nel bottone).</p>
<p>Qui useremo una nuova funzione:</p>
<p class="code">void gtk_container_add(GtkContainer
*container, GtkWidget *widget)</p>
<p>Usando questa funzione é possibile fare in modo che un bottone
(o genericamente un qualsiasi componente) appaia in una finestra
(o genericamente un qualsiasi contenitore). Nel prossimo esempio
il contenitore é una finestra e il componente é un bottone.
Piú avanti impareremo di piú sui contenitori.</p>
<p>La cosa piú importante riguardo i bottoni è sapere se sono
stati clickati o meno. Anche qui si usa la funzione gtk_signal_connect.
Questa volta chiameremo un'altra funzione che verrà eseguita "dietro"
il bottone. Ecco un esempio:</p>
<pre class="code">
#include <gtk/gtk.h>
void close( GtkWidget *widget,gpointer *data)
{
gtk_main_quit();
}
void clicked(GtkWidget *widget,gpointer *data)
{
g_print("Button Clicked\n");
}
int main( int argc,char *argv[] )
{
GtkWidget *window,*button;
gtk_init (&argc, &argv);
window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
gtk_signal_connect (GTK_OBJECT (window), "destroy",
GTK_SIGNAL_FUNC (close), NULL);
button=gtk_button_new_with_label("Button");
gtk_container_add(GTK_CONTAINER(window),button);
gtk_signal_connect(GTK_OBJECT(button),"clicked",
GTK_SIGNAL_FUNC(clicked),NULL);
gtk_widget_show(button);
gtk_widget_show(window);
gtk_main ();
return(0);
}
</pre>
<!-- 2pdaIgnoreStart -->
<A NAME="talkback"> </a>
<h2>Discussioni su quest'articolo</h2>
ogni articolo possiede una sua pagina di discussione, da questa pagina puoi inviare un commento o leggere quelli degli altri lettori:
<center>
<table border="0" CELLSPACING="2" CELLPADDING="1" summary="tb-button-outerpart">
<tr BGCOLOR="#C2C2C2"><td align=center>
<table border="3" CELLSPACING="2" CELLPADDING="1" summary="tb-button">
<tr BGCOLOR="#C2C2C2"><td align=center>
<A href="http://cgi.linuxfocus.org/cgi-bin/lftalkback?anum=295"><b> pagina di discussione </b></a>
</td></tr></table>
</td></tr></table>
</center>
<HR size="2" noshade>
<a style="background-color:#bdc6d5" href="index.shtml"><--, torna all'indice di questo numero </a><br><HR size="2" noshade>
<!-- ARTICLE FOOT -->
<CENTER><TABLE WIDTH="98%" summary="footer">
<TR><TD ALIGN=CENTER BGCOLOR="#bdc6d5" WIDTH="50%">
<A HREF="../../common/lfteam.html">Webpages maintained by the LinuxFocus Editor team</A>
<BR><FONT COLOR="#FFFFFF">© Özcan Güngör, <a href="../../common/copy.html">FDL</a> <BR><a href="http://www.linuxfocus.org">LinuxFocus.org</a></FONT>
</TD>
<TD BGCOLOR="#bdc6d5">
<!-- TRANSLATION INFO -->
<font size=2>Translation information:</font>
<TABLE summary="translators">
<tr><td><font size="2">tr --> -- : Özcan Güngör <small><ozcangungor(at)netscape.net></small></font></td></tr>
<tr><td><font size="2">tr --> en: Özcan Güngör <ozcangungor(at)netscape.net></font></td></tr>
<tr><td><font size="2">en --> it: Alessandro Pellizzari <alex(at)neko.it></font></td></tr>
</TABLE>
</TD>
</TR></TABLE></CENTER>
<p><font size=1>2004-08-01, generated by lfparser version 2.46</font></p>
<!-- 2pdaIgnoreStop -->
</BODY>
</HTML>