INRIA Rhône-Alpes, Grenoble, France
ABSTRACT. Amaya is an authoring tool for editing compound XML documents. We first briefly explain how several XML markup languages can be mixed in a document created by Amaya. Then we discuss the various editing modes available for handling this compound structure. In particular, the concept of a view is introduced as well as its connection with editing. This is followed by a short discussion of the role of CSS in complex structures, and a conclusion summarizes the advantages offered by an integrated environment.
Amaya, the Web authoring tool developed jointly by W3C and INRIA (WAM team), was conceived from day one for editing compound structured documents. One of its major features is indeed its ability to manipulate simultaneously different XML languages freely mixed in a single document. More precisely, Amaya can handle documents that contain pieces of XHTML, MathML, SVG, SMIL animation (we call them native XML languages), as well as generic XML. The current version supports the full XHTML (1.0 and 1.1) specification, the presentation part of MathML, and a significant subset of SVG, including SMIL animation. Other languages are considered generic XML, and Amaya provides a lower level of support for them; they are considered as XML tree structures, and if they contain (or link to) some CSS style, they are formatted accordingly. CSS is actually supported for all XML languages.
Compound documents are handled as nested structures. At the top level, a document may use any of the supported markup languages (XHTML, SVG, MathML, generic XML). In this first level language, it can embed elements belonging to any of the other languages. These embedded elements may themselves belong to different languages and they can in turn embed elements in other languages. This nesting may be repeated on multiple levels. This includes a piece of document in language A, embedded in another piece in language B, itself embedded in language A again. Some examples of deep and recursive nesting are given below.
Embedding may be simply based on the namespace mechanism, without any special element wrapping the embedded parts, like in the following (simplified) example:
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<p>A paragraph followed by some SVG graphics with math.</p>
<svg xmlns="http://www.w3.org/2000/svg">
<rect width="80" height="60"/>
<text x="32" y="34">
<math xmlns="http://www.w3.org/1998/Math/MathML" style="color: black">
<sqrt>
<mn>2</mn>
</sqrt>
</math>
</text>
<circle cx="40" cy="30" r="20"/>
</svg>
...
To ensure interoperability, Amaya may also add some wrapping elements such
as foreignObject in SVG, but these elements do not play any
significant role when it comes to formatting or editing.
A compound XML document is represented as a single DOM tree in the editor. The tree follows the markup. It integrates seamlessly elements from different namespaces. It constitutes the data structure on which internal processing is based. In particular, both presentation and editing functions work on this single tree.
Mixing several languages in a single document requires several editing modes, especially when the semantics of the languages are as different as XHTML, SVG and MathML. Users expect the authoring tool to allow them to manipulate XHTML as text, SVG as graphics and MathML as math. Thus several interaction modes should be provided, but these modes should not be totally disconnected as they are used simultaneously in a single environment for handling a single document. In addition the data involved share a lot of features, being all based on XML and using the same style language, CSS.
These observations lead to a classification of editing modes in four levels:
Amaya provides all these editing modes at the same time. For that purpose, it allows the document to be displayed simultaneously under different forms, called views, in several windows. Each view shows the document from a different perspective and is adapted to a different kind of manipulation. The main view is the Formatted view, where the document is displayed according to its semantics (as far as it is known by the tool) and its CSS style sheets.
In the first editing mode, the user manipulates the source code of the document as a simple text file. S/he has to know the XML syntax, the structural constraints of the various XML languages, as well as their semantics. In addition to text editing, the editor provides syntax and structure checking on user's request. This mode is used by expert users and when other modes are not suited to the task at hand. Editing is performed in the Source view. In this view the XML syntax is highlighted for easier editing, and the user can make any change freely. At any time, a special command may be called that parses the edited source file, rebuilds the DOM tree, reformats the document and redisplays it in all open views. If there is an error, the parser stops immediately, pointing at the error in the Source view.
In free structure editing mode, the user manipulates the document tree without any constraint. The XML syntax is handled by the tool, but the user still has to know the structural constraints and the semantics of the markup language. Amaya does not need or use a DTD or a schema in this mode. Formatting is performed by the tool based on CSS style sheets, and helps the user to visually check the document structure through formatting semantics. This kind of editing is mainly used for generic XML, but has also proven useful for some structural manipulations in native XML languages. The view of choice for this mode is the Structure view, which displays a DOM tree. Every change done in this view is immediately reflected in the other views, and especially in the Formatted view.
In the structure-driven editing mode the user manipulates the document tree under the control of the tool. Amaya handles both the syntax and the structure, but the user has to know the semantics of the languages. In this mode all the supported languages can be manipulated in a consistent way. The editor follows the DTD of each language. It creates and proposes only valid elements and attributes that are allowed in a given context. This mode can be used for any language, like the previous two modes, except for generic XML: Amaya offers this mode only for the native XML languages, for which it knows the DTD.
The last mode allows the user to manipulate structured elements according to their semantics with the help of the tool. The Formatted view is well suited for this kind of interaction. In this view, graphics is just manipulated as graphics, math as math. Full support is provided for the native XML languages. The semantics of these languages are implemented in the editor, both in its formatting part and in its structure manipulation part. This allows Amaya to offer specific functions for editing efficiently XHTML tables, structured SVG graphics, complex mathematical expressions, etc. according to their own semantics. This mode also enables sophisticated formatting of these elements in the main view, which gives the user the feeling that s/he is manipulating the document directly (direct manipulation, if not WYSIWYG), making the editor very easy to use, and relieving the user from the details of the structure and the markup.
Semantics-driven editing requires specific code for implementing
high-level editing operations. Therefore, it can be provided only for a few
predefined languages, but some behaviours may be shared by several languages,
or several parts of the same language. This is achieved in Amaya by
associating some predefined editing behaviours with element names. Examples
of shared behaviours are the commands used for editing HTML tables and MathML
matrices; the commands for setting hypertext links in all languages by simply
pointing and clicking; the functions for reorganizing a piece of the
document; the action of the Return key for various groups of elements
(splitting the element in many cases, creating a new line in the
pre and textarea elements of XHTML, or creating a
new paragraph after some other elements).
Multiple views are extremely useful in helping authors to manipulate different languages and structures in the same document. Each view may show different aspects of the document depending of the language. Some views are common to all XML languages (source, structure, formatted), some others are more specific, such as the Timeline view that summarizes all the SMIL animation elements interspersed in the whole document, or the Links view that collects all the hypertext links used by a document in any native XML language.
CSS plays an important role in editing compound documents. With style sheets that are specifically designed for the editing task, many aspects of the document under work can be shown to the user in a very natural way, thus improving efficiency. Using a single style language edited in the same way for all pieces of a compound document is also beneficial.
A single tree representing the whole document brings all the advantages of the inheritance and cascading mechanisms of CSS. Regarding formatting and style, there is no discontinuity when crossing the border between markup languages. Objects from different languages can be precisely arranged together, such as mathematical equations mixed with text in a paragraph. Better homogeneity can also be reached, by transmitting freely across the whole structure such properties as font size, font family or color.
CSS is not only supported for editing and formatting compound documents. Amaya also provides functionality for creating, modifying and debugging style sheets. This functionality is fully integrated with the other editing features, thus allowing users to edit document content and structure at the same time as style, if they want to. This CSS editing functionality is not complete yet. In particular, it does not provide a point-and-click interface for all CSS properties, although all properties can be edited in the source code of a style sheet. But, in the current version, it already includes a few interesting features.
The native XML languages implemented in Amaya offer a number of attributes
that are equivalent to CSS properties. We consider good practice to use CSS
properties instead of these attributes whenever it is possible. Therefore,
Amaya offers a single command to set the color of characters, for instance.
Instead of using the color attribute of XHTML or MathML, this
command generates a style property, thus enforcing the good practice.
Another interesting aspect is debugging. The CSS parser reports errors with clickable messages that point to the relevant part in the source code, to help the user to fix syntactic errors. But errors may also come from a too complex combination of rules from several style sheets that finally set some values that are not expected. In addition, due to cascading and inheritance, style sheets for several markup languages may enter into play. In that case the difficulty is to locate the rule that was really selected by the cascading process. For that purpose, the user may select the element that looks strange and ask Amaya about the CSS rule that has set a given property. This has proven very helpful for debugging complex sets of style sheets using sophisticated selectors.
Amaya constitutes a consistent environment for editing compound XML documents with style. This approach has a number of advantages over a set of specialized tools (one for each language), connected together through a plugin mechanism:
[Submitted to The W3C Workshop on Web Applications and Compound Documents]
$Date: 2004/05/26 04:16:14 $
