Interface Design / List View pt. 1
Subtitles of the Movie
The final tabbed area to fix is your list field. Right now it goes on to this old interface. We want it to go on to a similar list view with this interface, but it's a little more difficult because it's a lot different than the form view. So let's go into layout mode. We'll show the status area and let's duplicate this layout. We'll go into layout setup and we'll call this list and we'll set our layout order so that list is right up there next to the rest of them. And then we have to switch these tabs. Actually, we need to switch customer with list, so let's drag this one over there and then we'll swap this one over there and before I forget, I'm going to go ahead and change this to switch to contacts, change it to customer and we'll move this one in there. Woops, don't want to do that so undo that and then lock it. Move this one in there, get it just right, call it list. Very carefully double click down here. See, I didn't get it quite right and I got the graphic. I'll be a little bit more careful this time. There we go. Ok. So now we have our list view, but it doesn't really look like a list view. We need to put a header and a footer in there so we have this area staying up there, this are staying down there, not matter where we scroll and we need a much smaller body part. So I confess, I cheated a little bit. I know exactly where the measurements are. You may have a more difficult time doing this from scratch than I am, but I did it ahead of time and then measured things. So what I'm going to do is I'm going to go down here and show these parts and what I'm going to do is drag the part tool into here and it's different than your part setup, which adds in more space into the layout. When you use this part tool, it actually steals from the part you're putting it into. If I get this just right, get right in there and choose header, you notice that just steals that away from the body part. And I need to make sure this is 106. Ok. So I got it just the right spot and I'll change it so it's filled with that color and that should be just right for that. Now what we need to do is drag a footer down here, outside the body part and I know that this one needs to be 28 pixels tall. So we'll come over here, change this to 28, hit the tab key, change the color and that should be just about right. Now we can go ahead and move the footer part into where we want it, but really, let's get rid of, first, all the stuff we don't need, which includes all these buttons, everything inside of this. So we'll just drag in there and delete that. And then we really don't want most of these. So we're going to unlock that, ungroup it and then we're going to delete most of these. So we're going to shift, click that one and delete the rest of them. We actually want one more of those, so I'm going to undo that. There we go. Delete those. That's better. Come over and do the same thing over on this side. Unlock, ungroup, and shift click that one and this one. It's a little bit more difficult to get in there. There we go. I think I got it. Delete. I'm going to hide that header part there like that and now we're looking pretty good. Now we can take the part that we want to keep in the footer and actually move it down into the footer. So select that, unlock it and right down in there. Looks pretty good. And now we can move our body part up. Now, the tricky part is how far to move it up? Well, I already know that this needs to move quite a few pixels up. So we're going to go ahead and select both of these and move it up four pixels; one, two, three, four. So it's just touching that header differentiation so it actually will be covering the line that in there, but actually will, will still be in the body part. So it's just at the verge of being in the header part but not quite. Then I can move this up as far as it will go and that should be just about right. But we can test it by going to browse mode and what we want to do is choose view as list and we want to go ahead and show all of our records, which we are right now. We want to show all records because you want to make sure. But you can see already it's not quite working. That's because I got a little too high and got into the header. So I want to go into layout mode. I'm moving this body part down one pixel, I believe. I think it needs to be 22 high and then we'll take and move these down one pixel. So now they'll actually really be in the body part and not in the header. Let's see what happens there. And we'll scroll over and we can see that there's an even flow of these all the way down. Now, there's a couple things we need to fix, but this may take you a couple more tries than what I did to get this just perfect so that there's not white lines in here. It takes a while practice to do this.
Tutorial Information
| Course: | FileMaker Pro 9: Intermediate |
| Author: | John Mark Osborne |
| SKU: | 33823 |
| ISBN: | 1-934743-30-5 |
| Release Date: | 2007-11-13 |
| Duration: | 10.5 hrs / 130 lessons |
| Work Files: |
Yes |
| Captions: | For Online University members only |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 81,350 Video Tutorials (20,800 free)
- Video Available as Flash or QuickTime
- Over 782 Courses
- $30 for One Month Access
- Multi-User Discounts Available
United States 