Add custom methods (#47)

oracle-samples · Jun 11, 2020 · 3a10dbe · 3a10dbe
1 parent 8bc080f
commit 3a10dbe
Show file tree

Hide file tree

Showing 10 changed files with 1,800 additions and 1,556 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@ Next Release
 -------------
 1.9.0
 ------
+* Add custom methods #47
 * Add generic options object to App init. #46
 
 1.8.1

diff --git a/README.md b/README.md
@@ -227,6 +227,21 @@ XFC.Provider.init({
 })
 ```
 
+If the app and framework wants to register new custom methods with JSONRPC, it may pass in an customMethods object and Provider
+can call custom events on the frame using invoke method.
+
+```js
+XFC.Consumer.mount(
+  document.body,
+  'http://localprovider.com:8080/example/provider.html',
+  { customMethods: { add(x, y) { return Promise.resolve(x + y); } } }
+);
+```
+
+```js
+XFC.Provider.invoke('add', [1, 2]);
+```
+
 ### Launching Fullscreen
 An application may request to launch a pagelet fullscreen within the consumer application.
 

diff --git a/example/initialization/1_e_index.html b/example/initialization/1_e_index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en-us">
+  <head>
+    <title>Embedded Content Consuming Site</title>
+    <meta charset="utf-8" />
+    <script src="http://localhost:8080/xfc.js"></script>
+    <style>
+      iframe {
+        width: 100%;
+        border: none;
+        margin: 0;
+        padding: 0;
+      }
+      html[hidden] { display: none; }
+      .xfc[data-status='mounted'] {
+        border: 5px dashed #000;
+      }
+      .xfc[data-status='launched'] {
+        border: 5px dashed #00F;
+      }
+      .xfc[data-status='authorized'] {
+        border: 5px dashed #0F0;
+      }
+      .grid {
+        display: flex;
+        flex-flow: row wrap;
+      }
+      .grid div {
+        padding: 20px;
+      }
+      #c1 {
+        border: 5px dashed #000;
+      }
+      #c2 {
+        border: 5px dashed #00F;
+      }
+      #c3 {
+        border: 5px dashed #0F0;
+      }
+    </style>
+  </head>
+  <body>
+    <div>
+      <h2>The following are XFC's statuses (mounted, launched, authorized).</h2>
+    </div>
+    <div class="grid">
+      <div id="c1">
+        <h2>mounted app</h2>
+      </div>
+      <p></p>
+      <div id="c2">
+        <h2>launched app</h2>
+      </div>
+      <p></p>
+      <div id="c3">
+        <h2>authorized app</h2>
+      </div>
+    </div>
+    <p>This example shows that customMethods are called</p>
+    <script>
+      XFC.Consumer.init()
+      frame = XFC.Consumer.mount(document.body, 'http://localprovider.com:8080/example/initialization/1_e_provider.html');
+      setTimeout(function(){ frame.invoke('add', [1, 2]).then(result => { console.log('result',result)}); }, 3000);
+
+    </script>
+  </body>
+</html>
diff --git a/example/initialization/1_e_provider.html b/example/initialization/1_e_provider.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en-us">
+  <head>
+    <title>HealtheLife Trusted Site</title>
+    <meta charset="utf-8" />
+    <style>
+      body {
+        padding-bottom: 5px;
+      }
+      html[hidden] { display: none; }
+    </style>
+    <script src="http://localhost:8080/xfc.js"></script>
+  </head>
+  <body>
+    <div>
+      <h1>1. Initialization</h1>
+    </div>
+    <script type="text/javascript">
+      const customMethods = {
+        add(x,y) {
+          return Promise.resolve(x + y);
+        },
+      }
+      XFC.Provider.init(
+        {
+          acls: ['*'],
+          customMethods,
+        }
+     )
+    </script>
+  </body>
+</html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,6 +2,7 @@ Next Release @@
     -------------
 .9.0
     ------
+    * Add custom methods #47
     * Add generic options object to App init. #46
 .8.1
@@ Expand Down @@