Description

This service helps tracking the mouse over a number of views, as in common when implementing menus and drag-and-drop behaviors. When the mouse is down, standard view events such as ondragin and ondragout are only sent to the view which received the onmousedown events. When views are registered using the LzTrack service, they will receive events independent of the mouse button state.

In using LzTrack, views register with a particular group. Activation of that group is typically triggered by a user event. When a group is active, the LzTrack service will events to views in the active group, whenever the mouse position enters (ontrackover), leaves (ontrackout) or when the mouse button goes up (ontrackup).

Example: a simple color picker

This simple color picker displays its color in a rectangle, then when the mouse is down over the colored rectangle, a series of colors are displayed (as displayed below). While the mouse is down, the user may move the mouse across the color choices. When the mouse button goes up over a color, that color is selected and the color menu disappears.

The code below defines the class "colorspot" which represents a tracked view. This class handles visual state changes triggered by the track events and sends an event to its parent when a new color is selected. LzTrack.register is called by oninit to add the instance of the view to its group. The group name is defined as an attribute of the class, but simply bound to an attribute of the parent. For simple menu tracking, it is typical for a set of sibling views to share the same track group; however, tracked views that share the same trackgroup may be anywhere in view hierarchy.

Example 17. Using LzTrack to build a color chooser

 <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">
         LzTrack.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); LzTrack.activate('mymenu');"
       onmouseup="this.colorpicker.setVisible(false); LzTrack.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>
 

Superclass Chain

Known Subclasses

Details

JavaScript Synopsis