Certain documents, such as source code files and markup files, have a natural parent-child aspect to their organization and syntax. XML nodes, for instance, can contain other nodes. Likewise, functions and other programming language constructs such as loops and try/catch blocks act as a container for other lines of code. Outlining is the concept of visually representing this parent-child relationship.
Both Visual Basic and C# provide a way to manually create named regions of code via a special region keyword. Use #region/#endregion (#Region and #End Region for Visual Basic) to create your own artificial code container that will be appropriately parsed by the code outliner. Because each region is named, this is a handy approach for organizing and segregating the logical sections of your code. In fact, to use one example, the code generated for you by the Windows Forms Designer is automatically tucked within a “Windows Forms Designer generated code” region. One quick way to implement a region is with Surround With: In the editor, highlight the code that you want to sit in a new region, right-click on the highlighted text, select Surround With from the context menu, and then select #region (or #Region for VB).
Code Outlining
Code outlining is used within the code editor; it allows you to collapse or expand regions of code along these container boundaries. A series of grouping lines and expand/collapse boxes are drawn in the selection margin. These expand/collapse boxes are clickable, enabling you to hide or display lines of code based on the logical groupings. Code outlining is best understood using a simple example. This is the initial console application code. It contains a routine called Main, a class declaration, a namespace declaration, and several using statements. The code outline groupings that you see in the selection margin visually indicate code regions that can be collapsed or hidden from view.
Because the class declaration is a logical container, the selection margin for that line of code contains a collapse box (a box with a minus sign). A line is drawn from the collapse box to the end of the container (in this case, because you are dealing with C#, the class declaration is delimited by a curly brace). If you click on the collapse box for the class declaration, Visual Studio will hide all the code contained within that declaration.
Note that the collapse box has changed to a plus sign, indicating that you can click on the box to reshow the now-hidden code, and that the first line of code for the class declaration has been altered to include a trailing box with ellipses.
The HTML Editor also supports outlining in this fashion. HTML elements can be expanded or collapsed to show or hide their containing elements.
Using the Outlining Menu
Several code outlining commands are available under the Edit, Outlining menu.
• Toggle Outlining Expansion—Based on the current cursor position in the editor window, hides or unhides the outline region.
• Toggle All Outlining—Hides or unhides all outline regions in the editor.
• Stop Outlining—Turns off automatic code outlining (any hidden regions will be expanded). This command is available only if automatic outlining is turned on.
• Stop Hiding Current—Removes the outline for the currently selected region. This command is available only if automatic outlining has been turned off.
• Collapse to Definitions—Hides all procedure regions. This command is useful for distilling a type down to single lines of code for all of its members.
• Start Automatic Outlining—Enables the code outlining feature. This command is available only if outlining is currently turned off.
Code outlining is a convenience mechanism: By hiding currently irrelevant sections of code, you decrease the visible surface of the code file and increase code readability. You can pick and choose the specific regions to view based on the task at hand.
If you place the mouse pointer over the ellipses box of a hidden code region, the contents of that hidden region will be displayed to you in a ToolTip-style box; this is done without your having to actually expand/reshow the code region.
HTML Navigation
One problem with large or complex web pages is that navigation through the HTML can be problematic with multiple levels and layers of tag nesting. Envision a page containing a table within a table within a table. When you are editing the HTML (through either the designer or the editor), how can you tell exactly where you are? Put another way, how can you tell where the current focus is within the markup hierarchy?
Using the Tag Navigator
The tag navigator is Visual Studio’s answer to this question. The navigator appears as a series of buttons at the bottom of the web page editor, just to the right of the designer/editor tabs. A bread-crumb trail of tags is shown (as buttons) that leads from the tag which currently has focus all the way to the outermost tag. If this path is too long to actually display within the confines of the editor window, it is truncated at the parent tag side; a button enables you to display more tags toward the parent.
Each tag button displayed by the navigator can be used to directly select the inclusive or exclusive contents of that tag. A drop-down triggered by the tag button will contain options for selecting the tag or selecting the tag content. The former will cause the tag itself, in addition to all of its enclosed content, to be selected. The latter will exclude the tag begin and end, but will still select all of its enclosed content. The navigator is a great mechanism for quickly moving up and down within a large HTML documents tag tree.
Using the Document Outline Window
The Document Outline window displays a tree-view representation of the HTML elements on a page. This hierarchical display is also a great navigation tool because it allows you to take in the entire structure of your web page in one glance and immediately jump to any of the elements within the page.
To use the Document Outline window, choose Document Outline from the View, Other Windows menu. Elements within the head, page, and body elements are displayed, in addition to script and code elements. Clicking on an element will navigate to that element (and select it) within the designer window, and, of course, you can expand or collapse the tree nodes as needed.
Both Visual Basic and C# provide a way to manually create named regions of code via a special region keyword. Use #region/#endregion (#Region and #End Region for Visual Basic) to create your own artificial code container that will be appropriately parsed by the code outliner. Because each region is named, this is a handy approach for organizing and segregating the logical sections of your code. In fact, to use one example, the code generated for you by the Windows Forms Designer is automatically tucked within a “Windows Forms Designer generated code” region. One quick way to implement a region is with Surround With: In the editor, highlight the code that you want to sit in a new region, right-click on the highlighted text, select Surround With from the context menu, and then select #region (or #Region for VB).
Code Outlining
Code outlining is used within the code editor; it allows you to collapse or expand regions of code along these container boundaries. A series of grouping lines and expand/collapse boxes are drawn in the selection margin. These expand/collapse boxes are clickable, enabling you to hide or display lines of code based on the logical groupings. Code outlining is best understood using a simple example. This is the initial console application code. It contains a routine called Main, a class declaration, a namespace declaration, and several using statements. The code outline groupings that you see in the selection margin visually indicate code regions that can be collapsed or hidden from view.
Because the class declaration is a logical container, the selection margin for that line of code contains a collapse box (a box with a minus sign). A line is drawn from the collapse box to the end of the container (in this case, because you are dealing with C#, the class declaration is delimited by a curly brace). If you click on the collapse box for the class declaration, Visual Studio will hide all the code contained within that declaration.
Note that the collapse box has changed to a plus sign, indicating that you can click on the box to reshow the now-hidden code, and that the first line of code for the class declaration has been altered to include a trailing box with ellipses.
The HTML Editor also supports outlining in this fashion. HTML elements can be expanded or collapsed to show or hide their containing elements.
Using the Outlining Menu
Several code outlining commands are available under the Edit, Outlining menu.
• Toggle Outlining Expansion—Based on the current cursor position in the editor window, hides or unhides the outline region.
• Toggle All Outlining—Hides or unhides all outline regions in the editor.
• Stop Outlining—Turns off automatic code outlining (any hidden regions will be expanded). This command is available only if automatic outlining is turned on.
• Stop Hiding Current—Removes the outline for the currently selected region. This command is available only if automatic outlining has been turned off.
• Collapse to Definitions—Hides all procedure regions. This command is useful for distilling a type down to single lines of code for all of its members.
• Start Automatic Outlining—Enables the code outlining feature. This command is available only if outlining is currently turned off.
Code outlining is a convenience mechanism: By hiding currently irrelevant sections of code, you decrease the visible surface of the code file and increase code readability. You can pick and choose the specific regions to view based on the task at hand.
If you place the mouse pointer over the ellipses box of a hidden code region, the contents of that hidden region will be displayed to you in a ToolTip-style box; this is done without your having to actually expand/reshow the code region.
HTML Navigation
One problem with large or complex web pages is that navigation through the HTML can be problematic with multiple levels and layers of tag nesting. Envision a page containing a table within a table within a table. When you are editing the HTML (through either the designer or the editor), how can you tell exactly where you are? Put another way, how can you tell where the current focus is within the markup hierarchy?
Using the Tag Navigator
The tag navigator is Visual Studio’s answer to this question. The navigator appears as a series of buttons at the bottom of the web page editor, just to the right of the designer/editor tabs. A bread-crumb trail of tags is shown (as buttons) that leads from the tag which currently has focus all the way to the outermost tag. If this path is too long to actually display within the confines of the editor window, it is truncated at the parent tag side; a button enables you to display more tags toward the parent.
Each tag button displayed by the navigator can be used to directly select the inclusive or exclusive contents of that tag. A drop-down triggered by the tag button will contain options for selecting the tag or selecting the tag content. The former will cause the tag itself, in addition to all of its enclosed content, to be selected. The latter will exclude the tag begin and end, but will still select all of its enclosed content. The navigator is a great mechanism for quickly moving up and down within a large HTML documents tag tree.
Using the Document Outline Window
The Document Outline window displays a tree-view representation of the HTML elements on a page. This hierarchical display is also a great navigation tool because it allows you to take in the entire structure of your web page in one glance and immediately jump to any of the elements within the page.
To use the Document Outline window, choose Document Outline from the View, Other Windows menu. Elements within the head, page, and body elements are displayed, in addition to script and code elements. Clicking on an element will navigate to that element (and select it) within the designer window, and, of course, you can expand or collapse the tree nodes as needed.
|
|
0 comments
Post a Comment