Basic editing in Page and Source views
There are several methods
for adding and changing content on your page in Page and Source
views of the HTML editor:
- Using options on
the PowerBuilder menu - Clicking toolbar buttons
- Using keystrokes assigned to format settings
- Dragging elements from the System Tree into the
editor - Dragging HTML content saved in the PowerBuilder Clip
Window into the editor - Adding styles from a style sheet
Validating HTML source code If you use toolbar or menu items to insert content or format
settings in Page view, the HTML editor generates valid HTML code
in Source view. If you use the same toolbar or menu items in Source
view, you must make sure your choice of insertion point does not
corrupt other HTML tags or otherwise invalidate the HTML structure
of your document.
Using the PowerBuilder menu
PowerBuilder menu items can be used to add or change content
and formatting in Page or Source view.
| Menu | Type of content | Selection in Page or Source view |
|---|---|---|
| Format | Paragraph formatting | You use the Format menu to choose a paragraph style for the current paragraph. When you choose a style, the editor puts HTML tags like P, H1, PRE, or ADDRESS around the paragraph. The tags are visible in Source view. |
| Character formatting | The Character menu item lets you change the font and apply bold and italic to selected text. |
|
| Table | HTML tables | You can launch the table wizard to add a table to your page in Page or Source view. You can also modify table settings and formatting for the table (or table items) you select in Page view. |
| Insert | Non-text content | The Insert menu lets you add line breaks, rules, images, and components such as Java applets, ActiveX controls, and data for plug-ins. You can use DataWindow design-time controls (DTC) to generate and edit database forms, application server access, and more. |
| Position | Content positioning | Lets you turn on absolute positioning for certain kinds of HTML elements. Absolute positioning lets you place elements anywhere on the two-dimensional space of your page just by dragging them. |
| Edit | Document, control, or paragraph information | Selecting the Properties menu item lets you view and set default information for the document, selected control, or selected paragraph. |
| Style sheet links | Selecting the Global Style Sheet menu item lets you select an external link to a style sheet and allows you to include embedded styles in the Head section of the page. |
Do not format empty paragraphs When you use the Format>Paragraph dialog box in Page
view, do not format empty paragraphs. Type some text and then apply
the format. Otherwise, the format you choose will be discarded.
Formatting tips
Paragraph and character formatting
Here are tips for some
common formatting activities.
| To | Do this |
|---|---|
| Change heading styles | Select the text or put the insertion point somewhere in the heading and use Format>Paragraph and choose a heading level |
| Create lists from paragraphs | Select the paragraphs or some portion of the paragraphs and use Format>Paragraph and choose a list type |
| Change font or font characteristics of selected text |
Select the text and use Format>Character and choose the preferred font type, style, or size |
Paragraph style
The paragraph styles you can select from the Paragraph dialog
box are not identical to the HTML tags that are generated in the
source code. For correspondences between paragraph styles and HTML
tags, see “Headings and paragraphs”
Clip window
If you regularly use a particular document template, you can
store the HTML or JSP file in the PowerBuilder Clip Window (up to
2048 characters per clip entry) for easy reuse. Use Source view
when your template includes a Head section or controls. In Page
view, only text elements in the Body section of the page get copied
to or from the Clip Window.
Redundant formatting
Both the Format menu and System Tree tend to add elements
without removing elements that are redundant. By using keystrokes
and the toolbar, you can do a better job of changing existing formatting
without adding redundant tags. Avoid a buildup of elements that
cancel each other out by checking Source view and removing redundant
tags.
Using the System Tree
The
Language page of the System Tree lists all the HTML elements supported by
the common browsers. Use the System Tree to insert HTML elements
and their attributes into your document.
Using drag and drop
Most HTML elements have start and end tags. You can insert
HTML tags in Page or Source view using drag-and-drop. You can set
attributes of elements via property sheets. When you select text
and then drag an element from the System Tree, the editor puts the
element’s start tag before the selection and its end tag
after the selection.
HTML elements dragged from the System Tree do not have any
context around them. You must make sure elements and their attributes
are properly nested. Because of this, the System Tree is more useful
when you work in Source view. In Page view, it is better to select
text before dragging or pasting elements from the System Tree onto
the text.
Do’s and don’ts for using the
System Tree with Page view
Some HTML elements require you to select text in a page in
the HTML editor before you can drag them from the System Tree to
the page. Other elements (like lists) are not suited to be inserted
by dragging, because the results will not be properly nested. Here
are some tips:
- Do
drag
to insert single-tag elements, like BR and HR. You can also use the
Insert menu (or the toolbar line icon for a horizontal line). - Do
drag to apply simple character
formatting to selected text. You can also use keystrokes or the
toolbar. - Do
drag to apply the FONT tag
to selected text. You can also use Format>Character. - Do
drag to change a paragraph
to a heading or a heading to another heading type. The whole paragraph
is affected regardless of selected text. - Do not
drag to create complex
nested elements, like lists. Use Format>Paragraph to convert
existing paragraphs to a list.
Selecting text before dragging from the System
Tree
When you drag onto selected text in either Page or Source
view, the text will be formatted according to the chosen element.
For some elements, such as FONT, if you drag to an insertion
point you will not see any effect, but an element is inserted anyway.
In Page view you cannot position the cursor between the start and
end tags, so what you type next is not affected by the element.
Other elements, such as the anchor <A> and <TABLE> elements,
display a properties dialog box. If you close the properties dialog
box without specifying properties, future changes to element attributes
must be made using Source view.
Inserting an element from the System Tree
To insert an element from the System Tree:
-
Select text in the editor if applicable,
or insert the cursor at the insertion point. -
Use drag-and-drop or copy and paste to move the
element from the Language tab of the System Tree to the editor where
you want it to appear.To surround the selected text with the element’s
start and end tag, you must place the element on top of the selected
text.If applicable, the properties dialog box for the new element
displays. - Fill in any properties as appropriate.
Inserting an attribute for an element from the System
Tree
You should use the System Tree to insert an attribute for
an element only when you are editing in Source view. Dragging an
attribute to the page in Page view only adds the text for the attribute–plus
an equals sign–to the open page in a displayable format.
(In this case it is not added as an attribute of an element.)
To insert an attribute for an element from the
System Tree
- Insert the element.
-
Drag the attribute from the Language tab of the
System Tree to its correct position within the element’s
brackets. - Enter a value for the attribute.
Setting attributes from a properties dialog box You can also set attribute values using the properties dialog
box for an element.
Properties for HTML elements
Each HTML element has
a properties dialog box for its attributes. The first tab, labeled
with the element name, displays settings for the common attributes. You
can define inline styles on the Inline Styles tab, or add other
attributes on the Advanced tab.
In many cases, when you insert a new instance of the element, PowerBuilder displays
the properties dialog box so that you can set attribute values.
You can display the properties dialog box anytime.
If you give names or IDs to HTML elements, the pop-up menu
that displays the available properties dialog boxes will use your
name instead of the generic HTML element.
Displaying element properties in Page view
Because
many tags cannot be displayed in Page view, you cannot always target a
particular element. The pop-up menu includes items for all the elements
in effect at the insertion point. For example, when you click on
a link, you can choose to view the properties dialog box for the <A> (link), <P> (paragraph), or <BODY> element.
To display the properties dialog box for an element
in Page view:
- Right-click the element’s text.
-
Select one of the property menu items on the pop-up
menu, such as Paragraph Properties or Body Properties.
Displaying element properties in Source view
To display the properties dialog box for an element
in Source view:
-
Right-click the element’s start
tag or end tag and select Properties from the pop-up menu.or
Click to set the insertion point inside the
element’s brackets and select Edit>Properties
from the menu bar.
Using the Inline Styles tab
If you want to override
styles defined in an external style sheet, or in an embedded style,
you can do so on the Inline Styles tab.
Browser-specific implementation of style hierarchy Some browsers may not permit the overriding of external styles
with inline styles, or may have different implementations of style
hierarchies. You should always test the appearance of styles and
style overrides with the browsers that will be used to view your
Web site.
To add or modify a style definition using the
Inline Styles tab:
-
In
Source view, right-click the element’s start tag or end
tag and select Properties from the pop-up menu.or
In Page view, select the viewable object and right-click
to access the Properties dialog box. - Select the Inline style type.
-
Select the Inline radio button and click the Edit
button. -
Specify style definitions for the selected tag
on the tabbed pages of the Inline Style dialog box. To modify the
font of the selected item:- Select the Font from the Available Font
window. - Use the arrow key to add the font to the Selected
Font window. Select the new font in the Selected Font window and
click OK.
- Select the Font from the Available Font
-
In the Style Attributes and Values source box,
view the styles selected.Click Apply or OK when finished defining styles.
For more information on styles, see Chapter 4, “Working with Style Sheets
and Framesets”.
Using the Advanced tab
If an attribute you
want to set does not correspond to a property on the main tab of
the element properties dialog box, you can set it on the Advanced
tab.
The attributes you enter are not verified as valid. Make sure
you check the HTML reference or the Language tab of the System Tree
for valid attributes.
To add an attribute on the Advanced tab:
-
From Source view right-click the element’s
start tag or end tag and select Properties from the pop-up menu.or
In Page view select the viewable object, and right-click
to access the Properties dialog box. -
Double-click to type an appropriate value in the
Attribute Name column and the Value column. -
Do not include quotes when you specify the value.
If the value requires quotes (for example, if it includes
spaces), they are inserted automatically.
To remove a setting:
-
Click anywhere on the line for the attribute
you want to delete. - Press the Delete key or the Delete button.
Undo and Redo
While you remain in a single view, you can use Edit>Undo
multiple times to undo each change you make. You can also use Edit>Redo
multiple times.
If you switch to another view, all the changes you made in
the first view become a single set of changes. When you use Undo
after switching views, all the changes made in the previous view
are undone at once.
Finding and changing text
To find or replace text in Page view or Source
view:
-
Select Edit>Find or Edit>Replace
on the menu bar.or
Right-click a page in the HTML editor and select Find
or Replace from the pop-up menu.Settings in the dialog box let you control the direction of
the search and whether upper- and lowercase letters must match the
search string. -
Specify a search string in the Find text box.
In either view, you search for the text as you see it displayed.
In Source view, you can search for HTML tags and property values.
If you need to change many element tags or property values,
switch to Source view. It is the most efficient way to make many
similar changes.
Special characters The editor does not support searching for special characters,
such as line breaks and tabs.
Using the Script editor
In Page view, the Script editor lets you associate scripts
with objects and events in the HTML document. You can also define
new scripts and functions that are independent of an object. The
editor handles the HTML syntax for scripts automatically. You can
save a script on the page itself or in an external file.
For more information, see Chapter 6, “Writing Scripts “.