glade-3 tutorial iniciacion spanish

Www.amistosamentelinux.blogspot.coM

Glade 3 Tutorialcontenido

• 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

(1) - Introducción tutorial Glade3

Hola de nuevo.

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.

¿Qué vamos a código

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.

¿Quién puede estar interesado en esta serie de posts?

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;).

http://Www.amistosamentelinux.blogspot.com/


Primeros pasos

OK, ya que parece que me dio la oportunidad de mostrar cómo suelen trabajar, vamos a empezar.

El trabajo de hoy se divide en dos secciones:

1. Creación de "modelo" de interfaz gráfica de usuario de nuestra aplicación basada en los requisitos.

2. Escribir árbol de widgets, en base a plan de la sección anterior.

Ahora, ¿cuáles son los requisitos para nuestra aplicación. Obviamente, tiene que ser capaz de mostrar datos en forma numérica y gráfica. También queremos ser capaces de añadir nuevos, eliminar, redistribuir y modificar puntos. También queremos ser capaces de ver los marcadores de puntos, líneas de conexión o de ambos en la tabla. Y se trata de que los requisitos iniciales. Vamos a dejar algo de espacio para futuras ampliaciones en nuestros planes, por si acaso si decidimos añadir nada a ella más tarde.

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



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.

Si convertimos esta descripción detallada en la representación en forma de árbol, obtenemos lo siguiente:

GtkWindow »- GtkVBox + - GtkMenuBar | `- / * Los menús aquí * / + - GtkToolbar | `- / * Botones de herramientas aquí * / + - GtkHBox | + - GtkScrolledWindow | | `- GtkTreeView | + - GtkVButtonBox | | `- Botones * aquí * / | + - GtkVBox | + - GtkScrolledWindow | | `- GtkViewport | | `- GtkAlignment | | `- GtkFrame | | `- GtkDrawingArea


http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dglade%2Binterface%2Bdesigner%2Btutorial%26hl%3Des%26client%3Dubuntu%26hs%3DVVh%26channel%3Dfs%26biw%3D1366%26bih%3D645%26prmd%3Divnsfd&rurl=translate.google.com&sl=en&twu=1&u=http://library.gnome.org/devel/gtk/stable/GtkFrame.html&usg=ALkJrhimhtXuSzpw3l8fus8SlirVuJTQVg

http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dglade%2Binterface%2Bdesigner%2Btutorial%26hl%3Des%26client%3Dubuntu%26hs%3DVVh%26channel%3Dfs%26biw%3D1366%26bih%3D645%26prmd%3Divnsfd&rurl=translate.google.com&sl=en&twu=1&u=http://library.gnome.org/devel/gtk/stable/GtkFrame.html&usg=ALkJrhimhtXuSzpw3l8fus8SlirVuJTQVg

http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dglade%2Binterface%2Bdesigner%2Btutorial%26hl%3Des%26client%3Dubuntu%26hs%3DVVh%26channel%3Dfs%26biw%3D1366%26bih%3D645%26prmd%3Divnsfd&rurl=translate.google.com&sl=en&twu=1&u=http://library.gnome.org/devel/gtk/stable/GtkAlignment.html&usg=ALkJrhj_t9ykw2MYKzEtBBOX05MphZLOSA


http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dglade%2Binterface%2Bdesigner%2Btutorial%26hl%3Des%26client%3Dubuntu%26hs%3DVVh%26channel%3Dfs%26biw%3D1366%26bih%3D645%26prmd%3Divnsfd&rurl=translate.google.com&sl=en&twu=1&u=http://library.gnome.org/devel/gtk/stable/GtkViewport.html&usg=ALkJrhjLE3YWAFiB2mRtbCmz6Va6QuOOag

http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dglade%2Binterface%2Bdesigner%2Btutorial%26hl%3Des%26client%3Dubuntu%26hs%3DVVh%26channel%3Dfs%26biw%3D1366%26bih%3D645%26prmd%3Divnsfd&rurl=translate.google.com&sl=en&twu=1&u=http://library.gnome.org/devel/gtk/stable/GtkScrolledWindow.html&usg=ALkJrhidbZ8Nxu6FFZp3Y2gRSAJ28hpb7A


