Iniciando la interfaz gráfica (Parte 2)

En este artículo, agregaré un par de nuevos elementos a la interfaz para dejarla prácticamente completa. Hay que tener en cuenta que aún no he entrado en Sugar, estoy usando aún sólo GTK. Esto tiene la ventaja de que aún podemos correr el programa en equipos sin Sugar, pero aún no tenemos funcionalidad de sugar como la barra superior de la actividad o la posibilidad de integrar nuestra aplicación con el Diario de Sugar.
En la entrada anteriror, mostré cómo hacer la cuadrícula de letras y cómo ponerla dentro de una ventana GTK. Ahora que voy a colocar otros elementos como el contador y la entrada de texto, es necesario usar "Contenedores" de GTK. Los contenedores son "objetos" que me permiten colocar otros "objetos" dentro de ellos. Como en una repisa, puedo tener varias divisiones para poner elementos. Para construir la interfaz, usaré los contenedores gtk.VBox y gtk.HBox que son contenedores con espacios alineados vertical u horizontalmente respectivamente.
Primero usaré un HBox para partir la ventana en dos partes. En la izquierda voy a tener los dados y la línea de entrada de texto, y en la derecha, tendré el contador y la información de las palabras. El HBox me crea un contenedor (que llamo box1) con elementos alineados uno al lado del otro. Luego con un VBox (que llamo box2) que colocaré dentro del HBox (usando la función pack_start), podré colocar la cuadrícula sobre la entrada de texto:

mainwindow = gtk.Window(gtk.WINDOW_TOPLEVEL)
mainwindow.connect("delete_event", gtk.main_quit)
box1 = gtk.HBox()
box1.show()
mainwindow.add(box1)
box2 = gtk.VBox() # Left side panels
box2.show()
box1.pack_start(box2)
box3 = gtk.VBox() # Right side panels
box3.show()
box1.pack_start(box3)
# Create dice grid
grid = wordhuntgrid()
grid.set_size_request(250, 250)
grid.show()
box2.pack_start(grid)
# Create text entry line
word_entry = gtk.Entry()
word_entry.show()
box2.pack_start(word_entry)

Finalmente en otra caja vertical (box3), pondré el contador y otros dos elementos de texto vacíos de los que me encargaré en otra ocasión:

# Create timer display
timer_label = gtk.Label("1:00")
timer_label.modify_font(pango.FontDescription("mono 24"))
timer_label.set_size_request(100, 90)
timer_label.modify_fg(gtk.STATE_NORMAL, gtk.gdk.Color(60000, 5000, 5000))
timer_label.show()
box3.pack_start(timer_label)
#Create dummy Player Panel
player_panel = gtk.Label(" ")
player_panel.show()
box3.pack_start(player_panel)
#Create dummy Definitions panel
definition_panel = gtk.Label(" ")
definition_panel.show()
box3.pack_start(definition_panel)
mainwindow.show()
gtk.main()

Con este sencillo código ya tengo una ventana que se ve así en Ubuntu (Gnome):


Y así en Sugar:


Y como es usual, el código:

#! /usr/bin/env python
# -*- coding: utf-8 -*-

# GTK es la librería gráfica usada por Sugar
import gtk

# Pango es una librería para el dibujo de texto internacional
import pango

class wordhuntgrid(gtk.Table):
    def __init__(self):
        self.size = 4
        gtk.Table.__init__(self, self.size, self.size)
        self.dice_labels = []
        for row in range(self.size):
            dice_row = []
            for column in range(self.size):
                new_label = gtk.Label("A")
                new_label.modify_font(pango.FontDescription("sans 32"))
                new_label.show()
                self.attach(new_label, \
                            row, row + 1, column, column + 1,
                            gtk.EXPAND, gtk.EXPAND)
                dice_row += [new_label]
            self.dice_labels += [dice_row]

mainwindow = gtk.Window(gtk.WINDOW_TOPLEVEL)
mainwindow.connect("delete_event", gtk.main_quit)
box1 = gtk.HBox()
box1.show()
mainwindow.add(box1)
box2 = gtk.VBox() # Left side panels
box2.show()
box1.pack_start(box2)
box3 = gtk.VBox() # Right side panels
box3.show()
box1.pack_start(box3)
# Create dice grid
grid = wordhuntgrid()
grid.set_size_request(250, 250)
grid.show()
box2.pack_start(grid)
# Create text entry line
word_entry = gtk.Entry()
word_entry.show()
box2.pack_start(word_entry)
# Create timer display
timer_label = gtk.Label("1:00")
timer_label.modify_font(pango.FontDescription("mono 24"))
timer_label.set_size_request(100, 90)
timer_label.modify_fg(gtk.STATE_NORMAL, gtk.gdk.Color(60000, 5000, 5000))
timer_label.show()
box3.pack_start(timer_label)
#Create dummy Player Panel
player_panel = gtk.Label(" ")
player_panel.show()
box3.pack_start(player_panel)
#Create dummy Definitions panel
definition_panel = gtk.Label(" ")
definition_panel.show()
box3.pack_start(definition_panel)
mainwindow.show()
gtk.main()

Imágen:
mark sebastian: http://www.flickr.com/photos/markjsebastian/210573715/