El Dios de Los Monos-Cap 3-Mauricio Cano Ossa

7/22/2019 El Dios de Los Monos-Cap 3-Mauricio Cano Ossa

1/54

Captulo 3Fecha Release: Agosto 13, 2006Versin: 1.0Ultima Actualizacin: Agosto 13, 2006

3. El diseador de GUIs de Glade

En el captulo dos tratamos el tema de Glade de forma somera. En este, nos adentraremos en el empleo de laherramienta Glade. Dedicamos un captulo, debido a que es la utilidad que nos va a permitir disear de formagrfica interfaces GUI que lucirn igual en Windows y en Linux.

Glade es una herramienta Open Source que permite visualmente disear nuestra interfase de usuarioutilizando el toolkit de Gtk, luego guarda su representacin visual como un archivo XML que puede serdinmicamente cargado y utilizado por una aplicacin que utilice la librera adecuada.

Glade est disponible para el mundo Open Source en la plataforma Windows y Linux. La pgina de glade eshttp://glade.gnome.org. La direccin para conseguir la versin (port) windows es

http://gladewin32.sourceforge.net.

Las ventajas de utilizar un diseador grfico para nuestras GUI saltan a la vista. Una de las principalesventajas es la de poder definir mejor nuestra interfaz, lo cual es muy difcil de lograr a puro cdigo o adedito como lo llaman algunos. El contar con un lienzo (canvas) donde uno visualmente coloca y organizaobjetos de forma visual, permiten que le demos nuestro toque (look-and-feel) similar en toda la aplicacin.

Para este captulo, ejecutaremos la herramienta Glade por fuera del IDE de Microsoft .Net. Usted encontrarque en la instalacin de mono y Gtk#, podremos cargar la utilidad. Carguemos la que aparece en el grupo deprogramas Gtk# for Windows opcinApplications.

Cuando se carga, muestra la ventana de proyecto Glade sin widgets definidos.


2/54

El dios de los monos Una gua para el desarrollador de GUIs en Windows y Linux con el mono 2

[email protected] Captulo 3

Estas ventanas harn que pueda definir su interfaz de usuario de forma realmente sencilla. Para interactuarcon Glade debemos hacerlo a travs de su GUI, representada por sus tres ventanas principales (Proyecto oventana principal, Paleta de Widgest y Propiedades). Estas tres ventanas interactan unas con otras. En estaseccin del documento, aprenderemos como interactuar con estas ventanas para construir nuestra GUI.

En la opcin View del explorador de proyectos Glade, se puede seleccionar que ventanas del diseador se

