0

how to include javascript dom methods in zul

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

pallagadda gravatar image pallagadda flag of India
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

delete flag offensive retag edit

5 Answers

Sort by ยป oldest newest most voted
1

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

cor3000 gravatar image cor3000
4332 1 7
ZK Team

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

link publish delete flag offensive edit
0

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

pallagadda gravatar image pallagadda flag of India
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

link publish delete flag offensive edit
0

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

cor3000 gravatar image cor3000
4332 1 7
ZK Team

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

link publish delete flag offensive edit
0

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

pallagadda gravatar image pallagadda flag of India
1 1

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

cor3000 gravatar image cor3000
4332 1 7
ZK Team

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

link publish delete flag offensive edit

Comments

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
0

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

cor3000 gravatar image cor3000
4332 1 7
ZK Team

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.

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
2 followers

RSS

Stats

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

Seen: 646 times

Last updated: Aug 29 '13

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More