CIXOS-FIA/Sugarizacion: Difference between revisions

From OLPC
Jump to navigation Jump to search
(New page: El tutorial explica paso a paso como crear el [http://divieira.googlepages.com/HelloWorld-1.xo Paquete de la actividad Hola Mundo]. Se asume que ya ha [[:Category:Installing Sugar|instala...)
 
No edit summary
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
El tutorial explica paso a paso como crear el [http://divieira.googlepages.com/HelloWorld-1.xo Paquete de la actividad Hola Mundo].
The tutorial explains step by step how to create the [http://divieira.googlepages.com/HelloWorld-1.xo Hello World activity bundle].


Se asume que ya ha [[:Category:Installing Sugar|instalado el entorno de desarrollo Azúcar]].
It assumes you have already [[:Category:Installing Sugar|installed a Sugar development environment]].


Create the bundle directory structure:
Crear la estructura de directorios del paquete:


mkdir HolaMundo.activity
mkdir HelloWorld.activity
mkdir HolaMundo.activity/activity
mkdir HelloWorld.activity/activity


Escribir el archivo activity.info, para describir el paquete en el sub-directorio de la actividad (por ejemplo, HolaMundo.activity/activity/activity.info). Las especificaciones de los [[Activity Bundles|Paquetes de Actividad]] explican en detalle el significado de cada campo.
Write the activity.info file, to describe your bundle in the activity sub-directory (e.g. HelloWorld.activity/activity/activity.info). The [[Activity Bundles]] specification explain in detail the meaning of each field.


{{ Box File | activity.info | 2=<pre>
{{ Box File | activity.info | 2=<pre>
[Activity]
[Activity]
name = HolaMundo
name = HelloWorld
service_name = com.ywwg.HelloWorldActivity
service_name = com.ywwg.HelloWorldActivity
class = ActividadHolaMundo.ActividadHolaMundo
class = HelloWorldActivity.HelloWorldActivity
icon = actividad-holamundo
icon = activity-helloworld
activity_version = 1
activity_version = 1
show_launcher = yes
show_launcher = yes
Line 21: Line 21:
}}
}}


Diseñe un icono para su actividad, de acuerdo con el [[Sugar_Icon_Format|formato del icono]] y colóquelo en el sub-directorio "activity". El nombre del archivo debe coincidir con el nombre especificado en el archivo .info (por ejemplo, actividad-holamundo.svg)
Design an icon for your activity, according to the [[Sugar_Icon_Format|icon format]] and place it in the activity sub-directory. The file name should match the icon file name specified in the info file (e.g. activity-helloworld.svg).


{{ Box File | actividad-holamundo.svg | 2=<pre>
{{ Box File | actividad-holamundo.svg | 2=<pre>
<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY fill_color "#FFFFFF">
<!ENTITY stroke_color "#FF0000">
<!ENTITY fill_color "#FFFFFF">
<!ENTITY stroke_color "#000000">
]>
]>
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
<rect x="1" y="1" width="48" height="48" style="fill:&fill_color;;stroke:&stroke_color;;stroke-width:2"/>
<rect x="1" y="1" width="48" height="48"
</svg>
style="fill:&fill_color;;stroke:&stroke_color;;stroke-width:2"/>
</svg>
</pre>
</pre>
}}
}}
Write the setup.py script in the top level directory (e.g. HelloWorldActivity.activity/setup.py), which in most cases will look like this:

Escribir el script setup.py en el directorio de nivel superior (por ejemplo, HolaMundo.activity/setup.py), que en la mayoría de los casos se verá asi:


{{ Box File | setup.py | 2=<pre>
{{ Box File | setup.py | 2=<pre>
Line 44: Line 45:
}}
}}


Code your activity. The name you specified in the .info file as "class" is the name of the class which runs your code. For the activity.info file above, we specify a top-level module named HelloWorldActivity.HelloWorldActivity (please note that the use of uppercase names in module names is considered poor Python style, feel free to use an activity name with more standard style names).
Codifique su actividad. El nombre que ha especificado en el archivo .info como "class" es el nombre de la clase que ejecuta el código. Para el archivo anterior activity.info, especificamos un modulo de alto nivel ActividadHolaMundo.ActividadHolaMundo (por favor, tenga en cuenta que el uso de mayúsculas en los nombres de módulos en Python es un estilo pobre, siéntase libre de utilizar el nombre de una actividad con mas estilo de nombres estándar).


{{ Box File | ActividadHolaMundo.py | 2=<pre>
{{ Box File | HelloWorldActivity.py | 2=<pre>
from sugar.activity import activity
from sugar.activity import activity
import logging
import logging

import sys, os
import sys, os
import gtk
import gtk

class ActividadHolaMundo(activity.Activity):
class HelloWorldActivity(activity.Activity):
def hola(self, widget, data=None):
def hello(self, widget, data=None):
logging.info('Hola Mundo')
logging.info('Hello World')

def __init__(self, handle):
def __init__(self, handle):
print "ejecutando actividad init", handle
print "running activity init", handle
activity.Activity.__init__(self, handle)
activity.Activity.__init__(self, handle)
print "ejecutando actividad"
print "activity running"

self.set_title('Hola Mundo')
self.set_title('Hello World')

# Crea la caja de Herramientas.Que contiene la Barra de Herramientas de la
# Creates the Toolbox. It contains the Activity Toolbar, which is the
# bar that appears on every Sugar window and contains essential
# Actividad, que es la barra que aparece en cada ventana del Azucar y contiene
# funcionalidades esenciales, como los botones 'Compartir con:' y 'Parar'.
# functionalities, such as the 'Collaborate' and 'Close' buttons.
toolbox = activity.ActivityToolbox(self)
toolbox = activity.ActivityToolbox(self)
self.set_toolbox(toolbox)
self.set_toolbox(toolbox)
toolbox.show()
toolbox.show()

# Crea un nuevo boton con la etiqueta "Hola Mundo".
# Creates a new button with the label "Hello World".
self.button = gtk.Button("Hola Mundo")
self.button = gtk.Button("Hello World")
# Cuando el boton recibe la seNal de "clicked", llamara a la funcion hola()
# When the button receives the "clicked" signal, it will call the
# pasando a "None" como argumento. La funcion hola() es definida en
# function hello() passing it None as its argument. The hello()
# lineas mas arriba.
# function is defined above.
self.button.connect("clicked", self.hola, None)
self.button.connect("clicked", self.hello, None)
# Ajuste el boton para ser nuestro lienzo. El lienzo es la seccion principal
# Set the button to be our canvas. The canvas is the main section of
# de toda Ventana Azucar. Se llena toda el area debajo
# every Sugar Window. It fills all the area below the toolbox.
# de la caja de herramientas.
self.set_canvas(self.button)
self.set_canvas(self.button)
# The final step is to display this newly created widget.
self.button.show()
# El paso final es mostrar esta nueva creacion de widgets.
self.button.show()
print "AT END OF THE CLASS"
print "AL FINAL DE LA CLASE"
</pre>
</pre>
}}
}}


Crear un MANIFEST (por ejemplo, HolaMundo.activity/MANIFEST), que contiene la lista de los archivos a incluir en el paquete. (Nota: Asegúrese de '''no''' dejar líneas en blanco al final del archivo.)
Create a MANIFEST (e.g. HelloWorldActivity.activity/MANIFEST), containing the list of the files to include in the package. (Note: Be sure '''not''' to leave blank lines at the end of the file.)


{{ Box File | | 2=<pre>
{{ Box File | | 2=<pre>
HelloWorldActivity.py
ActividadHolaMundo.py
</pre>
</pre>
}}
}}


The structure of the directory now must see as:
La estructura del directorio ahora debe verse como:
HolaMundo.activity/
HelloWorld.activity/
HolaMundo.activity/setup.py
HelloWorld.activity/setup.py
HolaMundo.activity/activity
HelloWorld.activity/activity
HolaMundo.activity/activity/activity.info
HelloWorld.activity/activity/activity.info
HolaMundo.activity/activity/actividad-holamundo.svg
HelloWorld.activity/activity/activity-helloworld.svg
HolaMundo.activity/ActividadHolaMundo.py
HelloWorld.activity/HelloWorldActivity.py
HolaMundo.activity/MANIFEST
HelloWorld.activity/MANIFEST

Setup your bundle for development


Instale su paquete para el desarrollo
./setup.py dev
./setup.py dev


(Esto crea un enlace simbólico en ~/Activities).
(It appears this just creates a symlink in ~/Activities .)


If you now run sugar the activity icon should be visible on the frame. (You have to restart sugar to get it to pick up the change if you just installed it. Hit ctrl-alt-erase.)
Si ahora ejecuta el Azúcar, el icono de la actividad debe ser visible en el marco. (Hay que reiniciar el Azúcar para ver el cambio. Pulsa Ctrl-Alt-borrar.)


[[category:groups]]
[[category:groups]]

Latest revision as of 16:49, 20 February 2009

The tutorial explains step by step how to create the Hello World activity bundle.

It assumes you have already installed a Sugar development environment.

Create the bundle directory structure:

mkdir HelloWorld.activity
mkdir HelloWorld.activity/activity

Write the activity.info file, to describe your bundle in the activity sub-directory (e.g. HelloWorld.activity/activity/activity.info). The Activity Bundles specification explain in detail the meaning of each field.

 File: activity.info
 [Activity]
 name = HelloWorld
 service_name = com.ywwg.HelloWorldActivity
 class = HelloWorldActivity.HelloWorldActivity
 icon = activity-helloworld
 activity_version = 1
 show_launcher = yes

Design an icon for your activity, according to the icon format and place it in the activity sub-directory. The file name should match the icon file name specified in the info file (e.g. activity-helloworld.svg).

 File: actividad-holamundo.svg
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
   <!ENTITY fill_color "#FFFFFF">
   <!ENTITY stroke_color "#000000">
 ]>
 <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
   <rect x="1" y="1" width="48" height="48"
   style="fill:&fill_color;;stroke:&stroke_color;;stroke-width:2"/>
 </svg>

Write the setup.py script in the top level directory (e.g. HelloWorldActivity.activity/setup.py), which in most cases will look like this:

 File: setup.py
 #!/usr/bin/python
 from sugar.activity import bundlebuilder
 bundlebuilder.start()

Code your activity. The name you specified in the .info file as "class" is the name of the class which runs your code. For the activity.info file above, we specify a top-level module named HelloWorldActivity.HelloWorldActivity (please note that the use of uppercase names in module names is considered poor Python style, feel free to use an activity name with more standard style names).

 File: HelloWorldActivity.py
 from sugar.activity import activity
 import logging
 
 import sys, os
 import gtk
 
 class HelloWorldActivity(activity.Activity):
     def hello(self, widget, data=None):
         logging.info('Hello World')
 
     def __init__(self, handle):
         print "running activity init", handle
         activity.Activity.__init__(self, handle)
         print "activity running"
 
         self.set_title('Hello World')
 
         # Creates the Toolbox. It contains the Activity Toolbar, which is the
         # bar that appears on every Sugar window and contains essential
         # functionalities, such as the 'Collaborate' and 'Close' buttons.
         toolbox = activity.ActivityToolbox(self)
         self.set_toolbox(toolbox)
         toolbox.show()
 
         # Creates a new button with the label "Hello World".
         self.button = gtk.Button("Hello World")
     
         # When the button receives the "clicked" signal, it will call the
         # function hello() passing it None as its argument.  The hello()
         # function is defined above.
         self.button.connect("clicked", self.hello, None)
     
         # Set the button to be our canvas. The canvas is the main section of
         # every Sugar Window. It fills all the area below the toolbox.
         self.set_canvas(self.button)
     
         # The final step is to display this newly created widget.
         self.button.show()
     
         print "AT END OF THE CLASS"

Create a MANIFEST (e.g. HelloWorldActivity.activity/MANIFEST), containing the list of the files to include in the package. (Note: Be sure not to leave blank lines at the end of the file.)

 File:
 HelloWorldActivity.py

The structure of the directory now must see as:

HelloWorld.activity/
HelloWorld.activity/setup.py
HelloWorld.activity/activity
HelloWorld.activity/activity/activity.info
HelloWorld.activity/activity/activity-helloworld.svg
HelloWorld.activity/HelloWorldActivity.py
HelloWorld.activity/MANIFEST

Setup your bundle for development

./setup.py dev

(It appears this just creates a symlink in ~/Activities .)

If you now run sugar the activity icon should be visible on the frame. (You have to restart sugar to get it to pick up the change if you just installed it. Hit ctrl-alt-erase.)