LFC-$40.lzx

<canvas height="60">
   <class name="colorspot" clickable="true" width="22" height="22" bgcolor="0x000000">
     <attribute name="mycolor"/>

     <attribute name="trackgroup" type="string" value="${parent.trackgroup}"/>
     <view name="spot" bgcolor="${parent.mycolor}" x="2" y="2" width="18" height="18"/>
     <handler name="oninit">
         lz.Track.register(this, this.trackgroup);
     </handler>
     <handler name="onmousetrackover">
         setAttribute('bgcolor', 0xdedede); // hilite: gray
     </handler>

     <handler name="onmousetrackout">
         setAttribute('bgcolor', 0x000000); // normal: black
     </handler>
     <handler name="onmousetrackup">
         parent.onnewcolor.sendEvent(this.spot.bgcolor);
     </handler>
   </class>

   <view bgcolor="0x0000ff" width="20" height="20" onmousedown="this.colorpicker.setVisible(true); lz.Track.activate('mymenu');" onmouseup="this.colorpicker.setVisible(false); lz.Track.deactivate('mymenu');">
     <view name="colorpicker" visible="false" x="10" y="10">
       <attribute name="trackgroup" value="mymenu" type="string"/>
       <handler name="onnewcolor" args="newcolor">
           parent.setAttribute('bgcolor', newcolor);
       </handler>

       <simplelayout axis="x"/>
       <colorspot mycolor="0x0000ff"/>
       <colorspot mycolor="0x00ff00"/>
       <colorspot mycolor="0xffff00"/>
       <colorspot mycolor="0xff0000"/>
       <colorspot mycolor="0x00ffff"/>

     </view>
   </view>
   <text>Click on the square, then release the mouse button to select a new color.</text>
   <simplelayout axis="y" spacing="20"/>
 </canvas>