http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dglade%2Binterface%2Bdesigner%2Btutorial%26hl%3Des%26client%3Dubuntu%26hs%3DVVh%26channel%3Dfs%26biw%3D1366%26bih%3D645%26prmd%3Divnsfd&rurl=translate.google.com&sl=en&twu=1&u=http://library.gnome.org/devel/gtk/stable/GtkVBox.html&usg=ALkJrhgvK25gM-piz69q4RdEq_czEcA9Ig


http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dglade%2Binterface%2Bdesigner%2Btutorial%26hl%3Des%26client%3Dubuntu%26hs%3DVVh%26channel%3Dfs%26biw%3D1366%26bih%3D645%26prmd%3Divnsfd&rurl=translate.google.com&sl=en&twu=1&u=http://library.gnome.org/devel/gtk/stable/GtkHButtonBox.html&usg=ALkJrhhbMvgdf9DIIr64E0Fi4W3dXHIFgA


http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dglade%2Binterface%2Bdesigner%2Btutorial%26hl%3Des%26client%3Dubuntu%26hs%3DVVh%26channel%3Dfs%26biw%3D1366%26bih%3D645%26prmd%3Divnsfd&rurl=translate.google.com&sl=en&twu=1&u=http://library.gnome.org/devel/gtk/stable/GtkVButtonBox.html&usg=ALkJrhjkoYQjPKiJzZmnZpgtJ0vfafwFRg


http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dglade%2Binterface%2Bdesigner%2Btutorial%26hl%3Des%26client%3Dubuntu%26hs%3DVVh%26channel%3Dfs%26biw%3D1366%26bih%3D645%26prmd%3Divnsfd&rurl=translate.google.com&sl=en&twu=1&u=http://library.gnome.org/devel/gtk/stable/GtkTreeView.html&usg=ALkJrhgaJWhWwG09EwDinuClAWa6gS6hnA

http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dglade%2Binterface%2Bdesigner%2Btutorial%26hl%3Des%26client%3Dubuntu%26hs%3DVVh%26channel%3Dfs%26biw%3D1366%26bih%3D645%26prmd%3Divnsfd&rurl=translate.google.com&sl=en&twu=1&u=http://library.gnome.org/devel/gtk/stable/GtkHBox.html&usg=ALkJrhjiAa7XJZhAe6AEx_AFG69z6VYVkA

http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dglade%2Binterface%2Bdesigner%2Btutorial%26hl%3Des%26client%3Dubuntu%26hs%3DVVh%26channel%3Dfs%26biw%3D1366%26bih%3D645%26prmd%3Divnsfd&rurl=translate.google.com&sl=en&twu=1&u=http://library.gnome.org/devel/gtk/stable/GtkMenuBar.html&usg=ALkJrhhl0OCVGfdjh8iHNP33pQLguvKECA

http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dglade%2Binterface%2Bdesigner%2Btutorial%26hl%3Des%26client%3Dubuntu%26hs%3DVVh%26channel%3Dfs%26biw%3D1366%26bih%3D645%26prmd%3Divnsfd&rurl=translate.google.com&sl=en&twu=1&u=http://library.gnome.org/devel/gtk/stable/GtkToolbar.html&usg=ALkJrhgS5kGv9AsFwmQkqSakUfyLbfo07A

http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dglade%2Binterface%2Bdesigner%2Btutorial%26hl%3Des%26client%3Dubuntu%26hs%3DVVh%26channel%3Dfs%26biw%3D1366%26bih%3D645%26prmd%3Divnsfd&rurl=translate.google.com&sl=en&twu=1&u=http://library.gnome.org/devel/gtk/stable/GtkStatusbar.html&usg=ALkJrhgv8F1VErfoGGGUK1sfXsgC3JFGEQ


http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dglade%2Binterface%2Bdesigner%2Btutorial%26hl%3Des%26client%3Dubuntu%26hs%3DVVh%26channel%3Dfs%26biw%3D1366%26bih%3D645%26prmd%3Divnsfd&rurl=translate.google.com&sl=en&twu=1&u=http://library.gnome.org/devel/gtk/stable/GtkWindow.html&usg=ALkJrhhUKvAlUibyQQ4PtP5ZltjIiZsrhQ

http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dglade%2Binterface%2Bdesigner%2Btutorial%26hl%3Des%26client%3Dubuntu%26hs%3DVVh%26channel%3Dfs%26biw%3D1366%26bih%3D645%26prmd%3Divnsfd&rurl=translate.google.com&sl=en&twu=1&u=http://library.gnome.org/devel/gtk/stable/GtkWindow.html&usg=ALkJrhhUKvAlUibyQQ4PtP5ZltjIiZsrhQ


