Subtitles of the Movie

In the previous section, we used the tab control feature. If we go to layout mode and show the status area, we'll get rid of object info, we used this feature to create tabs. We're now using separate layouts and graphics. This reason we're doing this is to have more control over what you can do with the tabs; in other words, you can show a list view with this button, and a notes area with this button and it can run a script. You can't do that with the tab control feature. You can change context so you can show a different table. There's all kinds of things you can do that we'll show and you'll get familiar with when you're using layouts to mimic a tabbed interface. Now, certainly recommend using tabbed interface or the tab control feature whenever you want something simple. But if you want to be able to run a script or you want to change to a list view when you're switching tabs, you really can't do that with tab control and you can't even run a script. So we're going to go ahead and do this because I'm going to find out that we're going to be able to do different things with layouts that we can't do with the regular tab control feature. So what we need to start with is creating text blocks on top of these to name them. So we'll go ahead and click in there and type in customer and we'll get it right about there, move it over to here, get it right about centered. I think we need one more pixel here. Let's see how we're doing here. And maybe a little bit shorter. Sometimes it's tough to size it. That looks about right. Get it to 12 point. I think that's a good size here so you can really see it. And then we'll duplicate it. Notice it's already centered, so we would want to have this centered. And now we'll duplicate this. Six pixels up and then we'll move this and then hold the shift key down so it straightens up and then duplicate it one more time with the keyboard and now we can call this one notes and this one list. Now, they're a little bit off, it looks like. I'm going to measure it and then see how they look in here. Go to the bottom; nope, they're not off. I thought they were but I can quickly measure in here. But I do think I want to push everything up a little bit because it doesn't quite look right. So move that up one like that and then I really want this to stand out so we're going to make that bold. And then we're going to duplicate that, move it five pixels. One, two, three, four, five. And then five up. One, two, three, four, five. Change the text color to white and then send backward. Might have to do this a couple of times. And what that does is give you an engraving. It gives you a little bit more flavor. Makes this stand out even more than just being bold. So now we've got these labeled. They look good but they don't run any scripts. Now, we don't have a notes layout yet to switch to, but we do have a list layout, even though it doesn't look like this one. So we'll start with this. In fact, we'll create the buttons here. Now, we don't actually have a FileMaker object that can cover this. This really doesn't do it perfectly because it's rounded here and it's square on the bottom. So we're going to use multiple objects. So I'm going to go ahead and zoom up scroll over a little bit and then what we're going to do here is we, notice also we have a little mistake here it looks like. I'm going to fix that before we go on. And it might not be a mistake, but if you notice a little bit of space there and you see I moved that on accidents. So undo that. And I'll lock that so we can't accidentally move that again. And we'll go ahead and scroll that and actually the graphic defect is changed once we've drawn over it. And there a few graphic defects here. No big deal. And so what we're going to do is we're going to draw some objects. In fact, we're going to draw several objects to make up this space so it highlights without the square on the corner here. So we'll come here and we'll draw ourself, actually we'll start with a rectangle. We'll draw a rectangle right in there. And make it a little bit shorter. There we go. That looks pretty good. Notice where I have the red color so you can see it easily. Looks like it's even here and even there. Get our circle tool. And I'm actually going to turn on object info again so I can see and get a perfect circle here. I could type them in, but you can also watch as it's going by here and get 8 x 8. And I just know that that's just about right for this. Move it up there in the right spot. And move this over. Duplicate this. Get over in the same spot over here. One up there. Looks pretty good. And then we'll draw two more rectangles right in there. And it needs to be a little bit wider. And a little bit shorter. And once we've got that just right, make sure you click on it, duplicate it. Move over to the same spot. Looks just right. We'll select all of them. We'll start with the circles. Go to the little rectangles, holding the Shift key down right now. Now I have all of them selected and I'm going to group them. Now, when you group them and you add a button to that grouped object, they all highlight as one so now we can change this to a transparent fill and pen. Now it's not there and we can then duplicate this. One, two, three, four, five, six. And move it on over. In fact, we'll scroll over a little bit here. Make sure we grab that and hold the Shift key down. Woops, got it on top of object info here so we'll try that again. And I think we got that just about right. And so now we're done with those buttons and we can actually work with the list because, again, we have a layout for that. We don't have one for notes. We'll create that layout in a second. But we can now go ahead with that selected and you need to make sure that you don't click on the middle because we're clicking on the text. Don't click there because that's the actual graphic. Click right there. And you can see how the highlight's different. Change the button setup to go to layout and we'll choose list view. And let's go to browse mode and see how it works. And we'll go ahead and click on list and you can see that it goes to list view now. It doesn't match it, doesn't look the same, but this is actually a fairly complex layout to design with that interface. So we're going to take after we do the notes layout. But you can see at least that it does work now. We can switch them back and forth. What our objective here is to make it so that nothing shifts. This stays in the same place, everything looks the same and it just appears like you're switching to another tabbed area, so all this stuff stays the same except for what's in the middle here. So you really create a tabbed interface and it really tricks the eye. So what we're going to do next is work on the notes layout and connect it up. We have the list done. You can see it highlights nicely, but we'll work on the notes layout next.