VIEW MORE SCREENCASTS   |   MISSINGMANUALS.COM HOME PAGE

	Click here to preview and order the book.

TRANSCRIPT

Hi, I'm Geoff Coffey, co-author of FileMaker Pro 9: The Missing Manual; and in this third and final part on our three-part series on using Layout Mode in FileMaker Pro, we're going to add finishing touches to our layout.

In this segment, we'll set object alignment and arrange our objects on the layout. We'll use shapes and styles to add graphical embellishments to the layout, and we'll configure the auto-resize properties of our objects so that when our window resizes, the layout resizes appropriately.

Our layout is coming together nicely; but, at this point, it's still kind of a mess. You can see, for instance, that we have fields kinda floating around all over the place; and things don't line up quite right; and some fields are longer than they need to be. It's really just not very nicely polished.

So – and, also, if you have really sharp eyes, you may notice that our field labels don't line up with the text in the fields very well. Now, if you don't notice that, I don't blame you. It's hard to see, but FileMaker helps with this.

If you click the mouse and hold it down on a text object, FileMaker draws this dotted baseline across the layout. You can see it spanning all the way across the layout right now; and that dotted baseline shows you where the very bottom edge of that text is; and each field object has its own dotted baseline, as well.

So if those two lines don't line up perfectly, we know that our fields don't line up with our labels. It looks to me like this field label needs to come down about two pixels. So to move it down with it selected, I'll just press the down arrow key, once and then twice. Now I'll click and hold, and I can see that it lines up perfectly. So I'll select all of the other labels, ‘cause they all have the same problem; and I'll move all of them down twice, just two pixels. Now our field labels are lined up perfectly.

The next thing that we wanna do is rearrange our Address fields. We have the Street Address, the City, the State, and the Zip; but the City, State, and Zip don't need to be so big; and they take up a lot of vertical space. So what we're gonna do instead is make them a lot smaller for starters.

Now while I'm dragging, I'm holding the Shift key. That just keeps me from accidentally making the field too big. When the Sift key's down, it only drags it one direction. I'll make the State field very small, ‘cause it only holds two letters; and I'll make the Zip Code field fairly small, as well, just five digits there. And I'll make the City field a little bit smaller.

Now I'll line them up in order, City, State, and Zip like you would address an envelope; and bring them over so they align with the edge of the other fields; and then make City a little bigger to fill in the remaining space. And now I have an address that's sorta formatted the way an address would be, like I said, if you wrote out an envelope. So we don't need all these labels. So I'll take the City, State, and Zip Code labels and just delete them by pressing delete or backspace on my keyboard.

Now the next problem we have is that these fields are all much too close together. They're very cramped, so I'm gonna make them spread out a little bit. What I'll do is, using the rubber band, I'll select all but the first field; so I have the labels and the fields, but not First Name. And then I'll just move these down one notch.

Now, while I'm doing this, if you look in the arrangement, I have object grids turned on, which tells FileMaker to move everything in nice 6-pixel increments, which makes it really easy to do quick layout design that still stays nice and neat. So make sure you have that turned on.

Now I'll Shift click the Last Name field and its label, so they stay behind; and I'll move everything else down one more notch; and just repeat that process for each grouping so that they all arrange perfectly.

I'm gonna make the Notes field line up with the others like that, and now these fields are arranged pretty nicely. These fields over here need a little more work still, though. If we switch to Browse Mode – I'm gonna save and go to Browse Mode – the Goodness Rating field is just one number; and it would look nicer if it was centered, so we'll go ahead and do that.

I'll just select the field, say Format, Align Text, Center. Also, the Creation and Modification fields, we should never type into those fields; so they don't really need to have these borders around them. In fact, they shouldn't be enterable at all; so I'm gonna select these two fields. I'm gonna turn off the engraved effect. I'm gonna go to the Field/Control, Borders command and turn off their field borders; and I'm gonna change their fill color to clear.

The center box lets me apply a pattern; and one of those choices is these two overlapping white boxes; and if I choose that, they'll become clear, so you can see right through them.

Now, the last thing I need to do is make it so you can't type into them; and the way I'll do that is, again, with both selected, I'll go Format, Field/Control, Behavior and turn off the In Browse Mode choice. Now those fields can't be typed into.

I still wanna spread them out a little bit; so I'll bring this one down a notch; and they can be quite a bit smaller. To set these all apart from the rest of the layout, I'm gonna put a little box, a decorative box, around them; and I do that with the Rectangle tool over here. Grab that tool and just drag a box around those elements.

