Flex Trim Button Shortcuts

Question

First of all, I apologize for any uncertainty in this matter. At the moment, I'm just trying to get some new ideas to try and diagnose this error.

In any case, the problem I am facing is an application using a custom loading module. This loader module was compiled in swc, and the loader module is created through its namespace. All of this works great. The problem I am facing is specific to the mx: button controls used in the modules. For some reason, their labels are truncated, so, for example, Sign In appears with an ellipsis, like Sign ...

After some cheating, I was able to establish the following:

• This problem occurs only in modules. If the button control is used in the main mxml, the label will not be truncated.
• Managing a button whose label is truncated does not have a specified width (setting its width to 100% or a specific pixel width does not fix the problem).
• The button control uses the default indentation (clutter with filling by setting left and right to 5 or any other value also does not help).
• We do not use embedded fonts, so I also decided that it was possible.
• mx: CheckBox and mx: LinkButton equally affect this problem, although mx: CheckBox also does not seem to want to show its flag, it just displays a truncated label.

, mx: ComboBox combobox , , .

, , - fontContext IFlexModuleFactory. fontContext -, , . , - - , . , , , . . . Flex.

,

-

: , , :

• - ?
• , CSS ?
• - -?
• - -?

, , , . , , , , , - .

Answer 1

, , , , , , .

, , ( Button, LinkButton, PopUpButton .) textField UITextField , truncateToFit false :

public class NonTruncatingUITextField extends UITextField
{
    public function NonTruncatingUITextField ()
    {
        super();
    }

    override public function truncateToFit(s:String = null):Boolean
    {
        return false;
    }
}

Button ( - - , ), NonTruncatingTextField , :

public class NonTruncatingButton extends Button
{
    private var _truncateLabel:Boolean;

    public function NonTruncatingButton()
    {
        super();

        this._truncateLabel = true;
    }

    override protected function createChildren():void
    {
        if (!textField)
        {
            if (!_truncateLabel)
                textField = new NonTruncatingUITextField();
            else
                textField = new UITextField();

            textField.styleName = this;

            addChild(DisplayObject(textField));
        }

        super.createChildren();
    }

    [Inspectable]
    public function get truncateLabel():Boolean
    {
        return this._truncateLabel;
    }

    public function set truncateLabel(value:Boolean):void
    {
        this._truncateLabel = value;    
    }   
}

... , , MXML ( , ):

<components:NonTruncatingButton id="btn" label="Click This" truncateLabel="false" />

, , , , , , , ; , . ( , - !)

- , .

Answer 2

, , , .

css, , . " " . ( , , ) voila!

...

Answer 3

, Flex, labelPlacement "bottom", :

theButton.labelPlacement = ButtonLabelPlacement.BOTTOM;

, .

, (, ), janusz . janusz.text ActionScript, MXML:

theButton.addEventListener(FlexEvent.UPDATE_COMPLETE, function (e:FlexEvent):void {
  e.target.mx_internal::getTextField().text = e.target.label;
});

mx_internal FlexEvent, : import mx.events.FlexEvent; import mx.core.mx_internal;

...

To (pay attention to truncation, despite sufficient horizontal space):

After:

The only drawback of this approach is that you lose the ellipsis, but in my case I found this feature pleasant.

Answer 4

I just stumbled upon this problem and solved it like this:

<mx:LinkButton label="Some label"
    updateComplete="event.target.mx_internal::getTextField().text = event.target.label"
/>;