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]]