Posted on

XML Editors Comparison

I want to browse and edit some XML tagged content: the jQuery API documentation, a 170KB XML file. I’m not interested here in XML language features. I just want to access the content in a tree / grid view and be able to edit it without much effort.
I wandered around the Internet looking for alternatives, and here are my findings.

EditPlus 2.20
editplus1.pngI use to use EditPlus for editing text files, because it loads fast and although it is a basic script editor it has syntax coloring and many interesting features, like search and replace using regular expressions.

I found: shareware (30 USD); no entities rendering; newlines preserved; no pretty format; editing an element’s attributes and content is basic; no tree view; no grid view.

Microsoft Word 2003
microsoftword1.pngThis was just a try I gave to my preferred doc editor. I recently discovered that the HTML output is now considerably better than it was before, with a perfect rendering in Internet Explorer. So I thought that maybe I could find what I was after.

I found: shopware (229 USD); entities rendering; newlines not preserved; cristal clear pretty format (boxed tags); editing an element’s attributes is not practical (via a modal dialog box via the contextual menu); editing an element’s content is very easy; element’s block doesn’t collapse; no tree view; no grid view; structure protected.

Peter’s XML Editor
petersxmleditor1.pngpetersxmleditor2.pngThis is a free piece of software, with some of the features I need, just a bit old-looking.

I found: freeware; entities rendering (only in tree view); newlines preserved (in source and tree view); very good pretty format (bold tags); element’s block doesn’t collapse; tree view available (not related to source view); no children count; presentation of attributes and content is almost practical (both pairs the tree structure, but content is not shown until a text leaf is reached); editing an element’s attributes is not practical (via a modal dialog box via a double-click, within a fixed size layout); editing an element’s content is not practical (via a modal dialog box via a double click, but in an expandable layout); dialog boxes open slower for elements at the end of the tree; no grid view; drag and drop in the tree view is a buggy feature.

EditiX 5.0
editix1.pngThis is a professional looking shareware, with many many features, and a 30 days trial period.

I found: shareware (39 USD for home users); no entities rendering; newlines preserved; good pretty format (contextually highlighted tags); element’s block doesn’t collapse; tree view available (related to source view); children count; presentation of content limited to source view; editing an element’s attributes and content is practical; no grid view; drag and drop in the tree view is available (but something weird can happen, for example a move needs to be undone twice).

Aptana
aptana1.pngThis is a beautiful sofware for developing Javascript programs, highly configurable.

I found: opensource; no entities rendering; newlines preserved; no pretty format; element’s block collapses; tree view available (related to source view, but not from it); no children count; presentation of attributes and content limited to source view; editing an element’s attributes and content is practical; no grid view; no drag and drop in the tree view; Lexeme tooltip very annoying (cannot be disabled).

Altova XMLSpy
altovaxmlspy1.pngaltovaxmlspy2.pngThis is the new XMLSpy Editor, features packed, free to home users.

I found: shopware (399 EUR) / free to home users (licensing via register and activate); no entities rendering; newlines preserved; pretty format available; element’s block doesn’t collapse; no tree view; grid view available (related to source view; not available to home users); children count available; presentation of attributes and content is almost practical (at each level, children are rows of a grid and their attributes and contents are columns); shape of cells is almost practical (can be adapted via a button, but it’s reset to default fixed size when changing view); editing an element’s attributes and content is practical (via a double-click, within an expandable cell); drag and drop in the grid view is available.

Microsoft XML Notepad 2006
microsoftxmlnotepad1.pngmicrosoftxmlnotepad2.pngThe best for what I was after. Free, fast, functional.

I found: freeware; entities rendering; newlines preserved; no source view; tree view available; no children count (what a pity!); presentation of attributes and content is very practical (both pairs the tree structure, and content is shown a step before a text leaf is reached); editing an element’s attributes and content is very practical (via a single-click if selected, within an expandable cell); drag and drop in the tree view is available.

Posted on

jQuery: API documentation /1

jQuery is pure enjoyment: you try something and it works.

But the jQuery API documentation needs improvements on interface and content.

The interface is a bit annoying, because of the drawer metaphor. The user must always open a drawer to see what’s inside and close it again to tidy up.

This problem affects both the description of a function and the alphabetical grouping of all the functions. So each function description is actually hidden inside two drawers, one for the tab of the first letter of the function name, and the other for the function itself. A bit more complicated than it should be for browsing an API documentation.

Visual jQuery is a replacement of the official interface and content. It’s based on the drawer metaphore as well, but with a twist. The user, knowing what is looking for, imagines a path of predefined categories, and opens all of their drawers to get there. It’s less weird than it seems from this description, but there is some additional problem.

The header eats up almost an half of the vertical space, and it’s not very useful.
Scrolling the page down makes the content disappear under the header.
Any drawer appears at the top, so after opening a drawer at the bottom the user must scroll the page up to see its content.

Simple Style

I’ve just made yet another replacement of the jQuery API documentation.

It’s based on a two columns layout hosting a list of links on the left and the linked content on the right: basic web metaphor.

It’s still far from completion. This is a partial list of what must be done.

  1. add alphabetical positioning for the links on the left; should be something similar to the original alphabetical tabs, just not tabs: clicking on a letter would cause the left pane to scroll
  2. make the functionality the main concept of the documentation and separate functionalities from functions, each in its own filing card: for example, “$( expr )” has now two different functionalities, so they should be represented by two separate filing cards;
  3. add a unique and persistent ID number to each functionality, so that they can be referenced from inside the documentation, and in the wild by means of a an URL ending with this ID; it would appear where now is a #
  4. check the description of any argument; should be very focused about what the function expects, how it’s related to the functionality
  5. add keywords to highlight documentation wide aspects; it would appear where now is the category; should be a comma separated list, with a fixed precedence
  6. check the description, and edit it thinking about the functionality, being very specific on what gets changed and what is returned
  7. find better and useful examples, always involving a DOM context that can be expressed by HTML markup, both in the Before and After sections.
  8. add a comment to a solution, relating it to “synonyms and antonyms”-like solutions
  9. developed at 1024×768 screen resolution using IE6: check others
  10. template adapted to CSS from one generated by Microsoft Word: refine