Interface Design / Notes Layout
Subtitles of the Movie
We're going to start work on the notes layout and the notes layout's actually going to be a complete copy of customer. Everything is going to remain the same, so we're just going to duplicate it. We're doing to change what's in here. This is going to trick the eye so when we click on this button to go to the notes layout all that's going to change is right here. So it'll look like a tab control feature, but with separate layouts and that will give us the advantage of being able to run any kind of script steps we want. It will allow us to eventually go to a list view, which it can't do with tab control. We can even change to a different table if we have multiple tables. There's all kind of things you can do and why you want to, might want to spend the time using multiple layouts rather than just the tab control feature. But, of course, tab control is much easier. Use it when it makes sense. In addition, you can see I can have these nice little buttons, rather than just what the tab control offers. By using multiple layouts, I can get this nice 3-D look here. So there's lots of advantages. So let's go into layout mode, show the status area and we'll start by duplicating the layout, then go to layout setup and call a new layout to duplicate our version, notes. And then I'm going to set the layout order. I want these notes field to be up here; the same order as you see right here. Make it easier to work with it and now you can say I have two, contact and notes, exactly the same. There's no difference between these two layouts. Now we have the opportunity to make those changes. So I want to switch these two tabs. I'm going to first lock this so it doesn't get in my way. I don't want to accidentally move it. And then we'll drag and select that. Move it with the Shift key held down. Then we'll come and get the notes. Move it. And if you do it right, you can see the original graphic and the outline of where it's moving. Get it right in the right spot. Then we can come back, move it with the Shift key held down, get it just in the right spot. Now all we have to do is change this to customer by double clicking on it. Double click on this and change it to notes and getting the white text behind is a little tricky. You can try to come over here and get right in the right spot or right down here. And if you get it just right, after a lot of practice, I've done it quite a few times, you don't have to move that black text away so you can get the white text. You just know right where it is. And then we're going to click very carefully on the edge here, not on the text, not here. We want the actual FileMaker graphic and that's what we want to attach the button to. And simply go to layout, contacts. And we'll take a look at that later. Now what we want to do is modify what's in here. So we're going to go ahead and select everything here and simply delete it. We're going to leave one field because we're going to base our notes and our media field on this. So I'll move this up here, double click on it and we're going to remove this drop-down list. Now, what we did offline, and if you didn't notice, is we attached the drop-down list to category and that was the way it was in our previous interface and so we moved it over here and changed it to notes. It's still going to have that on there, so we have to make sure you take that off. You don't want a drop-down list on your notes. We'll click OK and then we'll change this to notes and then we'll make this notes field quite a bit larger so you can see all the notes. Drag it out to here. Make it about that tall. And we don't want it aligned in the center, so that's only really a good idea for single-line fields. This is a multi-line field so we really want to have it up at the top. So go to format, align text center. I'm sorry, top. There we go. And then we can carefully shift click these two borders here and resize them. When you get it just perfect, then drag this one down to the end here and move it down and then we can go ahead and duplicate this field. We'll duplicate it. One, two, three, four, five, six. Move it down with the Shift key held down and then we'll change this to media. And change that to media. And then we still have a little bit more room and, you know, media can sometimes be big, like a picture or whatever, so we'll make it a little bit bigger here. Fill up that space. And then move our border down. There we go. And I think one other added touch that would be nice is to put a scrollbar on the notes. So we'll double click on that and include the scrollbar and there we go. Now we got a pretty good looking field here. And I think we also want, probably on this, behavior, since all the other fields have select entire contents. Really you don't want that on the notes because you'll be adding to it. You don't want everything to select. So I'm going to take that off. And we're looking pretty good here. So now we want to go to browse mode and see what we've done. And we'll try clicking on customer and you can see how nicely that worked. It didn't appear that anything changed except for this little text here and the stuff in there. Now, we need to add the same button here. So let's go into layout mode. Very carefully click on the edge so we get the FileMaker graphic. Choose button setup and go to layout notes. We'll enter browse mode and now you can see you're moving between customers and notes. It really mimics a tabbed interface. It's very cool. Now, I can see one thing happening here. We can see that this gets a little too high here on these and I think we need to move this down one. And before we go any further, we want to make sure we have that working perfectly. So see how that works. We'll come in here, select that customer, move it down one pixel there and then go to notes and you got to be careful when you get in here. And we have customers locked, that text block, so we can do that. And move one pixel down. Let's see how that looks. That looks pretty good. Let's see how better it works here. Now you don't see that jumping up and down. It looks a little bit better. And let's just make sure we didn't make a mistake here. I'm always very careful because I don't want to do this on 50 layouts once I notice it. Just move everything up one. Ah, it looks like we moved it. Now there's two pixels. It was actually these that were down too low. So we'll everything up one pixel and that will make it really look just perfect. So spending the time right now really will make the difference. We don't have to do that later. And now we've got a pretty good looking layout here. So that's pretty nice. Now, you will notice one thing; that there's one pixel shy right there and what I'm going to do offline is I'm going to redraw these buttons because you can notice that. Because we made that mistake in putting this too low, we made that highlight button on top too low. You'll want to do this as well if you made the same mistake. I'm not going to spend the time doing it here but it's very important, this points out that because I've made a mistake, but I noticed it. So you can make mistakes but you have to be very observant. That's a very critical thing as a developer. Be very observant and you can notice things like that because that's easy to fix when I have two layouts. When I have 50 layouts, it's not so easy to fix. So make sure we do that offline.
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
- 98,729 Video Tutorials (23,265 free)
- Video Available as Flash or QuickTime
- Over 1026 Courses
- $30 for One Month Access
- Multi-User Discounts Available
United States 