6.5.1 Internal XML Representation
The following XML fragment defines a schema for the class representation introduced in the previous section.
<pattern id="class"> <class id="$id"> <name>$cname</name> <parent><ref>$parent</ref></parent> <attributes> <repeat> <pref id="attribute"/> </repeat> </attributes> <operations> <repeat> <pref id="method"/> </repeat> </operations> </class> </pattern>
The class pattern requires a class to have an id, a name, a parent reference, attributes and methods. The id and name are variables in the pattern. The two repeat elements ex- press that there may be an arbitrary number of attributes and methods. The actual rep- resentation of attributes and methods is defined by an attribute pattern that is referenced using the pref (pattern reference) element. The referenced attribute pattern is the fol- lowing: <pattern id="attribute"> <attribute> <name>$aname</name> <type>$atype</type> </attribute> </pattern>
6.5.2 Display Views
The graphical representation of classes shown on the left of Figure 6.6 is based on an HTML representation of the class that defines a class to be rendered as a table. The follow- ing pattern defines this HTML representation. Together with the pattern for the abstract syntax of a class defined in the previous section, this concrete syntax pattern defines a bidirectional view transformation.
<pattern id="classHTML"> <TABLE cellpadding="2"> <THEAD> <TR><TH colspan="2"> <SPAN> <sequence>
$cname <text>(</text> $id <text>):</text> $parent </sequence> </SPAN></TH></TR> </THEAD> <TBODY> <repeat><pref id="attributeHTML"/></repeat> </TBODY> <TBODY>
<repeat ><pref id="methodHTML"/></repeat> </TBODY>
</TABLE> </pattern>
The table header is a sequence of class name, opening parenthesis, class id, closing parenthesis, a colon and the name of the parent class. The rest of the table is defined by two body elements that list attributes and methods. Attributes and methods are rows in the table which are defined by the referenced attributeHTML and methodHTML patterns respectively.
6.5.3 Edit Views
logic may be added as a separate view definition. Switching between the regular view and the editing view is defined in a fine grained way manner on the element level. For example, in Figure 6.6, an attribute is edited by replacing the plain text in the table fields with input fields. This is done by clicking on the attribute. The display view is defined by the following pattern.
<pattern id="attributeHTML"> <TR onclick="!JS: transform(this,’attributeHTML’, ’attributeHTMLEdit’)"> <TD>$aname</TD> <TD>:</TD> <TD>$atype</TD> </TR> </pattern>
The table cells for name and type solely consist of the corresponding variable names. A code pattern inserts the transformation logic as a JavaScript call to the transform func- tion with the source and target pattern being the display and edit views for attributes. The edit view is defined by the following pattern:
<pattern id="attributeHTMLEdit"> <TR>
<TD><input type="text" value="$aname"/></TD> <TD>:</TD>
<TD><input type="text" value="$atype"/></TD> <TD>
<button type="text" onclick=
"!JS: transform(this.parentNode.parentNode, attributeHTMLEdit’,’attributeHTML’)"> ok </button> </TD> <TD>
<button type="text" onclick=
"!JS: removeElem(this.parentNode.parentNode)"> x
</button> </TD>
</TR> </pattern>
A table row in edit mode consists of two text input fields and two buttons ok for confirming the editing and x for deleting the attribute. The class attribute is edited via the input fields. The button ok maps changes back to the display view. This is defined by the JavaScript code fragment that calls transform on the attribute, with the edit view as the source and the display view as the target. If the transformation would be applied to the DOM tree representation directly, changes would not be visible. This is because the value attribute of input elements represents only the initial value and not the current state of the user interface. To make the current values accessible to pattern matching, XMF traverses the DOM tree before applying a view transformation and replaces the value of the value attribute with the current value of the user interface component.