Qt4 Hello World in 30mins (from a rusty programmer)

So having spent a few days looking at the various options on developing for N900 and Maemo I have come to the conclusion that the following is by far the easiest and future proof. Its simple enough for noobs, and powerful enough for experienced programmers.

Python – programming language
PyQt or Pyside for -UI
Qt4 Designer for UI layout
pyuic4 for code generation.
eric4 Python IDE that supports Qt4 Designer

As there is not much I could find that links all of the above together, here we go. EOE

=================================================

The following was done on OpenSuse, but should work with other Linux flavours.

For Windows users I have created a separate thread
http://talk.maemo.org/showthread.php...510#post514510


Lets do a quick hello world that uses the above tools and links it all together.

Create UI with Qt Designer

On Your Desktop machine

1.Open Qt Designer.
2.Create a Main Window Form ,set its size to 800x400
3.Add a Label Widget, set the font to a 24 point, resize as needed.
4.Double click on the Label Widget to change its name to “Hello World !”
5.Use Control R to see how it will look.
6.Now save your form. File->Save As → “helloworld.ui”




Generate your Python code.

> pyuic4 -x helloworld.ui -o helloworld.py

the -x generates additional code to allow you to test the ui element
the -o tells it where to store the python "executable".

You now have a full python Qt4 GUI application ready to rock!!

Now make it executable and run.
> chmod 755 helloworld.py

>python helloworld.py



Deploy to your N900

Install ssh-server to on your N900 from Application manager
login as root and create a user password
Now create a directory called /media/n900 on your desktop machine

Mount your N900 file system onto your Desktop to say /media/n900 from your desktop

>sshfs user@192.168.1.70:/ /media/n900

If you do not know the ip address of your n900 do the following

>sudo gainroot
>ifconfig |grep inet


The N900 filesystem will now be mounted to /media/n900 on your Desktop.

Now you can just drag and drop files from your desktop to your N900.

!! dont forget to copy your python files to /opt on N900. If you copy to Mydocs directory you will not be able to change the permissions to Linux execute permissions as Mydocs is a FAT file system, it does not understand permissions.

Copy your helloworld.py file to your N900 /home/opt directory

Once your helloworld.py file is on your opt directory on your n900 you can execute like this from the Xterm. Like this (run as user)

>python helloworld.py



If your helloworld does not have the look and feel of Fremantle you need to install the latest pyqt4 libs like so as root

>apt-get install python2.5-qt4-gui

Using PySide

If you want to use Pyside (Nokias Bindings for Qt4 for Python), you will need to replace the line in your helloworld.py file that says

"From PyQt4 import PyQtcore QtGui"

with

From PySide import PyQtcore QtGui

=================================================
Now you have got your helloworld working its time to dive into a full blown IDE using eric4 and build your own browser in an Hour!!

heres the tutorial

http://eric-ide.python-projects.org/...ser/index.html

some other tutorials I found helpful

http://www.rkblog.rk.edu.pl/w/p/introduction-pyqt4/

http://lateral.netmanagers.com.ar/stories/BBS47.html

And the Qt4 Design manual
http://doc.trolltech.com/4.0/designe...component.html

The Maemo Python Wiki Pages

http://wiki.maemo.org/PyMaemo

The above technique will allow you to prototype quickly and let you play with the QT Designer.

However you should not edit the python file generated by pyuic4.

To build a real application you want to create a Main.py programme that has your gui generated file included.

First generate the file without the -x option

>pyuic4 helloworld.ui -o helloworld.py

Sample Main.py (may not work depending what you called your form)
==============Main.py============================= =====
#!/usr/bin/env python
import sys

#Now we include our helloworld.py generated from pyuic4.
from helloworld import *

# We instantiate a QApplication passing the arguments of the script to it:
app = QtGui.QApplication(sys.argv)
MainWindow = QtGui.QMainWindow()
ui = Ui_MainWindow()
ui.setupUi(MainWindow)

MainWindow.show()

# Now we can start it.
sys.exit(app.exec_())

=================================================

now just run the main.py from your n900
>python main.py.

eric4 is a good PyQt IDE. It compiles Designer to Python and generates code stubs for events. It also simplifies Actions for menus and toolbars.

After following the steps, once I move my helloworld.py onto my N900 and I run it I get an error saying "ImportError: No module named PyQt4." Do I need to apt-get pyqt4 or something similar to my N900 first? Thanks in advance.

yes, or if you have installed any pyqt application from the repos it would have pulled them in.

Many Thanks. Have downloaded eric 4 and worked through this tutorial. Very impressed

http://eric-ide.python-projects.org/...ser/index.html

I've updated the Original Post to include eric4

Nice tutorial. One suggestion:

Instead of running:

just place a "Makefile" in the dir containing the .ui file.

Makefile:
Then you can change the GUI Layout just with:
This is more scalable when your GUI grows ;-)

Cheers
Bjoern

thanks @bubli. I have downloaded eric4 IDE. it includes cvs and svn as options as well as its own project build. Pretty easy to get started with and runs on most platforms. Knocking up my first app now.

I just noticed, that the default font size on the N900 seems to be "18" points.

If I don't enlarge the font in QTDesigner (QTD) from 9 to 18, my layout looks nice in QTD but is totally messed on the N900.

So there are two ways around:

1) Design your layout in QTD with a font size of 18

2) EXPLICITLY set a font size in QTD. Even thought the default font size is 9 in QTD you need to click in the "Point size" and change it. Note that the Font section should now be shown in BOLD. I guess this means the font size is explicitly set and ignores the default (18 on N900).

With this behavior in mind, I was able to design a clean layout for my app...

Please correct me if this is wrong, there a other ways round or this is bad coding style.

Cheers
Bjoern

I found 800x450 seems to be about the right size, 800x400 falls a little short.

Its annoying how QT Designer has preview options for various styles but not Hildon. It would be useful if we could add a Maemo 5 preview option, as its more important to be able to preview how it looks there than anywhere else, as it differs so much from desktop.

I am still struggling trying to figure how to get the menu to look right. By default its only showing the first menu column and its putting the name of the colum next to the menu option text, wasting space. I will have to figure out from something else how to do it right.