CIXOS-FIA/Sugarizacion: Difference between revisions
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
The tutorial |
The tutorial explains step by step how to create the [http://divieira.googlepages.com/HelloWorld-1.xo Hello World activity bundle]. |
||
It assumes you have already [[:Category:Installing Sugar|installed a Sugar development environment]]. |
|||
Create the |
Create the bundle directory structure: |
||
mkdir |
mkdir HelloWorld.activity |
||
mkdir |
mkdir HelloWorld.activity/activity |
||
Write the |
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 = |
name = HelloWorld |
||
service_name = com.ywwg.HelloWorldActivity |
service_name = com.ywwg.HelloWorldActivity |
||
class = |
class = HelloWorldActivity.HelloWorldActivity |
||
icon = |
icon = activity-helloworld |
||
activity_version = 1 |
activity_version = 1 |
||
show_launcher = yes |
show_launcher = yes |
||
Line 21: | Line 21: | ||
}} |
}} |
||
Design an icon for |
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" |
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" |
||
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ |
|||
⚫ | |||
<!ENTITY fill_color "#FFFFFF"> |
|||
⚫ | |||
]> |
]> |
||
<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" |
|||
⚫ | |||
⚫ | |||
⚫ | |||
</pre> |
</pre> |
||
}} |
}} |
||
Write the |
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: | ||
}} |
}} |
||
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 | |
{{ 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 |
class HelloWorldActivity(activity.Activity): |
||
def |
def hello(self, widget, data=None): |
||
logging.info(' |
logging.info('Hello World') |
||
def __init__(self, handle): |
def __init__(self, handle): |
||
print " |
print "running activity init", handle |
||
activity.Activity.__init__(self, handle) |
activity.Activity.__init__(self, handle) |
||
print " |
print "activity running" |
||
self.set_title(' |
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) |
toolbox = activity.ActivityToolbox(self) |
||
self.set_toolbox(toolbox) |
self.set_toolbox(toolbox) |
||
toolbox.show() |
toolbox.show() |
||
# |
# Creates a new button with the label "Hello World". |
||
self.button = gtk.Button(" |
self.button = gtk.Button("Hello World") |
||
# When the button |
# When the button receives the "clicked" signal, it will call the |
||
# passing |
# function hello() passing it None as its argument. The hello() |
||
# |
# function is defined above. |
||
self.button.connect("clicked", self. |
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) |
|||
⚫ | |||
self.set_canvas(self.button) |
|||
# The final step is to display this newly created widget. |
|||
⚫ | |||
⚫ | |||
#Finally you must show this new creation of widgets. |
|||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
</pre> |
</pre> |
||
}} |
}} |
||
Create a MANIFEST ( |
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: |
||
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 |
|||
Install your package to the develop |
|||
./setup.py dev |
./setup.py dev |
||
( |
(It appears this just creates a symlink in ~/Activities .) |
||
If now |
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.)