gtk.Notebook widget within Sugar Activity !

This post describes how to use gtk.Notebook widget within a Sugar Activity.
In this blog you can find how to use gtk.Notebook widget to create PyGTK application native to GNOME. Now we will consider how sugar shell understands this Notebook widget and renders it for Sugar Desktop Environment.


Consider we have sugar activity DevelopWeb with following directory structure:

 

Here we have created weblib.py to include class WebToolBox that renders a toolbox on left hand side pane and tabbed container, i.e. Notebook on right side pane. Note that we are using HBox to hold this WebToolbox and Notebook widgets. Since there are only two widgets added to HBox we are using terms left side pane and right side pane.

weblib.py looks like this:

Here you can observe that we have added all the widgets in the constructor of WebToolbox class. We have used HBox as parent container. Then we have used a VBox as elementBox or  toolbox for this activity to hold the web elements. Then we set few properties for scrollable window inside elementBox. We add the buttons in this elementbox with appropriate properties. Then we add the Notebook widget with gtk.POS_TOP ( i.e. tabs will be visible on top).

Now we add the pages to this notebook instance using a custom method "addPage"(Refer to image below). You can see in the definition that a page is a container HBox as immediate child of Notebook within a page. Each page requires a Label widget as page label:

The basic activity file looks like :

Here within constructor of DevelopWeb class you can observe that we have use instance of WebToolBox class which inturn uses Notebook widget. we have used this WebToolBox instance to be placed as viewport of the activity. You can create a setup.py file required for activity.

Now when you create symbolic link for this activity using : python setup.py dev the Sugar Desktop Environment can use this activity.
When you start Sugar session you can see DevelopWeb activity:

When you launch this activity you can see elementBox on left side and Notebook on right side with two tabs or pages in it:

This example shows how you can use Notebook, the tabbed container in your sugar activity. I hope this post helps you.

Stay tuned for more Sugar Action !

Notebook: Tabbed container in PyGTK

Hi,

I am writing this post to share my experience with Notebook, the tabbed container in PyGTK. If you are planning to develop your application in platform independent form, I would prefer you should go for PyGTK.

GTK+, or the GIMP Toolkit, is a multi-platform toolkit for creating graphical user interfaces. Offering a complete set of widgets, GTK+ is suitable for projects ranging from small one-off tools to complete application suites. This consists of toolkit which runs on Windows based and Linux based system. Thus you can write your application using GTK+ and run on any OS. Python bindings for GTK+ is known as PyGTK.  PyGTK lets you to easily create programs with a graphical user interface using the Python programming language.

Another prominent OS or Desktop Environment or Shell which used across XO Laptops as part of OLPC project that can run applications developed in PyGTK is Sugar. Few days ago I was looking for Tabbed container in PyGTK for a Sugar Activity I am working on. I came across Notebook.  It is similar to TabControl in .Net framework but with few dissimilarities.

Lets dive into code:
1. Import required modules: In order to use GTK modules in your python program you need to include gtk and pygtk modules.

Apart  from modules you can import specific widgets like Window, Label or Button and Notebook. Otherwise you need to use gtk.Window, gtk.Notebook.

2. Now lets write a class KartikNoteBookExample. You can see the constructor __init__(self) where we have created an instance of Window[line 13]. Then we set the title and default size for window in next two lines. In line 16, we have linked a callback function that will be invoked when when destroy signal will be sent by window widget. you can observe that we have defined a destroy method which inturn calls gtk's main_quit() method to close the main thread which was initially started using the main() method.

We now proceed by creating an instance(i.e. mynb) of Notebook [line 18]. In line 19, you can see we are using method set_tab_pos which is used to set the position of tabs. It can take one of the following values:
gtk.POS_LEFT, gtk.POS_RIGHT, gtk.POS_TOP or gtk.POS_BOTTOM. In line 20, we have connected a method to be called on "switch-page" event of Notebook. Whenever the page is changed in Notebook this event is fired. Since now you have connected "self.pageChanged" method on this event, it will be fired whenever page is switched. After that we have called a method "addPage" to add the page in Notebook. In below code, you can see we have created a HBox widget and a Label widget. Label widget is required to add label for tab whereas HBox is used as child for that page. We have added page in Notebook using "append_page" method which takes childWidget and Label as parameters. In line 24, we have added notebook instance as child of window widget.

In line 26, we have defined a method "showall" to show all widgets added so far.
From line 45 to 49, we have added a method "pageChanged" to detect the page switch event or signal for Notebook. The widget passes following parameters to the callback function : notebook instance, page instance and page number instance. We get the selected page using the method "get_nth_page" and passing the page number as  parameter[line 47]. We get the label associated with page using method get_tab_label and passing the immediate child of the Notebook as parameter[line 48]. Now using the "get_text" method of label we can get the text in it and print it.

From line 52 onwards, we are checking if the program is invoked using "python" i.e not imported we create an instance of the KartikNoteBookExample class and invoke its main method.

After saving this if it is invoked like: python .py

You will see a window with two tabs, Tab1 and Tab2.

As you click on Tab pages you can see in terminal that which page has been selected based on page number as clickedMe is called for page switch event.

So we saw how we use Notebook in PyGTK in your application. You may download the source file here.
Stay tuned to see how to create tabbed Notebook for a Sugar Activity.