Rich Page Editor

Use Rich Page Editor to easily edit HTML files, add Dojo widgets to HTML pages, and create and edit web pages for mobile devices. Rich Page Editor is a multi-tabbed editor that provides multiple views to show different representations of your page.

Views

You can use the Source, Design, and Split views in Rich Page Editor to view and work with your files or pages. Each view in Rich Page Editor works with several other views and tools that are included in the web perspective, including the following interface elements:
  • Mobile Navigation, Outline, and Properties views
  • Toolbar buttons
  • Menu bar options
  • Pop-up (right-click) menus
  • Palette components
Note: Since IBM® Worklight® V6.0, the jQuery Mobile widget of MobileFirst Studio might be not visible in the palette of the Rich Page Editor if you are using jQuery V1.3.2. To resolve this issue, use jQuery Mobile V1.3.1 instead of jQuery Mobile V1.3.2.
Table 1. Rich Page Editor views
Editor view Description
Source The Source view helps you to view and work directly with the source code of a file. The Mobile Navigation, Palette, Outline, Page Data, and Properties views have features that supplement the Source view.
Split The Split view combines the Source and Design views in a split screen view. Changes that you make in one part of the split screen are automatically updated in the other part. You can split the view horizontally or vertically.
Split horizontal and vertical icons.
Design
The Design view is a WYSIWYG environment. This view helps you to create and work with a file while viewing how your web page and dynamic content might look on a mobile device. You can use this view to visually edit files. For example, the Design view includes features that you can use to complete the following tasks:
  • Drag items from the Palette and Enterprise Explorer views.
  • Rotate the screen orientation when you use a mobile device profile to view your mobile web page in either portrait or landscape mode.
  • Scale the mobile device to fit the size of the current Design view. Using this feature, you can see the entire visual canvas without the need to scroll.
  • View how your page is displayed on different devices by selecting a device from the device list. The selected device specifies the size of the mobile device that you want to view and affects the size of the Design view area.
  • View how your mobile web page is displayed in different styles. For example, Android, iPhone, or BlackBerry. By choosing a particular skin, you can switch to another device-specific style to view the layout and appearance of your page as it would appear on this specific device.
    Note: The Skin list is available only for MobileFirst application pages.

Design Mode editing

You can use the Design Mode editing features of Rich Page Editor to add and edit widgets in the Design view. To enable the Design Mode editing features, click the Design Mode icon.
Design Mode icon.

The following screen capture shows what a table looks like in the Design view of Rich Page Editor when Design Mode is enabled.

Table with Design Mode enabled.

The following screen capture shows what the same table looks like in the Design view of Rich Page Editor when Design Mode is not enabled.

Table without Design Mode enabled.

The Design Mode editing features guide the placement of code when you drop a widget on a container widget. Visual cues highlight the possible drop locations and pop-up cues indicate the editing function that is available for the selected widget. Design Mode also adds dashed borders to empty table cells. For example, dragging a tag from the Palette to a table provides a visual cue for placement:

Placement targeting.

Selecting a cell in a table opens a pop-up cue that you can use to add a column or row:

Pop-up cues.

Icon that indicates the type of topic Concept topic
Timestamp icon Last updated: July 17, 2017 21:58

File name: crpewl.html