New Features of ZK Studio 0.8.x

Charles Pao, Engineer, Potix Corporation
ZK Studio 0.8.3 : October 06, 2008

Version & Requirement

• Eclipse 3.3.X (Europa) with WTP platform
• Eclipse 3.4.X (Ganymede) with WTP platform(since ZK Studio 0.8.3)
• ZK Version 2.4 and later

Introduction

In this article, I'll demonstrate those features in ZK Studio to facilitate developing ZK-enabled application.

• Intelligent ZUL Editor
  • Content Assistance (a.k.a: Code Assist)
    • Content Assistance in ZUML & XML tag
    • Content Assistance in EL Expression
    • Content Assistance with Helper JAVA Doc
    • JAVA Doc Hovering
  • Syntax Check
  • Syntax Coloring
  • Mark Occurrence
  • Hyperlink Navigation
    • Zscript Hyperlink  New!
• Eclipse UI Integration
  • ZUL Structure Outline View
  • ZUML Tag Property View
  • ZUL Palette View  New!
• About Eclipse 3.4 Ganymede  New!
  • Maually Update if you've already installed ZK Studio v0.8.2 or before  New!
• Troubleshoot

Intelligent ZUL Editor

In order to efficiently and correctly code a ZUL file, we have made many improvements in coding experience in Eclipse.
The Intelligent ZUL Editor is a *.zul file editor inside Eclipse, and is the most major improvement in this release of ZK Studio.

Content Assistance (a.k.a: Code Assist)

Ever wondered what attributes to type for this ZUML tag when composing a ZUL file?
Now just press the Content Assistance shortcut key (default in Eclipse is alt + /), and the Intelligent ZUL Editor will pop up for you the proper suggestions in a list.

Content Assistance in ZUML & XML tag

It is no longer necessary to specify the zul.xsd location as mentioned in Developer Guide's Auto-completion with Schema section. The Intelligent ZUL Editor supports this function automatically.

Content Assistance in ZUML & XML tag

Content Assistance in Zscript

Works not only for ZUML tag, but also for Java codes in <zscript> and event code blocks!

Content Assistance in <zscript>

Content Assistance in EL Expression

Of course, EL Expression is not absent from this amazing feature.

Content Assistance in EL Expression

Content Assistance with Helper JAVA Doc

In addition to showing the proposals in Content Assistance, the supplementary Java Doc can be shown aside.

Show Java Doc next to Content Assistance pop-up menu

JAVA Doc Hovering

Just as in Eclipse Java Editor, the ZUL Editor will also pop up Java Doc when a user hovers the mouse pointer on the code.

Syntax Check

Codes in <zscript> element and <attribute> element, enclosed in <![CDATA[ and ]]> with default JAVA scripting language, are verified against Java syntax automatically.

Syntax Coloring

Codes in <zscript> element and <attribute> element, enclosed in <![CDATA[ and ]]> with default JAVA scripting language are supported with syntax coloring.

Mark Occurrence

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.

Hyperlink Navigation

Press Ctrl key and click mouse button on the portion of code you want to navigate to. Currently we support link to URL, Project Resource, and the Java class as specified in the use ZUML tag attribute.

Ctrl-Click the URL, jump to that file!

Here is the Project Resource Hyperlink Navigation demonstration. Finding the right one among those similar files would never be a problem anymore.

Ctrl-Click the path, jump to that resource file!

And here is another significant feature. You can navigate to the Java class specified in use="ClassName" attribute!

Ctrl-Click the Class Name, jump to that source file!

Zscript Hyperlink  New!

You can use hyperlinking functionality just as Java Editor in Eclipse in <zscript>...</zscript> and <attribute name = "onEventName">...</attribute> code section which use the default JAVA script language. And the default keyboard shortcut F3 for the "Open Declaration"” function in Eclipse is also available.

And some special attribute which points to specific JAVA code can also have hyperlinking and "Open Declaration" function too.

Eclipse UI Integration

Besides the feature introduced in Intelligent ZUL Editor, ZK Studio also integrates some UI parts of Eclipse:

