View source for PyGTK/Hello World Tutorial

<table border="0">
  <tr>
    <td>__TOC__</td>
    <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.


[[Image:Activity-gtktest.png]]
</td>
  </tr>
</table>
== About 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].


== Getting started ==
Please start with these first steps:
# Make yourself familiar with [http://www.pygtk.org/ PyGTK] and write few demo applications
#* [http://www.moeraki.com/pygtktutorial/pygtk2tutorial/index.html Tutorial]
#* [http://www.pygtk.org/docs/pygtk/index.html PyGTK Reference]
# 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.

At this point we assume that you made at least one "hello-world" application with pygtk ''':)''' 

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/0/02/Gtktest-glade.xo gtktest-glade.xo]

= Basic Activity Structure =
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/ ==
This is the Activity's base directory.


== gtktest.activity/MANIFEST ==
This text-file contains the structure of the Activity automatically created by setup.py. In our example:
 gtktest.activity/
 gtktest.activity/MANIFEST
 gtktest.activity/setup.py
 gtktest.activity/activity/
 gtktest.activity/activity/activity-gtktest.svg
 gtktest.activity/activity/activity.info
 gtktest.activity/activity.py
 gtktest.activity/gtktest.py

== gtktest.activity/setup.py ==
This is a script which creates the MANIFEST and zips everything into gtktest.xo.
 #!/usr/bin/env python
 try:
 	from sugar.activity import bundlebuilder
 	bundlebuilder.start("gtktest")
 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/ ==
This directory contains information for sugar.

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


== gtktest.activity/activity/activity.info ==
This file contains informations for sugar about our Activity.
 [Activity]
 name = gtktest
 service_name = org.laptop.gtktest
 class = activity.gtktestActivity
 icon = activity-gtktest
 activity_version = 1
 show_launcher = yes


== 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:
# No need to change activity.py for any code updates
# Run gtktest.py as standalone or imported from activity.py
 # Load GTK
 import gtk
 
 # Load our own source code from gtktest.py
 # There you can find the main class gtktest()
 from gtktest import gtktest
 
 # Load sugar libraries
 from sugar.activity import activity  
 
 class gtktestActivity(activity.Activity):
 	def __init__(self, handle):
 		activity.Activity.__init__(self, handle)
 		self._name = handle
 
 		# Set title for our Activity
 		self.set_title('gtk test')
 
 		# Attach sugar toolbox (Share, ...)
 		toolbox = activity.ActivityToolbox(self)
 		self.set_toolbox(toolbox)
 		toolbox.show()
 
 		# Create the main container
 		self._main_view = gtk.VBox()
 
 		# Import our class gtktest():
 
 		# Step 1: Load class, which creates gtktest.widget
 		self.gtktest = gtktest()
 
 		# Step 2: Remove the widget's parent
 		if self.gtktest.widget.parent:
 			self.gtktest.widget.parent.remove(self.gtktest.widget)
  
 		# Step 3: We attach that widget to our window
 		self._main_view.pack_start(self.gtktest.widget)
 
 		# Display everything
 		self.gtktest.widget.show()
 		self._main_view.show()
 		self.set_canvas(self._main_view)
 		self.show_all()
 

= Creating the interface =
We recommend, creating an interface with a ui designer like glade or gazpacho, but understanding the structure is easier using PyGTK.


== 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 ===
This is the source code of the Activity.
 #! /usr/bin/env python
 
 # Pango is a library for rendering internationalized texts
 import pango
 
 import gtk
 
 # We don't yet need glade
 # import gtk.glade
 
 class gtktest:
 	def __init__(self):
 		# Create a GTK Label
 		label = gtk.Label("Hello World")
 
 		# self.widget will be attached to the Activity
 		# This can be any GTK widget except a window
 		self.widget = label



== using Glade ==
Example: 3 Buttons and one label. Download Full Example: [http://wiki.laptop.org/images/0/02/Gtktest-glade.xo gtktest-glade.xo]

[http://glade.gnome.org/ Glade] is a User Interface Designer, with it you can rapidly design user interfaces and use them with PyGTK ([http://glade.gnome.org/manual/getting-started.html Getting started]). In our example, the glade xml is saved in gtktest.glade.

=== gtktest.activity/gtktest.py ===

 #! /usr/bin/env python
 # Pango is a library for rendering internationalized texts
 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("<span font_desc='40'>Hello\n<b>World</b>!</span>")
 
 	def on_btn_clean(self, *args):
 		self.label.set_markup("<span font_desc='40'>Hello</span>")
 
 	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">
 <!--Generated with glade3 3.4.0 on Thu Jan 17 18:38:30 2008 -->
 <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">&lt;span font_desc="40"&gt;Hello&lt;/span&gt;</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
* 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
* Remove the Activity:
 ./xo-get.py remove gtktest.xo

= 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 =
Created: January 2008, Vienna

'''Contributors'''
* [[User:Crazy-chris]] ([http://www.olpcaustria.org OLPC Austria])
* [[User:Jaume]] ([http://www.olpcaustria.org OLPC Austria])
* ...


Last update: [[User:Crazy-chris|Crazy-chris]] 15:05, 17 January 2008 (EST)


= References =
* SVG Cow Icon: [http://webcvs.freedesktop.org/svg-icons/lila/gnome/scalable/misc/larry.svg?view=log]
* More SVG Icons: [http://webcvs.freedesktop.org/svg-icons/lila/gnome/scalable/]

* [http://www.pygtk.org/ PyGTK]
** Reference: [http://www.pygtk.org/docs/pygtk/index.html]
** Tutorials: [http://www.moeraki.com/pygtktutorial/pygtk2tutorial/index.html]

* [http://glade.gnome.org/ Glade]
* [http://gazpacho.sicem.biz/ Gazpacho]