ZUL Editor

From Documentation


ZUL Editor is an intelligent text editor designed for authoring *.zul & *.zhtml files. When you double click the zul file or zhtml file in the Navigator View, Package Explorer View or Project Explorer View the file will be opened in the ZUL Editor automatically. The editor provides Syntax Coloring, Syntax Check, Mark Occurrence, Content Assistance, JAVA Doc Hovering, Hyperlink Navigation and ZUL file formatting.

Coding Conventions for Embedding Java Code in Web Pages

1. Use Java within <zscript>...</zscript> and <attribute name='onXXX'>...</attribute> tags

2. Surround scripting code with a <![CDATA[ ]]> tag, for example:

 <zscript>    <![CDATA[
     System.out.println("Hello World!");
 ]]></zscript>


 <button label="SayHello">
     <attribute name="onClick">
     <![CDATA[
         alert("Hello World!");
     ]]>
     </attribute>
 </button>

Zk Studio provides powerful Java content assistance and syntax coloring within the <![CDATA[ ]]> tag.


3. You can import Java classes using the import syntax within zscript tags, just like in the Java editor.

<zk>
	<zscript><![CDATA[
	import java.math.*;
	
	int x = 500;
	int y = 300;
	System.out.println(Math.max(x,y));
	]]></zscript>
</zk>

4. You can also declare methods and classes within zscript tags:

<zk>
	<zscript><![CDATA[
	boolean getResult(){
		return true;
	}
	
	class Bean{
		String name;
		public String getName(){
			return name;
		}
	}
	
	if(getResult()){
		new Bean().getName();
	}
	]]></zscript>
</zk>

Toggle Zscript Comment

To toggle comments within the zscript, you should use the keyboard shortcut (default key is Ctrl + /) when the zscript code has focus. You can also toggle multiple lines of comments using the same shortcut but by selecting multiple lines of zscript code in editor. You can reconfigure the keyboard shortcut as described in B-1 Configure keyboard shortcuts.

Zscript Formatting

You can format codes inside zscript now. The menu sequence is Source->Format.

Mark Occurrences

Mark Occurrence is a useful function when you need to trace a certain variable or component within the code. It can show the variable both inside and outside zscript.

Move the cursor to a certain variable, object, method or class declaration, all the corresponding tokens (read/write access) in the currently opened zul file will be marked.

Mark1.png

Mark Occurrence also works when the token is located within EL Expressions.

El mark.png

Syntax Checking

Syntax checking verifies the Java code within <zscript>...</zscript> and <attribute name='onXXX'>...</attribute> tags against the Java syntax.

The script code must be enclosed within a <![CDATA[ ]]> tag, and remember to add //@DECLARATION and //@IMPORT as mentioned above when embedding Java Code in a zul file.

The vertical ruler indicators on the right hand side will help you discover how many errors are present in the zul file and the location of said errors. By clicking on the marker you can jump to the line which contains the error.

SyntaxCheckRightBar.png

The markers on the left hand side show an appropriate error message when clicked.

SyntaxCheckLeftMark.png

Move the mouse to the occurrence of the error, marked by a red or yellow line and the error message will be display in a tooltip.

SyntaxCheckTooltip.png

Syntax Coloring

Java code enclosed within <zscript> tags, <attribute> tags and the <![CDATA[*information*]]> tag are colored appropriately according to the syntax.

Syntax.png

Content Assistance

Content Assistance helps you edit a zul file by providing context sensitive content within a list for ease of insertion.

For basic usage scenario, please refer to eclipse official tutorial:

http://help.eclipse.org/ganymede/topic/org.eclipse.jdt.doc.user/gettingStarted/qs-ContentAssist.htm
http://help.eclipse.org/ganymede/topic/org.eclipse.wst.sse.doc.user/topics/tsrcedt005.html

ZUL & XML Tag Content Assistance

ZUML & XML tags support content assistance and can be invoked by using the default content assistance keyboard shortcut.

ContentAssistXMLTag.png

Zscript Content Assistance

Zscript content assistance allows you to rapidly implement code by providing auto completion functionality within <zscript>...</zscript>, <attribute name='onXXX'>...</attribute> code blocks and event attribute values in the ZUML tag.

ContentAssistZscript.png

Classes located in JAR files can also be included in content assistance. In addition to that if the associated source for the JAR file is present JavaDoc can be shown beside the content assistance window.

ContentAssistJavaDoc.png

EL Expression Content Assistance

Inside the EL Expression you can also invoke the content assist via a keyboard shortcut.

ContentAssistEL.png

ZUL Tag Attribute Content Assistance

The content within use & apply attributes also support content assistance.

ContentAssistinAttribute.png

Tips: Keyboard shortcut for Content Assist

The default keyboard shortcut for content assist in the English Version of Eclipse is "Ctrl + Space", you can change this shortcut in the Preferences Window. Please refer to B-1 Configure keyboard shortcuts for more detail.

Java Doc Hovering

For more information as you develop, ZK Studio provides Java Doc hovering functionality. When hovering over the code, Java Doc belonging to the element will be shown in a tooltip.

JAVADocHover.png

Please note in order for content assistance and JavaDoc to work with JAR files you need to set source and/or Java Doc of said files, please refer to B-2 Add Source Code and Javadoc Resource to JAR File for more information on how to do this.

Hyperlink Navigation

Hyperlink Navigation allows you to navigate through project resources easily. To make use of this feature please follow these steps:

  1. Move your cursor to a certain element within the ZUL Editor and press F3
  2. Hold Ctrl key on keyboard, move the mouse pointer over an element, if that element can be convert to hyperlink (that is, if the resource supports hyperlink functionality), the element will be underlined and clicking the hyperlink will take you to the subsequent resource.

URL Hyperlinks

All elements in the ZUL Editor that represent a URL are usable in this manner.

Project Resource Hyperlinks

If a literal string within a zul file is a relative path to a resource in the projects WebContent folder, then it can be accessed using Hyperlink Navigation. However, please note that the zul file must have been opened by the ZUL Editor to perform this functionality.

ZUL Tag Attribute Hyperlinks

Using the ZUL Editor, you can navigate to the Java class specified in use="ClassName" & apply="ClassName" attributes using Hyperlink Navigation.

Javaclass hyperlink.png

(For this to work you need to set a source file for that class. If the class is within a JAR File which does not have a corresponding source file, please refer to B-2 Add Source Code and Javadoc Resource to JAR File for more information on how to do this.)

Zscript Hyperlinks

Zscript hyperlink navigation also works in the same manner as Eclipse's Java editor. Within <zscript>...</zscript> and <attribute name = "onXXX">...</attribute> tags you are able to navigate to other functions using hyperlink functionality (Ctrl + click the resource).

A ZUML tag's event attribute value is also accessible using Hyperlink Navigation.

AttrHyperlink.png

In order to format the content of a zul file, including the zul and zscript code, you need to right click on the editor and select 『』Source > Format』』.

In order to format part of the content, you should make a selection first and then follow the above instruction.

You can use a keyboard shortcut to accomplish this task, the default source format keyboard shortcut is Ctrl + Shift + F You can reconfigure the keyboard shortcut as described in B-1 Configure keyboard shortcuts.

ZUL File Formatting

ZUL Editor support zul file source formatting function, in the current opened zul editor, right click and select the Format option, the source code will be formatted as standard xml file, but the code content in <zscript>...</zscript> and <attribute name = "onEventName">...</attribute> will be preserved. SourceFormat.png

Also you can use keyboard shortcut to accomplish this task, the default source format keyboard shortcut is Ctrl + Shift + F



Last Update : 2010/12/06

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