Scripts in ZUML"

From Documentation
Line 31: Line 31:
  
 
Notice that, by default, the code inside the <tt>zscript</tt> element is Java, and you could choose other languages, such as Groovy. Keep in mind, it's ''interpreted'' at run time (by [http://beanshell.org Beanshell]), so typo or syntax error will be found only when it is interpreted. In additions, it runs at the server, so it could access any Java libraries. In additions, you could define variables, methods, classes with it, and they are visible to EL expressions of the same page.
 
Notice that, by default, the code inside the <tt>zscript</tt> element is Java, and you could choose other languages, such as Groovy. Keep in mind, it's ''interpreted'' at run time (by [http://beanshell.org Beanshell]), so typo or syntax error will be found only when it is interpreted. In additions, it runs at the server, so it could access any Java libraries. In additions, you could define variables, methods, classes with it, and they are visible to EL expressions of the same page.
 +
 +
===CDATA===
 +
 +
The code embedded in the zscript element must be a valid XML text. In other words, you must encode the special characters well, such as  < must be replaced with &amp;lt;, & with &amp;amp; and so on. In additions to encode individual characters, you could encode the whole code with XML CDATA as follows.
 +
 +
<source lang="xml">
 +
<script><![CDATA[
 +
if (some < another && another < last) //OK since CDATA is used
 +
  doSomething();
 +
]]></script>
 +
</source>
 +
 +
As depicted CDATA is represented with <tt><![CDATA[</tt> and <tt>]]></tt>.
  
 
<blockquote>
 
<blockquote>

Revision as of 09:20, 25 November 2010

Embed Server-side Script Code

To make it easier to create a dynamic Web page, the ZUML document allows you to embed the script code. Notice that there are two types of the script code: server-side and client-side. How to embed the client-side code is discussed at the Client-side UI Composing and Client-side Event Listening sections. Here we discuss how to embed the server-side script code in a ZUML document.

Depending on the requirement, there are two ways to embed the server-side script code in a ZUML document: the zscript element and the event handler. The zscript element is used to embed the code that will execute when the page is loaded, while the event handler will execute when the event is received.


Notice that the performance of BeanShell is not good and, like any interpreter, typos can be found only when it is evaluated. Thus, it is suggest to limit the use of zscript in prototyping and quick-fix.

zscript

First, you could embed the code inside the zscript element, such that they will be evaluated when the page is rendered[1]. For example,

<zscript>
//inside is zscript
//you can declare variable, function, and even Java class here.
void foo(String msg) {
    //...
}
comp.addEventListener("onClick",
    new EventListener() {
        public void onEvent(Event event) {
            //...
        }
    });
</zscript>

Notice that, by default, the code inside the zscript element is Java, and you could choose other languages, such as Groovy. Keep in mind, it's interpreted at run time (by Beanshell), so typo or syntax error will be found only when it is interpreted. In additions, it runs at the server, so it could access any Java libraries. In additions, you could define variables, methods, classes with it, and they are visible to EL expressions of the same page.

CDATA

The code embedded in the zscript element must be a valid XML text. In other words, you must encode the special characters well, such as < must be replaced with &lt;, & with &amp; and so on. In additions to encode individual characters, you could encode the whole code with XML CDATA as follows.

<script><![CDATA[
if (some < another && another < last) //OK since CDATA is used
   doSomething();
]]></script>

As depicted CDATA is represented with <![CDATA[ and ]]>.


  1. The zscript element has an attribute called deferred that could make the evaluation as late as possible

Event Handlers

Second, you could put the code inside an event handler, such that it will execute when the event is received, as depicted below.

<button onClick='alert("event handler for onXXX inside ZUML is also zscript")'/>

Notice the the name of the event must starts with on, and the third letter must be a upper case. Otherwise, it will be considered as a property.

Again, the code is Java, interpreted at run time and running at the server. For client-side listening, please refer to the Client-side Event Listening section.

For sake of discussion, we call it zscript no matter the code is embedded in the zscript element or in an event handler.

Distinguish zscript from EL

Keep in mind, an EL expression is enclosed by ${}.

For example, ${self.label} and ${ok.label} are both EL expressions in the following example:

<window>	
	<button label="ok" id="${self.label}"/>
	${ok.label}		
</window>

On the other hand, in the following example, alert(self.label) is not an EL expression. Rather, it's the zscript code:

<window>	
	<button label="ok" onClick='alert(self.label)'/>		
</window>

You cannot mix the use of EL expressions with zscript:

<window>	
	<!-- It's wrong, for java don't accept syntax as ${}-->
	<button label="ok" onClick='alert(${self.label})'/>		
</window>

Also notice that the evaluation of EL expressions are very fast, so EL can be used in a production system. On the other hand, zscript is suggested to use only in prototyping or quick-fix.

Variables Defined in zscript Visible to EL

A variable defined in zscript is visible to EL expression, unless it is a local variable, which will be discussed later.

<script>
Date now = new Date();
</script>
${now}

Java Interpreter

The default interpreter is based on BeanShell. It is a Java Interpreter.

Scope for Each ID Space

The Java interpreter is a multi-scope interpreter. It creates a scope for each ID space. Since ID space is hierarchical, so is the scopes. If a variable can't be found in current ID space, it will go further to parent's ID space try to resolve the variable.

For example, in the following example, two logical scopes are created for window[1] A and B, respectively. Therefore, var2 is visible only to window B, while var1 is visible to both window A and B.

<window id="A">
    <zscript>var1 = "abc";</zscript>
    <window id="B">
        <zscript>var2 = "def";</zscript>
    </window>
</window>

  1. Built in id space owner includes Window, Page and [[ZK Developer's Reference/UI Composing/Macro Component|macro components.

Declare Local Variable

If a variable is declared inside a pair of the curly braces, it is visible to the scope defined by the curly braces. It is called a local variable. For example,

<zscript>
void echo() {
   String a_local_variable;
}
</script>

Here is another example,

<window>
	<zscript>
	{
	    Date now = new Date(); //local variable
	    abc ="def"; //global variable since not defined before and not Class specified
	}
	String first = "first"; //global variable
	</zscript>
	0: ${first}
	1:${abc}
	2:${now}
</window>

The result shows: 0:first 1:def 2: . It is because now is local variable and invisible to EL expressions. On the other hand, first and abc are both global variables that are visible to EL expressions. Also notice that abc is not declared but assigned directly, and it causes a global variable to be created.

Please refer to Beanshell Documentation, and search "scoping" and "local" for more information.

Use Other Languages

Currently, zscript supports Java, Groovy, Ruby, JavaScript and Python. For example,

<?page zscriptLanguage="Groovy"?>
<window border="normal">
	<vbox id="vb">
		<label id="l" value="Hi"/>
		<button label="change label" onClick="l.value='Hi, Groovy';"/>
		<button label="add label" onClick="new Label('New').setParent(vb);"/>
	</vbox>
	<button label="alert" onClick="alert('Hi, Groovy')"/>
</window>

In additions, you could add your own interpreter by implementing Interpreter. Fore more information, please refer to ZUML Reference.

Version History

Last Update : 2010/11/25


Version Date Content
     



Last Update : 2010/11/25

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.