So, it’s been a while since I posted anything, but that only means I’ve been in my coding hole all day all night!
Lots of progress on the editor front, I finally got started on the UI and the AJAX backend. In priniciple, this is how it works: We have the welcome page which first asynchronously makes a request to the server for an XML file that contains everything needed to make the forms on the welcome page, essentially the fields that the ‘Create new File’ form requires. This may sound stupid, we already know what we need to create a new GuideXML document, but, I decided to take a more generic approach for two reasons:
Easy Extensibility. What if there are changes to the GuideXML format itself?! This way, we also open up avenues for making a generic XML editor, not specific to GuideXML.
Easy Translation. As mentioned in my proposal, I’m going to use the PO-file format to handle translations. Requesting for information at the very beginning allows me to get the strings to be displayed immediately.
Coming on the editor, what we have here is a ‘Toolbox’ on the left with 3 menus and a tabbed pane on the right which acts as the editor itself. The first menu called ‘Primary Elements’ consists of buttons for modifying the Title, Author(s), Abstract, Version and Date of the GuideXML document. The second menu is called ‘Content Elements’ and has two buttons named ‘Chapter’ and ‘Section’. My plan is to be able to allow the user to simply drag-and-drop the Chapter/Section button to the editor, and, voila a Chapter/Section is inserted! Likewise with the 3rd menu called ‘Body Elements’.
In the editor area, every editable portion (title of the chapter/section,
contents of any body element etc.) highlights when you move your cursor over
it. Double-clicking it will open up a textbox (in cases of one-line contents
or when formatting is not required/allowed, the chapter title for example)
or a textarea (in cases where formatting is required, like the contents of
any body element). Now the textarea is where TinyMCE kicks in, all
textarea’s on the page will be replaced by a heavily-modified and stripped
down version of TinyMCE that I am working on. Essentially, this WYSIWYG
widget will allow you to format the text as
<em> and in the case
of all body elements other than , and
<var> in the case
of pre-tags. Now this is kind of tough, I need to develop a plugin for each
of these tags, the only functionality I can reuse from TinyMCE is the
spellcheck plugin and the
Moving on to the backend, I was thinking of an XSLT file that translates the GuideXML source to a div-filled HTML format suitable for display in the editor and vice-versa. Actually we need two of these to convert from one format to another, the one to be used will be determined by the active tab; if the ‘View Source’ tab is active we convert the source to HTML, HTML to source otherwise.
Some knick-knacks to sort out would be stuff like how frequently the file should be saved, and how exactly that is to be done. All-in-all, pretty interesting stuff, please do have a look at the code in the SVN repository if you’re interested!