lz.Track is the single instance of the class
lz.TrackService.
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 onmousedragin
and onmousedragout are only sent to the view which received
the onmousedown events. When views are registered using the
lz.Track service, they will receive events
independent of the mouse button state.
In using lz.Track, views register with a particular group.
Activation of that group is typically triggered by a user event. When a group
is active, the lz.Track service will send 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. lz.Track.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 25. Using lz.Track 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">
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>
| Name (CSS property) | Type (tag) | Type (js) | Default | Category |
|---|---|---|---|---|
LzTrack
|
lz.TrackService | readonly | ||
The track service. Also available as the global
lz.Track.
|
||||
Methods
-
activate() -
activate tracking for a particular group. Any number of groups can be tracked simultaneously. This is useful for tracking mechanisms like menus.
-
deactivate() -
-
register() -
Parameter Name Type Description v lz.view a reference to the view to add to the track group group String the name of the track group
-
unregister() -
Parameter Name Type Description v lz.view a reference to the view to remove from the track group group String the name of the track group
Events