This follows on from the tutorial [[UMEGuide/ApplicationDevelopment/GladeWithPythonForUMEHildon| Using a Glade UI with Python to create a UME/Hildon app]]
For more background info also read the excellent [[http://pymaemo.garage.maemo.org/documentation/pymaemo_tutorial/python_maemo_howto.html|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 [[https://wiki.ubuntu.com/MobileAndEmbedded/CreatingAnImageForUMEDevice|here]]. Also that you can change the Flash UI as explained [[http://ianlawrence.info/random-stuff/location-services-on-ubuntu-mobile|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 [[http://gpodder.berlios.de/|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
{{attachment:gpodder1.png}}
this presents the gpodder UI
{{attachment:gpodder-ume.png}}
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
GDK_GRAVITY_NORTH_WEST
True
False
}}}
'''Hildon Version'''
{{{
user@machine:/home/gpodder-hildon/data# nano gpodder.glade
GDK_GRAVITY_NORTH_WEST
True
False}}}
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
{{attachment:gpodder-hildon-menu.png}}
which can be downloaded here:
[[attachment:gpodder-ume.tar]]