muestran. Esto, por si desea desaparecer unas para que no interfieran con el nivel de detalle que queremosvisualizar un diseo. Por ejemplo, suelo ocultar el rbol de widgets (Widget Tree). Lo utilizo solo cuandotengo formularios que incluyen muchos objetos dentro de contenedores y que necesito modificar uno enespecial. Para ese caso en particular resulta muy til el poder tomar control sobre el widget que necesitamostomar de entre un grupo de controles (por ejemplo, barras de herramientas dentro cajas empaquetadoras.

Para este captulo solo necesitamos el IDE de Visual Studio, el Glade 2.12.1 (o superior. Mono normalmenteincluye una versin inferior a la disponible en el sitio oficial de Glade) y cinco cervezas. Destape la primeracerveza y demos un vistazo a los widgets GTK que se pueden programar en el Glade.


3/54



3.1. La ventana principal o proyecto.

Cuando iniciamos Glade, nos mostrar su ventana principal o visor de objetos del proyecto. Usted utilizaresta ventana para desarrollar su proyecto, la cual actuar como un contenedor de todos los tems definidos

para nuestra GUI.

En esta ventana podemos acceder a las opciones disponibles desde el propio men de la ventana o desde su

barra de herramientas. Las opciones de men disponibles son Project (Proyecto), Edit (Edicin), View (Ver)y Help (Ayuda??? solo incluye la opcin acerca de...). Estas opciones pueden varias acorde a la versin deGlade que se ejecute.

Desde esta ventana podremos configurar al diseador, guardar los cambios realizados al proyecto y construiren el archivo XML con las definiciones dadas en nuestro proyecto.

Una recomendacin a considerar para no llevarse sustos, realice copias de seguridad peridicas de suproyecto para que pueda devolverse en versiones cuando tenga problemas con sus diseos. Una buenaprctica es la ir guardando cualquier cambio que hagamos, debido a que esta versin de Glade no soporta lafuncionalidad de deshacer. Si daa su diseo, debe salir de Glade sin guardar, volver a cargar su proyecto y

continuar desde el ltimo punto donde guard. Pero eso son gajes del oficio, cuando vea los resultados de suaplicacin corriendo en varias plataformas, le perdonara al Glade no poder cumplir esa funcionalidad.


4/54



3.2. La paleta de widgtes

Esta paleta muestra los controles (llamados widgets en el mundo Gtk) disponibles para disear su interfaz deusuario. Usted puede ver el grupo de controles disponibles de forma agrupada. La paleta de widgets incluye

tres secciones: GTK+ Basic, GTK+ Additional y Deprecated.

GTK+ Basic incluye los widgtes ms comnmente usados en el diseo de interfaces grficas (por ejemploventanas, botones, etc. GTK+ Additional incluye widgets ms avanzados y rara vez utilizados en interfacesgrficas (por ejemplo un control de calendario) y la seccin Deprecated, incluye widgets que son candidatos

a ser eliminados en futuras versiones debido a que han sido reemplazados o mejorados y que se mantienenpor compatibilidad. Trate de no utilizar ningn widget en esta seccin.

La buena noticia es que podemos definir nuestros propios controles y agregarlos a esta paleta. Para esta labor,estudie la documentacin de Gtk en http://www.gtk.org/documentation.html y la documentacin de la API deGlade en http://developer.gnome.org/doc/API/2.0/glib/index.html.


5/54



3.3. La ventana de propiedades (Properties)

Esta ventana permite ver y modificar una variedad de propiedades asociadas con el control u objeto que setiene seleccionado. Incluye cinco categoras (tabs o pestaas) que permiten agrupar estas propiedades.

La categora Widget contiene las propiedades asociadas al control para su representacin visual y propias deltipo de objeto seleccionado.

La categora Packing es para aquellos objetos que sirven como empaquetadores de otros, que tienen unarreglo de otros objetos o que permiten definir un orden.


6/54



El grupo Common incluye aquellas propiedades que son comunes a determinados controles.

El grupo Signals permiten asociar capturadores de eventos con los eventos que es capaz de generar uncontrol. Una vez defina un evento, podr asociarlo a un mtodo dentro de sus aplicaciones, el cual tomarcontrol una vez que el evento suceda (fired).

La categora Accessibility permite modificar los atributos para que nuestra aplicacin sea ms accesible apersonas con discapacidades visuales (por ejemplo hacer zoom en algunos controles, aumentando al fuentede letras).

3.4. Otras ventanas

Existen otras ventanas disponibles en la opcin Ver (View) de la ventana principal del proyecto Glade. Estasopciones se comportan como un interruptor, abriendo o cerrando estas ventanas. Estas ventanas son Widgettree windows (visor de widgets) y Clipboard window (Cortapapeles).

La ventana del rbol de widgets muestra una estructura jerrquica de los controles existentes en la ventanaactualmente seleccionada.

La ventana del cortapapeles (Clipboard) hace un seguimiento de los controles que usted ha copiado a lamemoria del cortapapeles. Se puede copiar ms de un control de forma simultnea y en esta ventana sepueden observar todos esos controles. Se puede seleccionar un control a pegar en alguna ventana ocontenedor, simplemente seleccionando el control desde esta ventana.


7/54



3.5. Los widgets de la Paleta

3.5.1. GTK+ Basic

La siguiente tabla muestra los widgets que estn disponibles en la paleta grupo GTK+ Basic:

Widget Descripcin

Window

Permite disear una ventana. Es el contenedor base de nuestra aplicacin.

Menu Bar

Para disear un sistema de Men en la aplicacin.

Toolbar

Disear una barra de herramientas.

Handle box

Contenedor de otros widgets que permite programar y capturar eventos que de forma nativael widget no es capaz de generar. Por ejemplo, a un texto se le podra programar un eventode clic si lo asignamos dentro de este contenedor.

Toolbar Button

Para asignar botones a la barra de herramientas.

Toolbar Toggle Button

Para asignar botones de doble estado a una barra de herramientas.

Toolbar Radio Button

Para asignar botones de radio a una barra de herramientas.

Toolbar Separator Item

Separador de barras de herramientas

Label

Asignar una etiqueta de texto

Text Entry

Para disear campos de texto en los formularios.


8/54



Widget Descripcin

ComboBox Entry

Disear listas desplegables que adems permiten escribir texto que no aparezca en la lista.

TextView

Diseador de un visor de gran cantidad de texto

Button

Colocar botones en el formulario

Toggle Button

Botones de dos estados.

Check Button

Botones de chequeo

Radio Button

Botones de radio

ComboBox

Listas desplegables

Spin Button

Botn de incremento / decremento.

List or Tree View

Para disear Vistas de Listas o rboles. Muy til, y quizs el widget con el ms se pelean losdesarrolladores de Gtk#.

Icon View

Visor de iconos o imgenes.

Horizontal Separator

Lnea separadora horizontal


9/54



Widget Descripcin

Vertical Separator

Lnea separadora vertical

Image

Para mostrar imgenes en un formulario

Drawing Area

Un lienzo para dibujar en nuestros formularios.

Dialog

Cajas de dilogo prediseada para utilizar en un formulario.

File Chooseer Dialog

Caja de dilogo para seleccionar un archivo desde el sistema de ficheros.

Color Selection Dialog

Caja de dilogo selectora de colores.

Font Selection Dialog

Caja de dilogo para seleccionar una fuente de letra.

Horizontal Box

Empaquetador de otros widgets. Los distribuye de forma horizontal, uno detrs de otro.

Vertical Box

Empaquetador de otros widgets. Los distribuye de forma vertical, uno debajo de otro.

Table

Empaquetador de otros widgets en forma de tabla. Los distribuye mediante las celdas de latabla.

Fixed Position

Empaquetador de otros widgets de posicionamiento manual y fijo. Los widgets se quedan enel sitio en que se colocan y no se reorganizan de forma automtica cuando se altera eltamao del contenedor principal.


10/54



Widget Descripcin

Horizontal Button Box

Crea un control contenedor horizontal con el nmero de botones que especifiquemos.

Vertical Button Box

Crea un control contenedor vertical con el nmero de botones que especifiquemos.

Horizontal Panes

Crea un panel con una barra divisoria que se desplaza en forma horizontal. Esta acta comoun separador de objetos que en la interfaz grfica el usuario puede desplazar con el mousepara alterar el tamao de las dos divisiones.

Vertical Panes

Crea un panel con una barra divisoria que se desplaza en forma vertical.

Notebook

Crea un contenedor con varios tabs o pestaas. Muy til para organizar GUIs que incluyenmuchos controles y que no caben en un formulario o que o haran lucir demasiado cargadoen la pantalla.

Frame

Crea un control agrupador (frame) que permite separar de forma lgica los controles denuestra interfaz Automticamente define un texto que actuar como ttulo del grupo.

Scrolled Window

Crea un control contenedor con barras de desplazamiento para ofrecerle movilidad a otroscontroles. Por ejemplo, un widget grfico (image) o una vista de rbol (tree view) se puedeacomodar dentro de este control y automticamente contarn con barras de desplazamientohorizontal y vertical cuando su contenido no alcance a ser visualizado en el rea actualmentevisible.

Status Bar

Permite definir una barra de estado a nuestra ventana. En este se puede visualizar mensajesinformticos de estado de nuestra aplicacin al usuario, con el objetivo de no estar cargandode forma continua mensajes de dilogo con botones de aceptar.


11/54



3.5.2. GTK+ Additional

La siguiente tabla muestra los widgets que estn disponibles en la paleta grupo GTK+ Additional:

Widget Descripcin

About Dialog

Crea de forma automtica una caja de dilogo Acerca de con todos los componentestpicos en la ventana de proyectos.

Input Dialog

Crea de forma automtica una caja de dilogo para dispositivos de entrada.

ToolBar Button withMenu

Define un botn de barra de herramientas con un menu asignado dentro de una barra deherramientas.

ToolBar Item

Define un item en una barra de herramienta.

Horizontal Scale

Define una barra de escala tipo termmetro horizontal para controlar a otros widgets.

Vertical Scale

Define una barra de escala tipo termmetro vertical para controlar a otros widgets.

Horizontal Ruler

Define una regla horizontal en la ventana

Vertical Ruler

Define una regla vertical en la ventana

Alignment

Define un widget con capacidad de manejar alineamiento en la presentacin


12/54



Widget Descripcin

Event Box

Define un contenedor capaz de generar y recibir eventos. til para asociarle eventos acontroles widgtes que no los poseen de forma nativa.

Calendar

Agregar un calendario.

Progress Bar

Agregar una barra de progreso.

Layout

Permite definir un contenedor con barras de desplazamiento con la capacidad de acomodara otros widgets de forma fija y desplazndolos en forma horizontal y vertical hasta donde sehayan diseado. Muy til para colocar objetos en formularios donde no sabemos hasta dondese deban colocar nuestros controles. En realidad define de forma automtica un ScrollWindow y un Fixed Layout.

Aspect frame

Agrega un frame o agrupador de otros widgets pero toma un aspecto diferente al frame delGTK+ Basic.

Arrow

Define de forma automtica puntas de flecha permitiendo definir el sentido de la puntamediante sus propiedades.

Expander

Permite definir un widget con la capacidad de expandirse cuando se hace clic sobre el textoasociado. Muy til para definir listas de texto que se van abriendo cuando el usuario haceclic sobre cada item de texto. Especial para hacer efectos de tablas dinmicas por ejemplo.

CurveAgregar capacidad de crear grficos de curva a nuestra GUI. Para grficas estadsticas.

Gamma Curve

Agregar capacidad de crear grficos de curva a nuestra GUI pero adems facilita el cambiarel tipo de grfica a mostrar (curva, lnea recta, etc). Para grficas estadsticas.

Horizontal Scrollbar

Definir una barra de desplazamiento horizontal dentro de un contenedor

Vertical Scrollbar

Definir una barra de desplazamiento vertical dentro de un contenedor


13/54



Widget Descripcin

File Chooser

Define un Widget File Chooser (Selector de archivos) completamente funcional dentro denuestra GUI.

Color Selection

Define un Widget Selector de color completamente funcional dentro de nuestra GUI.

Font Selection

Define un Widget selector de fuente de letras completamente funcional dentro de nuestraGUI.

Cell View

Define un objeto Cell View (visor de celda).

File Chooser Button

Crea un botn en la GUI que cuando el usuario hace clic sobre l, carga el selector dearchivos. Sus propiedades permiten indicarle si abre archivos o carpetas de nuestro sistemade archivos.

Color Chooser Button

Crea un botn en la GUI que cuando el usuario hace clic sobre l, carga el selector decolores.

Font Chooser Button

Crea un botn en la GUI que cuando el usuario hace clic sobre l, carga el selector defuentes.

PopUp Menu

Define todo un sistema de men Pop Up disponible en nuestro proyecto para que loinvoquemos y asignemos en la GUI que necesitemos de esa funcionalidad.

View Port

Define un rea con capacidad de mostrar a otro tipo de controles.

Custom Widget

Define un rea dentro de la GUI que permite cargar nuestros propios Widgets.


14/54



3.6. Creando nuestro proyecto Glade

En esta seccin aprenderemos a crea un proyecto Glade. Para esta seccin necesitamos cargar el IDE de

Visual Studio. En primer lugar lo que haremos es definir un proyecto e ir incorporando los elementosnecesarios para que nuestra interfaz sea funcional. Lo primero que haremos es disear la interfaz de formabsica (como lucira en la pantalla del usuario), luego la integraremos a nuestro cdigo y por ltimoagregaremos el cdigo necesario para tener alguna interactividad con el usuario. Cargue el IDE del VisualStudio y traiga la segunda cerveza del refrigerador.

3.6.1. Creando el proyecto Glade

Haga clic en Archivo, Nuevo y Proyecto. Seleccione proyecto Glade# (Project Glade#) de las plantillas yespecifique como nombre gtkmodelo1.

La plantilla incorpor todos los elementos bsicos necesarios para que nuestra GUI funcione con el Gtk. Elsiguiente paso ser disear nuestra GUI y ajustar el cdigo que automticamente gener la plantilla, esto, porque vamos a construir una solucin muy diferente a la de la plantilla.

Por el momento dejaremos quieto al cdigo y vamos a redisear la interfaz grfica que la plantilla nos disey lo ajustaremos de tal forma que incluya nuestro propio men y nuestra propia barra de herramientas, peroreutilizando los controles que ya nos dej hecho en Glade.


15/54



La GUI que vamos a disear tendr la siguiente distribucin:

Claro que en Gtk no lucir igual pero tendr los mismos elementos de GUI que necesitamos.

El men Catlogo tendr tres opciones:

El men Ayuda tendr dos opciones:

Aclarada esta parte, manos a la obra....


16/54



3.6.2. Creando la GUI principal

Haga doble clic en el explorador de proyecto sobre el objeto gladesharp1.glade.

Ahora tenemos cargado al Glade. En la ventana de proyecto debe aparecer un objeto llamado window1 quees el objeto que la platilla nos dej de forma automtica. Dejemos quieto ese objeto y vamos a disear losnuestros.

Para construir nuestra interfase, seleccione el widget Window de la paleta. Debe abrirse automticamente unanueva ventana donde empezaremos a disear nuestra GUI.


17/54



Ahora debemos tener una ventana vaca con el lienzo donde empezaremos a trabajar nuestra GUI.

Sin hacer clic en otra parte, en estos momentos en la ventana de propiedades debe estar mostrando laspropiedades disponibles para nuestra ventana. En la figura se seala con un circulo cuales propiedadescambiaremos.

Modifique las siguientes propiedades segn se muestra en esta tabla:

Propiedad Valor Descripcin

Name (Nombre) Winppal Nombre del objeto. Este nombre sirve paraidentificar nuestra ventana desde el archivoXML Glade.

Border Width(ancho del borde) 2 Este atributo indica que a que distancia secolocarn los objetos que se integren a laventana.

Title (ttulo de la ventana) Gtk Modelo 1 ::Principal

El ttulo que tendr la ventana.

Position (Posicion) Center La posicin que tendr la ventana cuando semuestre en pantalla. Con este parmetro laharemos centrar cuando arranque la aplicacin.

Named Icon (Icon nombrado) Gtk-home El icono de la ventana. En este caso, llamaremosuno de los iconos que tiene en el inventario elGtk. Revise la cantidad de iconos que podemosutilizar en nuestra GUI de forma automtica.


18/54



Observe como de forma automtica Glade nos va mostrando como est quedando nuestra GUI. Esto es algorealmente ventajoso por que no tenemos que esperar a ejecutar nuestra aplicacin para ver los efectos dediseo logrado.

Ahora disearemos el contenido de nuestra GUI. Antes de colocar objetos en una ventana, debe sealar elwidget de la paleta y hacer un clic sobre el punto exacto donde queremos colocarlo. Si no se puede alojar un

objeto determinado sobre un contenedor, Glade lo anunciar con un mensaje en una caja de dilogo.

Antes de agregar elementos a una ventana se debe tener clara la distribucin que haremos de la GUI. Ah escuando entran al escenario los widgets empaquetadores de otros. Estos nos permiten distribuir los demsobjetos en la interfaz que estamos diseando. Por eso es tan importante tener una imagen trazada de comoqueremos nuestra interfaz.


19/54



Estos son algunos de los contenedores organizadores que permiten agrupar a otros elementos y quecomnmente utilizaremos en el diseo de una GUI:

Horizontal Box

Define zonas para acomodar a los objetos. Los distribuye uno detrs del otro. Cuando se

asigna a la ventana solicita la cantidad de columnas a distribuir. En cada columnadebemos colocar un widget.

Esta es una muestra de la ventana con tres columnas definidas en el organizador:

As queda cuando le agregamos tres widgets dentro de cada una de las columnas:

Una ventaja del diseador es que nos solicita la cantidad de columnas que deseamos en el contenedor.Debemos saber de antemano cuantos objetos se van a alojar en este contenedor. Ah es donde reside laimportancia de tener un esbozo en alguna parte de nuestra interfase a disear.

Claro que el diseado permite que esta definicin de columnas inicial sea alterada para aumentarlas odisminuirlas.


20/54



Vertical Box

Define zonas para acomodar a los objetos. Los distribuye uno debajo del otro. Cuando seasigna a la ventana solicita la cantidad de lneas a distribuir. En cada lnea debemoscolocar un widget.

Esta es una muestra de la ventana con tres lneas definidas en el organizador:

As queda cuando le agregamos tres widgets dentro de cada una de las columnas:

Los contenedores Vertical Box y Horizontal Box pueden contener a su vez a otros contenedores. Estoscontenedores automticamente estiran a los otros widgets para que ocupen el tamao que se tenga definidodentro de la ventana que los contiene. Este tipo de comportamiento ser til dependiendo del tipo de ventanaa disear. Se puede ver feo si el diseo y el tipo de ventana no es el adecuado para llevar uno de estos tipos.

Se utilizan muchos estos dos contenedores para distribuir los objetos de una ventana.


21/54



Table

Define zonas para acomodar a los objetos en la forma de una tabla. Cuando se asigna a laventana solicita la cantidad de columnas y lneas a distribuir. En cada celda debemoscolocar un widget.

Esta es una muestra de la ventana con una tabla de 3 x 3 celdas definidas en el organizador:

As queda cuando le agregamos nueve widgets dentro de cada una de las columnas:


22/54



Fixed Position

Define zonas fijas para acomodar a los objetos. Los widgets que contenga se quedaranquietos cuando desplacemos los lmites de la ventana. Muy til para disear formulariosque no necesitan que sus campos se desplacen tpico de ventanas que no permiten alterarsu tamao.

Cunado lo agregamos al formulario este aparece como un lienzo vaco, esperando a que empecemos aacomodar los widgets que contendr.

Cuando se agrega este tipo de contenedor, tenemos que posicionar cada objeto dentro del contenedor. Sidesplazamos el borde la ventana veremos que estos se quedan fijos dentro del formulario.

Ahora es tiempo de empezar a colocar los widgets que necesitamos para nuestra GUI de ventana principal dela aplicacin. Revisemos que tipo de contenedor necesitamos para nuestra ventana. Habamos diseado elsiguiente esquema para la interfaz:


23/54



Revisando la GUI notamos que tiene cuatro reas: men, barra de herramientas, un rea sin nada dentro y labarra de estado. Esto nos lleva a concluir que necesitamos un widget que nos acomode todo en cuatro lneashacia abajo: Vertical Box.

Coloquemos entonces un vertical Box desde la paleta de Widgets y definamos 4 lneas.

Ahora su formulario debe lucir as:


24/54



Ahora coloquemos un widget de barra de men en la primer lnea.

Debe lucir de la siguiente forma (el widget automticamente nos define cuatro opciones, por el momento

dejmoslo as, luego lo personalizaremos para que se acomode a nuestro diseo):

Vamos a disear nuestra barra de herramientas. Seleccione el widget ToolBar y haga clic sobre la segundalnea del organizador vertical; especifique como dimensin 3 botones.

Ahora nuestro formulario debe lucir as:


25/54



Agreguemos los tres botones a la barra de herramienta haciendo clic en la paleta en el ToolBar Button (botnde barra de herramientas) y sealando la primer posicin reservada dentro de la barra de herramientas en eldiseo.

Si hizo las cosas bien, su formulario debe lucir as:

Coloque el siguiente botn y debe tener su formulario luciendo de la siguiente manera:

Antes de insertar el tercer botn a la barra, coloquemos un tpico separador de botones para indicar quenuestro ltimo botn trata de un tema muy diferente a los dos botones anteriores (estamos suponiendo).Como se le indic a la barra de herramientas que tendra tres posiciones, debemos insertar una nuevaposicin para acomodar al separador.

El diseador tiene la capacidad de eliminar, insertar, copiar y pegar objetos dentro de contenedores que soncomo una especie de arreglo.

Esta funcionalidad se activa al hacer clic derecho sobre el objeto contenedor. Para el caso de nuestra barra deherramientas, haremos clic derecho sobre la barra de herramientas exactamente sobre la ltima casilla vaca.

Glade debe mostrar un men Pop Up con opciones que muestran los objetos contendores que tenemosubicados en el diseo.

Seleccione el contenedor de toolbar1 de la lista y note que posee varias opciones para controlar las posicionesen la barra de herramientas.


26/54



Las opciones Insert item Before e Insert item after (antes y despus) permiten insertar posiciones antes ydespus de la posicin seleccionada. En nuestro caso le indicaremos que inserte una posicin despus (Insertitem After).

Note adems que desde este men flotante (Pop Up) podemos cortar, copiar, pegar y eliminar objetos dentrode la barra de herramientas.

Su formulario debe lucir de la siguiente manera luego de insertar una posicin:

Ahora inserte un widget separador (ToolBar Separator Item) de barra de herramientas.


27/54



Por ltimo, inserte un botn de barra de herramientas en la ltima posicin disponible.

Ya tenemos lista en nuestra interfase la representacin del men y la barra de herramientas. Ahora solo nosfalta agregar en la ltima lnea del contenedor Vertical Box, la barra de estado. Pero antes de agregarlahagamos un cambio a la forma en que el contenedor de la barra deber presentar

Seleccione de la paleta de widgets el control barra de estado (Status bar) y haga clic sobre la ltima lnea deldiseo.

Ahora, nuestra ventana tom la forma que inicialmente tenamos el diseo.

Fue una labor ardua la de construir nuestro primer diseo desde cero, pero no hemos terminado an con laGUI que necesitamos. Antes de continuar debes ir al refrigerador y destapar la tercera cerveza.


28/54



3.6.2. Completando la GUI principal

Ya contamos con un diseo de objetos (widgets) que se acercan al diseo de la GUI que desebamos. Vamosa terminar ese diseo colocando los elementos que darn el toque que esperamos del diseo.

Damos una revisada a los objetos que Glade tiene en el rbol de widgets. Seleccione View (ver) y luego ShowWidget Tree (Mostrar el rbol de widgets).

No importa que en estos momentos no se llamen igual al que les presento en la imagen (Glade empieza anumerar los objetos que vamos creando en cada instancia. Como posiblemente mientras de colocan losobjetos podemos ir eliminndolos, entonces la numeracin puede llegar a cambiar). Por eso, le daremos unnombre a cada uno de los objetos de la interfaz. Este rbol es muy til para ejecutar esa tarea. Solonombraremos aquellos objetos sobre los cuales necesitamos hacer referencia dentro de nuestro cdigo.

Para nombrarlos, seleccione el objeto (widget) dentro del rbol de widgets (Widget Tree) y de la ventana depropiedades, seleccione la propiedad nombre (Name). Escriba el nombre y repita la operacin para cadaobjeto del rbol requerido.

Al objeto men dle el nombre de menuPpal (menubar1), al objeto barra de herramientas (toolbar1) dle elnombre de toolPppal; al primer botn de la barra de herramientas (toolbutton1) dle el nombre de tbPais, alsegundo (toolbutton2) dle el nombre de tbCiudad y al cuarto botn (toolbutton3) dle el nombre de tbSalir.A la barra de estado (statusbar1) dle el nombre de BarraEstadoPpal.


29/54



Con estos nombres, ser posible referenciar los objetos de Glade dentro de nuestro cdigo. Esto nos dar unamejor ubicacin a la hora de querer invocar mtodos y propiedades de los objetos diseados en Glade.

Una vez se hayan definido todos los nombres, su ventana de widgets tree debe lucir as:

Ahora, personalicemos la barra de herramientas para que luzca como una verdadera barra de herramientas ennuestra GUI.


30/54



Para lograr esto, seleccione el primer botn de la barra de herramientas y seleccione en la ventana depropiedades, la propiedad Named Icon.

Como icono de este botn seleccione de la lista el llamado gtk-index. Claro est que puede definir sus propiosiconos con extensin png desde el botn que aparece al lado de la lista de iconos en el inventario de Gtk en la

propiedad icono, tomaremos prestado uno del inventario Gtk para que podamos mantener la mismapresentacin en la GUI. En la propiedad Label (Etiqueta) escriba Pas.

Ahora repita la misma operacin con el segundo botn de la barra de herramientas tbCiudad. Especifiquecomo Label el texto Ciudady como icono, seleccione Gtk-select-color.


31/54



Por ltimo repita la misma operacin con el cuarto botn de la barra de herramientas tbSalir. Especifiquecomo Label el texto Salir y como icono, seleccione Gtk-quit.

Ahora su barra de herramientas deber lucir as:

Ahora solo nos falta modificar el sistema de men para que nuestro sistema luzca igual al planeado.


32/54



3.6.3. Completando el men principal

Para modificar el men haga clic derecho sobre el objeto de barra de menu (menuPpal) y del menemergente (Pop Up) seleccione la opcin Edit Menus (Editar).

Cuando carga el editor de menu nos muestra la siguiente caja de dilogo:


33/54



Se han colocado unos crculos denotando las reas que componente al cuadro de dilogo Edito de Menu.

El rea 1 es el rea de opciones programadas en el men de barra. Observe que se intentan las opciones quepertenecen a cada men.

El rea 2 permiten organizar las opciones del men: movindolos hacia arriba, abajo, indentndolos haciadentro y afuera.

El rea 3 incluye las propiedades de la opcin seleccionada con el mouse en el rea 1.

El rea 4 permite controlar las tareas de insertar, eliminar, agregar separadores entre las opciones del men.

El rea 5 permite programar el tipo de opcin que deseamos aparezca en el men.

El rea 6 es para especificar que tipo de atajos (Hot keys o short cuts) deseamos en el men.

Y el rea 7 es para indicar si guardamos o no los cambios hechos en el editor de men.

Vamos a personalizar nuestro sistema de men segn lo tenemos planeado.

Haga clic el item del men (File) y pulse la tecla eliminar (delete o suprimir) hasta que no quede ningunaopcin en el editor de men.

Ahora diseemos las dos opciones del men: Catalogo y Ayuda.


34/54



Haga clic en el botn Add (Agregar) y ajuste las siguientes propiedades para este nuevo item: como Labelespecifique _Catalogo, Name (nombre) escriba mnuCatalogo, en la propiedad Handler (rutina capturadoradel evento clic) elimine lo que escribi por defecto el editor.

Observe que mientras escribe el Label del item, el editor va definiendo de forma automtica el nombre delitem y la rutina que va a capturar el evento de clic en la opcin (Handler). En este caso no programamosninguna rutina por tratarse de una opcin que simplemente debe desplegar a un submen.

Si hizo las cosas bien, entonces su editor debe lucir de la siguiente forma:

Ahora definamos la segunda opcin del men: Ayuda.

Pulse nuevamente el botn Add (agregar) y especifique los siguientes atributos: como Label escriba _Ayuda,nombre (Name) escriba mnuAyuda y como rutina capturadora del evento clic elimine lo que propuso eleditor.


35/54



Ahora nos falta programar las subopciones en cada men. Empecemos por la opcin Catalogo. Haga clic enla lista de opciones sobre Catalogo y pulse el botnAdd Child(Agregar hijo). Suministre como propiedadeslo siguiente:Label (etiqueta) el texto Pas, enName (nombre) especifique opcPais, como handler especifiqueon_opcPais_activate y como icono seleccione gtk-index.

Se ha especificado un handler debido a que esta opcin debe ejecutar algo una vez el usuario la seleccionecon el mouse. Esa rutina la debemos definir dentro de nuestro cdigo. Luego veremos como la definimos.Note adems que a esta opcin se le agreg el mismo icono de su equivalente en la barra de herramienta.Recuerde que puede especificar su propio icono que sea ms consecuente con lo que dice el texto.

Ahora, definamos la opcin Ciudad. Para esto, ubique el cursor sobre la opcin Pas y haga clic en el botnAdd(Agregar). Este botn realmente, agrega tems bajo el actualmente seleccionado, con atributos similaresal seleccionado. En este caso, crear una sub opcin del men Catalogo. Especifique las siguientespropiedades:Label igual a Ciudad, name igual a opcCiudad, handler igual a on_opcCiudad_activate y como

icono seleccione gtk-select-color.

Note que si en el momento de escribir el Label escribe el carcter de subrayado en cualquier parte del texto,se estar definiendo un atajo de forma automtica a esa tecla.


36/54



Ahora definamos el separador del submen catlogo. Seleccione la opcin Ciudady haga clicAdd Separator(Agregar Separador). De forma automtica se inserta el separador debajo de la opcin Ciudad. Para unseparador no necesitamos definir ningn atributo.

Ahora definamos la ltima opcin de este submen: Salir.

Seleccione el separador recin agregado y haga clic en el botn Add. Como atributos de la nueva opcinespecifique lo siguiente:Label igual a Salir, Name igual a opcSalir,Handlerigual a on_opcSalir_activate ycomo icono seleccione gtk-quit.


37/54



Solo nos falta definir el submen de la opcin Ayuda del men principal. Para hacer esto, haga clic en la listade opciones sobre la opcin Ayuda; luego haga clic en el botn Add Child (Agregar hijo) y especifique lossiguientes atributos: en Label escriba ndice, en Name escriba opcIndice, en Handler especifiqueon_opcIndice_activate y como icono seleccione de la lista gtk-help.

Solo nos falta definir la ltima opcin del submenu Ayuda. Para definirla, seleccione de la lista la opcinndice y haga clic en el botn Add para agregar un item similar en el submen. Especifique los siguientesatributos: como Label escriba Acerca de..., como Name especifique opcAcerca, como Handler escribaon_opcAcerca_activate y como icono seleccione gtk-about.

Ahora ya tenemos el sistema de men definido en la interfaz GUI tal cual lo habamos planeado. Ahora faltadarle los ltimos toques a la interfaz antes de volver al IDE de Visual Studio y continuar programando lainterfaz. Para salir del Editor de Men haga clic en el botn [Aceptar].


38/54



Ahora su ventana debe lucir de la siguiente forma:

Note que su sistema de men es completamente navegable en el diseador de Glade, lo cual es una ventajapor que nos permite revisar como lucir cuando ejecutemos nuestra aplicacin.

3.6.5. Dando los ltimos toques a nuestra GUI

Cuando se definieron las opciones del men, decidimos incluir una barra de herramientas que incluye tresbotones, ejecutando las mismas operaciones existentes en el submen Catlogo. Solo nos falta programarcapturadores de eventos iguales a los empleados en las opciones del submen.

Las rutinas definidas en las subopciones son las siguientes:

Sub Opcin en Catalogo Nombre rutina Barra de herramientas similar

Pas (opcPais) on_opcPais_activate BtPais

Ciudad (opcCiudad) on_opcCiudad_activate BtCiudad

Salir (opcSalir) on_opcSalir_activate BtSalir

Vamos entonces a finalizar nuestro diseo, invocando estos mismos capturadores de eventos en los botonesde la barra de herramienta.

Para hacer esto, seleccione la primer opcin en la barra de herramientas (btPais) y en la ventana depropiedades, seleccione la pestaa Signals (seales o eventos) ejecutemos la siguiente operacin. En la parteinferior de la pestaa Signals aparece un atributo llamado Signal y otro denominado Handler. En estos dosatributos es que haremos la programacin del evento clic en la barra de herramientas.


39/54



Haga clic en la caja de seleccin de Signal y seleccione de la lista que aparece, el evento click.

Cuando haga clic en el botn Aceptar, volver a la ventana de propiedades y observar que Glade ha llenadode forma automtica un nombre de Handler llamado on_tbPais_clicked.


40/54



Ahora solo nos falta agregar este handler a la lista de Signals. Para hacer esto, solo basta hacer clic en elbotn Add (Agregar). Note que en esta misma rea existe Update (Modificar), Delete (Eliminar) y Clear(borrar toda la lista). Esto ser muy til cuando estemos alterando seales y capturadores de eventos en undesarrollo que exige ms manejo de eventos que el de este ejemplo.

Ahora su lista debe lucir como la siguiente imagen:

Para programar el botn tbCiudad seleccinelo del diseo de la ventana y repita los pasos anteriores. Noteque Glade nombro la rutina capturadora del evento de forma automtica. Al final, la pestaa de Signals del

botn tbCiudad debe lucir similar a la siguiente figura:


41/54



Para programar el botn tbSalir seleccinelo del diseo de la ventana y repita los pasos anteriores. Note queGlade nombro la rutina capturadora del evento de forma automtica. Al final, la pestaa de Signals del botntbSalir debe lucir similar a la siguiente figura:

El ltimo evento que programaremos ser el de capturar el cierre de la ventana. Para hacer esto cierre laventana que estamos diseando (winppal) y por seguridad, haga clic en el objeto winppal de la ventana deGlade (objetos del proyecto). Una vez seleccionada, haga clic en la ventana propiedades, seleccione lapestaa Signals y programe el evento delete_event.


42/54



Si hizo las cosas bien, debe tener las propiedades definidas de la siguiente forma:

Con este evento, nuestro cdigo podr atrapar el momento en que se intente cerrar la ventana.

3.6.4. Finalizando el diseo de nuestra GUI

Solo nos falta agregar un pequeo truco para que la interfaz en el momento de ejecutar se vea bien. Con lo

que tenemos hasta el momento, cuando se ejecute nuestra aplicacin obtendremos la siguiente representacinen pantalla:

La barra de estado se encuentra ubicada despus de la barra de herramientas. Por supuesto que no debe de iren ese punto. Lo que haremos es aplicar un truco que le aprendimos al asistente de Gtk# en el objetowindow1. Revisando ese objeto, solucionaron este inconveniente insertando en la tercer lnea del VerticalBox un widget Drawing Area (rea de dibujo).


43/54



Ahora, el diseo de la ventana debe lucir de la siguiente forma:

El widget drawing area se estirar hasta llenar de forma uniforme el rectngulo central de nuestra interfaz,logrando el efecto que deseamos para nuestro diseo. Recursivos no?

Ahora ya tenemos todo un diseo de GUI finalizado. Solo nos falta indicarle a Glade que deseamos construirel cdigo XML que necesita el wrapper para integrarlo a nuestro cdigo. Cierre la ventana winppal si an latiene abierta. Guarde los cambios que hemos hecho hasta el momento. No lo haba guardado nunca? Es unamuy mala idea no hacerlo con Glade de por medio.

Para construir nuestro cdigo XML, basta con hacer clic en el botn Build (Construir). Glade generar deforma automtica el archivo que incluye nuestro diseo GUI. Cuando termina de escribir el cdigo notificaen la barra de tareas que el cdigo ha sido escrito.


44/54



Ahora cierre el Glade y volvamos al IDE de Microsoft Visual Studio. Responsa haciendo clic en el botn[Salir] y ya estamos de vuelta en el IDE.

Nota: para copiar elementos en la memoria, lo mejor es hacerlo a travs del men emergente (pop Up) queGlade muestra en los sitios donde se puede copiar. Si no se hace de tal forma, el simple Ctrl + C puede no

llegar a traer nada desde la interfase Glade hacia por ejemplo, el IDE Visual Studio.

Ahora solo nos falta agregar el cdigo necesario para que nuestra aplicacin funcione. Solo le hace falta ir alrefrigerador y destapar la cuarta cerveza!!!.

3.6.5. Agregando el cdigo para integrar la GUI a nuestra aplicacin

Ahora ya tenemos una interfaz grfica terminada y con eventos programados. Lo que haremos en estaseccin ser agregar el cdigo necesario para integrar la GUI y atrapar mediante cdigo los eventos

programados.Vamos a modificar el cdigo para que haga exactamente lo que queremos que haga.

Identifique la regin de cdigo #region Glade Widgets y cambie el texto en negrita. Esta lnea crea unareferencia interna con el objeto ventana definido en el proyecto Glade.

#region Glade Widgets

[Widget] Gtk.Window winppal;

#endregion


45/54



Busque la rutina Driver y modifique el texto que aparece en negrita. Con este texto se le informa al IDE quebusque dentro del archivo XML de glade, la definicin de la ventana winppal, el cual es el nombre que ledefinimos a nuestro objeto window en el proyecto Glade.

public Driver(string[] args)

{

Application.Init();

Glade.XML gxml = new Glade.XML (null, "gladesharp1.glade", "winppal", null);gxml.Autoconnect (this);Application.Run();

}

Ahora busque la rutina llamada on_window1_delete_eventy cmbiele el nombre a on_winppal_delete_event.Esta seccin de cdigo se ejecutar cuando se intente cerrar la ventana de la aplicacin. Podra agregar porejemplo, una pregunta al usuario consultando sobre el cierre o no de la aplicacin.

publicvoid on_window1_delete_event (object o, DeleteEventArgs args)

{Application.Quit();args.RetVal = true;

}

Ahora busque la regin o seccin de cdigo llamada#region Button Click Event handlers y elimnela contodo y rutinas. Haga lo mismo con la seccin de cdigo #region Menu item handlers.

Lo que haremos ahora es crear nuestra propias secciones de cdigo ms acorde a lo que necesitamos hacercon nuestra GUI.

Hagamos un inventario de las rutinas que asociamos a eventos en las opciones del sistema de men principaly barras de herramienta (para que no se nos quede sin programar ninguna, adems por que se generara unerror en tiempo de ejecucin cuando el runtime de .Net no encuentre la rutina que debe ejecutar cuandosuceda el evento programado.

Rutinas asociadas a las subopciones de men

Menu Subopcion (Evento Clic) Rutina capturadora del evento

Catalogo Pas on_opcPais_activate

Ciudad on_opcCiudad_activate

Salir on_opcSalir_activate

Ayuda ndice on_opcIndice_activate

Ayuda on_ocpAcerca_activate

Rutinas asociadas a la barra de herramienta

Botn (Evento Clic) Rutina capturadora del evento

btPais on_tbPais_clicked

btCiudad on_tbCiudad_clicked

btSalir on_tbSalir_clicked


46/54



Rutinas asociadas a la ventana

Evento Rutina capturadora del evento

delete_event on_winppal_delete_event

Como plantilla de ejemplo, tenga presente que la rutina capturadora de evento clic para una opcin de menes la siguiente:

protectedvoid on_OpcionMenu_activate(object o, EventArgs args)

{return;

}

La rutina capturadora de evento clic para una barra de herramienta es la siguiente:

protectedvoid on_BotonHerramienta_clicked(object o, EventArgs args)

{

return;}

Y para capturar el cierre de una ventana es la siguiente:

publicvoid on_NombreVentana_delete_event (object o, DeleteEventArgs args)

{Application.Quit();args.RetVal = true;

}

Volviendo al IDE, en el cdigo eliminamos todas las rutinas que estaban predefinidas por el asistente Gtk#.

Despus de la rutina on_winppal:delete_event defina dos regiones de cdigo de la siguiente forma:

// conectar las seales definidas en Glade

publicvoid on_winppal_delete_event (object o, DeleteEventArgs args){

Application.Quit();args.RetVal = true;

}

#region Capturar Evento clic en botones de barra de herramienta

#endregion

#region Capturar Evento clic en opciones de menu

#endregion

En cada una de estas secciones agruparemos las rutinas de tal forma que se vea muy organizado el cdigo,algo muy til cuando el proyecto empiece a crecer en cdigo.


47/54



La regin de cdigo#region Capturar Evento clic en botones de barra de herramienta debe incluir lassiguientes rutinas:


protectedvoid on_tbPais_clicked(object o, EventArgs args){

return;}protectedvoid on_tbCiudad_clicked(object o, EventArgs args){

return;}protectedvoid on_tbSalir_clicked(object o, EventArgs args){

Application.Quit();return;

}

#endregion

La regin de cdigo #region Capturar Evento clic en opciones de menu debe incluir las siguientes rutinas:


protectedvoid on_opcPais_activate(object o, EventArgs args){

return;}protectedvoid on_opcCiudad_activate(object o, EventArgs args){

return;}

protectedvoid on_opcSalir_activate(object o, EventArgs args){Application.Quit();return;

}protectedvoid on_opcIndice_activate(object o, EventArgs args){

return;}protectedvoid on_ocpAcerca_activate(object o, EventArgs args){

return;}

#endregion


48/54



Aqu est el cdigo completo de la aplicacin:

using System;using Gtk;using Glade;

namespace gtkmodelo1{

//////Gtk Modelo1. Un modelo para el desarrollo con Gtk y mono///class Driver{

#region Glade Widgets

[Widget] Gtk.Window winppal;

#endregion

//////The main entry point for the application.///[STAThread]staticvoid Main(string[] args){

new Driver(args);}

public Driver(string[] args){

Application.Init();

Glade.XML gxml = new Glade.XML (null, "gladesharp1.glade", "winppal", null);gxml.Autoconnect (this);Application.Run();

}// conectar las seales definidas en Gladepublicvoid on_winppal_delete_event (object o, DeleteEventArgs args){

Application.Quit();args.RetVal = true;

}


protectedvoid on_tbPais_clicked(object o, EventArgs args){return;

}protectedvoid on_tbCiudad_clicked(object o, EventArgs args){

return;}


49/54



protectedvoid on_tbSalir_clicked(object o, EventArgs args){


}

#endregion


protectedvoid on_opcPais_activate(object o, EventArgs args){

return;}protectedvoid on_opcCiudad_activate(object o, EventArgs args){

return;}protectedvoid on_opcSalir_activate(object o, EventArgs args){


}protectedvoid on_opcIndice_activate(object o, EventArgs args){

return;}protectedvoid on_ocpAcerca_activate(object o, EventArgs args){

return;}#endregion

}

}

