Introduction
This article describe how to load external javascript and css files in ZK.
Project Structure
The external css and js files are under WebContent folder as below
The Program
load_external_js_css.zul
A native button apply the custom class 'custom-button' defined in external css file 'WebContent/resources/css/test.css', calling custom javascript function 'customjs.sayHello' defined in external js file 'WebContent/resources/js/test.js'
<!-- load .js file under WebContent -->
<?script type="text/javascript" src="resources/js/test.js"?>
<!-- load .css file under WebContent -->
<?style href="resources/css/test.css" type="text/css" ?>
<zk xmlns:n="native">
<!-- a native (pure html) button,
apply custom css style,
call the custom js function when clicked-->
<n:button class="custom-button"
onclick="customjs.sayHello('Ben');">
test
</n:button>
</zk>The Result
Page loaded
Button clicked
Reference
The script directive
http://books.zkoss.org/wiki/ZUML_Reference/ZUML/Processing_Instructions/script
The style directive
http://books.zkoss.org/wiki/ZUML%20Reference/ZUML/Processing%20Instructions/style
Download
load_external_js_css.zul
https://github.com/benbai123/ZK_Practice/blob/master/Components/projects/Components_Practice/WebContent/load_external_js_css.zul
test.js
https://github.com/benbai123/ZK_Practice/blob/master/Components/projects/Components_Practice/WebContent/resources/js/test.js
test.css
https://github.com/benbai123/ZK_Practice/blob/master/Components/projects/Components_Practice/WebContent/resources/css/test.css
Hi
ReplyDeleteCan you please help me in this
How to send Base64 encoded data using JavaScript to server-side
Actually i am trying to convert HTML + Javascript into ZK + Javascript. You can see the original file here (https://gist.github.com/senthilmuthiah/6109799)
An encoded data should be a String, do you mean send a string from client side to server side (probably with an event)?
DeleteNo it is not a string. It is a stream (image), the scanning device store the driving license image as buffer,(Please note, using javascript the buffered image was created) so first i need to display in the screen and then i need to pass to the server to store in the database.
Deletehttp://stackoverflow.com/questions/11511511/how-to-save-a-png-image-server-side-from-a-base64-data-string
DeleteAbove is in PHP, but i need in ZK :)
I've done a sample with respect to how to save canvas as an image to server, hope it helps
Deletehttp://ben-bai.blogspot.tw/2013/08/zk-store-canvas-image-to-server.html
Thank you. i can use the same savetosever function if third party API returns image buffer (http://id-reader.com/ftp/applications/sdk/docs/SDK_Java_API.pdf)
ReplyDeleteGetImageBufferData(
The following is the url which i am trying
Deletehttp://www.id-reader.com/Support/Sample_Codes/Web/JavaApplet-JavaScript/
ScanJDemo.zip
DriverLicenseDemo.html
You can try to use their GetImageBufferDataBase64 to get the base64 encoded string and apply my sample above, regarding GetImageBufferDataBase64, you can find it in BarCodeDemo.html withing the zip file.
DeleteJust keep you in the loop
ReplyDeletehttp://forum.zkoss.org/question/88266/how-to-send-base64-encoded-data-using-javascript-to-server-side/
I think this is a useful post and it is exceptionally helpful and proficient.
ReplyDeletecss beautifier