Tree Item ToolTips

Here is how you can set custom tooltips in Flex 3 on each item in a Tree.

First, you have to set the following properties on the Tree:

• showDataTips="true" - causes tooltips to be shown
• dataTipFunction="myDataTipFunction" - sets the function which returns the tooltip for each item
• itemRenderer="ToolTipItemRenderer" - tells the tree to use our custom renderer (which extends the default TreeItemRenderer)

The itemRenderer isn't necessary unless you want to have control over where the tooltip is positioned (see below).

Also note that if you set the dataTipField property on the tree instead of the dataTipFunction then your tooltips will only show up when the tree item isn't fully visible due to scrollbars. By setting the dataTipFunction it forces the tooltips to always show when the mouse is over the tree node.

Now, on to the next problem. By using the method above the tooltips are always displayed. But the default position for the tooltip is right on top of the tree node, which is annoying. So this is why we use our own custom item renderer so that we can position the tooltip below or above the node (or anywhere you want it).

Here is an example with View Source enabled:

Custom Components Live Preview (Design Mode)

If you have created your own component and you drag it onto your Flex app in Design Mode and it appears as a tiny almost invisible square on your screen, then watch the video below to see how you can get it working properly (like the default controls do).

I found this awesome video tutorial on YouTube that explains how you can create what is called a Live Preview of your component so that your custom component actually appears with the right appearance and dimensions.



Be sure to check out the author's blog at blog.flashgen.com.

The end result that I learned from this video is that if you have a Flex Project which contains your custom component, and you try to use it in an MXML file then it won't work properly. If the custom component is in a separate Flex Library Project (or SWC) then it will work properly.

DragHandle, ResizeHandle

Here are two customizable drag and resize handles:


You can set the following properties:

• rows - sets the number of rows of dots
• columns - sets the number of columns of dots
• dotSize - sets the dot size (defaults to 2)
• dropShadowEnabled - sets whether a drop shadow is used (defaults to false)
• dropShadowColor - sets the drop shadow color
• keepOnTop - if true then the handle will be on top of the other sibling components
• positionResizeHandle - If true then the resize handle will be positioned in the bottom right corner of the parent (ResizeHandle only)

* Note: if you explicitly set the width and height of the DragHandle or ResizeHandle, then the rows and columns properties are ignored. In this case as many dots are rendered as will fit into that area.

You can set the following styles too:

• backgroundColor, backgroundAlpha - sets the background color alpha for the drag/resize handle
• dragHandleColor, dragHandleAlpha - sets the color and alpha value for the drag handle
• resizeHandleColor, resizeHandleAlpha - sets the color and alpha value for the resize handle

These two components are used in all the Resizable Containers.

Image CheckBox and RadioButton

Here are two custom components that extend the CheckBox and RadioButton classes to render an image in between the checkbox/radiobutton icon and label.

The main property to set is imageSource which acts just like the Image.source property.

The image position depends on the labelPlacement property (left, right, top, bottom) and the horizontalGap style.

You can also set the imageWidth and imageHeight properties to scale the image down. If you only set one of those properties then the other one is calculated to keep the image's width and height ratio the same.


Note that the ImageCheckBox actually extends my flex.utils.ui.CheckBox class and not the expected mx.controls.CheckBox class.

The flex.utils.ui.CheckBox class supports backgroundColor and backgroundAlpha styles, and as a result the background is always painted. But the default alpha value is 0, so usually you won't see the background unless you set the background color and alpha. The reason for this is that the default mx.controls.CheckBox class has a gap between the checkbox icon and the label (which is the horizontalGap style). This gap causes mouse out events to fire when your cursor moves from the icon or label into this gap. As a result the checkbox tooltip will disappear, and the checkbox will not have the rollover styles. So by painting an invisible background color over the whole area of the checkbox this problem doesn't occur. Same thing applies with the RadioButton class.

Drawing Dashed Lines, Arcs, and Cubic Curves

The ActionScript Graphics class supports drawing solid lines and quadratic curves. But there isn't native support for dashed lines or cubic (Bezier) curves.

I've created a sample application that shows the three line types: straight, quadratic curve and cubic curve. It also lets you choose between showing a solid line, a dashed line, or both. The line thickness can also be adjusted.



I also got a little carried away and added the quadratic and cubic control points as buttons that you can drag around the canvas to change the curve.

Most of the drawing functionality for these examples is in the GraphicsUtils.as class that contains the following static functions:

• drawLine() - draws a straight line, either solid (using Graphics.lineTo() function) or dashed
• drawQuadCurve() - draws a quadratic curve, either solid (using Graphics.curveTo() function) or dashed
• drawCubicCurve() - draws a cubic curve (two control points), either solid or dashed. The curve is an approximation done by dividing the curve into many small segments and drawing straight lines
• drawCircle() - draws a circle, either solid (using Graphics. drawCircle() function) or dashed
• drawArc() - draws an arc, either solid or dashed

The dashed lines are drawn by dividing the line into many small segments to draw the dashes. By default a dash length of 10 pixels is used, but that is customizable.

The equations used to calculate the values at any point along the line for the three cases were found on the Wikipedia entry for Bézier curves.