Real Studio Tutorials
Designing ToDo / UI Design
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.
Learn More
Subtitles of the Movie (Real Studio / Designing ToDo / UI Design)
Our next step in building our solution is Designing the User Interface, we will start with the Windows. So let's open our main Todo Window, by default it's pretty plain here so there's a few changes we need to make. First let's give it a Title, and change it to minimum width and height so that the user cannot resize the window to an unreasonably small size. Now we can Add a Control to the Window, we will Add a List Box and this will serve as our Task List. First we will Attach it to the sides of the Window-and we will give it a nice Name. We will Lock it to the edge of the window so that it resizes as the window resizes. We will give it a Heading, and it will need more than one column, I'm thinking about 5 based on our previous list of requirements and we'll Specify these Columns, Completed, which will be a Checkbox, a Task Name, the Due Date, the Priority and the Category. Lastly we want to check to allow the Columns to be Resizable, and then we can Save. Now if we Run this Project, we'll see the Todo window come up with the Column Headings here, and as we resize the List resizes along with the Window. One thing you'll notice here is this blue focus border that's appearing, we do not want to see that so we will turn that off and that is called Use Focus Ring, we'll uncheck that. We'll Save our Project again. Now the companion window to the Todo list is the window that will allow us to Edit, Add New and Delete Tasks. So we'll go back to the Project Window, and we'll Add a New Window, which we will call TaskEditWindow and this will be a Movable Modal window. And we'll give it a Title and then we can Open it. We don't need this to be resizable, in this window the user will be able to see more details about the task and make changes for the task, so let's Add some Controls. First we'll want a Label, and we'll line it up and this will be the Task Name and that will be Editable in a Field, Text Field Control. You'll notice that I Name everything as soon as I Add it to the Window so that I don't forget. Next we will Add the Note and this will be a Text Area now we Add the Due Date-and the Time. Next is the Priority, and for this we are going to use a Popup Menu-and we will Add the Priorities directly to the List. The next field is the Category, and this will be a ComboBox, the difference between a ComboBox and a Popup Menu is that you can actually type text in the ComboBox or select its drop-down value. And the reason we want to do that is so that users can add new categories as their adding the task. The last field we want to Add is a Checkbox, I think right beside the Task Name makes sense and this will be used to indicate if the Task is Completed. And now we need a couple Buttons, OK Button is the default and this is the Cancel Button and we do need to give the completed checkbox a name and now we can Save. We'll do a little bit of cleaning up of this window, it's slightly larger than necessary so we can shrink it a little bit here, - there. Last thing is to Change the Alignment of these Fields which we can Multi-Select, since they are all the same width we can just Choose Right and now they are all Right Justified. So let's Save that, that looks good. Now we have completed the Design of the main Windows.
Tutorial Information
| 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 |
VTC Sign up & Benefits
- Unlimited Access
- 81,350 Video Tutorials (14,200 free)
- Video Available as Flash or QuickTime
- Over 715 Courses
- $30 for One Month Access
- Multi-User Discounts Available
