Opening the HTML editor and setting options
The following procedures detail using the HTML editor to prepare
HTML files. HTML tags and their attributes can be dragged and dropped
from the Language tab of the System Tree onto a page in the HTML
editor. The tags are organized alphabetically or by category.
Opening the HTML editor
You can open the HTML editor with a new file that you create
with a Web page wizard, or you can open the editor with an existing
file, regardless of whether it is in your current Web target.
Creating a new document
PowerBuilder has several wizards that
help you create new Web pages. The main Web page wizards are listed
below. Each of the wizards can create an HTM file or a JSP file,
depending on the type of target to which you are adding the page.
| Web page wizard | Use this to |
|---|---|
| Quick Web/JSP Page | Create an HTML page without any content (HEAD and BODY elements are visible in Source view as soon as you begin to add content to the page). |
| Web/JSP Page | Create an HTML page with a filename and optional content, such as a title, an associated style sheet, a background image or color selection, a header based on the title, and a footer with the page creation date. |
| 4GL Web/JSP Page | Create a 4GL Web page with error and trace options, parameter definitions, and EAServer component selections in addition to the standard content options of the Web Page wizard. |
| Web/JSP DataWindow Page | Creates an HTML page with a Web DataWindow. You define the DataWindow source and connection information in wizard screens. |
To start the editor with a new document:
-
Select File>New.
Click
the Web tab in the New dialog box. - Double-click a Web page wizard icon.
- Follow the instructions in the wizard.
-
When the HTML editor opens, begin editing in Page
view.or
Click the Source tab to edit in Source view.
Starting the editor with an existing document
PowerBuilder can automatically open text, style sheets, and
scripts. The file’s treatment is based on its extension:
- Text files with TXT extensions are opened for editing
in the PowerBuilder File editor. - Text files with ASP, HTM, HTML, JSP, STM, or SSC
extensions are opened for editing in the HTML editor. - Style sheet files are opened in the standalone Style
Sheet editor. - Script files are opened in the standalone Script
editor. - Image files are opened in a browsing window for
viewing only.
Dragging files onto an open page in the HTML editor Text files, style sheets, or script files can also be referenced
as hyperlinked documents. If you drag and drop a file from the System
Tree (or from an external file management system) onto an open page
in the HTML editor, the dragged file is treated as a hyperlink reference,
and the Hyperlink Properties dialog box displays.
To open an existing Web target file:
-
Double-click the file in the Workspace
tab of the System Tree.
To open a file that is not part of a target:
-
Select File>Open from the menu
bar, select a file type in the Files Of Type text box, and browse
to find the file in the Open dialog box.
Saving your work and closing the editor
To save changes to a file:
-
Select File>Save.
For a new file, File>Save displays the Save As dialog
box so you can name the file.
To create another copy of the file:
- Select File>Save As.
If you try to close the editor without saving, the editor
asks if you want to save your changes.
Giving your page a title
Use the Page Properties dialog box to add a title and to set
inline styles and parameters for your HTML or JSP page.
4GL page properties If you select the Enable 4GL Web Server Side Event Model check
box on the Page tab of the Page Properties dialog box, you enable
additional dialog box tabs. These tabs allow you to define server-scriptable
properties for your page. For information on 4GL Web pages, see Chapter 9, “Developing 4GL Web Pages”.
To give your page a title:
-
Right-click anywhere in a document in Page
view and choose Page Properties from the pop-up menu. -
Type a title for your page in the Title text box
on the Page tab of the Page Properties dialog box.
Formatting HTML source display
Source view allows you to format your HTML source code for
readability. This feature enables you to specify your own HTML source
formatting rules. It overrides the default formatting that the editor
applies when you edit a file in Page view or use a tool or menu
item to generate code in Source view.
Why use HTML source formatting
This feature is important if you use Page view to develop
or modify your HTML files. Page view edits your HTML source code
behind the scenes, then formats that code according to its own rules
for indenting, new lines, and so on. Although this default formatting
is generally adequate, it might differ from the coding style you
want.
Source formatting options enable you to override the default
formatting generated from Page view with your own code formatting
rules.
Invoking HTML source formatting
If you select the Format Source option (on the Editors tab
of the Options Properties dialog box), PowerBuilder automatically
performs HTML source formatting in these cases:
- When
you switch to Source view from other HTML editor views after making
changes - When you perform operations in Source view that
generate code
Whether or not you check the Format Source option, you can
invoke HTML source formatting manually, at any time, by selecting
the Format Source command on the Source view pop-up menu.
Preserving your own source formatting
If you prefer to
format your HTML source code manually and keep it in that format,
use Source view instead of Page view for all your editing, and do
not select the Format Source command from the Source view pop-up
menu.
To change the Source view display formatting:
-
Select Design>Options.
The Options Properties dialog box opens to the Editors page.
-
In the Windows list, highlight Source View.
Select the Format Source check box.
Type or select other options in the Editors panel.
-
Select an HTML tag or Script tag from the Tags
list.Select a radio button for the type of formatting you
want for that tag.
-
Repeat the previous step for as many types of
tags as you want to format and click Apply. -
Select the Colors/Fonts tab.
In the Window list, highlight Source View.
-
Select a display element in the Types list.
Modify the display element colors and fonts as desired.
-
Repeat the previous step for as many display element
types as you want to format and click OK.