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.