An overview of Ajax Page Editor views is given below.
Figure 8.2 Ajax Page Editor views
Design view
Enables WYSIWYG editing of a QuickForm constructed using UI parts, and has the following features:
Absolute coordinates can be used.
The mouse is used to select parts from the palette and to position them.
The mouse can be used to move and resize selected parts.
The clipboard can be used to perform editing operations on UI parts and HTML tags.
Editing results are coupled with the source view, properties view and the outline view.
Source view
Used to edit the source code of a QuickForm constructed using UI parts, and has the following feature:
Changes are reflected in the design view, properties view, and outline view
Palette view
Displays HTML tags and UI parts in the palette, and is used to position them in the design view.
Outline view
Displays the tag structure of the window being edited.
Properties view
Displays the properties of UI parts selected in the design view, tags and UI parts that have carets in the source view, and tags and UI parts selected in the outline view.
It contains the tabs below:
Attributes: Displays the attributes of the selected tag or part.
Contents: Displays the contents of the selected tag or part.
Preview
Contains the tabs below.
Design: Displays the design and source views.
Preview: Displays a preview.
The preview enables use of Internet Explorer IE components to check runtime window displays and event processes run by browsers.
Editable files
QuickForm files that meet the following conditions can be edited using the Ajax Page Editor:
Compatible with XHTML 1.0
Contains DOCTYPE declaration below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Uses Ajax framework operation definition (rcf_config.js).
Uses Ajax framework initialization processing (rcf.js).
The paths for the above files (rcf_config.js and rcf.js) must be defined as follows in QuickForms under the Workflow Application project web folder:
<script type="text/javascript" src="../rcf_config.js"></script> <script type="text/javascript" src="../acf/file/rcf/rcf.js"></script>
Similarly, the paths for the files above (rcf_config.js and rcf.js) must be defined as follows in QuickForms under web folder subfolders (web/sub1):
<script type="text/javascript" src="../../rcf_config.js"></script> <script type="text/javascript" src="../../acf/file/rcf/rcf.js"></script>
Note
The paths above are updated automatically when a QuickForm is opened. However, if Save As saved a QuickForm in another folder during editing, the paths above are not updated automatically. In that case, use the source view to update the paths.
Note
In principle, edit only the <body> tag when editing a QuickForm - do not change other tags unless there is a special need.
Ajax Page Editor settings
To set separate Ajax Page Editor operation options for each file being edited, use the Ajax Page Editor Settings page. To display it, execute Properties from the jsp file popup menu in the navigator view, then in the Properties window select Ajax Page Editor Setting.
The Ajax Page Editor Settings page is shown below.
The table below describes the Ajax Page Editor settings page items.
Item | Description |
|---|---|
To edit your file in Ajax Page Editor, specified CSS files and JavaScript files are inserted into your file | Do not select this item. |
CSS file to be inserted into your file | Cannot be used. |
JavaScript file to be inserted into your file | Cannot be used. |
Editable Size | For the selected file, specify in the width and height (in pixels) that can be edited using the Ajax Page Editor. UI parts within the specified size range can be edited from the Ajax Page Editor design view. |
Restore Defaults | Restores the default settings, which is that nothing is specified, so all specified files are deleted. |
Apply | Applies the specified settings. |
