ZUL Editor is an intelligent text editor design for authoring *.zul & *.zhtml file, when you double click the zul file or zhtml file in Navigator View, Package Explorer View, Project Explorer View, the file will be opened in ZUL Editor automatically. It provides Syntax Coloring, Syntax Check, Mark Occurrence, Content Assistance, JAVA Doc Hovering, Hyperlink Navigation, ZUL file formatting.
1. Use Java Language as script code language in <zscript>...</zscript>, <attribute name='onXXX'>...</attribute>.
2. Surround the script code with <![CDATA[ ]]>, for example:
<zscript><![CDATA[
System.out.println("Hello World!");
]]></zscript>
<button label="SayHello">
<attribute name="onClick">
<![CDATA[
alert("Hello World!");
]]>
</attribute>
</button>
With th add of surrounding <![CDATA[ ]]> in zscript, ZK Studio can provide powerful Content Assist and the code inside the <![CDATA[ ]]> will be syntax colored as Java code.
3. When import package in zscript, use //@IMPORT comment, and separate import section with other zscript code by <![CDATA ]]>:
<zscript>
<![CDATA[
//@IMPORT
import java.io.*;
]]>
<![CDATA[
System.out.println("Hello World");
]]>
</zscript>
4. When you declare method in zscript, use //@DECLARATION comment, and separate method declaration section with other zscript code by <![CDATA ]]>:
<zscript>
<![CDATA[
//@DECLARATION
void sayHello1() {
alert("Hello World 1!");
}
void sayHello2() {
alert("Hello World 2!");
}
]]>
<![CDATA[
sayHello1();
sayHello2();
]]></zscript>
Mark Occurrence is a useful functionality when you need to trace certain variable or component accessing activities in 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 currently opened zul will be marked.
Mark Occurrence also works when token is in EL Expressions.
Syntax Check verify the JAVA code in <zscript>...</zscript> and <attribute name='onXXX'>...</attribute> against JAVA syntax in ZUL Editor.
The script code must be enclosed in <![CDATA[ ]]>, and remember to add //@DECLARATION and //@IMPORT as mentioned above in Coding Convention section when you embedding Java Code in zul file.
The indicators on the right side vertical ruler can help you quickly find out how many error and where the error is in current zul file, click the marker on it can jump to the line which has grammar error.
Also the left side markers will show the appropriate error message to guide you correct the code when you click it.
Move the mouse to the error occur position (marked with red or yellow wavy line), the error message will be shown in tooltip.
Content Assistance helps you in editing zul file by provide context sensitive content as a candidate list that you can choose them directly to quickly complete the code.
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
ZUML & XML tag support content assist, you can invoke it by default Content Assist keyboard shortcut.
Zscript Content Assist can let you coding Zscript code rapidly, it can provide you auto-complete function in <zscript>...</zscript>, <attribute name='onXXX'>...</attribute> code block and event attribute value in the ZUML tag.
The class that is located in JAR file also can be content-assisted, and if you had set the associated source for that JAR file, the Java Doc can be shown aside the candidate list (For how to set source for a certain JAR file, refer to B-2 Add Source Code and Javadoc Resource to JAR File).
Inside the EL Expression you can also invoke the Content Assist by keyboard shortcut.
The content in use & apply attribute also support Content Assist.
Tips: Keyboard shortcut for Content Assist
The default keyboard shortcut for Content Assist in English Version of Eclipse is "Ctrl + Space", you can change the keyboard shortcut in Preference Window, please refer to B-1 Configure keyboard shortcuts for detail.
For easily understanding the source code, ZK Studio support the JAVA Doc hovering. When move the mouse pointer on the code and stand for a while, the JAVA Doc belong to the element that is under the mouse pointer will be shown in tooltip.
You need to set source or JAVA Doc for some JAR files if they don't contain source inside, refer to B-2 Add Source Code and Javadoc Resource to JAR File for how to do it.
Hyperlink Navigation let you easily navigate through project resource, you can invoke it by:
Move cursor to a certain element belongs to the content of ZUL Editor and press F3.
Hold Ctrl key on keyboard, move the mouse pointer over an element, if that element can be convert to hyperlink (that is, it has the resource that we can trace to), there will be a underline for the element, and you can click the hyperlink to reach that resource.
If a literal string in zul file opened by ZUL Editor is a relative path to certain resource in this project's WebContent folder, it can be access though Hyperlink Navigation.
In ZUL Editor, you can navigate to the Java class specified in use="ClassName" & apply="ClassName" attribute by Hyperlink Navigation.
(You have to set source for that class if the class is in a JAR File that doesn't had set source, refer to B-2 Add Source Code and Javadoc Resource to JAR File for how to do it.)
You can use hyperlinking functionality just as Java Editor in Eclipse in <zscript>...</zscript> and <attribute name = "onXXX">...</attribute> code block which use the default JAVA language.
For event attribute of ZUML tag, the content Java code in that attribute value is accessible by Hyperlink Navigation.
.
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.
Also you can use keyboard shortcut to accomplish this task, the default source format keyboard shortcut is Ctrl + Shift + F, you can configure the keyboard shortcut as described in B-1 Configure keyboard shortcuts.