| `- GtkHButtonBox | `- / * Comprobar botones aquí * / »- GtkStatusBar

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.

Glade3 tutorial (2) - La construcción de la interfaz

Bienvenido de nuevo.

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.


http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dglade%2Binterface%2Bdesigner%2Btutorial%26hl%3Des%26client%3Dubuntu%26hs%3DVVh%26channel%3Dfs%26biw%3D1366%26bih%3D645%26prmd%3Divnsfd&rurl=translate.google.com&sl=en&twu=1&u=http://www.screentoaster.com/watch/stU0tWQk1IR1xdQ1xYUlJZVVFT/glade3_tutorial_creating_gui&usg=ALkJrhjGLy0HdTMywnmsUrQ7Fh94qZKHHA




http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dglade%2Binterface%2Bdesigner%2Btutorial%26hl%3Des%26client%3Dubuntu%26hs%3DVVh%26channel%3Dfs%26biw%3D1366%26bih%3D645%26prmd%3Divnsfd&rurl=translate.google.com&sl=en&twu=1&u=http://library.gnome.org/devel/gtk/stable/GtkIconView.html&usg=ALkJrhgPJIDMf82bZwAViA8mStiA5bG_-A

http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dglade%2Binterface%2Bdesigner%2Btutorial%26hl%3Des%26client%3Dubuntu%26hs%3DVVh%26channel%3Dfs%26biw%3D1366%26bih%3D645%26prmd%3Divnsfd&rurl=translate.google.com&sl=en&twu=1&u=http://library.gnome.org/devel/gtk/stable/GtkTextView.html&usg=ALkJrhizHRO6CulUdtpMFB2LcCPMleVBHQ








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:



Ahora vamos a configurar título de la ventana a la "Carta" y el tamaño por defecto de 600 x 400 px.



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í.



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.



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.



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!



De acuerdo a nuestro árbol de widgets, es necesario desplazar a la ventana de insertar en el compartimiento de primera. Y puesto que sólo queremos tener presente la barra de desplazamiento vertical cuando sea necesario, tenemos que ajustar la política barra de desplazamiento horizontal también.



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).



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í".



En "embalaje" ficha, hemos creado la "Expandir" propiedad "no", ya que queremos que los botones para tener el menor espacio posible.



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í".



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".



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.



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.



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:

Se puede ver que Glade agrega automáticamente la etiqueta y la alineación en el marco. No necesitamos ninguna, así que vamos a eliminar a los dos. Así es como se ven las cosas después de la eliminación:

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á.


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. ?/* / * * Compile me with: * Recopilar mí con: * gcc -o tut tut.c $(pkg-config --cflags --libs gtk+-2.0 gmodule-2.0) * Gcc-o tut tut.c $ (pkg-config - cflags - libs gtk + -2.0 GModule-2.0) */ * / #include <gtk/gtk.h> # Include <gtk/gtk.h>


http://tadeboro.blogspot.com/2009/09/glade3-tutorial-2-constructing.html#

