Notice: This Wiki is now read only and edits are no longer possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.
Vex/UserGuide
Contents
Vex User Guide
Overview
What is Vex?
Vex is a Visual Editor for XML that hides the raw XML tags from the user, providing instead a word processor like interface. Vex uses standard DTD files to define document types and CSS stylesheets to define document layout. Vex contains definitions for DocBook and DITA. To edit other XML formats only a DTD and a CSS are needed.
Who Uses Vex?
Create a new Document
- DITA
- DocBook
- Other XML Formats
Editing
Vex provides several commands to edit a XML document.
Copy and Paste
Undo/Redo
Add Element
To insert a new element at the current cursor position or - in the case if something is selected - to surround the selected text or fragment with a new element:
- Choose Document | Add | Element... (or hit Ctrl+Space)
- In the content assist which pops up choose the element to add by one of the following possibilities:
- Use Up and Down keys to select element and hit Return
- Click on the element to add
- To filter the list of elements type the name or a part of the name and hit Return to add the topmost element
Tip: To place the cursor at the proper position (e.g. a new chapter between two existing chapters in DocBook) see the path which is shown in the status bar.
Duplicate Selection
This command duplicates the currently selected elements and inserts them at the beginning of the current selection. If there is nothing selected, 'Duplicate Selection' duplicates the element that surrounds the current cursor position.
The document's root element can, of course, not be duplicated.
Convert Element
This command allows you to change the surrounding element of the current selection. A popup dialog shows a list of all elements that could replace the element. An element A can be replaced by another element B, if B can contain all the content of A and B is allowed at A's position in the document structure. If you select one of the list items, the popup dialog is closed and the element, which surrounds the current selection is replaced by the selected element.
Remove Tag
This command removes the element that surrounds the current selection:
<emph>The element's content<emph/>
will result in
The element's content
The main purpose of this command is to remove inline elements from text. If you use 'Remove Tag' to remove structural elements (e.g. <para> or <section>), the content of the element might also be removed. The current implementation does not handle this case properly. This might change in the future.
Find/Replace
The option Scope is inoperable.
Vex Plug-in Project: Configure your own XML format
A Vex Plug-in Project contains information about a custom document type accompanied with (at least one) style definition. This is one way to make a custom document type usable in Vex.
The Vex Plug-in consist of a file named vex-plugin.xml, which contains the configuration, plus all files needed for the document type definition (DTD) and style (CSS).
The following steps describe how the creation of such a Vex Plug-in Project works currently:
- Choose File | New | Project...
- Choose XML Authoring | Vex Plug-in Project
- Add the DTD and CSS file into the project
- Open the properties dialog for the main *.dtd file
- Choose Vex Document Type
- Enter all information about the document type and select the allowed root elements
- Open the properties dialog for each *.css file
- Choose Vex Style
- Give the style a name and select all document types for which this style should be available
The style can be selected in the Document menu or in the context menu of the Vex editor.
The file vex-plugin.xml can also be edited directly.
Vex Plug-in: Deploy your XML Format Configuration
CSS
Rules
Pattern | Meaning | See W3C |
---|---|---|
* | Matches any element | Universal selector |
E | Matches any E element (i.e., an element of type E) | Type selectors |
E F | Matches any F element that is a descendant of an E element | Descendant selectors |
E > F | Matches any F element that is a child of an element E | Child selectors |
E + F | Matches any F element immediately preceded by a sibling element E (this rule is applied when saving instead of when editing the document) | Adjacent selectors |
Layout
- display
- block
- inline (default)
- list-item (see list-style-type)
- table
- table-row
- table-row-group
- table-header-group
- table-footer-group
- table-column
- table-column-group
- table-cell
- Not supported values: none, marker, run-in, compact, inline-table, table-caption
- text-align
- margin
margin-top
margin-bottom
margin-left
margin-right
Outer space around element to display. Please note, for inline or list-item elements margin-left and margin-right are ignored.
- padding
padding-top
padding-bottom
padding-left
padding-right
Inner space around element to display. Please note, for inline or list-item elements padding-left and padding-right are ignored.
- border-style
border-top-style
border-bottom-style
border-left-style
border-right-style- none
- hidden
- dotted
- dashed
- solid
- Not supported values: double, groove, ridge, inset, outset
- border-width
border-top-width
border-bottom-width
border-left-width
border-right-width
Numeric value (e.g. 3px or:- thin
- medium
- thick
- border-color
border-top-color
border-bottom-color
border-left-color
border-right-color
- border
border-top
border-bottom
border-left
border-right
- list-style-type
- decimal
- decimal-leading-zero
- lower-roman
- upper-roman
- lower-alpha
- upper-alpha
- disc
- circle
- square
- none
- Not supported values: lower-greek, hebrew, cjk-ideographic, hiragana-iroha, katakana-iroha
- ...
- Not (yet) supported:
visibility, position, top, left, bottom, right, width, min-width, max-width, height, min-height, max-height, overflow, direction, float, clear, clip, z-index
Font
- font-family
Example: font-family: Arial, sans-serif, message-box;
- font-style
- italic
- oblique
- normal
- font-size
Numeric value plus measuring unit, e.g. 1.2em, 14px or 12pt or one of:- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller
- larger
- font-weight
Bold or not bold:- bold
- bolder (same as bold)
- lighter (not supported)
- normal
- Integer value from 100 to 900: greater or equal to 551 is bold otherwise normal
- font
Combines styles above: values separted by blanks in following given order (empty values can be skipped): font-style, font-weight, font-size, and font-family. Example: font: italic bold 1.5em Verdana;
- text-decoration
Not supported: blink, but:- underline (may or may not be correct; as alternative you can use: border-bottom: 1px solid;)
- overline
- line-through
- none
- color
Examples: #FFCC99, red or rgb(255,96,0).
- Not (yet) supported:
font-variant, font-stretch, word-spacing, letter-spacing, text-transform
Pseudo Elements
- my-element:before
Example: hint:before { content: "Please note: "; color: red; }
- my-element:after
Example: title:after { content: ":" }