ZUL Structure Outline View

It can show you the whole zul page structure in a tree view like in Eclipse Outline View, with visual icons to distinguish different tag elements and an additional id notation in parentheses to distinguish the same kind of tag element.

ZUML Tag Property View

When you select a ZUML tag element in Intelligent ZUL Editor or in ZUL Structure Outline View, the associated attribute information will be listed in the Eclipse's property view.

Certainly, you can edit the value directly. For some properties with enumeration attributes (e.g. true/false, normal/none, left/center/right), an informative combo box editor is used to help you input the correct value.

ZUL Palette View   New!

ZUL Palette View is a custom view of studio, you can open it by clicking 'Window > Show View > Others > ZK > ZUL Palette'.

ZUL Palette shows the full components/directives of ZK as an item in palette, those items are categorized in different groups.

You can select a item and drag it to ZUL Editor or Outline. When you drag an item to ZUL Editor, it will insert a template text to the position where you dragged. When you drag an item to Outline View on a special tree node, it will insert a template XML node to the position where you dragged.

About Eclipse 3.4 Ganymede  

1. Maually Update if you've already installed ZK Studio v0.8.2 or before:
   If you are using Eclipse 3.4 and you've already installed ZK Studio v0.8.2 or before, please update ZK Studio to v0.8.3 manually with following steps:

   1. [Help] > [Software Updates]
   2. [Add Site] in [Available Software] (If there isn't a ZK Studio update site already listed)
      location : http://studioupdate.zkoss.org/studio/update
   3. Expand that update site node, select the newest plugin which is under the ZK Studio site.
   4. Click [Install...] button

2. Mark Occurrence:
   The Mark Occurrence feature in ZK Studio running on the Eclipse 3.4 Ganymede has only one kind of marking style, unlike the Mark read and write occurrences feature in Eclipse 3.4

3. We welcome and appreciate to bug reports of ZK Studio running on the Eclipse 3.4 Ganymede,
   please post bugs to our sourceforge web site or our forum.

Troubleshoot

1. Q:

   Why I can't see the Syntax Colored zscript code in my zul page?

   A:

   You have to insert <![CDATA[ and ]]> inside the <zscript> and <attribute> code block.




2. Q:

   I have installed the ZK Studio plugin in my Eclipse. When I open a zul file by double clicking the entry in Project Explorer in Eclipse, it is not opened by the Intelligent ZUL Editor (), but is opened by the Default Eclipse XML Editor(). What's wrong?

   A:

   In some our older smalltalks and documents, they instructed ZK developers to set *.zul file to be handled by Eclipse's built-in XML Editor; this should be cleared before install the plugin. If not, please open the Eclipse preference setting dialog ([Window]\[Preferences...]\General\Editors\File Associations) and set the "ZUL Editor" as the default editor for *.zul files.

   

   
   And You can force Eclipse to open zul file in ZUL Editor by right-click menu entry in Navigator, Package Explorer, Project Explorer View.

   




3. Q:

   Why I always got JAVA Syntax Error mark in my code, even if it can run correctly on ZK?

   A:

   Currently you have to append two special comments: //@DECLARATION and //@IMPORT in zscript code block inside the <zscript>. The //@DECLARATION is used when declaring classes and functions; the //@IMPORT is used when there is a JAVA import directive; these two comments can only be used only once in one code section surrounded with <![CDATA[ ]]>.
   And if you define a class in zscript, don't use the access modifier public, just use the default access modifier.




4. Q:

   I use the non-JAVA Syntax such as var zoom = self.zoom in my code. Why the ZUL Editor shows me that the code is wrong?

   A:

   Currently Syntax Check is for JAVA only, so the code like var zoom = self.zoom will cause warning.




5. Q:

   Why the URL Hyperlink doesn't work when I use src="someFile.zul"?

   A:

   You have to specify Absolute URL Path. Such as src="/someFile.zul".

Installation

• ZK Studio Installation Guide
• ZK Studio 0.8.x User Guide