Ahora solo falta generar nuestro cdigo ejecutable. Haga clic en la opcin Generardel IDE Visual Studio.Net y seleccione la opcin Generar Solucin. Ahora ya puede ejecutar su aplicacin desde el botn Iniciardel IDE.


50/54



Cuando se ejecute la aplicacin se obtendr una imagen similar a esta:

Pruebe su funcionalidad y notar que tiene todos los elementos y comportamientos tpicos de una ventanaprincipal de aplicacin.


51/54



3.6.6. Cambiando el tema de Glade

El Glade cuando se instala, incorpora una utilidad para cambiar de forma sencilla el tema en que debemostrar las grficas GTK. Esta es una forma muy sencilla de probar lo potente que es el GTK para adquirirun diseo de presentacin (look and feel) diferente con solo cambiar un parmetro.

La utilidad se carga desde el grupo de Gtk# for Windows, opcinApplications; haga clic sobre ThemeSelector(Selector de temas). Se cargar la siguiente caja de dilogo:

En la parte que dice Current User, deje seleccionada la opcin [Always follow global settins] (siempre sigala configuracin global). En la seccin Global, seleccione el tipo de look-and-feel deseado.

Por ejemplo si seleccionamos Metal, y hacemos clic en el botn [Aceptar], se obtiene la siguientepresentacin de nuestra aplicacin al volverla a ejecutar.


