Macromedia - Collapse Your Code

Collapse Your Code
Amy Cowen
Freelance Writer

The Collapsed Text feature introduced in HomeSite 4.5 and ColdFusion Studio 4.5 can help you streamline your Web development. In a nutshell, Collapsed Text does exactly what the name suggests� it allows you to "collapse" selected text or code. For example, you can collapse a 100-line chunk of code into a single symbol that indicates that more code exists but is being hidden from view. The code is still present, but it is obscured from view. When you need to access the code again, simply double-click on the collapsed code marker on the page to restore the code.

This feature comes in handy during day-to-day Web development in a variety of ways. When working with a long page, you can temporarily hide part of the file to unclutter your screen. When debugging, collapsing sections as you seek out a trouble spot can streamline the process and enable you to locate the error more quickly. Another use for collapsed text is customizing your frequently used files and templates to conceal sections of your pages that don't need to be frequently altered.

What You Don't See�

Whether you designed your site templates or you use company-standard templates created and maintained by another group, it is likely your files are, in large part, constructed with includes that separate much of the core site layout from the HTML pages themselves. As a development strategy, this helps standardize the coding of critical site elements and may allow a centralized Web group to control the content of those elements. For the individual coder, this strategy may mean that the pages and templates you use involve an array of or material that is required on the page but that you don't need to "work" with when creating your own files or making edits. Using Collapsed Text, you can customize your templates for easier use.

The following screenshots show a simplified page making use of collapsed text to hide elements that should not be edited and to mark where content can be added.

Figure 1: This screenshot uses HTML comments to surround collapsed code. This can make the template easier to read.

Figure 2: This screenshot buries all code in the collapsed section, leaving only the notation that indicates where to enter content.

The pages you work with are probably more complex than the ones shown here, and you may have many additional divisions on the page that need to be collapsed. However, the screenshots give you a sense of how you can unclutter the page by collapsing sections related to site elements that you don't have control over (as in the case of site-wide includes controlled by other groups) or that you do not commonly need to edit. Headers, footers, and even stock sidebar elements, including navigation, may all be candidates for collapsing.

Managing Your Options

Key to working successfully with collapsible code is understanding the options available for individual customization.

NOTE:
These options are set for each user's installation of HomeSite or ColdFusion Studio.

You can reach the settings by clicking Options / Settings and then choosing Collapsed Text from the sub menu that appears under Editor in the tree.

Figure 3: The options for Collapsed Text allow you to control general formatting as well as functionality.

As you can see, not only can you control basic formatting like font face, size, and the color of the collapsed text button and text, you can also control how the collapsed sections work. One of the most important settings to adjust will be "Max no. of hint lines." This controls how many lines are visible when you mouse over the collapsed area.

Figure 4: A "hint" appears when you mouse over the collapsed section.

You will want to experiment with this setting. You may find that you like having just one hint line show up. Or you may find that you prefer to have several, or even the entire section of code, appear. You will also want to work with the "Length" setting. This controls the length of the Collapsed Text button that appears after you collapse a section. If the button is longer, more code shows in the button label. If you are hiding the section because you don't use it, then a short length should be fine. If you frequently collapse sections of the page that you do work with just to keep them out of the way until needed, you may want a longer length so that you can tell what a collapsed section contains just by just glancing at the button. Finally, so that select code sections you collapse remain collapsed when you reopen the file, make sure "Preserve collapsed text on file open/save" is checked.

NOTE: Portability Issues
Information regarding Collapsed Text for a file is stored as a separate data file resident on the system on which HomeSite or ColdFusion Studio is installed. The collapsed text definitions are stored in a .ctr file in the UserData/Collapsed subdirectory. You cannot simply transport the .ctr to another machine and have the collapsed text work when a file is opened.