## 1. Overview

Let's assume your web application comprises a frontend running in the user's browser and a backend running on a server computer. Let's call your frontend, MyFrontend and your backend, MyBackend. MyFrontEnd and MyBackend communicate with each other through HTTP/HTTPS. MyFrontEnd is implemented in HTML/CSS/JavaScript, this code possibly being totally or partially automatically generated by MyBackend. MyBackend possibly makes use of a database of some sort also running on a server computer.
In order to integrate XMLmind XML Editor Web Web Edition (XXEW) into your web application:

- MyFrontEnd HTML page must contain `<xxe-client>`, a custom HTML element defined by JavaScript class (ECMAScript 6 ) `XMLEditor` .
- `xxeserver`, a WebSocket server, the backend of `<xxe-client>`, must run side by side with MyBackend, though not necessarily on the same server computer.

### Opening an XML document

1. MyFrontEnd JavaScript code queries MyBackend to obtain the XML source of the document to be opened in `XMLEditor`.
2. MyFrontEnd obtains a “handle” to the instance of `XMLEditor` contained in its HTML page, possibly using `document.getElementById(id)` or `document.getElementsByTagName("xxe-client")`. Let's call this handle `xmlEditor`.
3. MyFrontEnd invokes `xmlEditor.openDocument(xmlSource, documentURI)` .

   | ##### Note Method `openDocument()` must be passed a document URI identifying the document being edited. `XMLEditor` makes very few assumptions about how documents are stored by your web application, so your are free to use a URI of any kind, suffice for this URI to be meaningful to your web application. Using custom URI schemes and/or custom URI authorities is fine as long as the document URI is hierarchical. The syntax of a document URI is thus: scheme://authority/path, with authority being optional. For example, the following URIs are supported: https://cms.acme.com/docs/manual.xml, docs:///0943_3561, and the following URIs are not: mailto:john@acme.com, urn:isbn:9780582035874.

Creating a new XML document rather opening an existing one is done by invoking `xmlEditor.newDocumentFromTemplate(templateXMLSource, documentURI)` . The main difference with `openDocument` is that after invoking `newDocumentFromTemplate`, the `saveAsNeeded` property of `XMLEditor` is set to `true`.

### Saving changes

MyFrontEnd may invoke `xmlEditor.saveDocument()` to save the changes made to the document. Because how documents are stored is entirely the responsibility of MyFrontEnd/MyBackend, this method does nothing at all except setting the `saveNeeded` property of `XMLEditor` is set to `false`.
In order to let MyBackend actually save the document being edited, MyFrontEnd may invoke `xmlEditor.getDocument()` to first obtain the XML source of the modified document and then send this source to MyBackend.
Similarly, `xmlEditor.saveDocumentAs(newDocumentURI)` , which may be used to implement the "Save As" command, simply

- changes the `documentURI` property of `XMLEditor` to specified URI,
- sets the `saveNeeded` property is set to `false`,
- sets the `saveAsNeeded` property is set to `false`.

MyFrontEnd almost certainly needs to be informed when changes are made to the document, therefore when these changes need to be saved to the document storage. This is done by registering a "`saveStateChanged`" listener with `XMLEditor` as follows: `xmlEditor.addEventListener("saveStateChanged", listener)` . This listener will receive `SaveStateChangedEvent` s.

### Closing the XML document being edited

MyFrontEnd may invoke `xmlEditor.closeDocument()` to close the document being edited, if any.
Several properties of `XMLEditor`, `documentIsOpened` , `documentUID` , `documentURI` , etc, may be used to test whether a document is currently being edited.