int intmain( int argc, main (int argc, char **argv ) char ** argv){ { GtkBuilder *builder; GtkBuilder * constructor; GtkWidget *window; GtkWidget * ventana; GError *error = NULL; GError * error = NULL; /* Init GTK+ */ / * Inicialización de GTK + * / gtk_init( &argc, &argv ); gtk_init (& argc, & argv); /* Create new GtkBuilder object */ / * * Crear nuevo objeto GtkBuilder / builder = gtk_builder_new(); constructor = gtk_builder_new (); /* Load UI from file. / * Cargar la interfaz de usuario desde un archivo. If error occurs, report it and quit application. Si el error se produce, se informe y

salir de la aplicación. * Replace "tut.glade" with your saved project. * Reemplace "tut.glade" con su proyecto guardado. */ * / if( ! gtk_builder_add_from_file( builder, "tut.glade", &error ) ) if (! gtk_builder_add_from_file (constructor, "tut.glade", y error)) { { g_warning( "%s", error->message ); g_warning ("% s", mensaje de error->); g_free( error ); g_free (error); return( 1 ); retorno (1); } } /* Get main window pointer from UI */ / * Obtener puntero de la ventana principal de la interfaz de usuario * / window = GTK_WIDGET( gtk_builder_get_object( builder, "window1" ) ); ventana = GTK_WIDGET (gtk_builder_get_object (constructor, "Window1")); /* Connect signals */ / * Conectar las señales * / gtk_builder_connect_signals( builder, NULL );

gtk_builder_connect_signals (constructor, NULL); /* Destroy builder, since we don't need it anymore */ / * Destruye constructora, ya que no se necesita más * / g_object_unref( G_OBJECT( builder ) ); g_object_unref (G_OBJECT (constructor)); /* Show window. / * Mostrar ventana. All other widgets are automatically shown by GtkBuilder */ Todos los otros widgets se muestran automáticamente por GtkBuilder * / gtk_widget_show( window ); gtk_widget_show (ventana); /* Start main loop */ / * Iniciar el ciclo principal * / gtk_main(); gtk_main (); return( 0 ); return (0);} }Ahora ejecute el código y se sorprenderá;). No está mal, pero nada especial tampoco. Trate de cambiar el tamaño de la ventana para ver cómo se comportan cuando se cambia el tamaño de los compartimentos. ¿Te gusta? Yo tampoco, así que conmigo la próxima vez vamos a estar tratando con alocation espacio / requisición en detalle.

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.


http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dglade%2Binterface%2Bdesigner%2Btutorial%26hl%3Des%26client%3Dubuntu%26hs%3DVVh%26channel%3Dfs%26biw%3D1366%26bih%3D645%26prmd%3Divnsfd&rurl=translate.google.com&sl=en&twu=1&u=http://www.screentoaster.com/watch/stU0tWQk1IR1xdQ1xYUlJZVVFT/glade3_tutorial_creating_gui&usg=ALkJrhjGLy0HdTMywnmsUrQ7Fh94qZKHHA


glade final se puede obtener desde aquí: tut.glade .

Glade3 tutorial (3) - Tamaño de la negociación

Hola.

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.

Tamaño de la negociación en GTK +

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:


http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dglade%2Binterface%2Bdesigner%2Btutorial%26hl%3Des%26client%3Dubuntu%26hs%3DVVh%26channel%3Dfs%26biw%3D1366%26bih%3D645%26prmd%3Divnsfd&rurl=translate.google.com&sl=en&twu=1&u=http://tadeboro.blogspot.com/2009/09/glade3-tutorial-3-size-negotiation.html&usg=ALkJrhg0X4iJzISPhnmUAs48OFpl0xrM_w

http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dglade%2Binterface%2Bdesigner%2Btutorial%26hl%3Des%26client%3Dubuntu%26hs%3DVVh%26channel%3Dfs%26biw%3D1366%26bih%3D645%26prmd%3Divnsfd&rurl=translate.google.com&sl=en&twu=1&u=http://tadeboro.googlepages.com/tut.glade&usg=ALkJrhgBoiNOceX97tZyhDX2Y354XaJndQ

Hay dos hallazgos importantes en esta cascada:

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.

Widget de embalaje y la aplicación de cambio de tamaño

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


http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dglade%2Binterface%2Bdesigner%2Btutorial%26hl%3Des%26client%3Dubuntu%26hs%3DVVh%26channel%3Dfs%26biw%3D1366%26bih%3D645%26prmd%3Divnsfd&rurl=translate.google.com&sl=en&twu=1&u=http://library.gnome.org/devel/gtk-tutorial/stable/c355.html&usg=ALkJrhhiWMNx_R-QWuGICmwQj_uu-yYZsw

http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dglade%2Binterface%2Bdesigner%2Btutorial%26hl%3Des%26client%3Dubuntu%26hs%3DVVh%26channel%3Dfs%26biw%3D1366%26bih%3D645%26prmd%3Divnsfd&rurl=translate.google.com&sl=en&twu=1&u=http://library.gnome.org/devel/gtk-tutorial/stable/c355.html&usg=ALkJrhhiWMNx_R-QWuGICmwQj_uu-yYZsw


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.



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



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?



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.

Glade3 tutorial (4) - Datos GtkTreeView backend

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;)

Modelo-vista-controlador (MVC) diseño

http://tadeboro.googlepages.com/tut01.glade



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.

Creación de datos de backend

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 | |


