ZK Developer's Reference/UI Composing/ZUML/Scripts in ZUML

zscript

For fast prototyping, you could embed codes in ZUML page. There are two ways: the zscript element and the event handler.

First, you could embed the code inside the zscript element as follows.

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

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.

---

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.

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")'/>

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, EL is enclosed by ${}.

For example, ${self.label} is EL:

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

While alert(self.label) is not EL, it's a zscript code:

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

You cannot mix the use of EL 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, while the execution of zscript code is slow. EL can be used in a production system, while zscript is suggested to use only in prototyping or quick-fix.

Java Interpreter

Scope for Each ID Space

Java interpreter (BeanShell) 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 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>

---

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>
	String first = "first";
	{
	    Date now = new Date();
	    abc ="def";
	}
	</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's manual and search "scoping"、"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

Version	Date	Content