Loading Data

The first thing is that we need to use our back­end, so we have to im­port to­do.py.

We do this in line 13

Then, in line 25 we do the first re­al new work: we get the list of tasks and put them in our list.

Let's ex­am­ine that in de­tail. Here is the code from lines 25 to 35:

Remember our backend, todo.py? In it we defined Task objects that are stored in a database. If you are not familiar with Elixir, to­do.­Task.­query().al­l() gets a list of all Task objects from the database.

Then we assign the tags separated by commas to tags, which will look something like "home,important".

And now, we see our first Qt-re­lat­ed code.

First: self­.ui.list is a wid­get. Ev­ery­thing we put on the win­dow us­ing de­sign­er is ac­ces­si­ble us­ing self­.ui.ob­jec­t_­name and the ob­jec­t_­name is set us­ing de­sign­er. If you right-click on the big wid­get in our win­dow you can see that the wid­get's ob­ject name is list:

You can al­so see it (and change it) in the Ob­ject In­spec­tor and in the Prop­er­ty Ed­i­tor.

That is not just a wid­get. It's a QTreeWid­get, use­ful for show­ing fan­cy mul­ti­-­col­umn lists and trees.

You can read a lot about this wid­get in its man­u­al but let's do the very short ver­sion:

• We cre­ate QTreeWid­getItem ob­­jec­t­s. These take a list of strings, which are dis­­­played in the wid­get's col­umn­s. In this case, we are adding the task text ("Buy gro­ceries"), the due date, and the tags.

• We set item.­­task to task. This is so lat­er on we know what task is de­scribed by a spe­­cif­ic item. Not the most el­e­­gant way, per­hap­s, but by far the eas­i­est.

• We add each item to the wid­get us­ing ad­d­To­­pLevelItem so they are all at the same lev­­el (not hi­er­ar­chi­­cal, as childs and par­ents)

• It will work as a list

Then, if the task is done (task.­done==True) we make a checkmark next to the task. If it's not done, we do not.

For many sim­ple pro­gram­s, this is all you need to know about QTreeWid­get. It's a rather com­plex wid­get, and very pow­er­ful, but this will do for our task. In­ves­ti­gate!

So, what does it do? Let's run python main.py and find out!

If your window is empty, try running python todo.py first, which will create some sample tasks.

You can even check a task to mark it done! That's be­cause we have al­so im­ple­ment­ed (par­tial) sav­ing of mod­i­fied tasks...

Saving Data

So, what we want is that when the us­er clicks on the check­box, the task should be mod­i­fied ac­cord­ing­ly, and stored in the data­base.

In most tool­kits you would be look­ing for call­back­s. Here things are a bit dif­fer­en­t. When a Qt wid­get wants to make you no­tice some­thing, like "The us­er clicked this but­ton" or "The Help menu is ac­ti­vat­ed", or what­ev­er, they emit sig­nals (go along for a min­ute).

In par­tic­u­lar, here we are in­ter­est­ed in the item­Changed sig­nal of QTreeWid­get:

QTreeWid­get.item­Changed ( item, col­umn ) [sig­nal]

This sig­nal is emit­ted when the con­tents of the col­umn in the spec­i­fied item changes.

And, when­ev­er you click on the check­box, this sig­nal is emit­ted. Why's that im­por­tan­t? Be­cause you can con­nect your own code to a sig­nal, so that when­ev­er that sig­nal is emit­ted, your code is ex­e­cut­ed! Your code is called a slot in Qt slang.

It's like a call­back, ex­cept that:

1. The sig­­nal does­n't know what is con­nec­t­ed to it (or if there is any­thing con­nec­t­ed at al­l)

2. You can con­nect as many slots to a sig­­nal as you wan­t.

This helps keep your code loose­ly cou­pled.

We could de­fine a method in the Main class, and con­nect it to the item­Changed sig­nal, but there is no need be­cause we can use Au­to­Con­nec­t. If you add to Main a method with a spe­cif­ic name, it will be con­nect­ed to that sig­nal. The name is on_ob­ject­name_sig­nal­name.

Here is the code (lines 37 to 42):

See how we use item.­task to re­flect the item's check­State (whether it's checked or not) in­to the task state?

The todo.saveData() at the end makes sure all data is saved in the database via Elixir.

Au­to­Con­nect is what you will use 90% of the time to add be­hav­iour to your ap­pli­ca­tion. Most of the time, you will just cre­ate the win­dow, add the wid­get­s, and hook sig­nals via Au­to­Con­nec­t.

In some oc­ca­sions that will not be enough. But we are not there yet.

This was a rather short ses­sion, but be pre­pared for the next one: we will be do­ing Im­por­tant Stuff with De­sign­er (T­M)!

In the mean­time, you may want to check these pages:

• Learn about wid­gets avail­able in Qt

• Learn about sig­­nals and slots

• Ses­­sion 3

Here you can see what changed be­tween the old and new ver­sion­s: