Embedded ZK Application"

From Documentation
Line 27: Line 27:
 
<source>
 
<source>
 
location / {
 
location / {
  #Non-ZK Application
+
proxy_pass http://127.0.0.1:9000;
  proxy_pass http://127.0.0.1:9000;  
+
root  html;
 +
index  index.html;
 
}
 
}
  
location /zkEmbeddedDemo/ {
+
location /zkembedded-app/ {
  #ZK Application
+
proxy_pass http://127.0.0.1:8080;
  proxy_pass http://127.0.0.1:8090;
 
 
}
 
}
 
</source>
 
</source>
Line 47: Line 47:
 
</head>
 
</head>
 
<body>
 
<body>
<div id="embeddedZK">
+
<div id="embeddedZK" style="height:80%">
Loading...
+
  Loading...
</div>
+
</div>
<script src="/zk90test/zkau/web/js/zkmax/embedded/embedded.js"></script>
+
<script id="embeddedScript"
 +
src="/zkembedded-app/zkau/web/js/zkmax/embedded/embedded.js">
 
<script>
 
<script>
 
zEmbedded.load('embeddedZK', 'http://localhost/zk90test/demo.zul');
 
zEmbedded.load('embeddedZK', 'http://localhost/zk90test/demo.zul');

Revision as of 09:49, 9 December 2019


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

Settings in the other application

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.

For example, we could add the following settings in Nginx : (ZK application - zktest)

location / {
	proxy_pass http://127.0.0.1:9000;
	root   html;
	index  index.html;
}

location /zkembedded-app/ {
	proxy_pass http://127.0.0.1:8080;
}

Example

After doing all the settings in the ZK application and the non-ZK application, now we could embed ZK pages in our web application. <syntax lang="html" high="11,13"> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>

 Loading...

<script id="embeddedScript" src="/zkembedded-app/zkau/web/js/zkmax/embedded/embedded.js"> <script> zEmbedded.load('embeddedZK', 'http://localhost/zk90test/demo.zul'); </script> </body> </html> </syntax>

In line 11, we use <script> to load ZK embedded JS.

In line 13, 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).

Version History

Last Update : 2019/12/09


Version Date Content
9.0.0



Last Update : 2019/12/09

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