HTML editor views
The HTML editor has three views:
Page, Source, and Preview. Each view provides a different way of
working with your HTML project.
Page view
Page view provides WYSIWYG
editing for an HTML page without requiring knowledge of HTML tagging.
Use Page view as your main editing environment or to supplement
the editing you do in Source view.
Modifying the WYSIWYG view
Although Page view provides WYSIWYG editing, you can show representations
of HTML tags on your page through a toggle switch in the PowerBuilder Design
menu or in the Page view pop-up menu. The tags display in symbol
form inside yellow blocks. This image shows a page in Page view with
the Show Non-Visual Tags menu item selected.
Part of a client-side script is displayed in the integrated
Script editor at the bottom of Page view. For more information about
the Script editor, see Chapter 6, “Writing Scripts “.
The same page looks like this when the Show Non-Visual Tags
item is not selected:
Forms on non-4GL pages and script elements
In Page view, you can also see FORM elements around controls
that you insert on a non-4GL page. You can see icons for client
and server scripts that you add to the page, and on JSP pages, you
can see icons for JSP directives and custom tag library classes
that you add to a page. These elements and icons remain visible
in Page view even after you clear the Show Non-Visual Tags item,
but they are not visible in the Preview view.
Basic document structure
The basic document structure (HTML, HEAD, and BODY elements)
is supplied when the page is first created. The editor creates the
structure for you. Any text you type in Page view is inserted in
the Body section of the HTML or JSP document.
The HEAD element includes a document title and can include
links to external style sheets.
For more information on adding a page title from Page view,
see “Giving your page a title”.
For information on style sheets, see Chapter 4, “Working with Style Sheets
and Framesets”. For information on other basic editing
techniques, see “Basic editing in Page and
Source views”.
Source view
Source view gives you total
control over the HTML tags and content of your file, including the
Head section and scripts. You can view and edit content as well
as the HTML tags and their attributes.
Basic document structure
When you create a new HTML file and switch to Source view,
the basic document structure has already been created for you, including
the HTML, HEAD, and BODY elements.
Using menu items and tools
In Source view you can type the tags manually, use menu items
or tools, such as wizards, toolbar buttons, element property sheets,
or the System Tree, and drag-and-drop items to add content and formatting.
You can then edit these tags and attributes in the source code.
For more information on editing techniques in Source view,
see “Basic editing in Page and
Source views”.
Formatting the HTML source
Source view in the HTML editor can format your HTML code to
make it more readable. Use the Editors tab of the Options Properties
dialog box to specify formatting. You display the Option Properties
dialog box by selecting the Design>Options menu item from
the HTML editor menu bar.
You can also select an option to format the source code automatically,
or trigger the formatting manually from the Source view pop-up menu.
For more information on formatting Source view display, see “Formatting HTML source display”.
Preview view
Preview view lets you
test the work you do in Page and Source view. It defaults to the
Microsoft Internet Explorer (IE) browser to display your current
page and execute the client scripts it contains. Server scripts
are ignored.
Choosing a view to work in
Page view and Source view provide very different ways of working
with HTML. This table lists some of the advantages and disadvantages
of each view.
| View | Advantages | Disadvantages |
|---|---|---|
| Page |
|
|
| Source |
|
|
Edit in Source view to keep HTML source from being
reformatted If you do not want the editor to alter the layout of your
HTML source, use Source view instead of Page view for all of your
editing. By default, if you edit in Page view, the source will be
reformatted.
Switching between views
You can switch between views by clicking the tabs at the bottom
of the editing pane. Each view preserves its own insertion point.
When you switch back to a view, especially if you have done no editing,
the cursor will be where you left it.
If you make changes in a view, it can affect the cursor position
in another view. For example, if changes you make in Source view
cause Page view to recalculate the layout, the cursor will move
to the start of the file. If you delete or insert text in Page view
that is before a Source view insertion point, the insertion point
moves accordingly.
Remembering views from a previous session
PowerBuilder provides an option to automatically reload any
editor windows that were open when you ended your previous session.
If you select this option, the next time you open your workspace,
the HTML editor will redisplay the pages you had open in the previous
session.
When reloading an HTML editor window, PowerBuilder displays
the view that you were last in (Page, Source, or Preview).
To reload pages that were open when you ended
a previous session:
-
Select Tools>System
Options from the PowerBuilder menu. -
Select the Workspaces tab, check Reload Painters
When Opening Workspace, and click OK.