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

Color chooser screenshotThis 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.

1 thought on “Designing Reusable UI Components in Sciter. Color-chooser, part I.”

  1. Use HTML color picker if you need to choose from an almost infinite variety of colors. Also, if you like a color scheme of a web page view Tip142 for a fantastic tool that can be used to gather that page’s color codes.

Comments are closed.