Using the HTML Tag Editor

From Appmethod Topics
Jump to: navigation, search

Go Up to Code Editor

When you are creating or editing an HTML file, you can use the Tag Editor window, beneath the Form Designer, to edit the HTML tags. If you are using an HTML Form, you can display the Tag Editor in the Designer by selecting View > Tag Editor.

The Tag Editor lets you review and modify HTML tags while viewing the corresponding controls in the Designer window, above it. The Tag Editor allows you to use the Code Completion, Error Insight, and Live Template Completion features that are also available in the Code Editor. Refer to the links at the end of this topic for more information about using each of these features.

The Tag Editor works with one tag at a time, unless you have the Document object selected or you have zoomed out from a tag. (When the document object is selected, you'll see the item "DOCUMENT" on the Object Inspector.)

Use the zoom buttons to zoom out to a tag's parent and zoom back in to the selected child tag. Zooming isn't specific to the tag, it's more generic to the markup in the document itself. For example, if the cursor is on a tag in your HTML markup, and you use the Zoom command, it will take you to the outer tag, or one level above the attribute where the cursor is positioned.

Validation against standard HTML style rules occurs automatically. If validation fails, the incorrect element is highlighted in red in the Designer, and Error Insight appears in the Tag Editor to help you correct the problem.

To view HTML code for an individual control

  1. With the Designer displayed, drag an HTML element from the Tool Palette to the Designer surface. The Tag Editor displays the HTML code.
  2. To view the individual control's code, click anywhere on the Designer surface to deselect the control. The HTML code appears in the tag editor window, with syntax highlighting. The gray header of the tag editor now displays the higher level tag, usually the FORM tag that defines this particular Web Form.

    Note: If a control is defined using several lines of HTML code, when you select the control, the first line of the code is displayed in the gray header of the tag editor. The additional code appears below in the tag editor window.

To view the HTML code for all controls

  1. With the Designer displayed, drag several HTML elements from the Tool Palette to the Designer surface. The editor displays the HTML code for each element as you drop them on the Designer surface.
  2. Click anywhere on the Designer surface to deselect all controls. This displays the code for all the controls in the tag editor, with syntax highlighting.

To modify a control

  1. Click anywhere on the Designer surface to deselect all controls.
  2. Locate the tag that corresponds to the control you want to modify.
  3. Modify the code, and the change is immediately reflected in the control on the Designer surface.
  4. Save your project to make the modifications permanent.

To change editor properties

  1. Choose Tools > Options > HTML Options.
  2. Change any code editor properties.
  3. Click OK. Your changes take effect immediately.

To zoom between contents of the form and the form container

  1. To zoom out so that you can view the HTML form definition, click the left-hand blue arrow in the gray header of the tag editor.

    Note: You can only use this feature when the cursor is somewhere in the tag editor, rather than on the Designer surface.

  2. To zoom in so that you can view only the content within the FORM tags, click the right-hand blue arrow in the gray header of the tag editor.

    Note: You can only use this feature when the cursor is somewhere in the tag editor, rather than on the Designer surface.

See Also