http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dglade%2Binterface%2Bdesigner%2Btutorial%26hl%3Des%26client%3Dubuntu%26hs%3DVVh%26channel%3Dfs%26biw%3D1366%26bih%3D645%26prmd%3Divnsfd&rurl=translate.google.com&sl=en&twu=1&u=http://scentric.net/tutorial/treeview-tutorial.html&usg=ALkJrhjAq1xd_3OK8GL09lqQlcBd7U1u7g

http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dglade%2Binterface%2Bdesigner%2Btutorial%26hl%3Des%26client%3Dubuntu%26hs%3DVVh%26channel%3Dfs%26biw%3D1366%26bih%3D645%26prmd%3Divnsfd&rurl=translate.google.com&sl=en&twu=1&u=http://scentric.net/tutorial/treeview-tutorial.html&usg=ALkJrhjAq1xd_3OK8GL09lqQlcBd7U1u7g


| - 1,5 | - 1 | | | 0 | - 0,5 | eje intersección | | 1.5 | 0 | intersección del eje X | | 3 | 0.5 | Final | +-------+-------+---------------------+

Nuestra tienda en la lista ya está terminada.

Conexión de vista de árbol con la tienda lista

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".

Adición de componentes de la pantalla de vista de árbol

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



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)



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 .


http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dglade%2Binterface%2Bdesigner%2Btutorial%26hl%3Des%26client%3Dubuntu%26hs%3DVVh%26channel%3Dfs%26biw%3D1366%26bih%3D645%26prmd%3Divnsfd&rurl=translate.google.com&sl=en&twu=1&u=http://www.screentoaster.com/watch/stU0tWQk1IR1xcQ1RbU15ZV1Fd/glade3_tutorial_creating_data_backend&usg=ALkJrhi_buf_nMP9kEmEH3jiLLQNxawEDQ

http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dglade%2Binterface%2Bdesigner%2Btutorial%26hl%3Des%26client%3Dubuntu%26hs%3DVVh%26channel%3Dfs%26biw%3D1366%26bih%3D645%26prmd%3Divnsfd&rurl=translate.google.com&sl=en&twu=1&u=http://tadeboro.googlepages.com/tut02.glade&usg=ALkJrhgM3_cHZOr5lPPY1yx0rxtTmMvgkw


Poco Glade3-3.6.7 error

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.

Tanto tiempo y mantenerse sanos.

Glade3 tutorial (5) - Modificación de árbol de widgets

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.

Nuevo árbol de widgets

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:



¿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.

Insertar flash en árbol de widgets

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.



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.

Crear sólo los botones de imagen

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 &quote; &quote; 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:



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.

Glade3 tutorial (6) - Señales

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.

Señales ficha en Glade

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í.


http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dglade%2Binterface%2Bdesigner%2Btutorial%26hl%3Des%26client%3Dubuntu%26hs%3DVVh%26channel%3Dfs%26biw%3D1366%26bih%3D645%26prmd%3Divnsfd&rurl=translate.google.com&sl=en&twu=1&u=http://tadeboro.blogspot.com/2009/09/glade3-tutorial-5-modifying-widget-tree.html&usg=ALkJrhgK6J0Ur4iYtc71vRSu2PETsHGJug

http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dglade%2Binterface%2Bdesigner%2Btutorial%26hl%3Des%26client%3Dubuntu%26hs%3DVVh%26channel%3Dfs%26biw%3D1366%26bih%3D645%26prmd%3Divnsfd&rurl=translate.google.com&sl=en&twu=1&u=http://tadeboro.blogspot.com/2009/09/glade3-tutorial-5-modifying-widget-tree.html&usg=ALkJrhgK6J0Ur4iYtc71vRSu2PETsHGJug

http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dglade%2Binterface%2Bdesigner%2Btutorial%26hl%3Des%26client%3Dubuntu%26hs%3DVVh%26channel%3Dfs%26biw%3D1366%26bih%3D645%26prmd%3Divnsfd&rurl=translate.google.com&sl=en&twu=1&u=http://tadeboro.googlepages.com/tut03.glade&usg=ALkJrhiRSCuszIESVanfgv1UdEIPfuWTHw


Teoría de la señal de conexión

conexión de la señal se realiza en dos etapas: 1. Los nombres de las funciones que deben ser evocados cuando la señal se emite se especifican en

"Señales" ficha en Glade. 2. Asignación de nombre de la función - dirección de función> se hace en tiempo de ejecución, ya

