12 Modify Layout of Content Elements in a Panel
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (8.09 MB, 764 trang )
left="5" right="5" top="5" bottom="5"
minWidth="0" minHeight="0" height="30">
left="10" height="30" verticalAlign="middle"
fontWeight="bold" />
60 | Chapter 2: Containers
www.it-ebooks.info
CustomPanelSkin is an extension of spark.skins.SparkSkin. It enters into a contract with
spark.components.Panel (the host component declared in the [HostComponent] metatag)
to expose the content elements for the title, content group, and control bar and any
necessary elements for display. The default layout of the target panel in this example
is changed by positioning the control bar at the top and the title bar at the bottom.
These content elements are declared as controlBarGroup and titleDisplay, respectively,
within a Group container with a VerticalLayout.
Visual elements provided in the controlBarContent property of a panel are added to the
controlBarGroup skin part, and visual elements added directly to the panel are displayed
in the contentGroup skin part. The title property value of the Panel container is printed
out in the titleDisplay component. To apply a custom skin to a Panel, set the skin
Class property value to the fully qualified name of the custom skin class, as in the
following example:
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
id="authors" source="{['Josh Noble',
'Garth Braithwaite', 'Todd Anderson']}" />
width="300" height="120"
skinClass="com.oreilly.f4cb.CustomPanelSkin">
click="{printField.text=authorCB.selectedItem}" />
The full extent of skinning and style possibilities available in the Flex 4 SDK is discussed
in Chapter 6, but the examples presented here demonstrate the basic contractual agreement that a custom skin class must adhere to in order to modify the look and feel of a
panel containing an optional control bar group display.
2.12 Modify Layout of Content Elements in a Panel | 61
www.it-ebooks.info
2.13 Track Mouse Position Within a Container
Problem
You want to keep track of the mouse position within a container for visual elements.
Solution
Add an event handler for a mouse gesture event and use the contentMouseX and
contentMouseY properties to retrieve the mouse position within the container, regardless
of the position of the interactive element that dispatched the event.
Discussion
When an event handler for a mouse gesture is declared for an event on a container,
a MouseEvent object is passed to the method with the localX and localY properties
attributed to the mouse position within the interactive element that originally
dispatched the event. UIComponent-based elements have contentMouseX and content
MouseY read-only properties that relate to the mouse position within those elements,
regardless of its position within any child elements. Because the properties are readonly, their values cannot be bound to. You can retrieve these values within an event
handler for a mouse gesture, as in the following example:
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
62 | Chapter 2: Containers
www.it-ebooks.info
/>
/>
/>
/>
/>
/>
import mx.graphics.SolidColor;
private var bmd:BitmapData;
private function handleGroupCreation():void
{
bmd = new BitmapData(group.contentWidth, group.contentHeight);
bmd.draw( group );
}
private function handleMouseMove( evt:MouseEvent ):void
{
var xpos:int = group.contentMouseX;
var ypos:int = group.contentMouseY;
var rectColor:SolidColor = new SolidColor(bmd.getPixel(xpos,
ypos));
chip.fill = rectColor;
}
contentLocalPoint.text = "Content Local: " + xpos + " : " + ypos;
mouseLocalPoint.text = "Mouse Local: " + evt.localX + " : "
+ evt.localY;
]]>
creationComplete="handleGroupCreation();"
mouseMove="handleMouseMove(event);">
2.13 Track Mouse Position Within a Container | 63
www.it-ebooks.info
