Designing Reusable UI Components in Sciter. Color-chooser, part I.

This is a start of a sequence of articles explaining design and architecture of reusable components (a.k.a. scripting behaviors) in Sciter.

First of all small specification. We need a component in HTML allowing user to select and apply color.

• Such control shall be defined in HTML as:

  < input type="color-chooser" />



• This input element shall have value property that represents current color. Value is a string "#RRGGBB".


• Color chooser shall allow to select color from palette and "apply" color to e.g. some selection in the text in some editor. So it shall generate two events:




• onColorChanged – when user have changed current color;


• onClick – either user have changed color or clicked on apply arrea ("apply" sub-button).
• Visually such control shall look like as two buttons – one will play a role of "apply" button and other will cause popup window with palette to appear – play role of "popup" button.

Next article will explain structure of the code on the first stage of color-chooser implementation: sdk/lib/color-chooser.tis. You may see demo page of the component is sdk/samples/tests/basics/test-color-chooser.htm.