ZK Style Designer"

From Documentation
(Created page with '{{ZKStudioEssentialsPageHeader}} == Introduction == == Step by Step == {{ZKStudioEssentialsPageFooter}}')
 
Line 1: Line 1:
 
{{ZKStudioEssentialsPageHeader}}
 
{{ZKStudioEssentialsPageHeader}}
== Introduction ==
+
 
== Step by Step ==
+
== ZK Style Designer ==
 +
<nowiki>ZK Style Designer helps you customize the ZUML component's CSS Style easily. To use the ZK Style Editor you need to create a new CSS Style Sheet file (*.css) and open it with ZK Style Editor by right clicking the .css file, then selecting [</nowiki>'''<nowiki>Open With]/[ZK Style Editor]</nowiki>''' from the context menu.
 +
 
 +
<span style="padding: 2px; margin:3px;border: solid orange 2px;font: 150%">'''Note''': ZK Style Editor is for ''ZK version 3.5.2 and above only''.</span>
 +
 
 +
[[Image:openWithZKStyleDesigner.png]]
 +
 
 +
On the top toolbar in the ZK Style Designer, the leftmost button is used to create '''"rules"''' for certain ZUML components. Rules can be used in ZK to specify the '''"sclass"''' of a component.
 +
 
 +
[[Image:newCSSrule.png]]
 +
 
 +
You have to specify the Style Type that you want to customize in this rule. The Style Type is the ZUML component name and append it with a "'''-'''" and then include its' mold name.
 +
 
 +
[[Image:selectStyleTypeforRule.png]]
 +
 
 +
After creating the rule, select it and the right hand side panel will show the options that you are able to customize.
 +
 
 +
[[Image:zkStyleDesignerGUI.png]]
 +
 
 +
With the help of ZUL Visual Editor, you can instantly see a preview of the rule's result.
 +
 
 +
[[Image:zkStyleDesignerwithZULVisualEditor.png]]
 +
 
 +
The generated rules can be managed using the top toolbar in ZK's Style Designer. The functionality of the buttons from left to right is:
 +
 
 +
#Create a rule
 +
#Rename a rule
 +
#Move selected rule up by one
 +
#Move selected rule down by one
 +
#Delete the selected rule
 +
#Write information to a CSS file
 +
#Open the ZUL Visual Editor
 +
 
 +
[[Image:zkStyleDesignerToolbar.png]]
 +
ZK Style editor's tab name "'''source'''" provides a source view of the real CSS code in the CSS Style Sheet. You can do minor customization here.
 +
 
 +
[[Image:zkStyleDesignerSourceView.png]]
 +
 
 +
<div style="padding: 2px; margin:3px;border: solid orange 2px;font: 150%">'''Note''':<br/>Don't remove the comments that ZK Style Editor generated or the ZK Style Designer will treat it as a custom rule in the CSS Style Sheet file. If you do this you will not be able use the GUI Interface of ZK Style Editor to remove it.</div>
 +
 
 +
 
 +
On the left there's an option that allows you to switch between the Style Designer's compatible ZK versions.
 +
 
 +
[[Image:zkStyleDesignerVersionSwitch.png]]
 +
 
 +
<div style="padding: 2px; margin:3px;border: solid orange 2px;font: 150%">'''Note:''' <br/>Once you switch the ZK version of Style Designer, be sure to change the applied ZK version for Visual Editor accordingly:<br/>[[Image:zkVisualEditorVersionSwitch.png]] </div>
 +
 
 +
A sample to use style designer to modify the font color of window content.
 +
1. copy generated <style>...</style> component in the css
 +
2. Assign sclass attribute to the style applying window.
 +
 
 +
<source lang="xml">
 +
<?page title="Auto Generated index.zul"?>
 +
<zk>
 +
<style>
 +
.styledwin .z-window-embedded-cnt, .styledwin .z-window-embedded-cnt-noborder{
 +
color : #FF0000;
 +
}
 +
 +
</style>
 +
<window title="Hello World!!" border="normal" width="200px" sclass="styledwin">
 +
 
 +
<label value="You are using: ${desktop.webApp.version}"/>
 +
 
 +
</window>
 +
</zk>
 +
</source>
 +
 
 
 
 
{{ZKStudioEssentialsPageFooter}}
 
{{ZKStudioEssentialsPageFooter}}

Revision as of 07:18, 6 December 2010



ZK Style Designer

ZK Style Designer helps you customize the ZUML component's CSS Style easily. To use the ZK Style Editor you need to create a new CSS Style Sheet file (*.css) and open it with ZK Style Editor by right clicking the .css file, then selecting [Open With]/[ZK Style Editor] from the context menu.

Note: ZK Style Editor is for ZK version 3.5.2 and above only.

OpenWithZKStyleDesigner.png

On the top toolbar in the ZK Style Designer, the leftmost button is used to create "rules" for certain ZUML components. Rules can be used in ZK to specify the "sclass" of a component.

NewCSSrule.png

You have to specify the Style Type that you want to customize in this rule. The Style Type is the ZUML component name and append it with a "-" and then include its' mold name.

SelectStyleTypeforRule.png

After creating the rule, select it and the right hand side panel will show the options that you are able to customize.

ZkStyleDesignerGUI.png

With the help of ZUL Visual Editor, you can instantly see a preview of the rule's result.

ZkStyleDesignerwithZULVisualEditor.png

The generated rules can be managed using the top toolbar in ZK's Style Designer. The functionality of the buttons from left to right is:

  1. Create a rule
  2. Rename a rule
  3. Move selected rule up by one
  4. Move selected rule down by one
  5. Delete the selected rule
  6. Write information to a CSS file
  7. Open the ZUL Visual Editor

ZkStyleDesignerToolbar.png ZK Style editor's tab name "source" provides a source view of the real CSS code in the CSS Style Sheet. You can do minor customization here.

ZkStyleDesignerSourceView.png

Note:
Don't remove the comments that ZK Style Editor generated or the ZK Style Designer will treat it as a custom rule in the CSS Style Sheet file. If you do this you will not be able use the GUI Interface of ZK Style Editor to remove it.


On the left there's an option that allows you to switch between the Style Designer's compatible ZK versions.

ZkStyleDesignerVersionSwitch.png

Note:
Once you switch the ZK version of Style Designer, be sure to change the applied ZK version for Visual Editor accordingly:
ZkVisualEditorVersionSwitch.png

A sample to use style designer to modify the font color of window content. 1. copy generated <style>...</style> component in the css 2. Assign sclass attribute to the style applying window.

<?page title="Auto Generated index.zul"?>
<zk>
<style>
.styledwin .z-window-embedded-cnt, .styledwin .z-window-embedded-cnt-noborder{
	color : #FF0000; 
}
	
</style>
<window title="Hello World!!" border="normal" width="200px" sclass="styledwin">

<label value="You are using: ${desktop.webApp.version}"/>

</window>
</zk>



Last Update : 2010/12/06

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