This follows on from the tutorial Using a Glade UI with Python to create a UME/Hildon app

For more background info also read the excellent maemo tutorial for porting python applications to the Hildon framework. This is the canonical URL for this tutorial.

Objective

This shows how to port an application (gPodder) to Ubuntu Mobile. gPodder media aggregator is a podcast receiver/catcher written in Python utilizing PyGTK for its graphical interface. gPodder is very lightweight and doesn't have many dependencies. A great part of the porting effort is spent making an application use and obey the Hildon UI style of windows and menu's

Assumed Knowledge

You have set up the UME development environment as show here. Also that you can change the Flash UI as explained here.

Dependencies Needed

gPodder has the following dependencies on Ubuntu:

python-glade2

python-feedparser

apt-get install both of them in the target filesystem.

Get the Source Code and try it out on UME

Download and extract the source package from the project's page. The code changes are made in the gpodder-0.8.0/src/gpodder/gpodder.py file.

On the target filesystem change the UI so that it displays the gpodder image and move the expanded gpodder folder to the target filesystem (I renamed it to gpodder-orig) like this:

user@machine:~/Dev/Ume/ports$ sudo cp -R gpodder-orig /home/ian/Dev/Ume/olpcimage/targets/metahacker/fs/home/ 

Maybe gpodder will be ok without too many changes so lets install it by:

user@machine:/home/gpodder-orig# python setup.py install

In the target filesystem terminal:

export DISPLAY=:0
(to save typing this every time you open a target filesystem shell from moblin you can add this line to .bashrc)
 /etc/init.d/dbus start
xinit /etc/X11/xinit/xinitrc -- /usr/bin/Xephyr :2 -host-cursor -screen 1024x600x32 -dpi 96 -ac

executing gpodder in the terminal gave an error of from xml.sax.saxutils import DefaultHandler so in the terminal apt-get install python-xml After this executes it executes OK in the terminal so lets test it by clicking the gpodder image and see what happens

this presents the gpodder UI

It seems ok but it is not 'Hildonized' yet

Hildonize Step 1

The first code change in the porting exercise is to make gPodder use HildonProgram and HildonWindow classes instead of the GtkWindow class.

Start by modifying the gpodder.py file (in the gpodder-orig/src/gpodder directory). To use Hildon elements, you have to import its module. The following illustrates the import:

from libipodsync import gPodder_iPodSync
from libipodsync import ipod_supported

# ****** start of the added code ******
import hildon
# ****** end of the added code ******

# for isDebugging:
import libgpodder

Note: if this errors apt-get install python2.5-hildon python2.5-hildon-dev

Next, add a HildonProgram(self.app) and a HildonWindow(self.window):

       if libgpodder.isDebugging():
           print "A new %s has been created" % self.__class__.__name__

       #****** start of the added code ******
       self.app = hildon.Program()

       self.window = hildon.Window()
       self.window.set_title(self.gPodder.get_title())
       self.app.add_window(self.window)
 
       self.vMain.reparent(self.window)
       self.gPodder.destroy()
 
       self.window.show_all()
       #****** end of the added code ****** 

       #self.gPodder.set_title( self.gPodder.get_title())
       #self.statusLabel.set_text( "Welcome to gPodder! Suggestions? Mail to: thp@perli.net")
       # set up the rendering of the comboAvailable combobox

The gPodder class (self) has its close_gpodder method connected to the destroy signal from the original gPodder Gtk window. In the glade file remove the connection:

Original version

user@machine:/home/gpodder-orig/data# nano gpodder.glade

  <property name="gravity">GDK_GRAVITY_NORTH_WEST</property>
  <property name="focus_on_map">True</property>
  <property name="urgency_hint">False</property>
  <signal name="destroy" handler="close_gpodder" last_modification_time="Sat, 29 Oct 2005 11:54:40 GMT"/>

Hildon Version

user@machine:/home/gpodder-hildon/data# nano gpodder.glade

  <property name="gravity">GDK_GRAVITY_NORTH_WEST</property>
  <property name="focus_on_map">True</property>
  <property name="urgency_hint">False</property>

and put it in the new Hildonwindow(self.window) that was just created in gpodder.py like this :

     self.window = hildon.Window()
        self.window.set_title(self.gPodder.get_title())
        #****** start of the added code ******
        self.window.connect("destroy", self.close_gpodder)
        #****** end of the added code ******
        self.app.add_window(self.window)

        self.vMain.reparent(self.window)

Note: above you can see two different versions gpodder-orig and gpodder-hildon in the target filesystem. To install a different version just remove the old version by;

user@machine:/home/gpodder-hildon/src/gpodder# cd /usr/lib/python2.5/site-packages/
user@machine:/usr/lib/python2.5/site-packages# rm -R gpodder-0.8.0.egg-info gpodder

and then do a python setup.py install on the new version (also remember to change the file /usr/share/gpodder/gpodder.glade if you need to for things like dialogues etc)

Hildonize Step 2

To use Hildon's title area as its menu bar, instead of using the GTK+ menu (a GTKMenuBar object) alter gpodder.py again. Before doing this have a look in the gpodder.glade file, you can see that the gPodder window has a menu bar (a GTKMenuBar object) called mainMenu The code below moves all its children (menuPodcasts, menuChannels and menuHelp) to the HildonWindow's menu and then destroys the empty mainMenu menu

       self.vMain.reparent(self.window)
        self.gPodder.destroy()
        #****** start of the added code ******
        menu = gtk.Menu()
        for child in self.mainMenu.get_children():
            child.reparent(menu)
        self.window.set_menu(menu)

        self.mainMenu.destroy()
        #****** end of the added code
        self.window.show_all()

Gives the final version

which can be downloaded here:

• gpodder-ume.tar