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:
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:
- package com.riapriority.controls
- {
- import mx.controls.Label;
- public class AutoTruncatedLabel extends Label
- {
- public function AutoTruncatedLabel()
- {
- super();
- }
- override protected function measure():void
- {
- super.measure();
- if (truncateToFit)
- {
- measuredMinWidth = 0;
- measuredWidth = NaN;
- }
- }
- }
- }
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:
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
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 
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
Flex 3 beta 2 family is out!
Cool fresh news, guys! Flex 3 beta 2 with Flex Builder 3 beta 2 and Adobe AIR beta 2 are out on Adobe Labs! 
Bookmark this article at
Generating get/set methods
If we try to enumerate all the features we wish to see in an ideal IDE our list will be incomplete without code templates. Like in JDT for example. But Flex Builder do not include templates and its little annoying. Mostly in a case of get/set accessors which are essential in ActionScript.
Fortunately I’ve discovered a blog post with Eclipse Monkey usage example. Moreover I’ve found a simple script for get/set accessors generating.
In my case this simple script is not very useful. Most of my get/set methods are bindable and the resulting code is more complex. As a result of my modifications of the original script there are three ones in the archive.
The usage is pretty the same as described:
getters-setters.jscontains slightly modified original.advanced-getters-setters.jsis a generator for get/set accessors with binding.And
collection-getters-setters.jsis a script for different kind of collections and contains subscribing onCOLLECTION_CHANGEevent with corresponding handler.
Just write:Code:
Then select the pseudo code and run script. Voilà! Fix import and compile.myTest:ArrayCollection
And there is a list of resources that can help:
- Installation and usage instructions.
- Other Installation instructions.
- Documentation on Aptana site.
- Eclipse Help reference (after plug-in installed).
Good luck!
Bookmark this article at
Flex 3 beta 2 announce
The guy with enormously enlarged Flex logo also known as Ted Patrick is about to do it again! All of us remember his daily posts about upcoming Flex 3 beta 1. The good news are Flex 3 beta 2 is coming soon!
Every day from Wednesday to next Monday he will covering more and more details. Looking forward for excellent new features
Bookmark this article at
XML Feeds
