Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com�s entire library of video tutorials.
Our ToDo application is now fully functional. We have implemented new, edit, and delete task, also via the menu. We can edit and create new tasks using the task edit window. Now we will go and add a few UI enhancements to this software to make it look a little slicker. To start with we are going to work on the completed feature. Right now you can click this check box, but it doesn't really do anything, the values not saved. You can click it here, and it is saved. So one thing we're going to want to do is when a task is completed, draw a line through it, to show it has been crossed off our task list. Additionally, you may recall from our database that we added a column called completed date. What we want to do is whenever a task is marked as completed, we want to set the completed date to be the current date, and if a task is unchecked from being completed, we want to clear that completed date. And also when a task is marked is completed, we want to show the completion date right underneath the completed check box. And we also want to make this check box to be fully functional so clicking it does save the completed state, and also updates the UI with the line through it. So let's get started. First we need to go to the task class, and find our completed property. Right now this is just a regular property, nothing fancy about it, but what we want to do, is whenever it is set to true, we want to also specify the completed date, and when it is set to false, we want to clear the completed date. The best way to do that, is to use a computed property, so let's convert this property to a computed property. Right click on it, and pick convert to computed property. This creates a private property that will be the storage for our completed property, and it also creates the computed property. The getter simply returns the private storage for the completed property. The setter is where we will also specify the completed date. So here we see if the property is true, and we set the completed date equal to the current date, otherwise we clear it. Now let's go to the task edit window and make this visible. We will add a new label, position it directly underneath this check box, we will call it completed date label, put some text here so that we know what goes in it, change the font, because we want this to be a little smaller, so we'll use small system, centering it will look nice. And then lastly it should not be visible by default. Now we go to our edit task property where we fill in the rest of the fields in on the window. Here we can check if the date is filled in, and populate it in the window. Now let's run our project. You can now see the completed date appearing underneath. Next we will add the code to draw a line through the task when it's marked as completed. We will go to the ToDo window, and look at the code on the list box. In particular we want the cell text paint event. This event is called for each row and cell in the list box where we can override some of the drawing. In this particular case we simply want to just draw a line, it will appear on top of the text. First we get the task for the current row, and we check if it is completed. If it is completed, we're going to draw a line, a nice black line, make it a little thicker, and we'll center the line. Now let's run the project. Now you can see that the task is crossed out because it has been completed. The last thing we need to do, is implement it so that this check box will actually do something. Right now it has no effect. To do that we need the cell action event of the list box. This event is called when there's some action happens on the cell. In our particular case the action is that the cell is a check box and is was clicked. So first we need to check that the action occurred on our check box column, which is column zero. We need to again get the selected task, now we check if the cell is checked. If it is we set the completed property to true on the class, otherwise we set it to false. And now we save the class. Let's run our project. Now when we click the check box you can see the line is drawn and if we double click we see that the status is saved.
| Course: | Real Studio |
| Author: | Paul Lefebvre |
| SKU: | 34190 |
| ISBN: | 1-936334-77-1 |
| Release Date: | 2011-02-02 |
| Duration: | 7 hrs / 87 lessons |
| Work Files: |
Yes |
| Captions: | No |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |