Activity tutorial: Difference between revisions

From OLPC
Jump to navigation Jump to search
No edit summary
(class is deprecated; use exec = sugar-activity)
 
(5 intermediate revisions by 5 users not shown)
Line 1: Line 1:
{{dated}}

For up to date information on creating Activities see http://www.flossmanuals.net/make-your-own-sugar-activities/

{{Translations}}
{{Translations}}
{{Developers}}
{{Developers}}
<< [[Tutorials]]
<< [[Tutorials]]


Este tutorial explica paso a paso como crear la '''Actividad Hola Mundo''' en un conjunto. Puedes [http://divieira.googlepages.com/HelloWorld-1.xo descargar un paquete completo .xo], aunque el paquete no sera exactamente identico al que esta a continuación.
This tutorial explains step by step how to create the Hello World Activity bundle. You can [http://divieira.googlepages.com/HelloWorld-1.xo download a completed .xo package], though the package will not exactly match the below contents.


Este tutorial asume que has leido el [[Developers|Manual del Desarrollador]], has [[Developers/Setup|instalado un ambiente de desarrollo de Sugar]] y deseas desarrollar en [[Developers/Setup#Python/PyGTK|PyGTK]] (el estandar de desarrollo para actividades en OLPC).
This tutorial assumes you have read the [[Developers|Developer's Manual]], have [[Developers/Setup|installed a Sugar development environment]] and wish to use the [[Developers/Setup#Python/PyGTK|PyGTK]] development approach (the standard approach to developing activities for the OLPC).


== Comenzando ==
== Getting started ==
*Create the bundle directory structure:
*Crea una estructura de directorios:


mkdir -p HelloWorldActivity.activity/activity
mkdir -p HelloWorldActivity.activity/activity


*Escribe el archivo <tt>activity.info</tt>, para describir el conjunto dentro del sub-directorio de una actividad (e.g. <tt>HelloWorldActivity.activity/activity/activity.info</tt>). La especificación del [[Activity Bundles]] explica en detalle el significado de cada campo.
*Write the <tt>activity.info</tt> file, to describe your bundle in the activity sub-directory (e.g. <tt>HelloWorldActivity.activity/activity/activity.info</tt>). The [[Activity Bundles]] specification explain in detail the meaning of each field.
**Nota: en la compilación joyride-1525, sugar no pudo localizar el icono cuando intente esto asi que elimine la extension '.svg' de la linea 'icon = activity-helloworld.svg'.
**Note: in a joyride-1525 build, sugar could not locate the icon when I tried this unless I removed the '.svg' extension from the 'icon = activity-helloworld.svg' line.


{{ Box File | activity.info | 2=<pre>
{{ Box File | activity.info | 2=<pre>
Line 19: Line 23:
name = HelloWorld
name = HelloWorld
bundle_id = org.laptop.HelloWorldActivity
bundle_id = org.laptop.HelloWorldActivity
class = HelloWorldActivity.HelloWorldActivity
exec = sugar-activity HelloWorldActivity.HelloWorldActivity
icon = activity-helloworld
icon = activity-helloworld
activity_version = 1
activity_version = 1
Line 27: Line 31:
}}
}}


*Diseña un icono para la actividad siguiendo las instrucciones en [[Making_Sugar_Icons | creando iconos para Sugar]] y ponlo en el subdirectorio de la actividad. El nombre del archivo debe ser igual al nombre del archivo de icono especificado en el archivo de información (e.g. <tt>activity-helloworld.svg</tt>). El contenido del archivo SVG se vera así:
*Design an icon for your activity by following the instructions on [[Making_Sugar_Icons | making icons for Sugar]] and place it in the activity sub-directory. The file name should match the icon file name specified in the info file (e.g. <tt>activity-helloworld.svg</tt>). The contents of the SVG file will look something like:


{{ Box File | activity-helloworld.svg | 2=<pre>
{{ Box File | activity-helloworld.svg | 2=<pre>
Line 43: Line 47:
}}
}}


*Escribe el script <tt>setup.py</tt> en el directorio raíz (e.g. <tt>HelloWorldActivity.activity/setup.py</tt>), el cual en muchas ocaciones se vera de esta forma:
*Write the <tt>setup.py</tt> script in the top level directory (e.g. <tt>HelloWorldActivity.activity/setup.py</tt>), which in most cases will look like this:


{{ Box File | setup.py | 2=<pre>
{{ Box File | setup.py | 2=<pre>
Line 52: Line 56:
}}
}}


A more advanced version, which supports building activity bundles without Sugar installed, looks like this:
Una versión avanzada, la cual soporta la creacion de actividades sin Sugar previamente instalado, se vera de esta forma:


{{ Box File | setup.py | 2=<pre>
{{ Box File | setup.py | 2=<pre>
Line 70: Line 74:
}}
}}


*Programa tu actividad en Code Python. El nombre que especificaste en <tt>.info</tt> el archivo como "<tt>class</tt>" es el nombre de las clases el cual corre tu codigo. Para las el archivo de <tt>activity.info</tt>, especificaremos un modulo de raiz llamado <tt>HelloWorldActivity.HelloWorldActivity</tt> (por favor not aque el uso de mayusculas en nombres de modulos es considerado un mal [[Python Style Guide|estilo en python]], nombra como quieras la actividad con un estilo estandar).
*Code your activity in Python. The name you specified in the <tt>.info</tt> file as "<tt>class</tt>" is the name of the class which runs your code. For the <tt>activity.info</tt> file above, we specify a top-level module named <tt>HelloWorldActivity.HelloWorldActivity</tt> (please note that the use of uppercase names in module names is considered poor [[Python Style Guide|Python style]], feel free to use an activity name with more standard style names).
{{ Box File | HelloWorldActivity.py | 2=<pre>
{{ Box File | HelloWorldActivity.py | 2=<pre>
from sugar.activity import activity
from sugar.activity import activity
Line 113: Line 117:
}}
}}


El archivo anterior es llamado <tt>HelloWorldActivity.py</tt>
The above file is called <tt>HelloWorldActivity.py</tt>


*Crea un archivo <tt>MANIFEST</tt> (e.g. <tt>HelloWorldActivity.activity/MANIFEST</tt>), conteniendo una lista de los archivos (relativos al directorio en donde se encuentra el MANIFEST) para incluir el paquete. (Nota: Asegurate '''no''' dejar lineas en blanco al final del archivo.) Este script hace eso en linux (correrlo desde el directorio de HellowWorldActivity.activity):
*Create a <tt>MANIFEST</tt> (e.g. <tt>HelloWorldActivity.activity/MANIFEST</tt>), containing the list of the files (relative to the directory that the MANIFEST is in) to include in the package. (Note: Be sure '''not''' to leave blank lines at the end of the file.) This script does that in linux (run it from within the HellowWorldActivity.activity directory):
cd HelloWorldActivity.activity
cd HelloWorldActivity.activity
find . -type f | sed 's,^./,,g' > MANIFEST
find . -type f | sed 's,^./,,g' > MANIFEST


*Your directory structure should now look like this:
*La estructura de tu directorio ahora debe verse como esto:
HelloWorldActivity.activity/
HelloWorldActivity.activity/
HelloWorldActivity.activity/setup.py
HelloWorldActivity.activity/setup.py
Line 128: Line 132:
HelloWorldActivity.activity/MANIFEST
HelloWorldActivity.activity/MANIFEST


*Asegurate que todo los archivos de python tienen los permisos requeridos para su uso.
*Make sure that all your python files have the required permissions to be used.
chmod a+x setup.py
chmod a+x setup.py
chmod a+x HelloWorldActivity.py
chmod a+x HelloWorldActivity.py


*Configura tu conjunto para desarrollar (debe ser usuario olpc cuando hagas esto) para convertirte en usuario olpc, escribe: su - olpc
*Setup your bundle for development (must be user olpc when you do this) to become user olpc, type: su - olpc


Si el sistema te pide una contraseña, intenta usar: su
If you are prompted for a password, trying using: su


python setup.py dev
python setup.py dev


Esto crea un vinculo entre el folder de actividades en <tt>~/Activities</tt>, asi que Sugar puede encontrar tu actividad.
This just creates a symlink to your activity folder in <tt>~/Activities</tt>, so that Sugar can find your activity.


*Restart Sugar using Ctrl-Alt-Erase and your activity will appear in the interface! (NOTE: By default, the Home view shows only the favorite activities. You should press Ctrl+2 or go the right-upper corner and change to the List View)
*Restart Sugar using Ctrl-Alt-Erase and your activity will appear in the interface! (NOTE: By default, the Home view shows only the favorite activities. You should press Ctrl+2 or go the right-upper corner and change to the List View)
Line 144: Line 148:
*Run your activity, and if there are errors use the [[Log]] viewer activity to see what went wrong.
*Run your activity, and if there are errors use the [[Log]] viewer activity to see what went wrong.


== Ejecutando ==
== Running ==
Si ejecutas ahora Sugar el icono de la actividad sear visible en el marco. (Deberás reiniciar sugar para que coja los cambios si aun lo instalaste. Haz clic en <tt>ctrl-alt-erase</tt>.)
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 <tt>ctrl-alt-erase</tt>.)


Tambien podras editar el codigo en tu conjunto de directorios de manera directa. Nota que la primera vez que lanzas la Actividad, dejara procesos activos aun si cierras la ventana, deberas matar el <tt>sugar-activity-factory</tt> para que recargue cuando hagas clic de nuevo.
You can also edit the code in your bundle directory directly. Note that the first time your Activity is launched, it leaves a process around even if you close the window, so you must kill the <tt>sugar-activity-factory</tt> to get it to reload when you click again.


== Distribución ==
== Distribution ==
Crea un paquete <tt>.xo</tt> para distribuir el conjunto. (Un archivo <tt>.xo</tt> es esencialmente un archvio zip creado a base del MANIFEST con metadatos extras, de forma similar a un archivo JAR. También tiene una forma de localización, y en el futuro esperamos que sea posible firmar los paquetes tambien.) El nombre de conjunto es automaticamente generado desde los valores '<tt>name</tt>' y '<tt>activity_version</tt>' encontrados en el archivo <tt>activity.info</tt>, separado por un guión, con una extensión <tt>.xo</tt>.
Create an <tt>.xo</tt> package to distribute your bundle. (An <tt>.xo</tt> file is essentially a zip file built from the MANIFEST with some extra metadata, like a JAR file. It also has some localization ability, and in the future we expect to be able to sign these too.) The bundle name is automatically generated from the '<tt>name</tt>' and '<tt>activity_version</tt>' values found in the <tt>activity.info</tt> file, separated by a dash, with a <tt>.xo</tt> extension.


./setup.py dist_xo
./setup.py dist_xo


Para instalar la xo en una laptop puedes usar el script de instalación.
To install the xo on a laptop you can use the installer script.


sugar-install-bundle HelloWorld-1.xo
sugar-install-bundle HelloWorld-1.xo


== Resolucion de problemas ==
== Trouble Shooting ==


Puedes encontrar logs de aplicaciones en /home/olpc/.sugar/default/logs. Si el ejemplo falla al compilar, sugar mostratara el icono en el circulo pero permanecerá por siempre en "Iniciando..." cuando te elevas sobre el puntero sobre este. Deberás reiniciar sugar con &lt;ctrl-alt-erase&gt; para poder eliminar el icono. Puedes encontrar la causa del problema en el log llamado el "service-name" en tu archivo activity.info, en este caso "org.laptop.HelloWorldActivity".
You can find application logs in /home/olpc/.sugar/default/logs. If the sample fails to compile, sugar will show you the icon in the circle but remain forever at the "Starting..." tag when you hover your mouse over it. You'll have to restart sugar with &lt;ctrl-alt-erase&gt; in order to remove the icon. You can find the cause of your trouble in the the log named for the "service-name" in your activity.info file, in this case "org.laptop.HelloWorldActivity".


== Ver tambien ==
== See also ==


* [[Activity bundle|Conjunto de actividades]]
* [[Activity bundles]]
* [[Hacking Sugar|Hackeando Sugar]]
* [[Hacking Sugar]]
* [[Localization|Localizacion]] -- deberás localizar tu actividad para hacerla accesible a usuarios de la OLPC
* [[Localization]] -- you will need to localize your activity to make it accessible to users of the OLPC
* [[Game development HOWTO|Desarrollo de Juegos COMO]]
* [[Game development HOWTO]]
* [[Textedit Activity|Actividad Textedit]] - editor de texto sencillo para soportar el desarrollo y las pruebas de XO
* [[Textedit Activity]] - simple text editor to support development and testing on the Xo




Line 174: Line 178:
[[Category:HowTo]]
[[Category:HowTo]]
[[Category:Developers]]
[[Category:Developers]]
[http://cvresumewritingservices.org/ resume writing services]

Latest revision as of 16:36, 17 January 2014

Emblem-warning.png The currency of this article or section may be limited by out-of-date information.
There may be relevant discussion on its talk page

For up to date information on creating Activities see http://www.flossmanuals.net/make-your-own-sugar-activities/

  english | 日本語 | 한국어 | português | español HowTo [ID# 294804]  +/-  


<< Tutorials

This tutorial explains step by step how to create the Hello World Activity bundle. You can download a completed .xo package, though the package will not exactly match the below contents.

This tutorial assumes you have read the Developer's Manual, have installed a Sugar development environment and wish to use the PyGTK development approach (the standard approach to developing activities for the OLPC).

Getting started

  • Create the bundle directory structure:
mkdir -p HelloWorldActivity.activity/activity
  • Write the activity.info file, to describe your bundle in the activity sub-directory (e.g. HelloWorldActivity.activity/activity/activity.info). The Activity Bundles specification explain in detail the meaning of each field.
    • Note: in a joyride-1525 build, sugar could not locate the icon when I tried this unless I removed the '.svg' extension from the 'icon = activity-helloworld.svg' line.
 File: activity.info
 [Activity]
 name = HelloWorld
 bundle_id = org.laptop.HelloWorldActivity
 exec = sugar-activity HelloWorldActivity.HelloWorldActivity
 icon = activity-helloworld
 activity_version = 1
 host_version = 1
 show_launcher = yes
  • Design an icon for your activity by following the instructions on making icons for Sugar 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). The contents of the SVG file will look something like:
 File: activity-helloworld.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 stroke_color "#666666">
   <!ENTITY fill_color "#FFFFFF">
 ]>
 <svg xmlns="http://www.w3.org/2000/svg" width="55" height="55">
   <rect x="5" y="5" width="45" height="45"
   style="fill:&fill_color;;stroke:&stroke_color;;stroke-width:3.5"/>
 </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/env python
 from sugar.activity import bundlebuilder
 bundlebuilder.start()

A more advanced version, which supports building activity bundles without Sugar installed, looks like this:

 File: setup.py
 #!/usr/bin/env python
 try:
 	from sugar.activity import bundlebuilder
 	bundlebuilder.start()
 except ImportError:
 	import os
 	os.system("find ./ | sed 's,^./,HelloWorldActivity.activity/,g' > MANIFEST")
 	os.system('rm HelloWorldActivity.xo')
 	os.chdir('..')
 	os.system('zip -r HelloWorldActivity.xo HelloWorldActivity.activity')
 	os.system('mv HelloWorldActivity.xo ./HelloWorldActivity.activity')
 	os.chdir('HelloWorldActivity.activity')
  • Code your activity in Python. 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"
 
         # 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"

The above file is called HelloWorldActivity.py

  • Create a MANIFEST (e.g. HelloWorldActivity.activity/MANIFEST), containing the list of the files (relative to the directory that the MANIFEST is in) to include in the package. (Note: Be sure not to leave blank lines at the end of the file.) This script does that in linux (run it from within the HellowWorldActivity.activity directory):
cd HelloWorldActivity.activity
find . -type f | sed 's,^./,,g' > MANIFEST
  • Your directory structure should now look like this:
HelloWorldActivity.activity/
HelloWorldActivity.activity/setup.py
HelloWorldActivity.activity/activity
HelloWorldActivity.activity/activity/activity.info
HelloWorldActivity.activity/activity/activity-helloworld.svg
HelloWorldActivity.activity/HelloWorldActivity.py
HelloWorldActivity.activity/MANIFEST
  • Make sure that all your python files have the required permissions to be used.
chmod a+x setup.py
chmod a+x HelloWorldActivity.py
  • Setup your bundle for development (must be user olpc when you do this) to become user olpc, type: su - olpc

If you are prompted for a password, trying using: su

python setup.py dev

This just creates a symlink to your activity folder in ~/Activities, so that Sugar can find your activity.

  • Restart Sugar using Ctrl-Alt-Erase and your activity will appear in the interface! (NOTE: By default, the Home view shows only the favorite activities. You should press Ctrl+2 or go the right-upper corner and change to the List View)
  • Run your activity, and if there are errors use the Log viewer activity to see what went wrong.

Running

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.)

You can also edit the code in your bundle directory directly. Note that the first time your Activity is launched, it leaves a process around even if you close the window, so you must kill the sugar-activity-factory to get it to reload when you click again.

Distribution

Create an .xo package to distribute your bundle. (An .xo file is essentially a zip file built from the MANIFEST with some extra metadata, like a JAR file. It also has some localization ability, and in the future we expect to be able to sign these too.) The bundle name is automatically generated from the 'name' and 'activity_version' values found in the activity.info file, separated by a dash, with a .xo extension.

 ./setup.py dist_xo

To install the xo on a laptop you can use the installer script.

 sugar-install-bundle HelloWorld-1.xo

Trouble Shooting

You can find application logs in /home/olpc/.sugar/default/logs. If the sample fails to compile, sugar will show you the icon in the circle but remain forever at the "Starting..." tag when you hover your mouse over it. You'll have to restart sugar with <ctrl-alt-erase> in order to remove the icon. You can find the cause of your trouble in the the log named for the "service-name" in your activity.info file, in this case "org.laptop.HelloWorldActivity".

See also