Visual Editor"

From Documentation
Line 15: Line 15:
 
[[Image:visualEditoSelectElementInsider.png]]
 
[[Image:visualEditoSelectElementInsider.png]]
  
'''ZUL Visual Editor Runtime Quick Switch'''
+
=== 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.
 
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.

Revision as of 08:08, 3 December 2010


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. When you select a certain component within the ZUL Editor, the component inside the ZUL Visual Editor is highlighted with a blue dash-line rectangle frame, and if that component has an id attribute, an ID tag is shown in the visualized content area.

VisualEditor.png

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.

VisualEditoSelectElementInsider.png

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. ZulVisualEditorMenu.png

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


Use the Visual Editor in Java projects

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.



Last Update : 2010/12/03

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