coM
Glade 3 Tutorial
contenido
• Glade-3 tutorial
• Introducción
• La construcción de la interfaz
• Tamaño de la negociación
• GtkTreeView datos back-end
• Modificación de árbol de widgets
• Señales
En la siguiente serie de mensajes voy a tratar de mostrar algunas de las técnicas que utilizan
personalmente al desarrollo de aplicaciones utilizando Glade3.
Nuestra aplicación muestra será sencillo, pero totalmente funcional visor gráfico y editor. Las cosas que
voy a demostrar a través de esta aplicación de ejemplo son:
• ¿Cómo acercarse a nuevo proyecto que va a utilizar Glade3 como diseñador de interfaz gráfica
de usuario.
• Cómo utilizar Glade3 para crear elementos visuales de la aplicación.
• Cómo utilizar Glade3 para crear objetos de almacenamiento de datos para su aplicación.
• ¿Cómo conectar las funciones de devolución de llamada a las señales de los widgets.
• Cómo dibujar en los widgets con la biblioteca de gráficos Cairo.
• Cómo utilizar Pango de El Cairo con pangocairo.
• Cómo crear menús basados en la acción y la barra de herramientas.
Puedo añadir otras cosas a esta lista si el interés / necesidad.
Voy a hacer mi mejor esfuerzo para escribir este tutorial "recién llegado a GTK +" amable y tratar de
explicar casi todo lo que voy a hacer. Los usuarios experimentados pueden morir de aburrimiento al
leer una sección que explica algo fundamental, así que por favor, si usted es GTK + gurú, lea esta serie
con precaución;).
Www.amistosamentelinux.blogspot.coM
Primeros pasos
OK, ya que parece que me dio la oportunidad de mostrar cómo suelen trabajar, vamos a empezar.
Ahora viene la parte divertida - interfaz de dibujo. Yo prefiero hacer esto en papel con lápiz, pero se
siente libre para experimentar. Para proyecto de ejemplo, se me ocurrió con este diseño:
Oscuro rectángulos grises representan las barras de desplazamiento. ¿Qué piensa usted? No soy muy
malo como diseñador de interfaz o lo que realmente aspirar como diseñador de interfaz;)
Ya por la última cosa que necesitamos hacer hoy: escribir árbol de widgets. En GTK +, todo empieza
Www.amistosamentelinux.blogspot.coM
con la de nivel superior GtkWindow , que servirá como una raíz de nuestro árbol de widgets.
Nuestra ventana principal se divide en cuatro secciones verticales: una para la barra de menú, uno para
la barra de herramientas, una para la parte central donde toda la acción va a suceder y una última para
la barra de estado. Desde nuestra ventana principal ( GtkWindow ) sólo puede tener un control hijo,
necesitamos GtkVBox en que embalamos, de abajo hacia arriba: GtkStatusbar , widget para la parte
central, GtkToolbar y GtkMenuBar . ¿Por qué digo que vamos a estar de embalaje de la parte inferior?
Voy a explicar esto en el próximo post, cuando vamos a estar jugando con Glade3.
Parte central tendrá que ser dividida en secciones horizontales: uno para la tabla de datos, uno de los
controles y un punto para el área de visualización. Así que para ello será necesario GtkHBox . ¿Qué
widgets que necesitamos dentro de ella? Para la tabla de datos que usaremos GtkTreeView , que está
lleno el interior GtkScrolledWindow para poder desplazarse. Para los controles de los puntos que
necesitaremos GtkVButtonBox que albergará nuestros botones.
Ahora para el área de visualización. Volvemos a tener dos partes: la parte superior que en realidad
visualización de cartas, y parte inferior que se sostenga los botones de verificación. Así que vamos a
necesitar otra GtkVBox para sostener toda la sección. La parte inferior estará representado por
GtkHButtonBox con GtkToggleButtons, mientras que la parte superior merece otro párrafo;).
¿Por qué otro párrafo? Debido a que tendrá que añadir un buen widgets pocos con el fin de obtener la
disposición deseada. Como se puede ver en mi dibujo, quiero tener área gráfica centrada en parte de la
pantalla. Con el fin de poder agregar zoom en gráficos de áreas, también es necesario algún tipo de
widget de desplazamiento. Y cómo montar todo esto? En primer lugar vamos a añadir
GtkScrolledWindow a GtkVBox en el apartado anterior. Para hacer el contenido desplazable, que
necesitamos para empacar GtkViewport dentro GtkScrolledWindow . Dentro GtkViewport vamos a
añadir GtkAlignment , que se encargará de centrar el área de gráfico. Dentro GtkAlignment vamos a
añadir GtkFrame , que añadir una sombra al gráfico de áreas. Por último, añadimos GtkDrawing área
dentro GtkFrame . Y hemos terminado.
Sólo hay una cosa que me gustaría explicar hoy. Al agregar GtkTreeView a GtkScrolledWindow no he
utilizado GtkViewport como un adaptador de flash, al tiempo que añade GtkAlignment exigía una. ¿Por
qué? Cuando se trata de GtkScrolledWindow , hay dos tipos de reproductores: los que el
desplazamiento de apoyo de forma nativa y los que no lo hacen. GtkTreeView , GtkTextView ,
GtkIconView y GtkViewport hacer desplazamiento de apoyo y se puede agregar en
GtkScrolledWindow directamente. Todos los otros widgets necesidad GtkViewport como un adaptador.
Espero que esta lección de partida no era demasiado difícil y usted conmigo la próxima vez vamos a
arrancar Glade3 y hacer algo de planchado de la propiedad.
En esta parte del tutorial, vamos a crear Glade3 aplicación GUI utilizando de acuerdo a nuestro modelo
y el árbol de widgets. Para comprobar cómo nuestra interfaz gráfica de usuario se parece, también
vamos a escribir una aplicación minimalista.
Voy a estar utilizando Glade3-3.6.7 en este tutorial, pero cualquier versión de 3.6 serie hará. Nuestro
proyecto se guardará como un proyecto GtkBuilder y usaremos GtkBuilder para crear nuestra interfaz
en tiempo de ejecución. Glade3-3.4.5 no se puede utilizar al seguir este tutorial, ya que vamos a utilizar
algunas nuevas características de Glade3 que se introdujeron en el 3,6 serie.
La construcción de la interfaz
Traté de documentar cada paso en la creación de interfaz gráfica de usuario con pantalla e
instrucciones. Video del proceso real se puede encontrar en el sitio ScreenToaster .
Al iniciar Glade3 sin necesidad de abrir proyecto, es recibido por dos ventanas: la ventana principal de
la aplicación que va a utilizar para crear la interfaz y diálogo de preferencias que permite configurar
algunos parámetros del proyecto.
Www.amistosamentelinux.blogspot.coM
Usted puede ver en esta pantalla que vamos a estar utilizando GtkBuilder formato de proyecto con los
nombres de objeto que se está únicos a través de todo el proyecto. No vamos a estar usando alguna de
las imágenes en este proyecto, por lo localización de recursos no es importante para nosotros. Por
último, este proyecto será compatible con GTK +> = 2.14, lo que debería hacer posible su utilización
en la mayoría de distribuciones que hay. Usted puede revisar su proyecto para las incompatibilidades de
este cuadro de diálogo también, pero ya estamos empezando poject nuevo, esto no es necesario. Lo
último es hacer clic en Cerrar y hemos terminado con la configuración inicial.
Ahora es el momento para colocar ventana principal en el proyecto inicial. Simplemente haz clic en
"Ventana" en el icono "Toplevels categoría y usted debería ver algo como esto:
Www.amistosamentelinux.blogspot.coM
Ahora vamos a configurar título de la ventana a la "Carta" y el tamaño por defecto de 600 x 400 px.
Www.amistosamentelinux.blogspot.coM
Ahora tenemos que cambiar a "común" ficha en la sección propiedades y establecer "ancho de la
frontera" a 6 px.
Lo último que tenemos que hacer con la ventana principal es conectar la función gtk_main_quit a
"destruir" la señal. Esto cerrará nuestra aplicación cuando usted haga clic en el botón de cierre. Voy a
hablar más acerca de las señales en uno de los siguientes puestos, por lo que ningún detalle se le dará
aquí.
Www.amistosamentelinux.blogspot.coM
Con nuestra ventana principal terminado, tenemos que añadir GtkVBox a ella. En el post anterior, nos
propusimos añadir cuatro widgets dentro de este cuadro, pero como barra de menús y barra de
herramientas se pueden crear utilizando GtkUIManager y insertados manualmente desde el código,
sólo se necesitan dos. Así que cuando se nos pide sobre el número de elementos, escriba 2.
Www.amistosamentelinux.blogspot.coM
Ahora vamos a añadir la barra de estado de la aplicación. Haga clic en icono de la barra de estado y la
inserta en la parte inferior de la caja. Su interfaz gráfica de usuario debe ser parecido a esto:
Ahora tenemos que asegurarnos de que la barra de estado está lleno de abajo hacia arriba. ¿Por qué es
importante esto? Si queremos empacar barra de estado de arriba a abajo, sería imposible añadir menús
y barra de herramientas en la parte superior de la solicitud. ¿Cómo asegurar que la barra de estado está
lleno de abajo hacia arriba? Seleccione "Embalaje ficha" y seleccionar "End" como el tipo de paquete y
ajuste "de posición" a 0. ¿Qué hace esto? Se instruye a Glade para empacar barra de estado como
primer elemento de abajo hacia arriba.
Www.amistosamentelinux.blogspot.coM
Siguiente es una caja horizontal que celebrará tres widgets. Creación de una es exactamente lo mismo
que crear caja vertical. No te olvides de ajustar el tipo de paquete de esta casilla para "Fin" demasiado!
Www.amistosamentelinux.blogspot.coM
Inserción de vista de árbol en ventana de desplazamiento es fácil. Haga clic en el icono de vista de
árbol e insertarlo en ventana de desplazamiento. Cuando se le preguntó sobre el modelo TreeView, deje
el campo vacío y haga clic en Aceptar (vamos a estar tratando con esto cuando vamos a añadir
almacenamiento de datos a nuestra aplicación).
Www.amistosamentelinux.blogspot.coM
Dentro de segundo campo de caja horizontal va caja de botones vertical que tendrá botones para
modificar los datos dentro de la vista de árbol. Vamos a necesitar seis botones dentro de este cuadro:
"moverse hacia arriba", "hacia arriba", "añadir", "eliminar", "modo de abajo" y "moverse hacia abajo".
Así que cuando nos preguntó sobre el número de campos al crear caja de botones verticales, entramos 6
y haga clic en Aceptar. A continuación, tenemos que modificar algunas de las propiedades de la caja de
botones. Vamos a fijar el "estilo de diseño" para "Centro", "espacio" a 2 y "homogénea" a "Sí".
Www.amistosamentelinux.blogspot.coM
En "embalaje" ficha, hemos creado la "Expandir" propiedad "no", ya que queremos que los botones
para tener el menor espacio posible.
Www.amistosamentelinux.blogspot.coM
Creación de botones es muy sencillo. Simplemente haga clic en icono del botón y colocarla en el
espacio apropiado. Ahora, bajo la búsqueda pestaña "General" por "el botón de archivo" y en "Top"
(Glade convertirá icono que seleccione al nombre de archivo automáticamente los elementos, así que
no te preocupes por lo que está escrito en el campo de archivo del botón).
Utilizando exactamente los mismos pasos que crear otros cinco botones. Iconos para ellos debe ser
"Up", "Agregar", "Eliminar", "Down" y "Abajo".
Última campo vacío en caja horizontal debe ser, según nuestro árbol de widgets, lleno de caja vertical
que albergará dos widgets hijos. El resultado final debería ser algo como esto:
En el interior del compartimiento inferior, tenemos que añadir caja de botones horizontales por dos
botones de alternar. También vamos a establecer "el estilo de diseño" para "Centro", "espacio" a 2 y
"homogénea" a "Sí".
Www.amistosamentelinux.blogspot.coM
En envase, ponga "Expandir" propiedad "no", ya que queremos que esta sección para tener el menor
espacio posible.
Agregar botones de este cuadro es muy similar a la adición a la caja vertical. Pero vamos a añadir
botones de activación aquí en lugar de las normales. Simplemente haga clic en Comprobar icono del
botón y la inserta en el espacio vacío dentro de la caja botón. Después de eso, cambiar la etiqueta del
botón de "Mostrar puntos". Repita los pasos para crear el botón de verificación segundo y etiqueta
cambia a "Mostrar líneas".
Www.amistosamentelinux.blogspot.coM
La parte superior de la caja vertical albergará ventana de desplazamiento. Añadir exactamente lo mismo
que hemos añadido la parte de datos. Dentro de esta ventana de desplazamiento que tenemos que
insertar vista.
Www.amistosamentelinux.blogspot.coM
Siguiente en el árbol de widget es la alineación que se encargará de centrar el área de dibujo. Crear una
es muy sencillo: simplemente haga clic en el icono de alineación y la inserta en ventanilla. También
tenemos que modificar los valores de escala horizontal y vertical. Los de control de dos de la expansión
del control hijo. El valor 1 significa "hijo Ampliar la medida de lo posible", 0 significa "no ampliar a
todos los niños", mientras que 0.4 significa "hijo Expandir para tomar 40% del tamaño asignado".
Vamos a fijar ambos valores a 0, ya que queremos que nuestros niños a ser constante en el tamaño.
Www.amistosamentelinux.blogspot.coM
marco de Inserción tiene algo de trabajo en nuestro caso, ya que Glade3 hace algunas cosas por defecto
que no necesitamos. Haga clic en icono del marco y la inserta en la alineación. Cambiar "sombra del
marco" a "In" y que debe terminar con algo como esto:
Y nos quedamos con un solo flash de paquete: área de dibujo. Haga clic en el icono y la inserta en el
compartimiento inferior del marco (de arriba se deja vacío, ya que no queremos ninguna etiqueta). En
"común", la solicitud de tamaño conjunto de widgets de 300 x 200 px y ya está.
Www.amistosamentelinux.blogspot.coM
Sólo hay una cosa por hacer para hoy: guardar y probar esta interfaz gráfica de usuario. Vamos a
escribir aplicaciones C muy simple para esta tarea. No voy a explicar mucho sobre el código de hoy, ya
que vamos a tratar con la codificación de mensajes más tarde, pero la mayor parte del código debe ser
fácil de entender.
?
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span
class="google-src-text" style="direction: ltr; text-align:
left">/*</span> / *</span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span
class="google-src-text" style="direction: ltr; text-align: left">*
Compile me with:</span> * Recopilar mí con:</span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span
class="google-src-text" style="direction: ltr; text-align: left">*
gcc -o tut tut.c $(pkg-config --cflags --libs gtk+-2.0 gmodule-
2.0)</span> * Gcc-o tut tut.c $ (pkg-config - cflags - libs gtk +
-2.0 GModule-2.0)</span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span
class="google-src-text" style="direction: ltr; text-align:
left">*/</span> * /</span>
salir de la aplicación.</span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span
class="google-src-text" style="direction: ltr; text-align: left">*
Replace "tut.glade" with your saved project.</span> * Reemplace
"tut.glade" con su proyecto guardado.</span> <span
onmouseover="_tipon(this)" onmouseout="_tipoff()"><span
class="google-src-text" style="direction: ltr; text-align:
left">*/</span> * /</span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span
class="google-src-text" style="direction: ltr; text-align:
left">if( ! gtk_builder_add_from_file( builder, "tut.glade", &error )
)</span> if (! gtk_builder_add_from_file (constructor, "tut.glade", y
error))</span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span
class="google-src-text" style="direction: ltr; text-align:
left">{</span> {</span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span
class="google-src-text" style="direction: ltr; text-align:
left">g_warning( "%s", error->message );</span> g_warning ("% s",
mensaje de error->);</span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span
class="google-src-text" style="direction: ltr; text-align:
left">g_free( error );</span> g_free (error);</span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span
class="google-src-text" style="direction: ltr; text-align:
left">return( 1 );</span> retorno (1);</span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span
class="google-src-text" style="direction: ltr; text-align:
left">}</span> }</span>
Y hemos terminado. Si necesita más detallada el proceso de hacer clic / cambiar las propiedades, la
cabeza de sitio ScreenToaster , donde se puede ver el video de todo el asunto. Esperamos que sea de
utilidad.
Www.amistosamentelinux.blogspot.coM
La última vez que hemos conseguido crear inicial GUI para nuestra "Carta" de la aplicación. Hoy
vamos a tratar de hacerlo más flexible. Voy a explicar algunas cosas fundamentales sobre el proceso
tamaño de la primera negociación, y después de esta introducción, vamos a jugar un poco con Glade.
Saber GTK + se encarga de tamaño widget es una de las cosas más importantes si se desea crear
interfaces gráficas de usuario limpia y eficiente. Llamé a este proceso de negociación, ya que hay dos
procesos que contribuyen al resultado final: el tamaño y la solicitud de asignación de tamaño.
Tamaño requistion etapa puede ser visto como recursiva "¿Cuánto espacio necesita?" que se trate.
ventana principal hacer esta pregunta es infantil, reproductores niño pregunta a sus hijos, ... Este
proceso termina cuando todos los widgets en el árbol respondió. En nuestro caso este proceso es el
siguiente:
Www.amistosamentelinux.blogspot.coM
1. widgets niño no sabe nada sobre las preferencias de tamaño de los padres
2. Padres bases de su tamaño en los tamaños de la misma de los niños
Ahora que la ventana principal sabe cuánto espacio se necesita en condiciones ideales, que decide la
cantidad de espacio en realidad estará disponible. Si etapa de solicitud devuelto un valor razonable,
esto es lo que ususally utilizado. Pero si cambia manualmente petición del tamaño de la ventana de
nivel superior (gtk_window_set_default_size utilizando, por ejemplo) o por cualquier otra razón pidió
el tamaño no se puede utilizar, ventana deséchelo y use uno diferente.
Y aquí es donde comienza la segunda etapa: la asignación. Esto puede ser visto también como un
símbolo: "Aquí tienes un poco de espacio, hacer lo que tiene que hacer para encajar en él." que se
transmite de padres a hijos. Y si el widget tiene más de un hijo, es también responsable de dividir
correctamente el espacio disponible entre los que los hijos. Recuerda esto, ya que esto es muy
importante para las cosas que vienen a continuación.
Widget de embalaje
No voy a hablar sobre el embalaje mucho aquí, ya que este tema está muy bien representada en GTK +
tutorial oficial. Y ahora es el momento para que usted pueda ir allí y leer la sección de embalaje: GTK
+ tutorial - Reproductores de embalaje .
Terminado de leer? Buena. Ahora bien, ¿son todas estas opciones diferentes coloca dentro de Glade? Se
pueden encontrar en dos lugares distintos:
1. "General" del widget contenedor contiene opciones que se establecen en widget contenedor en
sí (por ejemplo sería "homogéneo" de propiedad de GtkVBox o "el espacio entre columnas" de
GtkTable.
2. "Embalaje" ficha de widget que se va a agregar en el recipiente contiene opciones que se
establece en tiempo de inserción (en el código, los parámetros se establecen mediante *
gtk_box_pack_ y gtk_table_attach familia de funciones.
Si las cosas relativelly claro ahora? Si no, intente volver a crear ejemplos de embalaje de Glade3
tutorial utilizando. Esta es una gran práctica para obtener el código <-> Conexiones de Glade3
correctamente configurado.
Y finalmente llegamos al punto donde vamos a hablar sobre el problema con nuestra aplicación - el
cambio de tamaño está mal;). Pero antes de llegar demasiado excitados y empezar a editar nuestra
interfaz, vamos a poner algunos de los nuevos conocimientos al trabajo.
Vamos a describir cómo caja horizontal central determina los tamaños de la misma de los niños. Tomé
una captura de pantalla de dos casos de nuestra aplicación, ejecutando al mismo tiempo. Yo les cambia
el tamaño y mide las partes de la caja horizontal. Se puede ver que la parte central con botones
conservado su anchura, mientras que otras dos partes ganó la misma cantidad de espacio. ¿Por qué es
Www.amistosamentelinux.blogspot.coM
esto así? Esto se debe a la segunda parte del proceso de negociación tamaño. widget padre asignado un
poco de espacio extra para la caja horizontal y la caja que luego se divide el espacio adicional entre los
que es chilren con ampliar la propiedad en el.
Ahora estamos listos para empezar a fijar nuestra aplicación, haciendo parte izquierda de la aplicación
de un tamaño fijo. Puesta en marcha claro, el proyecto de la carga y haga clic en ventana de
desplazamiento a la izquierda.
Www.amistosamentelinux.blogspot.coM
Ahora ve a "común" y solicitar ficha ancho establecido a 150 px. Esto asegurará que widget desplaza
siempre pide 150 px de ancho espacio de los padres.
Pero esto no es suficiente para que nuestro lado izquierdo fijo, dado que las solicitudes tamaño sólo
especificar la cantidad mínima de espacio que este widget necesidades. Es completamente legal para
Www.amistosamentelinux.blogspot.coM
asignar más espacio para ella. Para asegurarse de que la ventana se desplaza exactamente 150 px, es
necesario modificar su embalaje demasiados parámetros. Abrir "embalaje" ficha y ajuste "Expandir"
propiedad "no".
Con las cosas como aquí, cualquier espacio extra que se destinará a caja horizontal se añadirá al área de
visualización. Guarde el proyecto y ejecute la aplicación de ejemplo. Por cierto, no es necesario que lo
vuelva a compilar para ver los cambios, ya que sólo ha cambiado el archivo glade, que se carga en
tiempo de ejecución. Ver cómo reacciona nuestro GUI para cambiar el tamaño de ahora?
Www.amistosamentelinux.blogspot.coM
Y con esto concluye hoy parte de tutorial. Siéntase libre de experimentar con diferentes opciones de
embalaje. archivo glade final del tutorial de hoy se puede descargar desde aquí (asegúrese de que
cambie su nombre por tut.glade antes de intentar ejecutar nuestra aplicación de ejemplo).
Estáis todos invitados a unirse a mí la próxima vez, cuando vamos a añadir almacenamiento de datos
para ver a los árboles y algunos botones de conectar con sus señales.
En primer lugar, tengo que decirles que no vamos a conectar cualquier devoluciones de llamada en la
actualidad. Yo sabía que prometió esta última vez, pero simplemente no tenemos los datos para
manipular las devoluciones de llamada en el interior. Entonces, ¿qué vamos a hacer hoy? Bueno, la
adición de los datos parece una buena idea;)
Antes de empezar a hacer algo, tenemos que saber algunas cosas acerca de cómo opera GtkTreeView.
La información sobre esto se puede encontrar en documentación de la API y en GtkTreeView tutorial .
Yo aconsejo que lea estas dos referencias, si estás empezando con el código con GTK +.
Si usted no tiene tiempo para leer los dos en su totalidad, voy a sólo suma rapidez el contenido:
1. GtkTreeView es básicamente recipiente que contiene columnas y proporciona una superficie en
la que los procesadores de celdas recurrir.
2. GtkCellRenderer objeto que se dibuja en su interior vista de árbol sobre la base de los datos
dentro de almacenamiento backend.
3. GtkTreeModel es la interfaz que cualquier almacén de datos debe aplicar si quiere ser utilizado
como una base de datos back-end para ver los árboles.
4. GtkTreeStore GtkListStore y dos almacenes de datos que implementan la interfaz
GtkTreeModel y forman parte de GTK + en sí.
Tenga esto en cuenta ya que es crucial para entender exactamente lo que vamos a hacer con claro.
Cargar proyecto última forma de destino en Glade. Ahora desplácese hacia abajo catálogo flash hasta
que aparezca "Árbol modelo" parte. Ampliar y haga clic en "Lista de la tienda" icono. Nueva entrada
aparecerá en "objetos" dentro de árbol de objetos.
Usted probablemente querrá cambiar el tamaño de panel de la derecha para obtener más espacio para
almacenar las propiedades de edición de lista. Vamos a hacer dos cosas ahora:
1. Definir número de columnas dentro de la tienda lista y sus tipos
2. Agregue un poco de datos de ejemplo para almacenar la lista para fines de demostración
Número de columnas y sus tipos se definen en la parte superior de la pestaña "General". Simplemente
comienza a escribir en el campo adecuado para agregar nueva columna. columnas ¿Qué necesitamos?
Ya que estamos en desarrollo de aplicaciones de gráficos, vamos a necesitar una columna que
contendrá las coordenadas X de los puntos, una columna para sostener las coordenadas y una columna
de etiqueta opcional que se puede agregar a la punta. Los tipos de las columnas se gdouble de
coordenadas X e Y y gchararray etiqueta para la columna (gchararray es sólo otro nombre para "gchar
*" que se registra utilizando GType sistema).
Ahora vamos a añadir algunos datos de ejemplo para almacenar la lista. Desplácese hacia abajo para
exponer parte de inserción de datos, añadir seis filas con el botón más y llenar con los datos de esta
manera:
+-------+-------+---------------------+
| - 4,5 | - 2 | Inicio |
| - 3 | - 1,5 | |
Www.amistosamentelinux.blogspot.coM
| - 1,5 | - 1 | |
| 0 | - 0,5 | eje intersección |
| 1.5 | 0 | intersección del eje X |
| 3 | 0.5 | Final |
+-------+-------+---------------------+
A continuación, necesitamos conectar vista de árbol y almacenar la lista. Seleccione vista en árbol y en
"General", haga clic en el botón ficha con "..." junto al "modelo TreeView" sobre el terreno. Dentro de
diálogo emergente seleccionar "liststore1" y haga clic en "Aceptar".
Ahora tenemos que agregar columnas a la vista de árbol que contendrá los procesadores de celdas.
Cuando seleccionamos vista de árbol, el nuevo icono con la etiqueta "Editar ..." aparecerá al final de la
barra de herramientas. Al hacer clic se abrirá una nueva ventana con el editor de vista de árbol.
Dentro de "General" de la vista de árbol Editor podemos ver algunos datos que ya han entrado antes.
Para crear piezas de exhibición de vista de árbol, tenemos que cambiar a "Jerarquía" ficha, donde se
nos presenta con una gran cantidad de espacio vacío;). Para agregar nueva columna, haga clic en
"Añadir columna de botón y de nuevo se añadirá al jardín izquierdo, con sus propiedades que aparecen
en el campo rigth. Vamos a cambiar el título de la columna de "X" y todo esto es que vamos a hacer
con esta columna.
Ahora haga clic en la columna recién creada y seleccione "Agregar niño elemento Spin", que se
sumarán GtkCellRendererSpin nuevo a la jerarquía. Ahora tenemos que volver a cambiar algunas
propiedades. Pero como cambiar las propiedades de procesador de celdas es un poco diferente que las
propiedades cambiantes de los objetos normales, voy a explicar esto un poco más en detalle.
Si nos fijamos en el editor de propiedades, te darás cuenta de que se compone de cuatro columnas: la
primera columna tiene el botón de verificación, segunda columna contiene el nombre de propiedad, la
tercera columna tiene botón giratorio y última columna tiene un cuadro combinado. ¿Por qué cosas tan
Www.amistosamentelinux.blogspot.coM
complejas? Debido a que los procesadores de celdas pueden tener sus propiedades establecidas en dos
formas diferentes: a nivel mundial, lo que significa que esta propiedad será el mismo para todas las
líneas que dibuja procesador de celdas, o en función de cada línea, lo que significa que la propiedad se
almacena en el interior datos de backend y se lee desde allí para cada línea.
¿Cómo estos dos métodos mapa en editor de la propiedad? Compruebe los controles de botón si la
propiedad se establece por línea o global (activa el botón de verificación medios por línea, inactivo
medio global). Cuando abrimos una propiedad en un caso por caso, debemos informar de procesador de
celdas en las que la columna del almacén de datos son los valores de esta propiedad almacenados, y
podemos utilizar el botón para girar directamente el número de columna de entrada o un cuadro
combinado para seleccionar la columna sobre la base de la etiqueta que le asigna en la construcción de
almacén de la lista. Cuando abrimos una propiedad en una escala global, girar el botón y el cuadro
combinado están ocultos y nos widget regulares edición de propiedades en su lugar.
Ahora vamos a configurar nuestro procesador de celdas de centrifugado. En primer lugar la propiedad
que estamos goint establecer es "Texto". Queremos mostrar los valores de los datos back-end, así que
vamos a dejar el botón de verificación activada y establecer la columna, de la que esta propiedad tendrá
que los valores de la columna X-coords.
En segundo lugar la propiedad que vamos a configurar es el "ajuste" de propiedad. Vamos a ponerlo en
una escala global, ya que queremos que todas las líneas que tienen el mismo rango de valores
disponibles. Así que tenemos que quitar la garrapata del botón de verificación y luego haga clic en el
botón con "..." y crear el nuevo ajuste (que no tienen todavía, así que lo creó).
última propiedad que vamos a configurar es "modificable". Una vez más, voy a establecer Globaly en
"Sí", ya que queremos que todos nuestros coordenada X células que se pueden editar.
Ahora tenemos que crear otra columna de las coordenadas. El proceso es exactamente el mismo que
antes:
• haga clic en la columna X y seleccione "Agrega el artículo de la columna"
• cambiar el título a "Y"
• haga clic derecho en la columna Y y seleccione "Agregar niño elemento Spin"
• Ajustar las propiedades exactamente igual que antes (cuando se configura "texto" de propiedad,
slect clumns Y coordenadas como fuente de valores y cuando se establezca la propiedad
"ajuste", no se crea uno nuevo, sólo la reutilización ajuste1 que hemos creado para el
procesador de giro X)
Www.amistosamentelinux.blogspot.coM
La última columna que tenemos que añadir llevará a cabo las etiquetas de punto. Una vez más, haga
clic en la columna Y y seleccione "Agrega el artículo de la columna". Hemos establecido que la
propiedad del título de "Etiqueta". Ahora haga clic derecho en columnas de etiquetas y seleccione
"Agregar texto niño &qout; tema en el procesador de texto, establezca" texto "de propiedad a la
columna de etiquetas y" editable "propiedad Globaly en" Sí ".
Hay una última cosa que necesitamos hacer: ajustar las propiedades de ajuste1 que hemos creado al
configurar las propiedades de botón de número. Cerca del árbol editor de la vista y seleccione ajuste1
de árbol de objetos. Ahora ajustar el valor mínimo de -5,000, valor máximo en 5000, incremento de
paso de 0,1, el incremento de la página a 10 y de tamaño de página a 0 (sólo ajustes que están
conectados a la barra de desplazamiento deben tener a cero el tamaño de página).
Usted puede ver que los valores que hemos entrado en el almacén de la lista se muestran ahora dentro
de la vista de árbol. Pero tenemos un problema: las etiquetas no son visibles porque nos pusimos
petición del tamaño de la ventana de desplazamiento demasiado bajo. Pero ¿cómo podemos determinar
la cantidad de espacio que necesitamos en diferentes temas con diferentes tamaños de fuente? La
respuesta es: "No podemos.". Y es por eso que vamos a modificar nuestra interfaz gráfica de usuario en
la parte siguiente de este tutorial y hacerlo más flexible.
Como de costumbre, usted puede conseguir el último archivo de glade o ver screencast .
Www.amistosamentelinux.blogspot.coM
Glade3-3.6.7 tiene algunos problemas con la carga de proyectos que utilizan células configuración de
algo complejo procesador. En nuestro caso, la parte problemática es el ajuste de los botones de giro. Se
dará cuenta de que cuando se carga este proyecto la próxima vez, la propiedad de ajuste se marcarán
como se establece en base por línea (véase la imagen para más detalles). Todo lo que tienes que hacer
es eliminar los controles y que debería estar bien. Este error ya está corregido en la versión git, así que
todo lo que tenemos que hacer es esperar a la próxima versión.
La última vez que hemos añadido los datos de back-end para nuestra aplicación, pero descubrimos al
final que nuestra interfaz gráfica de usuario no es suficientemente flexible. Vamos a arreglar que en la
actualidad mediante la adición de flash con panel en árbol de widgets y vuelva a colocar los botones de
imagen y etiqueta con botones de imagen solamente.
Vamos a hacer algunos cambios en el árbol de widgets. Haremos los cambios en el papel primero y de
que vamos a crear nuestro plan de modificación. Y aquí están viejos y nuevos árboles widget:
Www.amistosamentelinux.blogspot.coM
¿Qué pasos tenemos que hacer para transformar viejo árbol (en el lado izquierdo de la imagen) en el
nuevo árbol (en el lado derecho)?
1. Añadir GtkHPaned como padre de GtkHBox
2. Reparent área de visualización de GtkHBox GtkHBox a GtkHPaned
3. Añadir GtkAlignment como padre de GtkVButtonBox
4. Vuelva a colocar GtkVButtonBox con GtkVBox
5. Reemplace los artículos de stock en los botones con imágenes sólo disponible inmediatamente
También tendrá que ajustar algunos parámetros del flash y el embalaje, pero para mantener el plan
inicial de lo más simple posible, sólo voy a describir los cambios en la marcha.
Hasta ahora, estábamos construyendo nuestra interfaz gráfica de usuario en forma lineal de arriba hacia
abajo, donde por primera vez construidos los padres del widget y que él mismo widget. Ahora te
mostraré cómo insertar flash en el centro del árbol de widgets.
Haga clic en GtkHBox widget de árbol y seleccione "Agregar Padre -> paneles horizontales". Usted
debe terminar wih algo similar a esto:
Ahora tenemos que Reparent cuadro de área de visualización vertical para panel de la derecha. Haga
clic derecho en la caja vertical en el árbol de flash y selecciona "Cortar". Ahora haga clic derecho en el
interior panel derecho y seleccione "Pegar". Simple.
Www.amistosamentelinux.blogspot.coM
Se puede ver que tenemos un poco de espacio vacío en el lado derecho de nuestros botones. Para
eliminarlo, seleccione caja horizontal y el número de elementos decrese a 2.
Siguiente en la lista es la adición de GtkAlignment como padre de la caja de botones verticales. Este
proceso es análogo a la adición de los paneles. Haga clic en el botón cuadro vertical y seleccione
"Agregar Padre -> Alineación". Eso es todo lo que hay que hacer.
Lo último que tenemos que hacer es sustituir caja de botones vertical con caja vertical normal y agregar
iconos sólo acciones a los botones. La forma más sencilla de hacerlo es eliminar el cuadro de botón y
volver a crear los botones de cero. Podríamos cortar y pegar cada botón, pero su creación será más
rápida en este caso.
Después de eliminar caja de botones, caja de inserción vertical con 6 elementos en el espacio vacío y el
elemento de definir el espaciado a 2 px.
Ahora crea nuevo botón, inserte en uno de los campos en caja vertical y establecer su contenido a la
costumbre.
Dentro GtkImage vacío insertar el espacio y la puso de identificación de acciones a "e; "e;
Top.
Ahora Repetir esto cinco veces más, con identificación de acciones de "Up", "Agregar", "Eliminar",
"Down" y "Abajo". Usted debe ver algo como esto cuando termine:
Www.amistosamentelinux.blogspot.coM
ajustes finales
Todo lo que queda ahora es ajustar nuestras propiedades interfaz gráfica un poco. Lo primero que
tenemos que hacer es hacer que los datos desplaza ventana extensible y desplazable. Seleccione
scrolledwindow1 y en "General" ajuste "barra de desplazamiento horizontal de la política" en
"Automático". Ahora abra "embalaje" ficha y ajuste "Expandir" a "Sí".
Ahora seleccione alignment2 y en "General" conjunto "escala horizontal" y "Escala vertical" a 0, lo que
hará que nuestros botones de centrado.
Y hemos terminado. Guardar la interfaz y divertirse. Obtener completo archivo de glade o ver
screencast como de costumbre.
La próxima vez vamos a conectar algunos callbacs (y lo digo en serio;). Manténgase saludable hasta
entonces.
Según lo prometido, por fin va a conectar algunas señales a los controladores y escribir algo de código
C que va a hacer algo útil.
Si selecciona uno de los botones, ficha señales se parecerá a esto (con códigos de color columnas):
Dentro de "señal" la columna se enumeran las señales, agrupados por tipo de widget. "Controlador" es
la columna donde se inserte el nombre de la función que debe ser conectado a esta señal. "Los datos de
usuario" la columna puede contener el nombre del objeto de este archivo claro que debe ser enviado
como parámetro los datos a la función de devolución de llamada (nota: si el campo no está vacío, la
señal se conectará la misma manera como si fueras a llamar g_signal_connect_swapped macro). Por
último, "Después de" columna contiene el botón de verificación que controla la forma de devolución de
llamada que está conectado: si está marcada, la señal será conectado como si fueras a llamar
g_signal_connect_after, lo que significa que su función será llamada después de que el manejador de la
señal por defecto.
Para el 99% del tiempo, puede pasar por alto dos últimas columnas, ya que rara vez se usan, pero aún
así es bueno saber exactamente por qué están parados allí.
Www.amistosamentelinux.blogspot.coM
Segunda etapa es más compleja de entender, porque hay dos formas diferentes de asignación de
nombres de las funciones a las direcciones de la función. El primero (el simple) es utilizar la función
gtk_builder_connect_signals, que buscará automáticamente la función con los nombres propios en el
ejecutable principal. No voy a entrar en detalles de cómo se hace esto, pero ten en cuenta que GModule
se requiere para esta operación. Segundo método de asignación de nombres a direcciones es utilizar
gtk_builder_connect_signals_full, en el que debe proporcionar la función que va a hacer la asignación.
En este tutorial, vamos a utilizar el método automático, ya que esto es lo que la mayoría de la gente
terminará usando en sus aplicaciones.
Como ya se mencionó, una manera de pasar datos a la función de devolución de llamada para
especificar el nombre del objeto en Glade. Esto es simple, pero el método bastante limitado, ya que
sólo objeto de su archivo de interfaz de usuario se puede pasar como este. manera más flexible de
transmitir datos a las devoluciones de llamada es mediante el uso de datos de parámetro de
gtk_builder_connect_signals. Lo que usted especifique como último parámetro se pasa a todas las
devoluciones de llamada conectado como último parámetro.
"Pero no es sólo un argumento disponibles, y que iba a necesitar más!" Bueno, este problema se suele
resolver mediante la definición de una estructura que contiene todos los datos que puedan ser
necesarios en cualquiera de las devoluciones de llamada. Puntero a una instancia de esa estructura se
pasa como un parámetro pasado a gtk_builder_connect_signals.
Cuando se utiliza gtk_builder_connect_signals para conectar señales, lo más tomar algunas medidas
adicionales para asegurar que las funciones se encuentran por GModule. Los pasos exactos necesarios
son específicas de la plataforma, pero los desarrolladores Glib amablemente significa escribir código
portable.
Antes de declaración de la función o definición, debe colocar macro G_MODULE_EXPORT. Así que
si tenemos controlador de devolución de llamada para "hacer clic en botón de la señal se define así en
Www.amistosamentelinux.blogspot.coM
la aplicación no claro:
?
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span
class="google-src-text" style="direction: ltr; text-align:
left">static void</span> static void</span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span
class="google-src-text" style="direction: ltr; text-align:
left">cb_clicked( GtkButton *button,</span> cb_clicked (botón
GtkButton *,</span>
tenemos que modificar para ello con el fin de GModule para poder encontrarla:
?
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span
class="google-src-text" style="direction: ltr; text-align:
left">G_MODULE_EXPORT void</span> G_MODULE_EXPORT vacío</span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span
class="google-src-text" style="direction: ltr; text-align:
left">cb_clicked( GtkButton *button,</span> cb_clicked (botón
GtkButton *,</span>
<span onmouseover="_tipon(this)"
onmouseout="_tipoff()"><span class="google-src-text"
style="direction: ltr; text-align: left">gpointer data )</span>
gpointer datos)</span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span
class="google-src-text" style="direction: ltr; text-align:
left">{</span> {</span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span
class="google-src-text" style="direction: ltr; text-align: left">/*
CODE HERE */</span> / * Código aquí * /</span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span
class="google-src-text" style="direction: ltr; text-align:
left">}</span> }</span>
Otro paso necesario para hacer funcionar el código correctamente en todas las plataformas es vincular
ejecutable con banderas vinculador adecuada. Gracias a los desarrolladores de Glib, todo lo que
tenemos que hacer es añadir "GModule-2.0" a los parámetros de pkg-config. Si se ha compilado sus
aplicaciones normales utilizando compilar líneas similares a las:
?
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span
class="google-src-text" style="direction: ltr; text-align: left">gcc
-c object1.c $(pkg-config --clfags gtk+-2.0)</span> gcc-c object1.c $
(pkg-config - clfags gtk + -2.0)</span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span
class="google-src-text" style="direction: ltr; text-align: left">gcc
-c object2.c $(pkg-config --cflags gtk+-2.0)</span> gcc-c object2.c $
(pkg-config - cflags gtk + -2.0)</span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span
class="google-src-text" style="direction: ltr; text-align: left">gcc
-o app object1.o object2.o $(pkg-config --libs gtk+-2.0)</span> gcc-o
Www.amistosamentelinux.blogspot.coM
Antes de que podamos empezar a escribir código, que tenemos que hacer algunas modificaciones
menores para presentar claro: cambiar el nombre de "Window1" a "main_window", cambiar el nombre
de "drawingarea1" a "chart_area" y conectar "exponer al evento" para cb_expose_chart función.
Nótese, sin embargo, el cambio de nombre no es necesario, pero es más conveniente si cambiar el
nombre de los widgets que necesitamos. Con estos cambios en su lugar, estamos listos para empezar a
crear código.
Código
Aquí es donde Glade no nos puede ayudar más. Vamos a empezar por la creación de carpeta vacía que
mantendrá la totalidad de nuestros archivos. Ahora copia el archivo más reciente claro que ha guardado
aquí y cambiarle el nombre a "charter.glade".
Ultimo archivo es callbacks.c. Vamos a agregar controladores de devolución de llamada en este archivo
ya que los conectan el interior de Glade. Sólo hay una función que tenemos que escribir:
cb_expose_chart. Pero antes de empezar a escribir cualquier cosa, tenemos que comprobar qué
prototipo de controlador de exponer debe tener. Vaya a GtkWidget API de referencia y de búsqueda
Www.amistosamentelinux.blogspot.coM
para "exponer-evento" de la señal. (O, si usted es demasiado perezoso para buscar por sí mismo, haga
clic en este enlace .)
Compilar la aplicación
Www.amistosamentelinux.blogspot.coM
Lo último que tenemos que hacer es compilar la aplicación. Esto en nuestro caso se hace en tres pasos:
1. compilar charter.c en charter.o
2. compilar callbacks.c en callbacks.o
3. vincular ambos archivos objeto en la carta
Esto se traduce en líneas de comando en el terminal:
?
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span
class="google-src-text" style="direction: ltr; text-align: left">gcc
-c charter.c -o charter.o $(pkg-config --cflags gtk+-2.0 gmodule-
2.0)</span> gcc-c-o charter.c charter.o $ (pkg-config - cflags gtk +
-2.0 GModule-2.0)</span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span
class="google-src-text" style="direction: ltr; text-align: left">gcc
-c callbacks.c -o callbacks.o $(pkg-config --cflags gtk+-2.0 gmodule-
2.0)</span> gcc-c-o callbacks.c callbacks.o $ (pkg-config - cflags
gtk + -2.0 GModule-2.0)</span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span
class="google-src-text" style="direction: ltr; text-align: left">gcc
-o charter charter.o callbacks.o $(pkg-config --libs gtk+-2.0
gmodule-2.0)</span> Carta gcc-o charter.o callbacks.o $ (pkg-config -
libs gtk + -2.0 GModule-2.0)</span>
Ya que esto puede ser muy exigentes a escribir para cada recopilación, he creado Makefile que deben
hacer las cosas un poco más fácil.
?
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span
class="google-src-text" style="direction: ltr; text-align: left">CC =
gcc</span> CC = gcc</span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span
class="google-src-text" style="direction: ltr; text-align:
left">CFLAGS = `pkg-config --cflags gtk+-2.0 gmodule-2.0`</span>
CFLAGS = `pkg-config - cflags gtk + -2.0 GModule-2.0»</span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span
class="google-src-text" style="direction: ltr; text-align: left">LIBS
= `pkg-config --libs gtk+-2.0 gmodule-2.0`</span> LIBS = `pkg-config
- libs gtk + -2.0 GModule-2.0»</span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span
class="google-src-text" style="direction: ltr; text-align:
left">DEBUG = -Wall -g</span> DEBUG =-Wall-g</span>
Conseguir fuentes
Esto es algo nuevo. He creado un repositorio git en Gtihub.com para albergar los archivos de este
Www.amistosamentelinux.blogspot.coM
tutorial. Voy a un paquete de código de cada parte del tutorial y subirlo en Github.com, pero si usted
prefiere usar git para obtener el código, yo también te compromete etiquetas. Aquí está mi Github
repositorio y los archivos están aquí para este tutorial parte .
También comencé a convertir los mensajes de este tutorial en un formato DocBook, que esperemos que
hacer este tutorial más flexible y disponible en otros formatos.