Sunday, March 10, 2013

ZK Basic: Load External Javascript and CSS Files


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

10 comments:

  1. Hi

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

    ReplyDelete
    Replies
    1. An encoded data should be a String, do you mean send a string from client side to server side (probably with an event)?

      Delete
    2. No 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.

      Delete
    3. http://stackoverflow.com/questions/11511511/how-to-save-a-png-image-server-side-from-a-base64-data-string

      Above is in PHP, but i need in ZK :)

      Delete
    4. I've done a sample with respect to how to save canvas as an image to server, hope it helps

      http://ben-bai.blogspot.tw/2013/08/zk-store-canvas-image-to-server.html

      Delete
  2. 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)
    GetImageBufferData(

    ReplyDelete
    Replies
    1. The following is the url which i am trying

      http://www.id-reader.com/Support/Sample_Codes/Web/JavaApplet-JavaScript/
      ScanJDemo.zip
      DriverLicenseDemo.html

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

      Delete
  3. Just keep you in the loop

    http://forum.zkoss.org/question/88266/how-to-send-base64-encoded-data-using-javascript-to-server-side/

    ReplyDelete
  4. I think this is a useful post and it is exceptionally helpful and proficient.
    css beautifier

    ReplyDelete