Embedded ZK Application"
Robertwenzel (talk | contribs) |
|||
| Line 17: | Line 17: | ||
</source> | </source> | ||
| − | = | + | =Example= |
| − | + | There are two web applications, one is a non-ZK web application (http://localhost:8080), and another one is ZK application (http://zkembedded-app). | |
| − | + | We'll embed ZK in the non-ZK web application. | |
| − | |||
| − | |||
| − | We | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | '''<index.html>''' | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<syntax lang="html" high="11,14"> | <syntax lang="html" high="11,14"> | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
| Line 50: | Line 33: | ||
Loading... | Loading... | ||
</div> | </div> | ||
| − | <script id="embeddedScript" src="/zkembedded-app/zkau/web/js/zkmax/embedded/embedded.js" /> | + | <script id="embeddedScript" src="http://zkembedded-app/zkau/web/js/zkmax/embedded/embedded.js" /> |
<script> | <script> | ||
| − | zEmbedded.load('embeddedZK', 'http:// | + | zEmbedded.load('embeddedZK', 'http://zkembedded-app/demo.zul'); |
</script> | </script> | ||
</body> | </body> | ||
| Line 60: | Line 43: | ||
In line 11, we use <script> to load ZK embedded JS. | In line 11, we use <script> to load ZK embedded JS. | ||
| − | In line 14, we call zEmbedded to load the demo.zul, and the "embeddedZK" means that the embedded ZK page would be rendered in the corresponding DOM Element (DOM id). | + | In line 14, we call zEmbedded to load the demo.zul in ZK application, and the "embeddedZK" means that the embedded ZK page would be rendered in the corresponding DOM Element (DOM id). |
To see more information, please download the [https://github.com/zkoss-demo/zkembedded-demo Demo project]. | To see more information, please download the [https://github.com/zkoss-demo/zkembedded-demo Demo project]. | ||
| Line 71: | Line 54: | ||
The "domId" means after loading resource from "ZKSrc", the content of "domId" (HTML DOM Element) would be replaced with the ZK content. | The "domId" means after loading resource from "ZKSrc", the content of "domId" (HTML DOM Element) would be replaced with the ZK content. | ||
| + | |||
| + | This function would return a [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise Promise object], which means that we can call functions after ZK is ready. | ||
| + | |||
| + | <syntax lang="javascript"> | ||
| + | zEmbedded.load('embeddedZK', 'http://zkembedded-app/demo.zul').then(function() { | ||
| + | zk.log('ZK is ready!'); | ||
| + | }).catch(reason => { | ||
| + | alert('ZK mounting error: ' + reason); | ||
| + | }); | ||
| + | </syntax> | ||
==zEmbedded.destroy(domId, skipError)== | ==zEmbedded.destroy(domId, skipError)== | ||
| Line 78: | Line 71: | ||
=Control ZK Components when using embedded ZK= | =Control ZK Components when using embedded ZK= | ||
After loading the ZK contents, we could use the ZK Client binding to control the ZK components in the view. | After loading the ZK contents, we could use the ZK Client binding to control the ZK components in the view. | ||
| + | |||
To see more information, please refer to [http://books.zkoss.org/zk-mvvm-book/8.0/data_binding/client_binding_api.html ZK MVVM Book - Client Binding]. | To see more information, please refer to [http://books.zkoss.org/zk-mvvm-book/8.0/data_binding/client_binding_api.html ZK MVVM Book - Client Binding]. | ||
| + | |||
| + | =Cross-Origin Resource Sharing issue= | ||
| + | When using Embedded ZK, we need to handle all of the requests, whose target URL point to ZK application. | ||
| + | |||
| + | To deal with this problem, we should handle the requests whose target is ZK application. | ||
| + | |||
| + | We could use Nginx or some apache solutions to redirect those requests to the ZK URL, or using java Filter, container config to provide the request header information. | ||
| + | |||
| + | <syntax lang="javascript"> | ||
| + | Access-Control-Allow-Origin: [allowed embedding origins] | ||
| + | Access-Control-Allow-Headers: zk-sid | ||
| + | Access-Control-Expose-Headers: zk-sid, zk-error | ||
| + | Access-Control-Allow-Credentials: true | ||
| + | Access-Control-Allow-Methods: GET, POST | ||
| + | </syntax> | ||
| + | |||
=Version History= | =Version History= | ||
Revision as of 09:24, 4 March 2020
Employment/Purpose
Instead of using iframe, there is a new way to use ZK in a non-ZK web container. For example, we could use NodeJs, Python, etc. as the web application, and embed another ZK application in the web pages.
- Available for ZK:
-
[ since 9.0.0 ]
Prerequisite
Settings in the ZK application
We use library property to enable the embedded feature. For example: (In zk.xml)
<library-property>
<name>org.zkoss.web.servlet.http.embedded.enabled</name>
<value>true</value>
</library-property>
Example
There are two web applications, one is a non-ZK web application (http://localhost:8080), and another one is ZK application (http://zkembedded-app). We'll embed ZK in the non-ZK web application.
<index.html> <syntax lang="html" high="11,14"> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>
Loading...
<script id="embeddedScript" src="http://zkembedded-app/zkau/web/js/zkmax/embedded/embedded.js" /> <script> zEmbedded.load('embeddedZK', 'http://zkembedded-app/demo.zul'); </script> </body> </html> </syntax>
In line 11, we use <script> to load ZK embedded JS.
In line 14, we call zEmbedded to load the demo.zul in ZK application, and the "embeddedZK" means that the embedded ZK page would be rendered in the corresponding DOM Element (DOM id).
To see more information, please download the Demo project.
API in embedded.js
We provide two API methods for embed ZK.
zEmbedded.load(domId, ZKSrc)
The "domId" means after loading resource from "ZKSrc", the content of "domId" (HTML DOM Element) would be replaced with the ZK content.
This function would return a Promise object, which means that we can call functions after ZK is ready.
<syntax lang="javascript">
zEmbedded.load('embeddedZK', 'http://zkembedded-app/demo.zul').then(function() {
zk.log('ZK is ready!');
}).catch(reason => {
alert('ZK mounting error: ' + reason);
});
</syntax>
zEmbedded.destroy(domId, skipError)
We can remove the specific ZK desktop in the HTML DOM Element. If "skipError" is true, the function would skip error messages when an error occurs.
Control ZK Components when using embedded ZK
After loading the ZK contents, we could use the ZK Client binding to control the ZK components in the view.
To see more information, please refer to ZK MVVM Book - Client Binding.
Cross-Origin Resource Sharing issue
When using Embedded ZK, we need to handle all of the requests, whose target URL point to ZK application.
To deal with this problem, we should handle the requests whose target is ZK application.
We could use Nginx or some apache solutions to redirect those requests to the ZK URL, or using java Filter, container config to provide the request header information.
<syntax lang="javascript"> Access-Control-Allow-Origin: [allowed embedding origins] Access-Control-Allow-Headers: zk-sid Access-Control-Expose-Headers: zk-sid, zk-error Access-Control-Allow-Credentials: true Access-Control-Allow-Methods: GET, POST </syntax>
Version History
| Version | Date | Content |
|---|---|---|
| 9.0.0 |