Visual Editor

ZUL Visual Editor provides a visual preview of the ZUL Editor's currently opened zul file. The ZUL Visual Editor can be opened by clicking [Window]/[Show View]/[Others] and selecting ZK > ZUL Visual Editor.

WYSIWYG Development

The ZUL Visual Editor displays the preview of the ZUL document and is updated instantly according to the zul file content changes.

There are two control buttons on the ZUL Visual Editor, the button on the right is used to refresh the content shown in the editor just in case it isn't automatically refreshed. The button on the left is used to restart the ZUL Visual Editor if you manually change the project's library file (JAR).

If you select a component in the result preview of the ZUL Visual Editor, the corresponding code segment within the ZUL Editor and the component within the Hierarchical View of the Web Page will be highlighted.

Library Quick Switch

By clicking the triangle button on the ZUL Visual Editor's toolbar you are able to change the ZK package which is currently used by the project. You can configure the available packages in the preferences.

(Note: changing the library that ZUL Visual Editor uses via this menu will automatically change the Visual Editor Project ZK Library preference for this project.)

There are numerous options for ZUL Visual Editor you can configure in ZK Studio, please refer to the Global Preferences section for more details.

Preview a ZUL File in a Pure Java Project

You can preview the ZUL file when not using a Dynamic Web Project. With ZKs Package management, it is easy to include ZK packages using Eclipse's Global settings. The Loading and unloading of the ZK Library is done automatically and the user is not required to manually add or remove any JAR files.