52/54



La misma aplicacin con la opcinMS-Windows seleccionada en el ThemeSelector:

La misma aplicacin con la opcinRaleigh seleccionada en el ThemeSelector:

La misma aplicacin con la opcinRedmon95 seleccionada en el ThemeSelector:

Con esta utilidad, tenemos cuatro sencillas formas de ver nuestra misma aplicacin y sin tener que escribirnada de cdigo para esto.


53/54



3.7. Probando al mono

Hasta el momento hemos desarrollado nuestra aplicacin con el IDE de Microsoft Visual Studio. Pero, serque nuestro compilado ser compatible con el mono? Vamos a hacer la prueba.

Primero, abra una ventana de comando desde la opcin que mono trae para esto. Haga clic en Inicio, Todoslos programas, Mono 1.1.13.8 for Windows y seleccione la opcin Mono 1.1.13.8 Command Prompt. Estoiniciar una sesin de comandos con todos los recursos de mono listo.

Vamos hasta la carpeta donde reside el compilado de nuestro proyecto gtkmodelo1 en la ruta:

c:\mono_samples\gtkmodelo1\bin\debug\

Luego escriba la orden: mono gtkmodelo1.exe

Observe que la aplicacin ejecuta, lo cual indica que hasta el momento se ha mantenido la compatibilidadmultiplataforma. Es muy buena prctica ir probando la compatibilidad entre .net para evitar el tener quevolver a reescribir cdigo cuando intentemos ejecutar nuestra rutina en cualquiera de las dos plataformas.

En otros captulos, probaremos el desarrollo desde otros IDES diferentes al de Microsoft .Net.


54/54


3.8. Resumen

En este capitulo diseamos nuestra primer interfaz en glade y la vinculamos a nuestro cdigo. La interfazdiseada es la tpica ventana principal de una aplicacin. Se dieron adems los modelos o plantillas de cdigopara los eventos que se pueden programar en este tipo de interfaces.

Aprendimos adems a interactuar con el Glade en las rutinas ms bsicas de diseo de una GUI.

En el Captulo 4 aprenderemos a crear utilidades GTK y a integrarlas de la forma correcta a la interfaz GUIprincipal.

Hasta la prxima entrega.

Cordialmente,

Mauricio Cano Ossa

Un discpulo ms del dios de los monos...

El Dios de Los Monos-Cap 3-Mauricio Cano Ossa

Documents

Transcript of El Dios de Los Monos-Cap 3-Mauricio Cano Ossa