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!

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:

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.