Fanxe — the Fantastic XML Editor
Total Page:16
File Type:pdf, Size:1020Kb
FanXE — The Fantastic XML Editor Thomas C. Allard Banking Analysis Section Division of Monetary Affairs Board of Governors of the Federal Reserve System 20th Street & Constitution Avenue NW, Washington DC, 20551 ([email protected]) October 2005 Abstract FanXE uses the Document Object Model (DOM) to operate on all XML documents. All DOM operations 1 FanXE is an XML editor written in [incr Tcl] using are performed by the tdom package. tdom and Tkhtml. A developer builds XSLT style FanXE reads an XML file called fanxe.xml2 which sheets that transform nodes in the DOM into HTML determines which XML documents will be read into the forms editable in the GUI. When the form is submit- DOM, which nodes will be displayed in the GUI and ted, the DOM node is rebuilt. FanXE can maintain how they will be labeled, which style sheets apply to XML documents under revision control or within a each node, and all other configuration details for the PostgreSQL database. The base class is easily exten- GUI. FanXE also loads a user configuration file.3 The sible as demonstrated with three subclasses. FanXE user configuration file can include additional DOMs to can act as a command-line XSLT engine and includes load and can override any other aspect of the GUI con- XSLT extensions that allow style sheets to execute Tcl figuration. Both the fanxe.xml file and the user config- commands in a safe interpreter. uration file can be edited within the FanXE GUI. 1 Introduction 2 GUI Overview On my first foray into XML, I needed a highly customiz- The FanXE GUI editor is split into three panes: a tree able GUI for editing XML documents. This included view of all XML DOMs, an HTML view pane, and a choosing which nodes are displayed to the end user and tabbed pane. The layout of panes is user-configurable the ability to edit nodes and their children in a single (see section 2.4). form. The end-user must not be required to know any- thing about XML. Experienced users should be able to 2.1 Tree Pane view the underlying XML and use XPath expressions to search the documents. Developers should be capable The Tree pane (Figure 1) presents multiple DOMs in a of writing FanXE applications with limited or no Tcl tixTree widget (see section 5.3.1). Not all branches of experience (extensive XML/XSLT knowledge, however, the DOM are shown in the tree, just those configured is required for developers). in the fanxe.xml configuration file (see section 2.4). It was also important that my editor be the face of different applications and therefore it had to be eas- 2.2 View Pane ily extensible. The “front page” can be either a static HTML page or dynamically generated HTML from a Selecting any node in the Tree pane will run a style method inside the class. Links in the HTML can be sheet associated with that node and display the HTML either XPath expressions to nodes in the XML docu- 2The path of the fanxe.xml file is set with the -xmlDir option. ments, links to methods in the class, or just regular Subclasses have their own -xmlDir option set and load their own web links. set of XML documents. 3Stored in the user’s $HOME/.tk/fanxe directory with “class- 1Pronounced “fancy.” name.xml” as the file name. 1 Figure 1: Tree pane Figure 2: View pane Figure 3: Tabbed pane results in the View pane (Figure 2). The View pane is a Tkhtml html widget which is a fairly full-featured web browser (see section 5.2). FanXE supports a spe- cial FanXE hostname (see section 2.5) as well as a special fanxe:// URI (see section 2.6). FanXE does not support HTML forms except for editing the nodes (see section 2.7). Clicking on the Help icon ( ) will display help in- formation. The URI for the help file is configured in the fanxe.xml file and it can be a fanxe:// URI. 2.3 Tabbed Pane The Tabbed pane (Figure 3) contains the log messages and tabbed Tkhtml windows. It is built with the BLT tabset widget (see section 5.3.2). Middle clicking on any node in the Tree pane or middle-clicking on any link will open the link in a new tab instead of using the View pane. Style sheets associated with nodes may contain HTML form elements for editing the node (see section 2.7). More commonly, the style sheet will present a non-editable summary of the node and include an button that will run a second style sheet that is al- ways opened in a new tab. FanXE uses specially con- structed HTML form elements that, when submitted, reconstruct the DOM node. If the node is already being edited, the previous tab will be moved to the foreground 2 and the edit style sheet will not be reapplied. Figure 4: Configuring tree structure Edit style sheets will commonly have , , and buttons (including the fanxe templates.xsl style sheet and calling the fanxe:buttons template will add these buttons). Note that only saves the changes in the DOM but does not write the XML document to disk. You will be warned before exiting if you have changes that have not been saved to a file. The button rebuilds the node and reapplies the style sheet without changing the original DOM. The button will display the node (with current edits) as pretty-print XML4 in a new tab. The button will abort editing and close the tab. Clicking on the “Pin Up” icon ( ) or right-clicking on the tab will detach that tab and open it in a new window allowing you to view multiple tabs simultane- ously. Clicking the “Pin Down” icon ( ) will reattach the tab. 2.4 GUI Configuration Figure 4 shows the Tree editor. In this example, only two elements of the Uniform Item Set DOM are dis- played in the FanXE Tree pane: the <Section> ele- ment and its child <Series>. When the DOM is loaded, the <Section> elements will be shown open in the Tree (the “Open when loaded” box is checked). The “Title” entry for the <Section> element in Fig- ure 4 contains the following code: fanxe.xml or user configuration file and can be edited within FanXE (Figure 5). This defines the font shape, set title "[node @Range]: [node @Title]" relative size, and color of the element label in the Tree. FanXE also allows you to use the GUI editor to com- The node command is aliased to the DOM node ob- pletely customize the layout of the GUI. You can con- ject for that element and this Tcl code is executed in trol the base font size, colors and any additional X re- a safe Tcl interpreter. The resulting value of the $title sources. You can also customize the layout of the panes variable is used as the label for that branch in the Tree. (Figure 6). When a user clicks on a <Section> element in the Tree, the Section.xsl style sheet5 is applied against that All customization options can be overridden by the node and the HTML results are displayed in the View user’s personal configuration. pane. When a user clicks on a <Series> element, the SeriesBrowse.xsl style sheet is applied and results are displayed in the View pane. The SeriesBrowse.xsl style sheet includes an button. When a user clicks the Figure 5: Defining DisplayStyles button, the SeriesEdit.xsl style sheet is applied to that node and the HTML results of that style sheet are displayed in a new tab (if that node is already being edited, the tab is simply moved to the foreground). The “DisplayStyle” entry in Figure 4 references a tixDisplayStyle (see section 5.3.1) defined in the 4Pretty-print XML is created by the xmlverba- tim.xsl style sheet written by Oliver Becker (available at: http://www.informatik.hu-berlin.de/˜obecker/XSLT/). 5All style sheets are loaded and stored in memory when the GUI starts. 3 Figure 6: Configuring pane layout 2.5 Linking to Methods and Images FanXE’s Tkhtml widgets also support a special URI scheme (fanxe) of the form: FanXE was designed so that it could be the front-end interface to any application. It needs to be able to call fanxe://DOMname/XPath methods from the Tkhtml widgets. Using FanXE as the hostname in http links accomplishes this. These where DOMname is the name of the DOM (defined links are in the form: in fanxe.xml) and XPath is any valid XPath expression. XSLT style sheets can use these URIs to link one http://FanXE/method[?arg1][. ][&argN] XML document to another. where method is the name of the public method being called and arg1. argN are arguments to that method. 2.7 Editing Nodes You can also link to a variety of internal images (such The magic of FanXE is the ability to convert an XML as all the buttons like and ) using the FanXE node into an HTML form that can be edited and later hostname.6 turned back into a new XML node. The trick is creat- ing HTML <form> elements with specially constructed 2.6 Searching the DOMs name attributes. FanXE can search the DOMs with either XPath or The name attribute is made up of one or more tag:ID regular expressions. For both search methods, selecting pairs separated by a forward slash (“/”). At the end the “Trim” button will show only nodes in the tree that of the tag:ID pairs, the name may optionally be fol- match and will collapse all other nodes.