The backend

The most re­cent ver­sion of this ses­sion (in RST for­mat) is al­ways avail­able at GitHub's mas­ter tree as tut1.txt

Since we are de­vel­op­ing a TO­DO ap­pli­ca­tion, we need a back­end that han­dles the stor­age, re­trieval and gen­er­al man­ag­ing of TO­DO tasks.

To do that the sim­plest pos­si­ble way, I will do it us­ing Elixir, "A declar­a­tive lay­er over the SQLAlche­my Ob­jec­t-Re­la­tion­al Map­per".

If that sound­ed very scary, don't wor­ry. What that means is "a way to cre­ate ob­jects that are au­to­mat­i­cal­ly stored in a database".

Here is the code, with com­ments, for our back­end, called to­do.py. Hope­ful­ly, we will not have to look at it again un­til much lat­er in the tu­to­ri­al!

 # -*- coding: utf-8 -*-

 """A simple backend for a TODO app, using Elixir"""

 import os
 from elixir import *

 dbdir=os.path.join(os.path.expanduser("~"),".pyqtodo")
 dbfile=os.path.join(dbdir,"tasks.sqlite")

 class Task(Entity):
     """
     A task for your TODO list.
     """
     using_options(tablename='tasks')
     text = Field(Unicode,required=True)
     date = Field(DateTime,default=None,required=False)
     done = Field(Boolean,default=False,required=True)
     tags  = ManyToMany("Tag")

     def __repr__(self):
         return "Task: "+self.text


 class Tag(Entity):
     """
     A tag we can apply to a task.
     """
     using_options(tablename='tags')
     name = Field(Unicode,required=True)
     tasks = ManyToMany("Task")

     def __repr__(self):
         return "Tag: "+self.name


 saveData=None

 def initDB():
     if not os.path.isdir(dbdir):
         os.mkdir(dbdir)
     metadata.bind = "sqlite:///%s"%dbfile
     setup_all()
     if not os.path.exists(dbfile):
         create_all()

     # This is so Elixir 0.5.x and 0.6.x work
     # Yes, it's kinda ugly, but needed for Debian
     # and Ubuntu and other distros.

     global saveData
     import elixir
     if elixir.__version__ < "0.6":
         saveData=session.flush
     else:
         saveData=session.commit



 def main():

     # Initialize database
     initDB()

     # Create two tags
     green=Tag(name=u"green")
     red=Tag(name=u"red")

     #Create a few tags and tag them
     tarea1=Task(text=u"Buy tomatos",tags=[red])
     tarea2=Task(text=u"Buy chili",tags=[red])
     tarea3=Task(text=u"Buy lettuce",tags=[green])
     tarea4=Task(text=u"Buy strawberries",tags=[red,green])
     saveData()

     print "Green Tasks:"
     print green.tasks
     print
     print "Red Tasks:"
     print red.tasks
     print
     print "Tasks with l:"
     print [(t.id,t.text,t.done) for t in Task.query.filter(Task.text.like(ur'%l%')).all()]

 if __name__ == "__main__":
     main()

The Main Window

Now, let's start with the fun part: PyQt!

I rec­om­mend us­ing de­sign­er to cre­ate your graph­i­cal in­ter­faces. Yes, some peo­ple com­plain about in­ter­face de­sign­er­s. I say you should spend your time writ­ing code for the parts where there are no good tools in­stead.

And here is the Qt De­sign­er file for it: win­dow.ui. Don't wor­ry about all that XM­L, just open it on your de­sign­er ;-)

This is how it looks in de­sign­er:

What you see is a "Main Win­dow". This kind of win­dow lets you have a menu, tool­bars, sta­tus bars, and is the typ­i­cal win­dow for a stan­dard ap­pli­ca­tion.

The "Type Here" at the top is be­cause the menu is still emp­ty, and it's "invit­ing" you to add some­thing to it.

The big square thing with "Task" "Date" and "Tags" is a wid­get called QTree­View, which is handy to dis­play items with icon­s, sev­er­al column­s, and maybe a hi­er­ar­chi­cal struc­ture (A tree, thus the name). We will use it to dis­play our task list.

You can see how this win­dow looks by us­ing "For­m" -> "Pre­view" in de­sign­er. THis is what you'll get:

You can try re­siz­ing the win­dow, and this wid­get will use all avail­able space and re­size along­side the win­dow. That's im­por­tan­t: win­dows that can't han­dle re­siz­ing prop­er­ly look un­pro­fes­sion­al and are not ad­e­quate.

In Qt, this is done us­ing lay­out­s. In this par­tic­u­lar case, since we have on­ly one wid­get, what we do is click on the for­m's back­ground and se­lect "Lay­out" -> "Lay­out Hor­i­zon­tal­ly" (Ver­ti­cal­ly would have had the ex­act same ef­fect here).

When we do a con­fig­u­ra­tion di­alog, we will learn more about lay­out­s.

Now, feel free to play with de­sign­er and this for­m. You could try chang­ing the lay­out, add new things, change prop­er­ties of the wid­get­s, ex­per­i­ment at will, learn­ing de­sign­er is worth the ef­fort!

Using our Main Window

We are now go­ing to make this win­dow we cre­at­ed part of a re­al pro­gram, so we can then start mak­ing it work.

First we need to com­pile our .ui file in­to python code. You can do this with this com­mand:

pyuic4 window.ui -o windowUi.py

Now let's look at main.py, our ap­pli­ca­tion's main file:

 # -*- coding: utf-8 -*-

 """The user interface for our app"""

 import os,sys

 # Import Qt modules
 from PyQt4 import QtCore,QtGui

 # Import the compiled UI module
 from windowUi import Ui_MainWindow

 # Create a class for our main window
 class Main(QtGui.QMainWindow):
     def __init__(self):
         QtGui.QMainWindow.__init__(self)

         # This is always the same
         self.ui=Ui_MainWindow()
         self.ui.setupUi(self)

 def main():
     # Again, this is boilerplate, it's going to be the same on
     # almost every app you write
     app = QtGui.QApplication(sys.argv)
     window=Main()
     window.show()
     # It's exec_ because exec is a reserved word in Python
     sys.exit(app.exec_())


 if __name__ == "__main__":
     main()

As you can see, this is not at all spe­cif­ic to our TO­DO ap­pli­ca­tion. What­ev­er was in that .ui file would work just fine with this!

The on­ly in­ter­est­ing part is the Main class. That class us­es the com­piled ui file and is where we will put our ap­pli­ca­tion's us­er in­ter­face log­ic. You nev­er ed­it the .ui file or the gen­er­at­ed python file man­u­al­ly!

Let me put that in these terms: IF YOU ED­IT THE UI FILE (WITH­OUT US­ING DE­SIGN­ER) OR THE GEN­ER­AT­ED PYTHON FILE YOU ARE DO­ING IT WRONG! YOU FAIL! EPIC FAIL!. I hope that got across, be­cause there is at least one tu­to­ri­al that tells you to do it. DON'T DO IT!!!,

You just put your code in this class and you will be fine.

So, if you run main.py, you will make the ap­pli­ca­tion run. It will do noth­ing in­ter­est­ing, be­cause we need to at­tach the back­end to our us­er in­ter­face, but that's ses­sion 2.