PyGTK/Hello World Tutorial/lang-es: Difference between revisions

From OLPC
Jump to navigation Jump to search
(Changed to bundlebuilder.start() to avoid warnings)
No edit summary
 
Line 2: Line 2:
| source = PyGTK/Hello_World_Tutorial
| source = PyGTK/Hello_World_Tutorial
| lang = es
| lang = es
| version = 111
| status = {{translation/incomplete/{{SUBPAGENAME}}}}
}}
}}


Line 11: Line 11:
<td>__TOC__</td>
<td>__TOC__</td>
<td valign="top" align="center" style="padding-left:20px;">
<td valign="top" align="center" style="padding-left:20px;">
<font style="color:green">'''Welcome!'''</font> This is a simple tutorial for<br> creating Activities using PyGTK.
<font style="color:green">'''Bienvenidos!'''</font> Este es un tutorial simple para crear actividades usando PyGTK.




Line 18: Line 18:
</tr>
</tr>
</table>
</table>
== About PyGTK ==
== Sobre PyGTK ==
[http://www.pygtk.org/ PyGTK] is a framework to create a user interface with python. It's quick, easy and very well [http://www.pygtk.org/docs/pygtk/index.html documented].
[http://www.pygtk.org/ PyGTK] es un marco de trabajo para crear interfaz de usuarios con python. Es rapido y facil y muy bien [http://www.pygtk.org/docs/pygtk/index.html documentado].




== Getting started & download ==
== Empezando con PyGTK y descargas ==
Por favor comenzar con estos primeros pasos:
Please start with these first steps:
# Make yourself familiar with [http://www.pygtk.org/ PyGTK] and write few demo applications
# Familiarizate con [http://www.pygtk.org/ PyGTK] y escribe algunas aplicaciones de demostracion
#* [http://www.moeraki.com/pygtktutorial/pygtk2tutorial/index.html Tutorial]
#* [http://www.moeraki.com/pygtktutorial/pygtk2tutorial/index.html Tutorial]
#* [http://www.pygtk.org/docs/pygtk/index.html PyGTK Reference]
#* [http://www.pygtk.org/docs/pygtk/index.html Referencia de PyGTK]
# Use [http://glade.gnome.org/ Glade] (or [http://gazpacho.sicem.biz/ Gazpacho]) to design an user interface, and use that in an application. This step is optional, but recommended.
# Usa [http://glade.gnome.org/ Glade] (o [http://gazpacho.sicem.biz/ Gazpacho]) para diseñar interfaces, y usarlas en tu aplicacion. Estos pasos son opcionales pero recomendados.


Save the tutorial in your hard disk ([http://wiki.laptop.org/index.php?title=PyGTK/Hello_World_Tutorial&printable=yes here])
Guarda el tutorial en tu disco duro ([http://wiki.laptop.org/index.php?title=PyGTK/Hello_World_Tutorial&printable=yes aquí])


At this point we assume that you made at least one "hello-world" application with pygtk ''':)'''
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í.:
The source code from these examples are downloadable here:
* [http://wiki.laptop.org/images/b/ba/Gtktest.xo gtktest.xo]
* [http://wiki.laptop.org/images/b/ba/Gtktest.xo gtktest.xo]
* [http://wiki.laptop.org/images/0/02/Gtktest-glade.xo gtktest-glade.xo]
* [http://wiki.laptop.org/images/0/02/Gtktest-glade.xo gtktest-glade.xo]


= Estructura basica de una actividad =
= Basic Activity Structure =
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.
This is a quite minimal list of files and directories for an Activity. You can use this code as a blueprint for your projects, basically changing ''gtktest'' to your Activity's name.




== gtktest.activity/ ==
== gtktest.activity/ ==
This is the Activity's base directory.
Esto es el directorio base de una actividad.




== gtktest.activity/MANIFEST ==
== gtktest.activity/MANIFEST ==
Este archivo de texto contiene la estructura de la actividad automaticamente creada por setup.py. En tu ejemplo:
This text-file contains the structure of the Activity automatically created by setup.py. In our example:
MANIFEST
MANIFEST
setup.py
setup.py
Line 55: Line 55:


== gtktest.activity/setup.py ==
== gtktest.activity/setup.py ==
This is a script which creates the MANIFEST and zips everything into gtktest.xo.
Este es el script que crea el MANIFEST y zips todo dentro de gtktest.xo.
#!/usr/bin/env python
#!/usr/bin/env python
try:
try:
Line 70: Line 70:


== gtktest.activity/activity/ ==
== gtktest.activity/activity/ ==
This directory contains information for sugar.
Este directorio contiene información para sugar.


== gtktest.activity/activity/activity-gtktest.svg ==
== gtktest.activity/activity/activity-gtktest.svg ==
A .svg image for our Activity ([http://webcvs.freedesktop.org/svg-icons/lila/gnome/scalable/ svg's @ freedesktop.org]).
Una imagen en .svg para nuestra actividad ([http://webcvs.freedesktop.org/svg-icons/lila/gnome/scalable/ svg's @ freedesktop.org]).




== gtktest.activity/activity/activity.info ==
== gtktest.activity/activity/activity.info ==
This file contains information for sugar about our Activity.
Este archivo contiene información para sugar de la Actividad.
[Activity]
[Activity]
name = gtktest
name = gtktest
Line 87: Line 87:


== gtktest.activity/activity.py ==
== gtktest.activity/activity.py ==
This file is the core of the Activity, which loads the toolbar and window, attaches a [[GTK]] Widget to itself, and imports the Activity's source code source code from '''gtktest.py'''. This structure has a few advantages:
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:
# No need to change activity.py for any code updates
# No es necesario cambiar activity.py por alguna actualizacion de codigo
# Run gtktest.py as standalone or imported from activity.py
# Ejecute gtktest.py de forma autonoma o importela desde activity.py
# Load GTK
# Carge GTK
import gtk
import gtk
# Load our own source code from gtktest.py
# Cargamos nustro propio código desde gtktest.py
# There you can find the main class gtktest()
# Ahí puede encontrar la clase principal class gtktest()
from gtktest import gtktest
from gtktest import gtktest
# Cargar las bibliotecas de sugar
# Load sugar libraries
from sugar.activity import activity
from sugar.activity import activity
Line 105: Line 105:
self._name = handle
self._name = handle
# Set title for our Activity
# De el titulo a nuestra Actividad
self.set_title('gtk test')
self.set_title('gtk test')
# Attach sugar toolbox (Share, ...)
# Adjunte una barra de tareas Sugar (Share, ...)
toolbox = activity.ActivityToolbox(self)
toolbox = activity.ActivityToolbox(self)
self.set_toolbox(toolbox)
self.set_toolbox(toolbox)
toolbox.show()
toolbox.show()
# Create the main container
# Crear el contenedor principal
self._main_view = gtk.VBox()
self._main_view = gtk.VBox()
# Import our class gtktest():
# Importamos nuestra clase gtktest():
# Step 1: Load class, which creates gtktest.widget
# Paso 1: Cargamos la clase, la cual crea gtktest.widget
self.gtktest = gtktest()
self.gtktest = gtktest()
# Step 2: Remove the widget's parent
# Paso 2: Eliminamos el widget padre
if self.gtktest.widget.parent:
if self.gtktest.widget.parent:
self.gtktest.widget.parent.remove(self.gtktest.widget)
self.gtktest.widget.parent.remove(self.gtktest.widget)
# Step 3: We attach that widget to our window
# Paso 3: Adjntamos el widget a nuestra ventana
self._main_view.pack_start(self.gtktest.widget)
self._main_view.pack_start(self.gtktest.widget)
# Display everything
# Desplegamos todo
self.gtktest.widget.show()
self.gtktest.widget.show()
self._main_view.show()
self._main_view.show()
Line 134: Line 134:
self.show_all()
self.show_all()


= Creating the interface =
= Creando una actividad =
We recommend creating an interface with a UI designer like glade or gazpacho, but understanding the structure is easier using [[PyGTK]].
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: [http://wiki.laptop.org/images/b/ba/Gtktest.xo gtktest.xo]
== using PyGTK ==
We only need to add one file: gtktest.py. Download full example: [http://wiki.laptop.org/images/b/ba/Gtktest.xo gtktest.xo]




=== gtktest.activity/gtktest.py ===
=== gtktest.activity/gtktest.py ===
Este es el codigo fuente de la actividad.
This is the source code of the Activity.
#! /usr/bin/env python
#! /usr/bin/env python
# Pango es una biblioteca para procesar texto internacionalizado
# Pango is a library for rendering internationalized texts
import pango
import pango
import gtk
import gtk
# We don't yet need glade
# No necesitamos usar glade directamente
# import gtk.glade
# import gtk.glade
class gtktest:
class gtktest:
def __init__(self):
def __init__(self):
# Create a GTK Label
# Creamos un objeto GTK Label
label = gtk.Label("Hello World")
label = gtk.Label("Hello World")
# self.widget will be attached to the Activity
# self.widget sera adjuntado a la Actividad
# This can be any GTK widget except a window
# Aquí puede ir cualquier widget de GTK excepto el de ventana
self.widget = label
self.widget = label


Line 173: Line 172:


#! /usr/bin/env python
#! /usr/bin/env python
# Pango es una biblioteca para procesar texto internacionalizado
# Pango is a library for rendering internationalized texts
import pango
import pango

Latest revision as of 22:26, 12 July 2011

  Traducción de PyGTK/Hello_World_Tutorial original  
  english | españolCopy "{{subst:requesttranslation}}" to 한국어   +/- cambios  


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


Activity-gtktest.png

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

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]