Originally, to use the editing capabilities of WithStyle you had to do all kinds of interesting 'behind the scenes' calls to the widget to enable editing, give it an editing controller and all kinds of other tricks that no one should have to know about.

This all changed when we decided to make the WsEditorWidget. This widget wraps up the majority of the trickery that is required to edit XML in a WYSIWYG fashion.

Just a quick overview on the capabilities of this widget. It accepts XML-Schema as a structure model for the XML you'll be editing. This structure is used to ensure the document is structurally sound at all times - it also allows a user to Right-Click anywhere in their document and alter the structure. You do this by calling aDocument defaultSchema: mySchema.

The widget accepts what we call XML-Translations. This is a simple mapping file of an element tag type in to an English (or another language) word. Eg: <p> becomes Paragraph and <img> becomes Image. You set this as aDocument translations: myTranslations.

The widget will accept a Toolbar XML definition as well which allows just about any behaviour to be linked in to the toolbar (also menus, but menus are not exposed in the editor widget).. we have some basic bits of XML in there already to make editing nice and simple, such as 'toggle <b> on and off'. This is done with a:

<markupitem elementname="b"><label>Bold</label><help>Toggle Bold on and off</help></markupitem>

There are other forms of toolbar tricks we have already encapsulated for you, but I won't go in to them here - I'll save them for documentation later. You set the toolbar by putting it on the widget with myEditorWidget toolbarAndWait: myToolbar. Note: you may get timing issues if you set the toolbar before you set the document - but this may not be an issue for how you wish to use the widget.

The widget also can be given CSS. The CSS can come from the XML being edited, or it can be supplied programmatically in to the XML document. You do this with a simple call of myDocument addStylesheet: myCSS title: nil.

The next thing you can do is to specify some XSLT to transform your XML in to another format - such as XHTML. You can do this by setting it on the widget with myEditorWidget xsltStylesheet: myXSLT. Some important magic occurs here: Your original XML is modified as the transformed XML is edited by the user. What this means is that by the time the user has finished editing their XML, you have your original XML back from them - not some XHTML document created by the XSLT. You can access your original XML document by doing: myEditorWidget document originalOrSelf.

Putting the WsEditorWidget in to your window is easy enough. Open up the GUI builder and create a Subcanvas widget. In the Subcanvas widget, name your widget something like editor then set the class to be WithStyle.Client.WsEditorWidget and the canvas is #windowSpec.

Make sure you instantiate the aspect for it. The rest is magic from there. The whole script to set up and use the widget looks something like this:

myDocument translations: self translations.

myDocument addStylesheet: self css title: nil

myDocument defaultSchema; self schema.

myEditorWidget xsltStylesheet: self xslt.

myEditorWidget documentAndWait: myDocument.

myEditorWidget toolbarAndWait: self toolbar.

Naturally, you need to do a bit more to get your translations, toolbar, schema, xslt and document, but NetResources can help here. You can do something very basic like:

myDocument := 'file:///./test.xml' asURI asResource.

Or implement toolbar similarly: toolbar ^'file:///./toolbar.xml' asURI asResource. Since all of these things are XML, you can store them practically anywhere. You can get them off disk, from a HTTP site or even from methods. The URI syntax for access XML from a method is: resource://MyNamespace.MyClass/myMethod.

This code will work as of the developer program WSDEV version v4.95