PyGTK/Hello World Tutorial/lang-es

Bienvenidos! Este es un tutorial simple para crear actividades usando PyGTK.

Sobre PyGTK

PyGTK es un marco de trabajo para crear interfaz de usuarios con python. Es rapido y facil y muy bien documentado.

Empezando con PyGTK y descargas

Por favor comenzar con estos primeros pasos:

1. Familiarizate con PyGTK y escribe algunas aplicaciones de demostracion
   • Tutorial
   • Referencia de PyGTK
2. Usa Glade (o Gazpacho) para diseñar interfaces, y usarlas en tu aplicacion. Estos pasos son opcionales pero recomendados.

Guarda el tutorial en tu disco duro (aquí)

Ene ste punto asumimos que has hecho por lo menos una aplicación "hello-world" con pygtk :)

El codigo fuente de este ejemplo es descargable de aquí.:

• gtktest.xo
• gtktest-glade.xo

Estructura basica de una actividad

Esta es una minima de listas y archvios y directorios de una actividad. Puedes usar este codigo como molde para tus proyectos, basicamente cambiando gtktest por el nombre de tu actividad.

gtktest.activity/

Esto es el directorio base de una actividad.

gtktest.activity/MANIFEST

Este archivo de texto contiene la estructura de la actividad automaticamente creada por setup.py. En tu ejemplo:

MANIFEST
setup.py
activity/activity-gtktest.svg
activity/activity.info
activity.py
gtktest.py

gtktest.activity/setup.py

Este es el script que crea el MANIFEST y zips todo dentro de gtktest.xo.

#!/usr/bin/env python
try:
	from sugar.activity import bundlebuilder
	bundlebuilder.start()
except ImportError:
	import os
	os.system("find ./ | sed 's,^./,gtktest.activity/,g' > MANIFEST")
	os.system('rm gtktest.xo')
	os.chdir('..')
	os.system('zip -r gtktest.xo gtktest.activity')
	os.system('mv gtktest.xo ./gtktest.activity')
	os.chdir('gtktest.activity')

gtktest.activity/activity/

Este directorio contiene información para sugar.

gtktest.activity/activity/activity-gtktest.svg