sea usando GModule o manualmente por el usuario.

La primera etapa es sencilla: sólo tiene que rellenar los campos apropiados en el interior "Señales" ficha y guarde el proyecto.

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.

Pasando datos personalizados para las devoluciones de llamada

Cualquier aplicación modestamente complejo requerirá un cierto intercambio de datos y de las funciones de devolución de llamada. Entonces, ¿cómo podemos lograr esto?

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.

De devolución de llamada definición controlador

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


la aplicación no claro: ?static void static voidcb_clicked( GtkButton *button, cb_clicked (botón GtkButton *,tenemos que modificar para ello con el fin de GModule para poder encontrarla: ?G_MODULE_EXPORT void G_MODULE_EXPORT vacíocb_clicked( GtkButton *button, cb_clicked (botón GtkButton *, gpointer data ) gpointer datos){ { /* CODE HERE */ / * Código aquí * /} }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: ?gcc -c object1.c $(pkg-config --clfags gtk+-2.0) gcc-c object1.c $ (pkg-config - clfags gtk + -2.0)gcc -c object2.c $(pkg-config --cflags gtk+-2.0) gcc-c object2.c $ (pkg-config - cflags gtk + -2.0)gcc -o app object1.o object2.o $(pkg-config --libs gtk+-2.0) gcc-o


http://tadeboro.blogspot.com/2009/09/glade3-tutorial-6-signals.html#

aplicación object1.o object2.o $ (pkg-config - libs gtk + -2.0)Queda aprobado nuevas líneas de compilación se verá así: ?gcc -c object1.c $(pkg-config --clfags gtk+-2.0 gmodule-2.0) gcc-c object1.c $ (pkg-config - clfags gtk + -2.0 GModule-2.0)gcc -c object2.c $(pkg-config --cflags gtk+-2.0 gmodule-2.0) gcc-c object2.c $ (pkg-config - cflags gtk + -2.0 GModule-2.0)gcc -o app object1.o object2.o $(pkg-config --libs gtk+-2.0 gmodule-2.0) gcc-o aplicación object1.o object2.o $ (pkg-config - libs gtk + -2.0 GModule-2.0)Preparación de archivo glade

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".

Nuestro código será inicialmente dividido en tres archivos de código fuente:

1. charter.c celebrará función principal 2. support.h llevará a cabo algunas macros conveniencia y definición principal estructura de datos 3. callbacks.c llevará a cabo las funciones que nos conectamos en Glade

Vamos a empezar con el archivo support.h. ?#ifndef __SUPPORT_H__ # Ifndef __SUPPORT_H__

#define __SUPPORT_H__ # Define __SUPPORT_H__ #include <gtk/gtk.h> # Include <gtk/gtk.h> /* Convenience macros for obtaining objects from UI file */ / * Conveniencia macros para la obtención de objetos de archivo de la interfaz de usuario * /#define CH_GET_OBJECT( builder, name, type, data ) \ # Define CH_GET_OBJECT (constructor, nombre, tipo, datos) \ data->name = type( gtk_builder_get_object( builder, #name ) ) nombre de los datos-> = tipo (gtk_builder_get_object (constructor, # nombre))#define CH_GET_WIDGET( builder, name, data ) \ # Define CH_GET_WIDGET (constructor, nombre, datos) \ CH_GET_OBJECT( builder, name, GTK_WIDGET, data ) CH_GET_OBJECT (constructor, nombre, GTK_WIDGET, datos) /* Main data structure definition */ / * Principales datos de definición de la estructura * /typedef struct _ChData ChData; typedef struct _ChData ChData;struct _ChData estructura _ChData{ { <span

class="google-src-text" style="direction: ltr; text-align: left">/* Widgets */ / Widgets * * / GtkWidget *main_window; /* Main application window */ GtkWidget * main_window; / * Uso principal ventana * / GtkWidget *chart_area; /* Chart drawing area */ GtkWidget * chart_area; / * * Área de dibujo gráfico /}; }; #endif /* __SUPPORT_H__ */ # Endif / * __SUPPORT_H__ * /Lo primero que hacemos es incluir GTK + fichero de cabecera, que proporcionará las declaraciones de tipo y función. A continuación se definen dos macros que hará que la obtención de punteros a objetos menos detallado. Consulte a su favorito de manual de preprocesador de C para obtener más información acerca de cómo este trabajo dos macros. Lo último en este archivo es la definición de la estructura. Esta estructura nos servirá como almacenamiento de datos principal. Vamos a añadir más campos para que poco a poco. Para empezar, la ventana principal y punteros gráfico de área será suficiente.