Now, this is a black box with no fill. I wanna make it a blue box, so I'll choose the fill color again and pick a light blue color. And you see that my elements have disappeared; and that's because my box is right on top of them; so to fix that, I'll say Arrange, Send to Back; and now they show on top of the box.

And then, finally, I'm gonna change the line color to a gray; and just for some pizzazz, I'll choose this diagonal pattern for my line, which makes it look like a dotted line. Then I'll line up the fields inside the box so that they look nicer. Using the Shift key again to select multiple items at once, and then tighten my box up so that it contains its items nicely. And I can move the whole thing over just a hair.

Now, if I save this layout, switch to Browse Mode, it's looking pretty good. Now, if you notice, though, my window's pretty large; and my layout's pretty small; and, in fact, if I make this window bigger or smaller, my layout doesn't respond in any kind of meaningful way. It'd be nice if FileMaker would automatically resize those elements to take advantage of the space that I've made available to them, and we're gonna see how to do that right now.

We're gonna switch back to Layout Mode. Now, first thing, I'm gonna get rid of this footer. I'm not using that footer at all. I don't need it; so I select it; and I just press the Delete or Backspace key on my keyboard.

Now, when I make the window taller, I want something to happen. I want something to take up that space, and the most obvious choice is my Notes field. It wouldn't make sense, for instance, for my E-Mail Address field to get bigger or my header to get bigger; but it is nice if my Notes field gets bigger.

So if I select the Notes field and go View, Object Info, I see FileMaker's Object Info palette; and it tells me about that Notes field; and, right here, we can see a section called Auto Resize; and this tells you how FileMaker's objects are connected to the layout as a whole; and you can see that this object is connected to the left and top of the layout, which means that the top edge of this object stays the same distance from the top of window, no matter how big the window gets; and the same with the left edge.

If I anchor the bottom by checking this box, the bottom anchor – lemme zoom in on these so you can see them a little better, and if I anchor the right anchor, as well, so that all four are turned on, then my Notes field will get wider and taller as my window gets wider and taller.

With those turned on, let's save the layout and take a look. Now you can see my Notes field has gotten taller; and as I resize, it resizes with my window.

Now, with that in mind, I can go ahead and make my Notes field wider, as well; so that it's just as wide as the layout itself. Now, if my layout gets bigger widthwise, you can see that nothing really takes advantage of that except the Notes field. But it would be useful if my fields over here got wider, as well.

So we'll go back to Layout Mode, and we'll make that change. I'll select each of these fields; and I'll say Object Info; and I'll anchor them to the right. Now I don't wanna anchor to the bottom, because I don't want them to get taller. I just want them to get wider.

Now, I've made a mistake here, which we're gonna see in a moment. I'm gonna turn those anchors on. There's actually two mistakes here. And I'll save my layout and switch to Browse Mode.

And you see one problem is that these fields have grown right into the blue box, which is probably not what you had in mind. The other problem is that the City field is bumped right into the State field, and that's bumped right into the Zip Code field, which is, again, not what we really want.

So let's go back to Layout Mode and see what went wrong. First, let's look at the City, State, and Zip. If the City field gets wider, but the State field stays anchored to the left, then the City field is gonna bump into the left edge of the State field. So in order to fix that, we need to select State, and Zip Code has the same problem, so we'll select it and go back to our View, Object Info palette and remove that left anchor.

Now, we've told FileMaker, "Move that field to the right as the window gets bigger. Don't leave that left edge anchored." That means that these two fields won't get any bigger as my window gets bigger. They'll just move out of the way, which is fine because they hold small values anyway.

Now, the exact same problem exists over here. These fields grow into this box; so we select the entire box; and we turn off its left anchor and turn on its right anchor. That says, "Keep moving to the right as my layout gets bigger." Save my layout and view it in Browse Mode; and now you can see, as my layout gets bigger, it resizes appropriately.

Now one last tip when you're doing these kind of resizing. This window's pretty large. It takes up my whole screen. If I wanna get it outta my way and I shrink, you see, it doesn't get very small. So when you design a layout to be resized like this, it's often a good idea to make it as small as possible.

We can come in here and resize these fields so they're quite a bit smaller, and we can resize the City field so it's quite a bit smaller and move State and Zip over. Now, you might be thinking, "Well, that's an irrationally small City field," and that's okay; because they don't have to have the window at its smallest setting.

Your users are free to make the window as big as they want, but at least we make it get small if they want it small. I'll make the Notes field nice and small, and I'll move my Details object over. Last, I'll make my body part smaller. Now I'll switch back to Browse Mode, and you can see now that my window can shrink quite freely. And now this is a nice-looking finished layout.