ZK 5.0 Component Colorbox
Sam Chuang, Engineer, Potix Corporation
November 24, 2009
Applicable to ZK 5.0 and later [Professional/Enterprise Edition]
Introduction
Color is one of the most important factors in a web site with every component having color and the combining of color producing pleasant effects.
In this small talk, I will introduce the new component, the Colorbox. The Colorbox provides an easy way for a person to pick a color. In additions, it is integrated smoothly with the Menu component.
Demo
Here is the Colorbox component demo, we use two colorboxes to change the chart's background.
Demonstration code
- 1. Changing the dial chart's background
Firstly, we have a dial and can set dial's background color by calling DialModel.setFrameBgColor().
After the user selects the color, the onChange event is fired, so we use self.getColor() to get color in hex format. This color is then applied to the dial's background by the line ((DialModel)dial.getModel()).setFrameBgColor(self.getColor());
<colorbox color="#E6E6FA">
<attribute name="onChange">
((DialModel)dial.getModel()).setFrameBgColor(self.getColor());
</attribute>
</colorbox>
- 2. Changing the window's background color using the toolbar's Colorbox
We can embed a colorbox in toolbar, and use self.getColor() to retrieve the color in hex format. Having done this we use Window.setContentStyle() to set the Window's background color.
<window id="window" border="normal" title="Inside Menu" height="400px" width="600px">
<toolbar orient="vertical" width="30px;" height="100%">
<colorbox width="22px" height="12px" color="#FFFFFF">
<attribute name="onChange">
window.setContentStyle("background-color:" + self.getColor());
</attribute>
</colorbox>
</toolbar>
</window>
- 3. Change window's border's background using the Menu's Color Content
In the Menu Component, we can set html content using the content attribute. Furthermore, we can use the content attribute, content="#color=#FFFFFF", to embed Colorbox's functionality into the Menu, and specify color by setting color to #FFFFFF (#color=#FFFFFF ).
When a user selects a color, the onChange event is fired. We can use the property event.value to retrieve the Color in hex format and subsequently, are able to use the Style Component to change the Window's Border's CSS style.
<window id="window" border="normal" title="Inside Menu" height="400px" width="600px">
<style id="style" dynamic="true"/>
<menubar id="menubar">
<menu id="menu" label = "Color" >
<menupopup id="menupop">
<menu label="color picker" content="#color=#FFFFFF">
<attribute name="onChange">
String hex = event.value;
String color=".z-window-overlapped-tl,.z-window-overlapped-tr,.z-window-overlapped-hl,.z-window-overlapped-hr, .z-window-overlapped-hm, .z-window-overlapped-cl, .z-window-overlapped-cr, .z-window-overlapped-br, .z-window-overlapped-br {background-image:none;background-color:" + hex + ";}";
style.setContent(color);
</attribute>
</menu>
</menupopup>
</menu>
</menubar>
</window>
Component Usage
Here is the Colorbox attribute specification table:
| Attribute | Usage | Default Value |
|---|---|---|
| color | Sets the color in Hex format | "#000000" |
| width | Sets the width of the item | "42" (unit is pixel) |
| height | Sets the height of the item | "22" (unit is pixel) |
ZUL Syntax examples
- Use the Colorbox directly
< colorbox color=」#E6E6FA」></colorbox>
- Use the Colorbox within a toolbar
<toolbar>
<colorbox color="#E6E6FA" width="24px" height="13px" />
</toolbar>
- Use the Colorbox inside a Menu
<menubar>
<menu label="color picker" content="#color=#E6E6FA"></menu>
</menubar>
Event Listeners
The Colorbox and Menu components provide an "onChange" event. This event allows the user to execute code when the color is changed:
- onChange: The event is triggered when a user changes the current color
Usage examples
Colorbox: get color hex format string from property
<colorbox onChange='alert(self.color)'/>
Menu : Retrieve the color in hex format string from event's value property
<menu content="#color=#FFFFFF" onChange="alert(event.value)"/>
Summary
The Colorbox makes life easier for both web developer and user. You are able to chose a color by the Color palette, which contains Web-safe colors, or you using the advanced mode.
If you have any problems, please feel free to post on the ZK forum.
Comments
| Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License. |