Archivo siguiente que vamos a crear es charter.c. ?#include "support.h" # Include "support.h" #define UI_FILE "charter.glade" # Define UI_FILE "charter.glade" int intmain( int argc, main (int argc, char **argv ) char ** argv)

{ { ChData *data; ChData datos *; GtkBuilder *builder; GtkBuilder * constructor; GError *error = NULL; GError * error = NULL; /* Init GTK+ */ / * Inicialización de GTK + * / gtk_init( &argc, &argv ); gtk_init (& argc, & argv); /* Create new GtkBuilder object */ / * * Crear nuevo objeto GtkBuilder / builder = gtk_builder_new(); constructor = gtk_builder_new (); if( ! gtk_builder_add_from_file( builder, UI_FILE, &error ) ) if (! gtk_builder_add_from_file (constructor, UI_FILE, y error)) { { g_warning( "%s", error->message ); g_warning ("% s", mensaje de error->); g_free( error ); g_free (error); <span class="google-src-text" style="direction: ltr; text-align:

left">return( 1 ); retorno (1); } } /* Allocate data structure */ / * Asignar datos de la estructura * / data = g_slice_new( ChData ); = datos g_slice_new (ChData); /* Get objects from UI */ / * Obtener los objetos de interfaz de usuario * /#define GW( name ) CH_GET_WIDGET( builder, name, data ) # Define GW (nombre) CH_GET_WIDGET (constructor, nombre, datos) GW( main_window ); GW (main_window); GW( chart_area ); GW (chart_area);#undef GW # Undef GW /* Connect signals */ / * Conectar las señales * / gtk_builder_connect_signals( builder, data ); gtk_builder_connect_signals (constructor, los datos); /* Destroy builder, since we don't need it anymore */ / * Destruye constructora, ya que no se necesita más * / <span class="google-src-text" style="direction: ltr; text-align:

left">g_object_unref( G_OBJECT( builder ) ); g_object_unref (G_OBJECT (constructor)); /* Show window. / * Mostrar ventana. All other widgets are automatically shown by GtkBuilder */ Todos los otros widgets se muestran automáticamente por GtkBuilder * / gtk_widget_show( data->main_window ); gtk_widget_show (main_window de datos->); /* Start main loop */ / * Iniciar el ciclo principal * / gtk_main(); gtk_main (); /* Free any allocated data */ / * Cualquier * Libre de datos asignada / g_slice_free( ChData, data ); g_slice_free (ChData, datos); return( 0 ); return (0);} }Este archivo es casi exactamente el mismo archivo tut.c de la segunda parte de este tutorial. Una diferencia importante es la creación de la estructura de datos que se pasa a todas las devoluciones de llamada.

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

para "exponer-evento" de la señal. (O, si usted es demasiado perezoso para buscar por sí mismo, haga clic en este enlace .)

En referencia, verás que exponen controlador de eventos se define como: ?gboolean gbooleanfunction( GtkWidget *widget, función (GtkWidget * widget, GdkEventExpose *event, * GdkEventExpose caso, gpointer user_data ) gpointer user_data)Teniendo este conocimiento, podemos crear el archivo de devolución de llamada. ?#include "support.h" # Include "support.h" G_MODULE_EXPORT gboolean G_MODULE_EXPORT gbooleancb_expose_chart( GtkWidget *widget, cb_expose_chart (GtkWidget * widget, GdkEventExpose *event, * GdkEventExpose caso, ChData *data ) ChData datos *){ { <span class="google-src-text" style="direction: ltr; text-align:




http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dglade%2Binterface%2Bdesigner%2Btutorial%26hl%3Des%26client%3Dubuntu%26hs%3DVVh%26channel%3Dfs%26biw%3D1366%26bih%3D645%26prmd%3Divnsfd&rurl=translate.google.com&sl=en&twu=1&u=http://library.gnome.org/devel/gtk/stable/GtkWidget.html&usg=ALkJrhgf-UnA7KXGOnOJotVpfraiW9l1NA#GtkWidget-expose-event

left">cairo_t *cr; cairo_t * cr; /* Create cairo context from GdkWindow */ / * Crear el cairo contexto de GdkWindow * / cr = gdk_cairo_create( event->window ); cr = gdk_cairo_create (ventana de eventos>); /* Paint whole area in green color */ / * La pintura en toda la zona de color verde * / cairo_set_source_rgb( cr, 0, 1, 0 ); cairo_set_source_rgb (cr, 0, 1, 0); cairo_paint( cr ); cairo_paint (CR); /* Destroy cairo context */ / * Destruye el cairo contexto * / cairo_destroy( cr ); cairo_destroy (CR); /* Return TRUE, since we handled this event */ / * Volver cierto, ya que manejamos este caso * / return( TRUE ); retorno (TRUE);} }Se puede ver que hemos añadido G_MODULE_EXPORT delante de definición de la función. También modificó último parámetro para evitar algunos de calidad. Puede pasar por alto cuerpo de la función, por ahora, ya que el dibujo Cairo se explicará más cuando vamos a empezar a dibujar nuestras tablas.

Compilar la aplicación

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: ?gcc -c charter.c -o charter.o $(pkg-config --cflags gtk+-2.0 gmodule-2.0) gcc-c-o charter.c charter.o $ (pkg-config - cflags gtk + -2.0 GModule-2.0)gcc -c callbacks.c -o callbacks.o $(pkg-config --cflags gtk+-2.0 gmodule-2.0) gcc-c-o callbacks.c callbacks.o $ (pkg-config - cflags gtk + -2.0 GModule-2.0)gcc -o charter charter.o callbacks.o $(pkg-config --libs gtk+-2.0 gmodule-2.0) Carta gcc-o charter.o callbacks.o $ (pkg-config - libs gtk + -2.0 GModule-2.0)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. ?CC = gcc CC = gccCFLAGS = `pkg-config --cflags gtk+-2.0 gmodule-2.0` CFLAGS = `pkg-config - cflags gtk + -2.0 GModule-2.0»LIBS = `pkg-config --libs gtk+-2.0 gmodule-2.0` LIBS = `pkg-config - libs gtk + -2.0 GModule-2.0»DEBUG = -Wall -g DEBUG =-Wall-g OBJECTS = charter.o callbacks.o OBJETOS = charter.o callbacks.o

.PHONY: clean . PHONY: limpio all: charter todo: la carta charter: $(OBJECTS) Carta: $ (OBJETOS) $(CC) $(DEBUG) $(LIBS) $(OBJECTS) -o $@ $ (CC) $ (DEBUG) $ (LIBS) $ (OBJETOS)-o $ @ charter.o: charter.c support.h charter.o: support.h charter.c $(CC) $(DEBUG) $(CFLAGS) -c $< -o $@ $ (CC) $ (DEBUG) $ (CFLAGS)-c $ <-o $ @ callbacks.o: callbacks.c support.h callbacks.o: support.h callbacks.c $(CC) $(DEBUG) $(CFLAGS) -c $< -o $@ $ (CC) $ (DEBUG) $ (CFLAGS)-c $ <-o $ @ clean: Limpieza: rm -f *.o charter rm-f *. o cartaConsulte a hacer manual para obtener información detallada acerca de este archivo. Y hemos terminado por hoy.

Conseguir fuentes

Esto es algo nuevo. He creado un repositorio git en Gtihub.com para albergar los archivos de este


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.


http://cloud.github.com/downloads/tadeboro/Glade3-tutorial/glade_tut_06.tar.bz2

http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dglade%2Binterface%2Bdesigner%2Btutorial%26hl%3Des%26client%3Dubuntu%26hs%3DVVh%26channel%3Dfs%26biw%3D1366%26bih%3D645%26prmd%3Divnsfd&rurl=translate.google.com&sl=en&twu=1&u=http://github.com/tadeboro/Glade3-tutorial&usg=ALkJrhjakdvAB2HhD1F0MUpGf-eJaaNRdw

http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dglade%2Binterface%2Bdesigner%2Btutorial%26hl%3Des%26client%3Dubuntu%26hs%3DVVh%26channel%3Dfs%26biw%3D1366%26bih%3D645%26prmd%3Divnsfd&rurl=translate.google.com&sl=en&twu=1&u=http://github.com/tadeboro/Glade3-tutorial&usg=ALkJrhjakdvAB2HhD1F0MUpGf-eJaaNRdw

glade-3 tutorial iniciacion spanish

Documents