Embedded ZK Application"

From Documentation
Line 75: Line 75:
 
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=
+
=Cross-Origin Resource Sharing=
When using Embedded ZK, we need to handle all of the requests, whose target URL point to ZK application.
+
In Cross Origin scenarios the responses from the ZK application needs set at least the following headers.
 
 
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">
 
<syntax lang="javascript">
Line 90: Line 86:
 
</syntax>
 
</syntax>
  
 +
This can be done by configuring your server (e.g. nginx, apache-httpd, tomcat, spring-boot...) appropriately and is '''not''' ZK-specific.
 +
Please refer to the related documentation (e.g. [https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS MDN: Cross-Origin Resource Sharing (CORS)]) and your specific server configuration guides.
  
 
=Version History=
 
=Version History=

Revision as of 09:11, 11 March 2020


Embedded ZK Application


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:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion ee.png
[ since 9.0.1 ]

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,13"> <!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, load the zk embedded JS API script

In line 13, load demo.zul (of the ZK application) into the DOM Element with id embeddedZK.

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)

This will destroy the embedded ZK desktop at server side and clear the DOM Element. Use "skipError = true" to ignore error messages.

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

In Cross Origin scenarios the responses from the ZK application needs set at least the following headers.

<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>

This can be done by configuring your server (e.g. nginx, apache-httpd, tomcat, spring-boot...) appropriately and is not ZK-specific. Please refer to the related documentation (e.g. MDN: Cross-Origin Resource Sharing (CORS)) and your specific server configuration guides.

Version History

Last Update : 2020/03/11


Version Date Content
9.0.0



Last Update : 2020/03/11

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.