Javascript and Java

kidleo

31 Jan 2012 11:55:33 GMT

what's the difference between this codes?
______________1 ____________________
<?page title="Auto Generated index.zul"?>
<window title="Hello World!!" border="normal" width="200px">
<div id="viz">
<script type="text/javascript" src="logSys/draw2d_minimal.js"></script>
<![CDATA[
var workflow = new Workflow("viz");

var o = new Oval();
o.setDimension(23,23);
workflow.addFigure(o, 90, 90);
var rect = new Rectangle();
rect.setDimension(10,50);
workflow.addFigure(rect, 20, 10);
var line = new Line();
line.setStartPoint(10,10);
line.setEndPoint(100,100);
workflow.addFigure(line);
]]>
</script>
</div>

____________2___________________

<?page title="Auto Generated index.zul"?>
<window title="Hello World!!" border="normal" width="200px">

<html>

<![CDATA[
<div id="viz"> </div>
<script type="text/javascript" src="logSys/draw2d_minimal.js"></script>
<script type="text/javascript">

var workflow = new Workflow("viz");

var o = new Oval();
o.setDimension(23,23);
workflow.addFigure(o, 90, 90);
var rect = new Rectangle();
rect.setDimension(10,50);
workflow.addFigure(rect, 20, 10);
var line = new Line();
line.setStartPoint(10,10);
line.setEndPoint(100,100);
workflow.addFigure(line);
</script>
]]>

</html>
</window>

______________________________
the second one work.
I would like to use div in ZUML approach and not using div (<div id="vis"></div>) inside CDATA.

Leo

</window>

paowang

1 Feb 2012 01:08:17 GMT

The first code missed <script type="text/javascript">

<?page title="Auto Generated index.zul"?>
<window title="Hello World!!" border="normal" width="200px">
<div id="viz">
<script type="text/javascript" src="logSys/draw2d_minimal.js"></script>

<script type="text/javascript">

<![CDATA[
var workflow = new Workflow("viz");
var o = new Oval();
o.setDimension(23,23);
workflow.addFigure(o, 90, 90);
var rect = new Rectangle();
rect.setDimension(10,50);
workflow.addFigure(rect, 20, 10);
var line = new Line();
line.setStartPoint(10,10);
line.setEndPoint(100,100);
workflow.addFigure(line);
]]>
</script>
</div>
</window>

kidleo

1 Feb 2012 08:17:02 GMT

Hi thank you,
However also using <script....> it's doesn't work. I just tried

gekkio

1 Feb 2012 08:34:04 GMT

Short answer:
1. What paowang said.
2. A raw html div element is not the same as ZUL div component
3. ZK ID is not a DOM ID, so you cannot use it in new Workflow("viz").

Long answer:
The first thing is exactly what paowang mentioned: you must always wrap Javascript code in <script> tags. However, the main difference here is how the div behaves.

In the second example you have a <html> tag surrounding everything. Everything inside that tag will be passed to the browser as is and no ZK components are created. So, basically it's just a huge string that will be sent to the browser. The CDATA section itself does not matter here, but it's the <html> tag that does.

In the first example you have a normal <div> tag. This causes a ZUL div component to be created (Java class org.zkoss.zul.Div). This means that it can be dynamically updated and it's a normal ZK component. However, since it's a ZUL component, you must remember that any ID that you set there will NOT become the id for the div element in client side. So, in the browser there is no div element with id == 'viz'. In this case you must either
1. Access the element using some other way: ZK UUID is what becomes the DOM ID, so you can use that to access the component

var workflow = new Workflow('${viz.uuid}');

2. Use a ZK JQuery selector: ZK extends JQuery to provide many selectors

var workflow = new Workflow(jq('$viz')[0]);

I recommend using the first one because it's faster in the client side and less fragile.

kidleo

6 Feb 2012 12:05:11 GMT

Thank you... evenif I understood what you mean I have tha same problem...

gekkio

6 Feb 2012 14:09:51 GMT

Hmm, I forgot to mention one thing: You need to use zk.afterMount or else your Javascript might be executed before the div element is in place.

Here's a complete example of what I mean:

<?page title="Auto Generated index.zul"?>
<window title="Hello World!!" border="normal" width="200px">
<div id="viz">
<script type="text/javascript" src="logSys/draw2d_minimal.js"></script>
<script type="text/javascript">
<![CDATA[
zk.afterMount(function() {
  var workflow = new Workflow('${viz.uuid}');

  var o = new Oval();
  o.setDimension(23,23);
  workflow.addFigure(o, 90, 90);
  var rect = new Rectangle();
  rect.setDimension(10,50);
  workflow.addFigure(rect, 20, 10);
  var line = new Line();
  line.setStartPoint(10,10);
  line.setEndPoint(100,100);
  workflow.addFigure(line);
});
]]>
</script>
</div>
</window>

kidleo

6 Feb 2012 15:37:41 GMT

I still have the same problem...
I don't understand.... if I check the code in the browser it see fine..
now the page show Elaboration in progress.......

If I define the div inside the html it work fine otherwife I have a lot of problem...
Thank you again

ZK - Open Source Ajax Java Framework