From fe95d4d55fa88b4763ff1e8da0facab5e5fdd008 Mon Sep 17 00:00:00 2001 From: aherrera Date: Mon, 12 Feb 2018 14:32:00 -0600 Subject: [PATCH 1/2] Updated document with messaging between components --- src/packages/vue/index.md | 64 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 64 insertions(+) diff --git a/src/packages/vue/index.md b/src/packages/vue/index.md index 6d0718c54..8fd3af398 100644 --- a/src/packages/vue/index.md +++ b/src/packages/vue/index.md @@ -92,4 +92,68 @@ class ApplicationUsingReactWindow extends Window { } ``` +## Set up broadcasting between two applications that cannot directly communicate with each other using the default eventBus + +Note: To explain this clearly, we have the "broadcaster" application as AppA, and the "receiver/listener" application as AppB. + +In AppA's main.js add: + +``` javascript +const Process = OSjs.require('core/process'); +... + const vue = new Vue({ + el: container, + render: h => h(App), + methods: { + broadcast(n, args) { + Process.message(n, args, {source: app}); + } + } + }); +``` +Above, we're adding the OSJS Process so it's accessible to the Vue instance declared. In the Vue instance, we add the method `broadcast` that will be called by the child component(s). The method will then make use of OSJS's broadcasting system and notify other packages/applications. + +Now, let's say you want to have the event be triggered by a button click: + +``` javascript + methods: { + clickAction(m) { + this.$root.broadcast('highlight-node-event', m._id); + } + } +``` +The button press calls `clickAction` and submits an object *m*. This method now calls the root Vue object and uses its "global" `broadcast` method. + +The event has been sent out at this point. Now, for AppB to receive the event; we need to register one or more events. Having this inside the main.js file of AppB we can separate OSJS concerns from VueJS. + +``` javascript + /** + * Register events + */ + ["highlight-node-event"].forEach(n => + app._on(n, (...args) => { + vue.$emit(n, ...args); + }) + ); +``` +Here *app* is the OSJS instance of AppB, which will send an `$emit` call within the root Vue component. Finally, in the child component where the event is to be captured we add: + +``` javascript + mounted() { + this.$root.$on("highlight-node-event", id => { + if (id == this.model._key) { + this.highlight = true; + } else { + this.highlight = false; + } + }); + }, +``` +Above, we check to see if the object passed in matches up with the local this.model's _key property. If true, then the node to highlight is lit up using the computed check. + + + + + + **That's it!** You now have a hello world application :) From ef11dbe959afa508d51fa48e64efcdd3dbaa7192 Mon Sep 17 00:00:00 2001 From: aherrera Date: Mon, 12 Feb 2018 15:06:42 -0600 Subject: [PATCH 2/2] Updated per suggestions by Anders --- src/packages/vue/index.md | 67 ++++++++++++++++----------------------- 1 file changed, 28 insertions(+), 39 deletions(-) diff --git a/src/packages/vue/index.md b/src/packages/vue/index.md index 8fd3af398..b1e8219d0 100644 --- a/src/packages/vue/index.md +++ b/src/packages/vue/index.md @@ -92,29 +92,9 @@ class ApplicationUsingReactWindow extends Window { } ``` -## Set up broadcasting between two applications that cannot directly communicate with each other using the default eventBus - -Note: To explain this clearly, we have the "broadcaster" application as AppA, and the "receiver/listener" application as AppB. - -In AppA's main.js add: - -``` javascript -const Process = OSjs.require('core/process'); -... - const vue = new Vue({ - el: container, - render: h => h(App), - methods: { - broadcast(n, args) { - Process.message(n, args, {source: app}); - } - } - }); -``` -Above, we're adding the OSJS Process so it's accessible to the Vue instance declared. In the Vue instance, we add the method `broadcast` that will be called by the child component(s). The method will then make use of OSJS's broadcasting system and notify other packages/applications. - -Now, let's say you want to have the event be triggered by a button click: +## To communicate between Vue components in separate applications, you'll need to set up a Vue event bus and use OS.js built-in event handling and broadcasting. +In the component you wish to broadcast events over OS.js: ``` javascript methods: { clickAction(m) { @@ -122,22 +102,7 @@ Now, let's say you want to have the event be triggered by a button click: } } ``` -The button press calls `clickAction` and submits an object *m*. This method now calls the root Vue object and uses its "global" `broadcast` method. - -The event has been sent out at this point. Now, for AppB to receive the event; we need to register one or more events. Having this inside the main.js file of AppB we can separate OSJS concerns from VueJS. - -``` javascript - /** - * Register events - */ - ["highlight-node-event"].forEach(n => - app._on(n, (...args) => { - vue.$emit(n, ...args); - }) - ); -``` -Here *app* is the OSJS instance of AppB, which will send an `$emit` call within the root Vue component. Finally, in the child component where the event is to be captured we add: - +In the component you wish to receive events from OS.js: ``` javascript mounted() { this.$root.$on("highlight-node-event", id => { @@ -149,8 +114,32 @@ Here *app* is the OSJS instance of AppB, which will send an `$emit` call within }); }, ``` -Above, we check to see if the object passed in matches up with the local this.model's _key property. If true, then the node to highlight is lit up using the computed check. +In your OS.js application you can proxy events: +``` javascript + const Process = OSjs.require('core/process'); + ... + const vue = new Vue({ + el: container, + render: h => h(App), + methods: { + broadcast(n, args) { + // send message out + Process.message(n, args, {source: app}); + } + } + }); +``` +``` javascript + /** + * Register events + */ + ["highlight-node-event"].forEach(n => + app._on(n, (...args) => { + vue.$emit(n, ...args); + }) + ); +```