|
| 1 | +--- |
| 2 | +description: This tutorial will show you how to use middleware. |
| 3 | +full_title: Middleware Tutorial |
| 4 | +--- |
| 5 | + |
| 6 | +# Middleware Tutorial |
| 7 | + |
| 8 | +This tutorial will show you how to use middleware. |
| 9 | + |
| 10 | +Applications can register middleware to provide features and change the behavior of other applications. |
| 11 | + |
| 12 | +## Usage |
| 13 | + |
| 14 | +Register a callback to middleware defined by a group name: |
| 15 | + |
| 16 | +```javascript |
| 17 | +const middlewareFunction = () => {}; |
| 18 | +core.make('osjs/middleware') |
| 19 | + .add('middleware-group-name', middlewareCallback); |
| 20 | +``` |
| 21 | + |
| 22 | +Alternatively you can the global registration function: |
| 23 | + |
| 24 | +```javascript |
| 25 | +import osjs from 'osjs'; |
| 26 | + |
| 27 | +const middlewareFunction = () => {}; |
| 28 | +osjs.middleware('middleware-group-name', middlewareCallback); |
| 29 | +``` |
| 30 | + |
| 31 | +To get the list of registered middleware from a group: |
| 32 | + |
| 33 | +```javascript |
| 34 | +const middlewareCallbacks = core.make('osjs/middleware') |
| 35 | + .get('middleware-group-name'); // => [middlewareFunction] |
| 36 | +``` |
| 37 | + |
| 38 | +## Example |
| 39 | + |
| 40 | +The [File Manager application](https://github.com/os-js/osjs-filemanager-application) uses middleware to construct the edit (context) menu. |
| 41 | + |
| 42 | +You can add your own callbacks to this middleware if you need to for example launch your own application from this menu with the selected file as an argument. The middleware group name the File Manager exposes for this is `osjs/filemanager:menu:edit`. |
| 43 | + |
| 44 | +To add your own menu entries with this middleware, you first have to change your package metadata: |
| 45 | + |
| 46 | +```json |
| 47 | +// metadata.json in our application |
| 48 | +{ |
| 49 | + "files": [ |
| 50 | + "main.js", |
| 51 | + "main.css", |
| 52 | + // Add this line |
| 53 | + {"filename": "middleware.js", "type": "background"} |
| 54 | + ] |
| 55 | +} |
| 56 | +``` |
| 57 | + |
| 58 | +Then change the webpack config and add `middleware.js` as a new entry: |
| 59 | + |
| 60 | +```javascript |
| 61 | +entry: { |
| 62 | + main: path.resolve(__dirname, 'index.js'), |
| 63 | + middleware: path.resolve(__dirname, 'middleware.js') |
| 64 | +} |
| 65 | +``` |
| 66 | + |
| 67 | +Now the middleware can be added in the `middleware.js` file. In this example a callback is added to provide extra menu options based on options from the other application: |
| 68 | + |
| 69 | +```javascript |
| 70 | +import osjs from 'osjs'; |
| 71 | + |
| 72 | +osjs.middleware('osjs/filemanager:menu:edit', async (({file, isContextMenu}) => { |
| 73 | + // It should return an array of objects with `label`, `disabled` and `onclick` |
| 74 | + |
| 75 | + if (isContextMenu) { |
| 76 | + // Add this item only in context menu |
| 77 | + return [{ |
| 78 | + label: 'Open in my application', |
| 79 | + disabled: !file || !file.isFile, |
| 80 | + onclick: () => osjs.run('my-app-name', {file}) |
| 81 | + }]; |
| 82 | + } |
| 83 | + |
| 84 | + // Don't add any item to the file manager's edit menu |
| 85 | + return []; |
| 86 | +})); |
| 87 | +``` |
0 commit comments