Design

The Design tab of the Rich Page Editor displays the current WYSIWYG view of the transformation as you make changes to it.

When viewing your JSP file on the Design tab, JSP symbols appear in the top left of the file. To hide these symbols, go to Window > Preferences and find the Web preference. Go to Web > Page Design > Appearance > Editing Symbols and clear the JSP check box.

Note: For considerations when using GB18030 national language characters, see Using code page 1388 (GB18030).

While on the Design tab, you can insert or edit items on the transformation using either the ZIETrans Tools menu on the ZIETrans Toolkit menu bar or the Palette.

The ZIETrans Tools menu contains the following items, each of which launches a transformation wizard. For information about each wizard see Transformation wizards.

Insert Host Component
Edit Host Component
Insert Default Rendering
Edit Default Rendering
Insert Tabbed Folder
Insert Macro Key
Insert Global Variable
Insert Operator Information Area
Insert Host Keypad
- Default Keypad
- Custom Keypad
- Individual Key
Insert Application Keypad
- Default Keypad
- Custom Keypad
- Individual Key
Insert All Host Components
Insert Stored Screen
Insert Integration Object Properties
- Input
- Output
Insert Forward to ZIETrans Application

The last two menu items (Insert Integration Object Properties, and Insert Forward to ZIETrans Application) are described in Using Integration Objects.

The ZIETrans Components drawer in the Palette contains the following components:

Command line
Field
Function key
Input field
Input field with hints
Item selection
Selection list
Subfile
Table
Table (field)
Table (visual)
Text
URL

Note: If you edit a transformation and attempt to insert a ZIETrans component between two consecutive text characters, sometimes the tag is not inserted directly at the cursor location.

If you want to add images to your project, it is recommended that you import them into the Web Content/Common/Images directory of your project. To import images, click File > Import > General > File System to open the Import wizard. Select the location of the image source files you want to import in the From directory field. Select the project_name/Web Content/Common/Images directory as the Into folder. When your image source files are imported, right-click the on the Images folder, and select Show Thumbnails on the Thumbnail tab in the lower right window to see the images. You can use the drag-and-drop method to copy images into the Design tab view of your transformation.