Soliant Consulting | Custom Software Consulting, Development, and Programming

Auto-Resizing Layout Objects

Movie: Auto-resize in action

One of the significant new capabilities in FileMaker Pro 9 is the “auto-resize” feature. We are thrilled with the user interface improvements this functionality makes possible. An added benefit is how auto-resize can reduce development effort, at the very same time.

In prior versions of FileMaker, making a particular layout look good on both small and large monitors meant creating multiple layouts—one for each target screen resolution. Now, however, layout objects can be made to automatically move and/or change size as a user changes the window size. So a single layout can adapt itself on the fly, to perfectly serve various monitor and window configurations.

In addition to providing a richer user experience and streamlining development, auto-resize is easily applied to existing .fp7 solutions, potentially producing huge usability gains for perhaps a half-hour or less of actual work per layout.

All this is reward enough, but changing trends make this new feature especially noteworthy.

Display Size Usage Patterns
Statistics indicate that more than one-quarter of Web users are using monitor settings higher than the “standard” 1024×768 (source: W3Schools.com). The reality is that users now have many choices of monitor size and resolution. The aspect ratio of displays is also changing, favoring wide-screen dimensions—for both stand-alone and laptop screens. Resolutions exceeding 1600×1000 on 21″ or larger monitors are common, effectively doubling the number of pixels one can use on their screen. And 30″ displays (up to 2560×1600 resolution) are popular in the creative markets, where FileMaker has a strong presence. Naturally, you’ll want to survey your target audience to confirm their own particular usage mix and adoption patterns..

Evolving UI Design Guidelines
The current user interface wisdom is expressed well by Jakob Nielsen; here he’s describing Web design, but his observations also hold true for most desktop applications: “Optimize Web pages for 1024×768, but use a liquid layout that stretches well for any resolution, from 800×600 to 1280×1024 and higher. We know that designing for higher screen resolutions can provide a richer user experience and dramatically increases performance and usability. But keep the minimum required size to 800×600, as not all users will want an application to take over their whole screen.”

So, enough of the Why; here are the What and How:

What it is:

Auto-resize controls how layout objects resize and move when the window size changes. This is done by anchoring the sides of an object (top, bottom, left, right) to the respective edges of the window or enclosing object (portal or tab control), if any.
The effect of auto-resize, is that objects will maintain a constant distance from the window or enclosing object, for each side that is anchored. When a side of the window or enclosing object moves, the object moves and/or resizes accordingly to keep that distance constant. However, when the window size is reduced, objects will not contract to a size smaller than their actual size in Layout mode.
Any object on a layout can be set to auto-resize; auto-resize settings are thus attributes of each object, and not a general layout preference.

How to implement auto-resize:

Auto-resize settings are assigned via the Object Info palette (brought up in Layout mode by selecting menu item View > Object Info). Clicking on an object selects it, and the object’s position, size, auto-resize options, and name (if any) will display. Multiple objects may be selected, to add or remove an auto-resize setting to them all.
To reproduce prior version behavior, new objects have their top and left sides anchored by default.
Tab controls and the objects they contain can each have their own auto-resize behavior. For example, a tab control could be anchored to all sides so it expands as the window does, but fields on the tab control could be centered on the tab control boundaries.
Portals are a unique case, and FileMaker Inc. has really delivered a much-wanted capability… the power to automatically add portal rows or increase portal row height when a window grows! Objects located in portals anchor to the top and/or bottom of the row boundaries, rather than the portal’s outside boundaries. The resulting portal resize behavior depends on how the objects it contains are set.

OBJECT INFO ANCHORS

LAYOUT DISPLAY RESULTS

default

upper right

full width

all sides

lower right

(mouseover anchor settings at left to see affected fields)

Effect on Printing
Auto-resize can also benefit printing. When page size is wider than the layout, horizontal anchor settings apply to Preview mode and printing.Constraints and Caveats
With power comes responsibility…

Objects move or resize relative to their containing boundaries–not to adjacent objects. Be aware that it’s possible to design layouts where items may overlap when resizing.
Resizing applies to individual objects. Grouping or locking has no visual affect.
In list view, vertical height is unaffected; resize occurs only horizontally.
Auto-resize has no effect in Table view.

The demo file for this tip is a slightly modified version of Registration.fp7, one of the template files that comes with FileMaker Pro. Feel free to download this demo file.