Mike Orth – Booya!

Flex, Actionscript

Constrained Width Label

By default, a Label control in Flex will add trailing ellipses if the text is too long. However, I’m not a big fan of this for most applications. I wanted to be able to show an entire label with a smaller font instead, so I created the ConstrainedWidthLabel. Working with fontSize was kind of hacky and not easily scalable. So instead, I’m using scaleX and scaleY to resize the text. The result is perfectly resized text at any font size.

Here’s the code for it. Let me know if you find it useful!

package com.mikeorth.controls
{
    import spark.components.Label;

    /**
     * This control constrains a label to a specific width and resizes the label
     * if the text goes beyond that width (rather than showing ellipses...).
     *
     * Note: this only works for single-line labels.
     *
     * @author Mike Orth
     * www.mikeorth.com
     *
     */
    public class ConstrainedWidthLabel extends Label
    {
        public function ConstrainedWidthLabel()
        {
            super();
        }

        //--------------------------------------
        //  minScale
        //--------------------------------------
        private var minScaleChanged:Boolean;
        private var _minScale:Number = .65;

        /**
         * A decimal value for the percentage of the smallest width scale to calculate.
         * If the calculated width scale is less than this value, then it will use the value of minScale.
         *
         * @return Decimal percentage
         * @default = .65
         */    
        public function get minScale():Number
        {
            return _minScale;
        }

        public function set minScale(value:Number):void
        {
            _minScale = value;
            minScaleChanged = true;
            invalidateDisplayList();
        }

        //--------------------------------------
        //  constrainedWidth
        //--------------------------------------
        private var constrainedWidthChanged:Boolean;
        private var _constrainedWidth:Number = 100;
       

        /**
         * The actual displayed width of the label with scaling applied.
         * Once the measuredWidth exceeds this value, then it will try to scale it down.
         *
         * @return Number
         */    
        public function get constrainedWidth():Number
        {
            return _constrainedWidth;
        }

        public function set constrainedWidth(value:Number):void
        {
            _constrainedWidth = value;
            constrainedWidthChanged = true;
            invalidateDisplayList();
        }

        //--------------------------------------
        //  text
        //--------------------------------------
        private var textChanged:Boolean;

        override public function set text(value:String):void
        {
            super.text = value;
            textChanged = true;
            invalidateDisplayList();
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            if (constrainedWidthChanged || minScaleChanged)
            {
                constrainedWidthChanged = false;
                minScaleChanged = false;
                // calculate the max unscaled width
                this.maxWidth = constrainedWidth * (1 + minScale);
            }
            if (textChanged)
            {
                textChanged = false;

                // if the width is good, then don't worry with the scaling
                if (measuredWidth <= constrainedWidth)
                {
                    scaleX = scaleY = 1;
                }
                // else too long, so scale the width down
                else
                {
                    var scale:Number = constrainedWidth / width;
                    // only set it as small as minScale
                    scaleX = scaleY = scale <= minScale ? minScale : scale;
                    // this gives us ellipses if the text is too long, but has some bugginess
                    // width = (1 + scaleX) * constrainedWidth;
                }
            }
        }
    }
}

Implementation:

 <controls:ConstrainedWidthLabel
                    constrainedWidth="250"
                    minScale=".75"
                    text="{str}"/>
No comments

Disable Drag for Certain Items in List

Drag and drop is easy in Flex when you have basic requirements. Just setup a list with dragEnabled=”true” and you’re up and running. However, what if you need to disable dragging for only a select few items in your list? For example, if you have a list of users and you can only drag a user with a specific role, such as an admin.

The answer is pretty simple, create a custom ItemRenderer and stop the mouseDown event from propagating.

<s:ItemRenderer mouseDown="onMouseDown(event)"
....
private function onMouseDown(event:MouseEvent):void {
     if (someCondition == true)
          event.stopImmediatePropagation();
}
No comments

Spark Label Tooltip

While it’s still default for a Label to truncate and show ellipses if the text is too long, it’s no longer default to show a tooltip (as it was in mx). Easy fix for this is the aptly named property:

<s:Label showTruncationTip="true"
...
No comments

Embedded Fonts with Tooltip and Alert in Flex 4

If you’ve embedded a font in a Spark application, you may have noticed that your Alerts and Tooltips are now empty. This is due to the Device 4 font embedding in Flex 4 for Spark components. So any mx controls will not be able to read those fonts. There’s an easy fix for this in css without having to specify a different fontFamily for those controls:

mx|global
{
    textFieldClass: ClassReference("mx.core.UIFTETextField");
}

Boom. Problem solved.

No comments

[RemoteClass] must specify alias

Most metadata tags in Flex have default property values. For example, the following are equivalent:

[Embed(source="/path/img.png")]
[Embed("/path/img.png")]

However, when using RemoteClass, even though it only has 1 possible parameter (”alias”), it still requires that you specify the property name as follows:

// Correct:
[RemoteClass(alias="com.myDTO")]

// NOT correct:
[RemoteClass("com.myDTO")]
No comments

Monster Debugger

This is a fantastic external debugger for Flex/Flash applications. The primary thing I love is being able to change properties at run time, and being able to execute methods.

Grab it here, it’s free: Monster Debugger

No comments

Slider Increment – snapInterval

For future reference, trying to remember what the property name was for the interval or step size for a slider. The property is named “snapInterval”

No comments

Targeting the Right Component for Transitions

When doing any state transitions, you have to be sure to specify the intended target. For instance, recently I was debugging some client code to see why a fade wasn’t working. It turned out that the target was set to the parent group instead of each specific component.

    <s:transitions>
        <s:Transition fromState="*" toState="*">

<!--    INCORRECT way of doing it:
           Don't target the parent container-->

        <s:Fade target="{[content]}"/>
       
            <!--CORRECT: target each specific component-->
            <s:Fade targets="{[pageOne, pageTwo]}"/>
        </s:Transition>
    </s:transitions>

<s:Group id="content">
       <local:PageOne id="pageOne" includeIn="one"/>
       <local:PageTwo id="pageTwo" includeIn="two"/>
</s:Group>

In this case, you need to target pageOne and pageTwo, NOT content.

No comments

Flex Formatter

After moving from projects that religiously used FlexFormatter to one that didn’t, I realized just how nice this plugin is. If by chance you haven’t heard of it, FlexFormatter is an eclipse plugin that will format spaces, tabs, declarations, reorder properties & functions, indent, and lots more.

To install, use the update site http://flexformatter.googlecode.com/svn/trunk/FlexFormatter/FlexPrettyPrintCommandUpdateSite.

No comments

MikeOrthLib updated

I added a lot of new custom Flex components to my library, MikeOrthLib. It includes a PagedDataGrid control, some handy popup base classes, and other utility components.


Check out the example application
(work in progress).

Visit the project home page.

1 comment

Next Page »

Mexico

Google Tracking Code