ZK 5.0 Component Colorbox

Author
Sam Chuang, Engineer, Potix Corporation

Date
November 24, 2009

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