CIXOS-FIA/Sugarizacion: Difference between revisions

From OLPC
Jump to navigation Jump to search
No edit summary
No edit summary
 
Line 1: Line 1:
The tutorial explain with detail as create the [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].


To assume that you have [[: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 structure of directorys of the package:
Create the bundle directory structure:


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


Write the archive activity.info, to describe the package in the sub-directory of the activity (for example, HolaMundo.activity/activity/activity.info).The instructions of the [[Activity Bundles|Paquetes de Actividad]] explain in detail the mean of each sphere.
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:
}}
}}


Design an icon for you activity,in accordance with the [[Sugar_Icon_Format|formato del icono]] and you put in the sub-directory "activity".The name of archive must coincide with the name written in the archive .info (for example, 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 script setup.py in the directory of higher level (for example, HolaMundo.activity/setup.py), that in the majority of the cases will see like this:
Write the setup.py script in the top level directory (e.g. HelloWorldActivity.activity/setup.py), which in most cases will look like this:


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


Check your activity.The name that you have written in the archive .info as "class" is the name of the class that make the code. To the archive previous activity.info, we especificed a module of high level ActividadHolaMundo.ActividadHolaMundo (please, remember the use of capital letters in the names of modules in Python is a poor style , you are free of use the name of an activity with more style of standard names).
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).


{{ 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')

# Create the toolbox .That contain the toolbar of the
# Creates the Toolbox. It contains the Activity Toolbar, which is the
# Activity,that is the bar appear in each window of the sugar and contain
# bar that appears on every Sugar window and contains essential
# essentials functions, as the buttons 'Compartir con:' and '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()

# Create a new button with the name "Hola Mundo".
# Creates a new button with the label "Hello World".
self.button = gtk.Button("Hola Mundo")
self.button = gtk.Button("Hello World")
# When the button receive the sign of "clicked", will call the function hello()
# When the button receives the "clicked" signal, it will call the
# passing to "None" as argument.The function hello() is defined in
# function hello() passing it None as its argument. The hello()
# lines more above.
# function is defined above.
self.button.connect("clicked", self.hola, None)
self.button.connect("clicked", self.hello, None)
# Fix the button to be our linen. The linen is the main section
# Set the button to be our canvas. The canvas is the main section of
# of every sugar window. Cover all the area under
# every Sugar Window. It fills all the area below the toolbox.
# the toolbox.
self.set_canvas(self.button)
self.set_canvas(self.button)
# The final step is to display this newly created widget.
self.button.show()
#Finally you must show this new creation of widgets.
self.button.show()
print "AT END OF THE CLASS"
print "AL FINAL DE LA CLASE"
</pre>
</pre>
}}
}}


Create a MANIFEST (for example, HolaMundo.activity/MANIFEST),that contain the list of the archives include in the package . (Note: Make sure of '''not''' leave lines in white in the final of the archive.)
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:
The structure of the directory now must see as:
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


Install your package to the develop
./setup.py dev
./setup.py dev


(This create a symbolic link in ~/Activities).
(It appears this just creates a symlink in ~/Activities .)


If now perform the sugar, the icon of the activity must be visible in the frame. (Reboot the sugar to see the change . Press Ctrl-Alt-delete.)
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.)


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