Virtual pages

So far, the repository is like a WIKI with some differences: It has a WYSIWYG editor for the HTML pages and it has a tree rather than a flat structure.

Most important, however, are the virtual pages. As we already know, the repository is structured as a tree of nodes, each having a nodeType. One important node type is the nodes:htmlDiv, which represents an HTML page.

However, there are more node types and the administrator of the repository may create arbitrary new node types at will. Of course, we have the default view to show these node types, which will display the properties and child nodes of a node of this type in two tables.

But this will only be used rarely. Usually, a node type will be displayed in a page specific for the type, this is called a virtual page. For that, the administrator creates a template, which will be used to display nodes of the node type.

Template and node gives a virtual page

Creating a template is similar to creating an HTML page, at least in the first step. The user creates an HTML page that looks similar to the way the node type should be displayed, with sample content.

In a second step, the presentation elements like headings, paragraphs, lists or tables will be mapped to properties or child nodes of the node type. If the virtual page shall include nodes, which are not child nodes but are connected to the node via references, a query has to be specified in addition, that will describe the kind of reference used, i.e. the reference property and whether the reference is starting from the current node or pointing to it. Note, that the details of template creation will be described in another chapter.

Editing the virtual page

Now, after we have created a template, a node type specific page will be displayed when we navigate to a node of the type:

From the template and the node contents, the application creates an HTML page and displayes it. This presentation can be edited in a virtual page editor, please compare as well the use case description.

Navigation

The most striking difference to the HTML editor is, that not all parts can be edited but only the parts, that are associated to node or child/referenced node properties. To navigate from one editable property to the other you have two options:

• You can tab forward or backward using the TAB key or toolbar arrow buttons .
• You can use the pointer and click in some editable part of the virtual page. If the part is not editable, the pointer will be placed into the next editable part.

Editing a property

An editable element that is selected, will appear in either of two highlight modes:

• A lowered border shows elements, that can be edited directly, for example, if they contain simple text or a component page.
• A raised border that appears like a button will start an editing dialog, when RETURN is pressed. There are predefined
  • Dialogs to enter enumerated values, if the particular property does only permit certain values.
  • A reference chooser dialog to select a reference from a tree view of the repository and more ...

Understanding the explorer panel

By default, the explorer panel, i.e. the panel to the left of the virtual page editor, will be hidden. If you make it visible, it will show the HTML presentation structure, but enriched with information about the mapping to the node properties:

The different icons are used to represent the mapping:

• A red element icon shows the HTML element, that is associated to the current node.
• A blue/gold element shows an element, that is mapped to a property or node. After the element name the name of the property or node is added in gray. Properties are marked with an @ sign.
• An element that is only gold represents a property or node, that may be inserted at the position, but is not present yet. In this case, only the node or property name will be displayed.