Username:
Password:
FileMaker Pro 10: Intermediate Tutorials

Interface Design / Field Outlines pt. 1

Subtitles of the Movie

Let's continue with the creation of our interface by adding fields with a custom 3D interface. So we'll show the status toolbar, go to Layout Mode and we're going to drag a field out. And you can see that right away it's already got some type of settings on it. It's got a red fill, it's even got an effect on it. What you've done is you've set the default and so we're going to help you to understand what the default is. So let's drag another field out here and we'll choose city this time. It doesn't really matter and we're going to change it to a white fill and let's make it a smaller font size. We'll make it 12 point and then when we drag another field out, you'll notice that already has those settings. That's because you're setting the default. If you want the default to be this, you can either Control Click or Command Click, depending on you're Mac or Windows. So we're going to Command Click here because we're on Macintosh and then when you pull this out, you'll notice that that setting is there. If I Control or Command Click on here, then the next time I pull out a field, it'll have that format. So just realize this default's going on in the background all the time. But we really don't need to worry too much about that. I wanted to show you how that works but for me, what I do is I set up one field and then make all my fields based on that single field. So we're going to come up here and decide to make this 12 point. It's a great size. We're going to make it filled with white and then we're going to decide that we want this to be a certain font. Right now this is maybe not the font we want. It's Helvetica and that's not really that great for on-screen display. It's OK, but I prefer Verdana and I would recommend any on-screen display, you choose Verdana and you can see how it's a little bit bigger, a little bit easier to read. So we want to go with that for any on-screen display. Now, if you're printing, Helvetica or Times New Roman would be good for printing but Verdana's a great font that you find on Mac and Windows that will be great cross-platform. Even if you don't think you're going to go cross-platform, it's important to think about that. Now, our field label is a little big and it's bold, so I'm going to turn the bolding off and I'm going to make this, let's say, 10 point. I want to make it a little bit smaller than this one. And I'll move it down a little bit and just like with the rest of our interface, we're going to do this field once and then duplicate it a whole bunch of times. Next thing we're going to do is we're going to turn on our object info and make this exactly 200 pixels wide. I could do this just simply by dragging it and going to about what I want, but I know I want it 200 pixels. In fact, I can watch this while I'm dragging. You can see the numbers changing there. I'm going to go right up to 200 and there's exactly the size field I want. The other thing we're doing to do is take a look at our field in Browse Mode. It's got a 3D look like we had before. In fact, that's the same 3D look we had over here on our example interface, which I deleted. It's gone now. So if you haven't delete this sample, the first interface we had, let's get rid of that out of here so that it doesn't mess up the rest of your interface when you're trying to go to Browse Mode because you can see right now, if I hide this and go like this, I don't have any scrollbar going right to go to the other interface that we had saved. I decided we really didn't need that. So we're going to go ahead and go into Layout Mode and we're going to take that engraving off. It looks pretty good but I'd like to have some custom engraving. That's because I can control that engraving any way I want; the color, what types of engraving it does, all that kind of stuff. So I'm going to actually going to take this off. So we're going to hit None and notice how the field actually gets bigger because the engraving actually makes the field smaller. I like it to be bigger. I have more space to work with it. So what we're going to do is come over here and click on this field, go to Field Control Borders and we're going to set one on the left and on the right. And then we're going to choose this color. It's going to be this one right here and what I'm trying to do is replicate what we've done in the example or the goal we've set for this tutorial. Remember the invoicing example? It has the same gray border on these two sides but it actually has a different color here and a different color there. We can only set the same color all the way around so we're just going to do the left and the right this way and then what I'm going to do is get my line tool. I'm going to draw myself a line and I'm going to watch until I get 199. Because I've tried this before and I know that 199 will be just perfect and I'm going to come over here to my line color and we're going to choose a different color for the top. We're going to choose the third one from the top. There we go. And we'll move this all the way down there, put it right on top of there and then we'll go back to Browse Mode.

Tutorial Information

Course: FileMaker Pro 10: Intermediate
Author: John Mark Osborne
SKU: 33926
ISBN: 1-935320-19-X
Release Date: 2009-01-05
Duration: 15 hrs / 177 lessons
Work Files: Yes
Captions: Available on CD and Online University
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