how to include javascript dom methods in zul

Question

asked 2013-08-21 08:27:41 +0800

1 ● 1

Hi, I need to use dom methods in javascript, I tried with some posting answers but those postings are not worked for me. Could you please let me know how to include javascript dom methods in zul and also please tell me the possibilities of including javascript in zul. Thanks in advance

Answer 1

answered 2013-08-22 06:56:01 +0800

cor3000
6280 ● 2 ● 7

Hi,

I am not sure what you mean by "javascript dom methods" maybe you can give an example.

Including javascript into your zul you have several possibilities here just a few links to the documentation:

If you need more information about one or more specific ways, let me know.

Robert

Answer 2

answered 2013-08-26 12:46:35 +0800

pallagadda

1 ● 1

updated 2013-08-26 12:47:21 +0800

Thanks Robert for replying. My code is

<zk><window>
<textbox id="hai" value="HAI"></textbox>
<button id="export" label="Click" onClick='Clients.evalJavaScript("myFunction()")'></button>
<script type="text/javascript">
function myFunction()
{
document.body.style.backgroundColor="lavender";
<!-- document.write(Date()); -->
alert(document.getElementById("hai"));
}

</script>

....</zk>

In above code I am not able to get value of textbox in javascript myFunction() by using document.getElementById("hai"). But document.write() is working fine. Could you please let me know how can I get values in javascript Thanks in advance

Answer 3

answered 2013-08-27 08:53:14 +0800

cor3000
6280 ● 2 ● 7

updated 2013-08-27 08:53:40 +0800

Hi,

thanks for the details, that makes the explanation simple, as your way of adding JS is actually working.

The server side <textbox> component is being rendered with a generated ID at the <input> element (just check the element in firebug, and you'll see something like this: <input id="tY8Q1" class="z-textbox" value="HAI" type="text">).

Using document.getElementById("tY8Q1") would work, but only once. The next time the page is rendered the ID will be different.

ZK is also creating a client side widget which keeps the ID of the server side component (refer to this image). You can use the ZK Client Engine API to retrieve the Widget by the ID defined in the zul file.

zk.Widget.$('$hai').getValue();

If you just need the corresponding DOM element you can use:

zk.Widget.$('$hai').$n();

So a complete running example here:

<zk>
  <window>
    <textbox id="hai" value="HAI"></textbox>
    <button id="export" label="Click" onClick='Clients.evalJavaScript("myFunction()")'>
    </button>
    <script type="text/javascript">
    function myFunction()
    {
      document.body.style.backgroundColor="lavender";
      <!-- document.write(Date()); -->
      alert(zk.Widget.$("$hai").getValue());
    }
    </script>
  </window>
</zk>

Robert

Answer 4

answered 2013-08-27 14:39:04 +0800

pallagadda

1 ● 1

updated 2013-08-28 01:20:51 +0800

cor3000
6280 ● 2 ● 7

Thanks Robert for quick reply. My code is

   <zk>
  <window>
    <textbox id="hai" value="HAI"></textbox>
    <button id="export" label="Click" onClick='Clients.evalJavaScript("myFunction()")'>
    </button>
    <script type="text/javascript">
    function myFunction()
    {
      Spreadsheet s = zk.Widget.$("$spreadSheet");
    }
    </script>
    <spreadsheet id="spreadSheet" src="WEB-INF/hai.xls"
            maxcolumns="500"  height="100%" width="100%" vflex="1">
        </spreadsheet>

  </window>
</zk>

In javascript myFunction(), I need Spreadsheet object to insert data of components(textbox,radiobutton..) and also I need to open one simple popup code in javascript function itself. Could you please let me know how can I get spreadsheet object in javascript function and how can I write popup code in javascript function

is there a specific reason why you need to do this in javascript? ZK provides easy ways to manipulate the data model of the spreadsheet on the server side, and update the client automatically. See http://books.zkoss.org/wiki/ZKSpreadsheetEssentials/WorkingwithSpreadsheet/SpreadsheetDataModel
cor3000 ( 2013-08-28 10:06:19 +0800 )edit
Actually I want to replace existing jsp files with zul files but in the jsp files, more javascript code is there. Is it possible to replace entire jsp javascript with zul file supporting javascript
pallagadda ( 2013-08-28 12:50:23 +0800 )edit

Answer 5

answered 2013-08-29 03:04:08 +0800

cor3000
6280 ● 2 ● 7

updated 2013-08-29 03:04:38 +0800

Ok this sounds like you want to migrate from jsp to ZK. As a first step it might be easier to go with .zhtml pages, using them it makes is easier to reuse your old html+JS pages, and enrich them with ZK components. The JSP scriptlets, and jsp-EL must be replaced with <zscript> (or using MVC/MVVM) and zk-EL.

You have to add the ZHTML dependency to you maven project or add the zhtml.jar:

<dependency>
   <groupId>org.zkoss.zk</groupId>
   <artifactId>zhtml</artifactId>
   <version>${zk.version}</version>
</dependency>

Here just a small example showing some a .zhtml file, and some interactions between client, server and ZK components and html elements.

<html xmlns="xhtml" xmlns:z="zul" xmlns:zk="zk">
    <head>
        <title>ZHTML Demo</title>
    </head>
    <body>
        <script type="text/javascript">
        function copyOnClientSide() { //running in the browser
            alert("running in browser");
            //interaction between a ZK widget and a html input
            jq("#htmlInput").attr("value", (zk.Widget.$("$zkTextbox").getValue()));
        }
        </script>
        <zk:zscript>
        void serverSideMethod() { //running on the server
            System.out.println("executed on server");
        }
        </zk:zscript>

        <!-- some EL -->
        <p>ServerName ${session.serverName}</p>
        <p>Parameter name = ${param.name}</p>

        <!-- zk components -->
        <z:window title="HTML App" border="normal">
            <!-- zk component -->
            <z:textbox id="zkTextbox" 
                zk:onChange='System.out.println("changed on server side")' />

            <!-- html button with server side and client side event handler -->
            <input type="button" value="copy value" onClick="copyOnClientSide()" 
                zk:onClick="serverSideMethod()"/>

            <input id="htmlInput" />
        </z:window>
    </body>
</html>

Maybe that is what you might want to do, if not please post a more specifc case.

CORE FRAMEWORK

FEATURED COMPONENTS

TOOLS

EXPLORE ZK

RESOURCES

LEARN ZK

RESOURCES

GET HELP

RESOURCES

MORE ABOUT ZK

MORE ABOUT ZK

how to include javascript dom methods in zul

5 Answers

Comments

Question tools

Stats

Related questions