Tabbed interfaces seem to be popping up all over these days. Programmers have built these interfaces, which create the sense that multiple screens of information are lined up like folders in a filing cabinet, into the dialog boxes of many programs to help you find the information you’re looking for. And on the Web they’re ubiquitous because they’re so handy for helping users get around different areas of a site.
Layout switching in FileMaker Pro is another excellent use of this interface. Anyone who uses the database, even if they’re unfamiliar with FileMaker Pro, will know how to get from layout to layout. Using tabs is also advantageous even if you’re the only one who uses your database; it’s more convenient to click on a tab than use FileMaker’s layout menu to switch layouts.
Here’s an easy lesson on how to create such an interface, which is nothing more than buttons with some graphic effects for illusion. Once you have the basics down, there’s nothing to stop you from making the interface more elaborate. For example, you might create tabs within tabs, add more shading with lines (for a 3-D effect), or use fields to modify labels based on context. Soon you’ll be making databases that are distinctly your own.
FileMaker Pro consultant SCOTT LOVE is still trying to live down the goofy interface he built for his first professional database more than a decade ago.
Step 1: Create a Simple Database First, you’ll need to create a database with some layouts. We’re using a simple to-do list database for our example.
Create a database and define your fields. Then, in Layout mode, create three layouts. It really doesn’t matter what the layouts look like — we used two standard views and a list view and called them Detail View, List View, and Report View.
Step 2: Start with a Script Before you begin making the buttons and visual elements required for this tabbed interface, you’ll save yourself time by first preparing scripts for your buttons. In this example, we’re using three buttons, so we’ll need to create three scripts.
Note: You don’t have to create scripts (instead, you can apply a single action to each button). But there are distinct advantages to controlling buttons with scripts: scripts let you change the behavior of common buttons in one easy step and also make it easier to build multi-function buttons. (See “Take Control of FileMaker Pro” to learn how to make multi-function buttons.)
To create the first script, open ScriptMaker from the Script menu and type the name of your first script — Goto List View — in the Script Name field A. Then click on the Create button B to open the Script Definition dialog box.
Clear the default scripts by clicking on the Clear All button C. Double-click on the Go to Layout script on the left side of the dialog box D to add it to your script E. Then select List View from the Specify pop-up menu. Finally click on OK to complete your first script.
To create the two remaining scripts — which will let you switch to the other two views in your database — follow the same procedure you used for making the Goto List View script with a couple of modifications: name one script Goto Detail View and the other Goto Report View. Also, choose the respective layouts from the Specify pop-up menu. When you’re finished, click on Done in the main ScriptMaker window.
Step 3: Create Three Buttons Once you’ve prepared your scripts, it’s time to create the buttons that go with them. These buttons will become the tabs in your interface.
A dialog box will open asking for button properties. Select Perform Script as your command B. Then select Goto List View from the Specify pop-up menu C on the right. Click on OK, then label the button on your layout as List View.
To begin, go to Layout mode and select Detail View from the Layout pop-up menu. Create the first button by selecting the button tool A and then clicking in the body of the Detail View layout and dragging to form a rectangle (the dimensions don’t matter, yet).
Create two more buttons. To assign each button its properties, double-click on it and select the appropriate script from the Specify pop-up menu (Goto Detail View for one button and Goto Report View for the other). Also, use the text tool to change the button labels to Detail View and Report View. Now you’ve got three buttons with scripts and proper labels.
TIP: A shortcut for making additional buttons once you’ve created one is to option-click-drag on the original button to anywhere in your layout.
Step 4: Resize and Place the Buttons The easiest way to size your buttons and put them in place is to use the Size palette. Keep the palette open because you’ll need it for precise positioning throughout the rest of this project.
Open the Size palette (in version 4 go to Show: Size; in version 5 go to View: Object Size) and change the measuring units to pixels. (Click on the right side of the window, which cycles among types of measuring units, until px appears.)
Select the List View button in your layout and, in the Size palette, type the pixel dimensions 100 and 24 in the bottom two fields, respectively A. (You must click on the Return key after typing in a dimension for it to take effect.) Do the same for the Report View button. The Detail View button requires slightly different dimensions because it will indicate the current layout — type 100 and 25. Making it one pixel taller will create the illusion that this button (tab) is closer to the viewer.
Now move the buttons to the top left corner of your layout. (For simplicity’s sake, you may want to delete the Header and Footer layout parts.) Move your List View button to five pixels from the left and five from the top. Then move the Detail View five from the List View button and four from the top. Finally, put the Report View button five pixels from the top and five from the Detail View button B.
Step 5: Create the Illusion of Tabs To make your database look like it contains tabbed folders you need to manipulate the colors of your buttons and background, as well as put some colored lines in just the right places.
Using the line tool, draw a horizontal, single-pixel line across the screen, one pixel above the bottom edge of the buttons A.
Now draw another line, exactly below the first B, and change its color from black to gray. Use the middle gray color, fifth from the top, on the pop-up Color palette.
Here’s some precision work. Create a third line, the same gray color as the second, 98 pixels by 2 pixels C. To make the line two pixels wide, choose 2 pt from the Line tool pop-up menu D.
Move this third line up to obscure the first two lines along the edge of the Detail View button E. Use the arrow keys to move a pixel at a time. Also change the color of the Detail View button to the identical middle gray you’ve been using. To make the other two buttons look like they’re further back, select a darker gray color for them.
The very last step is to color the rest of the layout the same middle gray that you used for the Detail View button. To do so, click on the Body tab F on the layout and select the correct color from the Color palette.
Step 6: Complete the Other Two Layouts Once you’ve got the hang of creating a tabbed interface for one layout, it’s easy to create it for the other two. Rather than starting from scratch, you can save time by copying and pasting the work you’ve already done and making some adjustments.
First select all the elements (lines and buttons) above your fields and copy them to your clipboard (command-C). Switch to List View, move your Header part down to accommodate all the elements on your clipboard (about 30 pixels or so), and paste the elements into the Header part A. Move the bottom edge of the Header as far up as the elements will allow. Change the color of the Body part to middle gray.
Since you’re in the List View layout, you need to make the List View tab appear to be in front of the other two. To do so, double-click on the Detail View button, change its script parameters to List View, and use the text tool to re-label the button as List View. Now do the same to reset and re-label your old List View button to be the new Detail View button. Swap their positions. Don’t forget to move your 98-by-2-pixel line as well.
The last task is to do this same button-copying and swapping technique in the Report View layout, and you’re done. To test your creation, switch to Browse mode and start clicking on tabs.
Final tabbed interface.