6.2. Working in the Code View
SharePoint Designer exposes a number of tools for the Code view to help developers with coding for Web pages in an intuitive Visual Studio-like environment. Along with the Tag Properties task pane, the Code view in SharePoint Designer can be used to write code blocks and set properties and attributes of tags, controls, and components.
Like the Design view, the color coding settings of the Code view of SharePoint Designer can also be changed using the Color Coding tab in the Page Editor Options dialog box. Although the default settings here work just fine, the Color Coding tab simply provides a way for you to customize the colors used for various types of code blocks in case you're not comfortable with the default color settings.
While working in the Code view, it's really useful to enable the Code View toolbar, as shown in Figure 6.4. This toolbar exposes many buttons in a single, easily accessible location, helping you avoid having to go through menus to access these features.
Figure 6.4. The Code View toolbar
Starting from left to right, the Code View toolbar offers these buttons for the Code view:
List Members (Ctrl+L): Displays the properties and events associated with the control where the cursor is placed. For example, if you want to list all the HTML attributes associated with a table tag, just place the cursor on any of the attributes (or the space between the attributes) and then press Ctrl+L.
Parameter Info (Ctrl+Shift+spacebar): Displays the parameters of the function being used
Complete Word (Ctrl+spacebar): Provides suggestions for auto-completing a tag or control. Press Ctrl+spacebar to auto-complete words.
Code Snippets (Ctrl+Enter): Opens a list where you can choose the code snippets you created by using the Code Snippets tab in the Page Editor Options dialog box. Press Ctrl+Enter to access the code snippets list at the location where the cursor is placed in the Code view.
Follow Code Hyperlink(Ctrl+[): A code hyperlink is a link in the Code view that takes you to the location where the code block associated with the code that's marked as a hyperlink exists.
Next Code Hyperlink (Alt+←): Takes you to the next available code hyperlink
Previous Code Hyperlink (Alt+→): Takes you to the previous code hyperlink
Function Lookup: This dropdown menu in the Code view lists the client-side script functions, if any, present on a Web page open in SharePoint Designer. Choosing a function takes you to the corresponding function definition in the open Web page.
Toggle Bookmark (Ctrl+F2): Creates a bookmark on the Code view of the Web page. Code view bookmarks can be used to identify lines of code and quickly jump from one section of code marked by a bookmark to another.
Next Bookmark (F2): Jumps to the next available bookmark
Previous Bookmark (Shift+F2): Jumps to the previous bookmark
Clear Bookmarks: Removes all bookmarks from the Code view
Select Tag (Ctrl+:): Selects the tag along with the inner HTML and the contents
Find Matching Tag (Ctrl+;): Finds the matching starting or ending tag that corresponds to the tag selected
Select Block (Ctrl+'): Selects the code block
Find Matching Brace (Ctrl+]): Finds the matching starting or ending brace in the code block
Insert Start Tag (Ctrl+,): Provides the angle brackets to place the starting tags
Insert End Tag (Ctrl+.): Provides the angle brackets to place the end tags
Insert HTML Comments (Ctrl+/): Provides the angle brackets that can be used to place HTML comments in a Web page
Options: Provides an interface to enable or disable code wrapping, line numbers, code checking, etc., for the Code view
Microsoft Scripting Editor: Opens the Microsoft Script Editor, which can be used to write code in an environment similar to Visual Studio
Most of these options are also available by choosing Edit 
Code View, choosing Edit 
IntelliSense, or by right-clicking on a Web page while in the Code view. However, the Code View toolbar consolidates these features for easy use. Remembering the shortcuts associated with these options can also greatly expedite your development time.
The Page Editor Options dialog box also provides a set of tabs for provisioning various settings for the Code view in SharePoint Designer.
6.2.1.
6.2.1.1. General tab
The Code View Option section in the General tab provides the same check boxes that are also available via the Options button in the Code View toolbar:
Word wrap: Enables or disables word wrapping for the code blocks in the Code view
Auto indent: Automatically indents the code inside the Web page to show hierarchy
Line numbers: Displays the line number in a margin on the left side of the Code view
Selection margin: Provides a margin on the left side of the Code view to help with selection
Highlight invalid HTML: Underlines HTML that's deemed invalid based on the selected document type declaration and schema. When you hover over invalid code, the Code view shows a screen tip indicating the reason behind the invalidity.
Highlight incompatible HTML: Underlines HTML that's not compatible with the selected document type declaration and schema
6.2.1.2. Code Formatting tab
The settings provided in this tab don't make any real changes to the Web page code except formatting it in ways that make the Code view more comprehendible. Most of these settings determine how the HTML tags and their attributes are formatted for viewing in the Code view. For example, selecting the Tag names are lowercase check box ensures that the Code view shows the tags as lowercase.
You can also specify the size of a tab (in character space units), the size of an indentation, and the size of the right margins in the Code view. Also, you have a list of HTML tags for which you can define the code formatting and line breaks.
NOTE
The Use shorthand properties when generating styles check box at the bottom of the Code Formatting tab allows SharePoint Designer to create styles by using shorthand — for example, font size: 120; font color: red; and font weight: bold can be shortened to: 120, red, bold.
6.2.1.3. Code Snippets tab
The Code Snippets tab allows you to create, modify, and delete code snippets. Code snippets offer a mechanism where you can create blocks of code that you would commonly reuse while writing Web pages. You can then insert the code blocks at the required location by just pressing Ctrl+Enter and then choosing the code block you want to insert.
By default, a number of code blocks are already available in the Code Snippets tab, as shown in Figure 6.5.
Figure 6.5. The Code Snippets tab in the Page Editor Options dialog box
When you create a new code snippet, you define a keyword (and description) to identify the code block associated with the snippet and then specify the code block text for the code snippet. In the Code view, when you press Ctrl+Enter to choose the code snippet for insertion, you only see the keyword and description associated with the code block.
6.2.1.4. IntelliSense tab
The IntelliSense tab, as shown in Figure 6.6, allows you to make settings for auto code completion in the Code view. It offers several options that you can have IntelliSense enable:
Auto Popup: The check boxes available here allow you to enable the automatic popup of code reference boxes for HTML, CSS, ASP.NET, and client-side scripting.
Auto Insert: The options available in this section allow you to configure the automatic insertion of closing tags and quotes around the HTML, CSS, and ASP.NET attributes.
Code Hyperlinks: These check boxes allow you to enable code hyperlinks for CSS, scripting, and Web page content, such as pictures, Web pages, etc.
Figure 6.6. The IntelliSense tab in the Page Editor Options
6.2.2. Understanding code hyperlinks
Code Hyperlinks is a feature that assists Web developers working on large projects to quickly jump from one section of code to another related section. It saves time by helping you locate actual code being referenced by a code hyperlink.
In the Code view, a code hyperlink looks just like a normal hyperlink that can be clicked to navigate to the code being referenced at the location of the hyperlink. SharePoint Designer allows you to use code hyperlinks to locate code and functions within the same Web page, different Web pages, style sheets or script files, and other documents.
When you hover over a code hyperlink in the Code view, a screen tip indicates that you can press Ctrl+click to jump to the code being referenced at the location. Clicking the code hyperlink in this manner opens the associated file and highlights the code section for review.
6.2.3. Using IntelliSense for auto code completion
IntelliSense is a feature shared by many Microsoft application development programs, providing you with a ready reference to simplify the code-writing process. Like in most applications, in the Code view, just by pressing Ctrl+spacebar at the location where you're writing code (HTML, Script, ASP.NET, and CSS), a dropdown menu appears, allowing you to choose from a contextual menu of functions, attributes, and properties.
Also, IntelliSense provides for the automatic completion of code, such as HTML tags, script braces, etc. For example, you don't have to manually complete tags or care about quoting attributes when IntelliSense is turned on. To see how IntelliSense works, follow these steps:
Open a Web page in the Code view.
Find the <body> tag inside the Code view, place the cursor after the ending angle bracket of the <body> tag, and then press Enter.
Place a starting angle bracket ( < ) at the cursor location. A popup menu appears with a list of HTML tags that you can choose from.
Choose the <a> tag from the popup menu and then press the spacebar. Another contextual menu opens, showing you all the attributes and events associated with the <a> tag.
Choose href from the popup menu. SharePoint Designer automatically places the attribute with quotes and provides you with a button to pick a URL.
Place a closing angle bracket ( > ) at the end of the inserted code. The closing tag (</a>) is placed automatically to close the <a> tag.
Between the <a> and </a> tags, you can place the display text of the hyperlink.
You just created a hyperlink by using the IntelliSense feature of SharePoint Designer's Code view. Although this exercise was fairly simple, you can gauge the usability of this feature when working with complex code.