Archives for: February 2008

Truncate Labels in percent width containers

It is abundant problem to truncate Label control in percent-width container. For example we have the following code:

XML:

<?xml version="1.0" encoding="utf-8"?>
  <mx:Application
      horizontalAlign="left"
      xmlns:mx="http://www.adobe.com/2006/mxml"
      layout="vertical">
      <mx:Style>
          Box
          {
              border-style: solid;
              border-color: #000000;
              border-thickness: 1;
          }
      </mx:Style>
      <mx:Box
          width="10%">
          <mx:Label
              width="100%"
              text="Lalalalalalallallallalallalallallalalalallalalalal" />
      </mx:Box>
      <mx:Box
          width="10%">
          <mx:Spacer
              height="20" />
      </mx:Box>
  </mx:Application>

The result is:

This text is replaced by the Flash movie.

As we can see the first container takes more than 10% (because the second container is exactly 10% width). As far as we know truncateToFit property is true by default and there is no way to make the first container 10% width too except to extend Label component:

  1. package com.riapriority.controls
  2. {
  3.     import mx.controls.Label;
  4.  
  5.     public class AutoTruncatedLabel extends Label
  6.     {
  7.         public function AutoTruncatedLabel()
  8.         {
  9.             super();
  10.         }
  11.  
  12.         override protected function measure():void
  13.         {
  14.             super.measure();
  15.             if (truncateToFit)
  16.             {
  17.                 measuredMinWidth = 0;
  18.                 measuredWidth = NaN;
  19.             }
  20.         }
  21.     }
  22. }

Lets modify our application to see the difference:

XML:

<?xml version="1.0" encoding="utf-8"?>
  <mx:Application
      horizontalAlign="left"
      xmlns:mx="http://www.adobe.com/2006/mxml"
      layout="vertical"
      xmlns:controls="com.riapriority.controls.*">
      <mx:Style>
          Box
          {
              border-style: solid;
              border-color: #000000;
              border-thickness: 1;
          }
      </mx:Style>
      <mx:Box
          width="10%">
          <controls:AutoTruncatedLabel
              width="100%"
              text="Lalalalalalallallallalallalallallalalalallalalalal" />
      </mx:Box>
      <mx:Box
          width="10%">
          <mx:Label
              width="100%"
              text="Lalalalalalallallallalallalallallalalalallalalalal" />
      </mx:Box>
  </mx:Application>

The result is the following:

This text is replaced by the Flash movie.

As we can see the first label is truncated and the first container width is 10% now. To expand the first container to full text width just set our Label’s truncateToFit property to false.

Hope it helps! :)

Bookmark this article at …

  English (US)  
 

Debugging event handlers in MXML gotchas

Everybody knows how difficult to debug event handlers in MXML attributes. So if we try to debug creationComplete event of our simple application with Flex Builder’s debugger we’ll fail:

XML:

<?xml version="1.0" encoding="utf-8"?>
  <mx:Application  
    creationComplete="helloLabel.text = 'Hello, ' + event.currentTarget"
    xmlns:mx="http://www.adobe.com/2006/mxml"  
    layout="vertical">
    <mx:Label
      id="helloLabel" />
  </mx:Application>

Lets set breakpoint at line 3 and… we can debug Application’s addEventListener (namely Container’s) for subscribing to creationComplete event. It’s not that we need :no:

To debug inline MXML handlers we can use the other way of declarative expressiveness. Lets transform attribute to node:

XML:

<?xml version="1.0" encoding="utf-8"?>
  <mx:Application  
    xmlns:mx="http://www.adobe.com/2006/mxml"  
    layout="vertical">
    <mx:creationComplete>
      <![CDATA[
        helloLabel.text = 'Hello, ' + event.currentTarget;
      ]]>
    </mx:creationComplete>
    <mx:Label
      id="helloLabel" />
  </mx:Application>

Just set breakpoint at line 7 and voilà. We can examine event’s object properties in debugger’s Variable View.

The only problem is intellisense for event property, event object type (and properties) etc. in Flex Builder (tested in FB 3 beta 3). As the final release of Flex Builder will be very soon I’m looking forward for this behavior will be fixed.

Hope it helps!

Special thanks to Eldar ‘Pirrest’ Prilutskiy for pointing me this.

Bookmark this article at …

  English (US)