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.