Integration

In this chapter you find more information about how Xeditor is integrated in your IT infrastructure. Xeditor makes integration simple by providing APIs that connect the backend with the frontend.

Here, the complete communication takes place via a provider. The provider is an interface that encapsulates all communication with the outside world.

Xeditor already offers an implented provider for the communication via ajax requests. This is the Ext.ux.xeditor.AjaxProvider.

When using the middleware, the provider is connected to the middleware via the following line:

var provider = Ext.ux.xeditor.provider.AjaxProvider.forMiddleware(BLACKBOX_URL);
// i.e.      = Ext.ux.xeditor.provider.AjaxProvider.forMiddleware(location.origin + location.pathname + '/api');

This provider is passed in the next step when creating the editor:

Ext.create('Ext.ux.xeditor.Editor', {
    provider: provider,
    // ...
});

The editor now uses this provider to communicate with the middleware. Since the middleware itself does not have access to some resources such as the xml documents, the next step is for the middleware to have a server that returns the data correctly.

For this we first have a look into the xeblackbox.config.js. Here we find a configuration for the server:

{
    "general": {
        // ...
        "server": {
            "host": "yourserver.example.com",
            "port": 80
        },
        "webPath": "path/to/services",
        // ...
    }
}

The blackbox uses the configuration above for actions like loading and saving documents. There are some services that have to be implemented at least:

For /editor/load the complete path with the configuration above would be http://yourserver.example.com/path/to/services/editor/load.

In order to load your own document, you simply write your own service (in any programming language you want / need). It should be noted, of course, that all services are implented from above.

Our demo packages uses node.js to manage these services, which you can find in node_modules/@xeditor/server-js of the @xeditor/xeditor-demo. You can use this package as a starting point (downloadable separately at npm pack @xeditor/server-js) or write your own. If you use our server.js files, you should copy it to a new location before editing the following lines to incorporate your own services.

An implementation can then look something like the following:

const app = express();

app.use(bodyParser.json({limit: '50mb'}));
app.use(bodyParser.urlencoded({extended: true, limit: '50mb'}));

app.post('/editor/load', function (req, res) {
    const schema = req.body.schema || 'demo@0.0';
    const document = req.body.document || 'default';

    // here the xml for the passed schema and document is loaded and is passed to the callback via `data
    getXml(schema, document, (err, data) => {
        if (err) {
            res.status(500).end('No file found. Invalid schema or file');
            return;
        }

        res.setHeader('Content-Type', 'text/xml');
        res.end(data);
    });
});     

app.post('/editor/save', function (req, res) {
    // ... store document
});
app.post('/editor/meta', function (req, res) {
    // ... return user data
});

For more information see Server setup and Blackbox.