Una imagen en .svg para nuestra actividad (svg's @ freedesktop.org).

gtktest.activity/activity/activity.info

Este archivo contiene información para sugar de la Actividad.

[Activity]
name = gtktest
service_name = org.laptop.gtktest
class = activity.gtktestActivity
icon = activity-gtktest
activity_version = 1
show_launcher = yes

gtktest.activity/activity.py

Este archivo es el nucleo de nuestra Actividad, el cual carga la barra de tareas y ventana, adjunta un widget, GTK a el mismo, e importa el codigo fuente de la Actividad del gtktest.py. Esta estructura tiene algunas ventajas:

1. No es necesario cambiar activity.py por alguna actualizacion de codigo
2. Ejecute gtktest.py de forma autonoma o importela desde activity.py

# Carge GTK
import gtk

# Cargamos nustro propio código desde gtktest.py
# Ahí puede encontrar la clase principal class gtktest()
from gtktest import gtktest

# Cargar las bibliotecas de sugar
from sugar.activity import activity  

class gtktestActivity(activity.Activity):
	def __init__(self, handle):
		activity.Activity.__init__(self, handle)
		self._name = handle

		# De el titulo a nuestra Actividad
		self.set_title('gtk test')

		# Adjunte una barra de tareas Sugar (Share, ...)
		toolbox = activity.ActivityToolbox(self)
		self.set_toolbox(toolbox)
		toolbox.show()

		# Crear el contenedor principal
		self._main_view = gtk.VBox()

		# Importamos nuestra clase gtktest():

		# Paso 1: Cargamos la clase, la cual crea gtktest.widget
		self.gtktest = gtktest()

		# Paso 2: Eliminamos el widget padre
		if self.gtktest.widget.parent:
			self.gtktest.widget.parent.remove(self.gtktest.widget)
 
		# Paso 3: Adjntamos el widget a nuestra ventana
		self._main_view.pack_start(self.gtktest.widget)

		# Desplegamos todo
		self.gtktest.widget.show()
		self._main_view.show()
		self.set_canvas(self._main_view)
		self.show_all()

Creando una actividad

Recomendamos crear una interfaz con un diseñador grafico como glade o gazpacho, pero entiendase que la estructura es mas facil usando PyGTK.

Usando PyGTK

Solo necesitamos armar un archivo: gtktest.py. Descarga un ejemplo completo desde: gtktest.xo

gtktest.activity/gtktest.py

Este es el codigo fuente de la actividad.

#! /usr/bin/env python

# Pango es una biblioteca para procesar texto internacionalizado
import pango

import gtk

# No necesitamos usar glade directamente
# import gtk.glade

class gtktest:
	def __init__(self):
		# Creamos un objeto GTK Label
		label = gtk.Label("Hello World")

		# self.widget sera adjuntado a la Actividad
		# Aquí puede ir cualquier widget de GTK excepto el de ventana
		self.widget = label

using Glade

Example: 3 Buttons and one label. Download Full Example: gtktest-glade.xo

Glade is a User Interface Designer, with it you can rapidly design user interfaces and use them with PyGTK (Getting started). In our example, the glade xml is saved in gtktest.glade.

gtktest.activity/gtktest.py

#! /usr/bin/env python
# Pango es una biblioteca para procesar texto internacionalizado
import pango

import gtk
import gtk.glade

class gtktest:
	def __init__(self, runaslib=True):
		# Load Glade XML
		self.xml = gtk.glade.XML("gtktest.glade")
		
		# Get Window
		self.w = self.xml.get_widget('window1')
		self.w.connect("delete_event", gtk.main_quit)
		
		# Get Windows child
		self.w_child = self.w.get_child()
		
		# Get our Label
		self.label = self.xml.get_widget('label1')
		
		# Connect functions to Buttons
		b1 = self.xml.get_widget('quitButton')
		b1.connect('clicked', self.on_btn_quit)

		b2 = self.xml.get_widget('helloButton')
		b2.connect('clicked', self.on_btn_hello)

		b3 = self.xml.get_widget('cleanButton')
		b3.connect('clicked', self.on_btn_clean)

		# self.widget will be attached to the Activity
		# This can be any GTK widget except a window
		self.widget = self.w_child

		if not runaslib:
			self.w.show_all()
			gtk.main()

	def on_btn_hello(self, *args):
		self.label.set_markup("Hello\nWorld!")

	def on_btn_clean(self, *args):
		self.label.set_markup("Hello")

	def on_btn_quit(self, *args):
		gtk.main_quit()
				
if __name__ == '__main__':
	gtktest(False)

gtktest.activity/gtktest.glade

This file is the XML of the interface, created using Glade:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE glade-interface SYSTEM "glade-2.0.dtd">
<glade-interface>
  <widget class="GtkWindow" id="window1">
    <property name="events">GDK_POINTER_MOTION_MASK | GDK_POINTER_MOTION_HINT_MASK | GDK_BUTTON_PRESS_MASK | GDK_BUTTON_RELEASE_MASK</property>
    <child>
      <widget class="GtkVBox" id="vbox1">
        <property name="visible">True</property>
        <property name="events">GDK_POINTER_MOTION_MASK | GDK_POINTER_MOTION_HINT_MASK | GDK_BUTTON_PRESS_MASK | GDK_BUTTON_RELEASE_MASK</property>
        <child>
          <widget class="GtkLabel" id="label1">
            <property name="height_request">160</property>
            <property name="visible">True</property>
            <property name="events">GDK_POINTER_MOTION_MASK | GDK_POINTER_MOTION_HINT_MASK | GDK_BUTTON_PRESS_MASK | GDK_BUTTON_RELEASE_MASK</property>
            <property name="label" translatable="yes"><span font_desc="40">Hello</span></property>
            <property name="use_markup">True</property>
          </widget>
        </child>
        <child>
          <widget class="GtkHButtonBox" id="hbuttonbox1">
            <property name="visible">True</property>
            <property name="events">GDK_POINTER_MOTION_MASK | GDK_POINTER_MOTION_HINT_MASK | GDK_BUTTON_PRESS_MASK | GDK_BUTTON_RELEASE_MASK</property>
            <property name="border_width">10</property>
            <property name="spacing">10</property>
            <child>
              <widget class="GtkButton" id="helloButton">
                <property name="visible">True</property>
                <property name="can_focus">True</property>
                <property name="receives_default">True</property>
                <property name="events">GDK_POINTER_MOTION_MASK | GDK_POINTER_MOTION_HINT_MASK | GDK_BUTTON_PRESS_MASK | GDK_BUTTON_RELEASE_MASK</property>
                <property name="label" translatable="yes">Who?</property>
                <property name="response_id">0</property>
              </widget>
            </child>
            <child>
              <widget class="GtkButton" id="cleanButton">
                <property name="visible">True</property>
                <property name="can_focus">True</property>
                <property name="receives_default">True</property>
                <property name="events">GDK_POINTER_MOTION_MASK | GDK_POINTER_MOTION_HINT_MASK | GDK_BUTTON_PRESS_MASK | GDK_BUTTON_RELEASE_MASK</property>
                <property name="label" translatable="yes">Clean Up!</property>
                <property name="response_id">0</property>
              </widget>
              <packing>
                <property name="position">1</property>
              </packing>
            </child>
            <child>
              <widget class="GtkButton" id="quitButton">
                <property name="visible">True</property>
                <property name="can_focus">True</property>
                <property name="receives_default">True</property>
                <property name="events">GDK_POINTER_MOTION_MASK | GDK_POINTER_MOTION_HINT_MASK | GDK_BUTTON_PRESS_MASK | GDK_BUTTON_RELEASE_MASK</property>
                <property name="label" translatable="yes">gtk-quit</property>
                <property name="use_stock">True</property>
                <property name="response_id">0</property>
              </widget>
              <packing>
                <property name="position">2</property>
              </packing>
            </child>
          </widget>
          <packing>
            <property name="position">1</property>
          </packing>
        </child>
      </widget>
    </child>
  </widget>
</glade-interface>

Installation & Usage

• Run setup.py to create the content bundle

./setup.py dist

• Copy gtktest.xo to your xo or emulator (SCP, USB Key, Download, ...)
• Install the bundle with Xo-get:

./xo-get.py install gtktest.xo

• Then you can start the Activity from the Home-Menu or from xo-get:

./xo-get.py start gtktest.xo

• Remove the Activity:

./xo-get.py remove gtktest.xo

Troubleshooting

Application logs are located in /home/olpc/.sugar/default/logs. If you have python compilation errors, the icon for this tutorial will appear in the run circle and sit there with the "starting..." tag visible on the hover menu forever. You can look in /home/olpc/.sugar/default/logs for a file named after the "activity_name" value in the activity/activity.info file ("org.laptop.gtktest" in the example) to find the actual trouble which caused this behavior. You will have to reboot sugar with <ctrl-alt-erase> in order to remove the spurious icon from the run list.

Support

Questions, feedback, or whatever: Talk:PyGTK/Hello_World_Tutorial

Feel free to edit this page and to add yourself to the contributors list.

Version Information

Tutorials started by crazy-chris and Jaume: January 2008, Vienna

References

• SVG Cow Icon: [1]
• More SVG Icons: [2]

• PyGTK
  • Reference: [3]
  • Tutorials: [4]

• Glade
• Gazpacho