Table of contents for flex-tips

1. Problem with XML attributes in AS3.0
2. Unable to export SWC oem
3. Numeric sorting of Flex DataGridColumn

This is quick example for Numeric sorting of Flex DataGrid columns. If you want to sort column in DataGrid, default sorting is sorted by String and not by Number. If you have just one numeric column, you may create custom sort function and set sortCompareFunction for given DataGridColumn. If you have more such columns and your dataProvider is ArrayCollection, which consists of many objects, better solution is override DataGridColumn and implement compare function inside this class. Here is class

package com.flexets.components.dataGridClasses
{
	import mx.controls.dataGridClasses.DataGridColumn;
	import mx.utils.ObjectUtil;
 
	public class NumericDataGridColumn extends DataGridColumn
	{
		public static const NUMERIC:String = "N";
		public function NumericDataGridColumn(columnName:String=null)
		{
			super(columnName);
			initCompare(NUMERIC);
		}
 
		function initCompare(numeric:Object):void
		{
			if (numeric == NUMERIC) {
				sortCompareFunction = numericCompare;
			}
		}
 
		/**
		* Pull the numbers from the objects and call the implementation. TAKEN FROM mx.collections.SortField
		*/
		private function numericCompare(a:Object, b:Object):int
		{
			var fa:Number;
			try
			{
				fa = dataField == null ? Number(a) : Number(a[dataField]);
			}
			catch(error:Error)
			{
			}
 
			var fb:Number;
			try
			{
				fb = dataField == null ? Number(b) : Number(b[dataField]);
			}
			catch(error:Error)
			{
			}
 
			return ObjectUtil.numericCompare(fa, fb);
		}
	}
}

and then just use NumericDataGridColumn in your mxml in DataGrid like this

<mx:DataGrid id="myDG" width="100%" height="100%" dataProvider="{myDataProvider}">
    <mx:columns>
	<mx:DataGridColumn dataField="id"/>
	<dataGridClasses:NumericDataGridColumn dataField="order"/>
	<mx:DataGridColumn dataField="title"/>
	<dataGridClasses:NumericDataGridColumn dataField="price"/>
    </mx:columns>
</mx:DataGrid>

Enjoy this little Flex tip.

Table of contents for flex-tips

1. Problem with XML attributes in AS3.0
2. Unable to export SWC oem
3. Numeric sorting of Flex DataGridColumn

I have few times lately this error in Flex Builder and there were at least 2 cases, which cause this error to happen. So maybe it will help you to find your problem.

• Some file (in my case .flexLibProperties) has SVN conflicts, so you need to resolve conflicts and merge them to solve this “Unable to export SWC oem” error
• In your library project there are some assets, which are not checked in project Properties/Flex Library Build Path/Assets Tab

If you know about other case, which can cause “Unable to export SWC oem” error, please let me know in comments and I will add it here to help other people with their development. Thank you

Table of contents for flex-tips

1. Problem with XML attributes in AS3.0
2. Unable to export SWC oem
3. Numeric sorting of Flex DataGridColumn

I’ve found today some small problem with setting XML attribute for my current application. I’m generating HTML source code via XML, because both are tags languages and I have found this nice problem. Imagine you have DIV tag with class attribute set like this:

<div class="myClass">test</div>

So in ActionScript 3 you can create it via XML in this way

var divXML:XML = <div>test</test>;
divXML.@class = "myClass";

All seems ok and trivial, but Flex Builder has problem to compile second line. It seems that @class is reserved word, because I can change to other attribute name and it works. But luckily there are different ways how to set XML attribute for XML node.  I’ve fixed it in this way

var divXML:XML = <div>test</test>;
divXML.@["class"] = "myClass";

What is your preffered  way to set XML attributes?

Table of contents for flex-tips

1. FlexTips
2. FlexTip: mx:Text vs. mx:TextArea
3. FlexTip: XMLSocket connect() after disconnect from server
4. FlexTip: Problem with masks and scalable Flash
5. FlexTips: How to add Bitmap to UIComponent
6. FlexTip – Stop displaying Focus
7. FlexTip: Preventing CheckBox selection with Key.SPACE
8. FlexTip: WordWrap for mx:Text
9. FlexTip: Add Thumbs to Mx:Slider programatically
10. AS3 Conditional Breakpoint – enterDebugger()

I have to confess I didn’t know about great function enterDebugger() in flash.debugger package. If you ever want to have conditional breakpoint you can do it programatically. Just add this statement to your code and debuger will stop as it there would be normal breakpoint. So you can use it in IF statement and call it just when some conditions are met. I think I will use this function a lot from now on

Enjoy

Table of contents for flex-tips

1. FlexTips
2. FlexTip: mx:Text vs. mx:TextArea
3. FlexTip: XMLSocket connect() after disconnect from server
4. FlexTip: Problem with masks and scalable Flash
5. FlexTips: How to add Bitmap to UIComponent
6. FlexTip – Stop displaying Focus
7. FlexTip: Preventing CheckBox selection with Key.SPACE
8. FlexTip: WordWrap for mx:Text
9. FlexTip: Add Thumbs to Mx:Slider programatically
10. AS3 Conditional Breakpoint – enterDebugger()

I have some new Flex Tip for you. Maybe you have found it already if you have tried add new thumbs to Mx:Slider (HSlider, VSlider) programatically. There can be various “small” problems. Or maybe there is just another way

What I’ve tried is increase thumbCount property and add new value to values property. But there can be problems, if you did not set snapInterval property or how you insert new value.

I have created examples with 3 different ways of adding new thumbs to the horizontal slider. There can be more, but I want to show you just these 3 different way of how to do it.

In all examples sliders starting value as follows:

• minimum = 0
• maximum = 0
• thumbCount = 2
• values = [0,1]

I’m catching MouseEvent.CLICK event on these sliders, and add new thumb. After click you can check last added value, and values property of each slider for you control, what’s inside. Let’s try example and after I will explain difference in these 3 different ways fo adding new thumb to slider.

The first example I’m adding new value to the values property, which is Array by simple slider.values.push(newValue). Problem is that, when you push value e.g. 0.5 to array [0,1], values will be [0,1,0.5] it’s not sorted (slider has not sorted it by itself). It’s interesting how slider recompute it’s values. Just try it in example

private function handleAddWrongPoint(e:MouseEvent):void
{
	var newValue:Number = idWrongSlider.minimum + (e.localX / idWrongSlider.width) * (idWrongSlider.maximum - idWrongSlider.minimum);
	newValue = int(newValue * 100)/100;
	if (!(e.target is SliderThumb))
	{
		latestWrong = newValue;
		idWrongSlider.thumbCount++;
		idWrongSlider.values.push(newValue);
		idWrongSlider.invalidateProperties();
		trace('Wrong: ' + e.localX + " , new: " + newValue + " values: " + idWrongSlider.values);
 
		update();
	}
}

In second example there is no snapInterval set, and it seems, that causes more interesting problems. Values are now greater than maximum (1), try add few thumbs by clicking on 2nd slider and you can end up with such values property [0,1,2,3,4,5,6,7,0.6]. Really don’t why

private function handleAddWrongPoint2(e:MouseEvent):void
{
	var newValue:Number = idWrongSlider2.minimum + (e.localX / idWrongSlider2.width) * (idWrongSlider2.maximum - idWrongSlider2.minimum);
	newValue = int(newValue * 100)/100;
	if (!(e.target is SliderThumb))
	{
		latestWrong2 = newValue;
		idWrongSlider2.thumbCount++;
		idWrongSlider2.values.push(newValue);
		idWrongSlider2.invalidateProperties();
		trace('Wrong: ' + e.localX + " , new: " + newValue + " values: " + idWrongSlider2.values);
 
		update();
	}
}

In 3rd examples all is ok, because I’ve set snapInterval property to 0.01 and I’m adding new values correctly sorted

private function handleAddCorrectPoint(e:MouseEvent):void
{
    var newValue:Number = idCorrectSlider.minimum + (e.localX / idCorrectSlider.width) * (idCorrectSlider.maximum - idCorrectSlider.minimum);
    newValue = int(newValue * 100)/100;
    if (!(e.target is SliderThumb))
    {
        latestCorrect = newValue;
        idCorrectSlider.thumbCount++;
        var arr:Array = idCorrectSlider.values;
        arr.push(newValue);
        idCorrectSlider.values = arr.sort();
        idCorrectSlider.invalidateProperties();
 
        trace('Correct: ' + e.localX + " , new: " + newValue + " values: " + idCorrectSlider.values);
        update();
    }
}

Full source to this examples is included in Download Section (you will see it just as subscribed member) of our Coaching Program Forum on Flexets.com (My own company).

Table of contents for flex-tips

1. FlexTips
2. FlexTip: mx:Text vs. mx:TextArea
3. FlexTip: XMLSocket connect() after disconnect from server
4. FlexTip: Problem with masks and scalable Flash
5. FlexTips: How to add Bitmap to UIComponent
6. FlexTip – Stop displaying Focus
7. FlexTip: Preventing CheckBox selection with Key.SPACE
8. FlexTip: WordWrap for mx:Text
9. FlexTip: Add Thumbs to Mx:Slider programatically
10. AS3 Conditional Breakpoint – enterDebugger()

Maybe it is easy, maybe not, but I do not think it’s straitforward and logical. If you want to set word wrapping for mx:Text you have to set width. If you did not do this, whole text will be in 1 row and not whole text can be visible. So just set width to fix value or percentage value to use word wrapping feature.

Why I don’t think that it’s not logical? Because when you did not set width to mx:Text it’s in 1 row, but just resize app, and now it’s wordwrapped. So it seems it’s problem only in initialization phase. I think it should work same in all ocassions. That’s just my 2 cents

Table of contents for flex-tips

1. FlexTips
2. FlexTip: mx:Text vs. mx:TextArea
3. FlexTip: XMLSocket connect() after disconnect from server
4. FlexTip: Problem with masks and scalable Flash
5. FlexTips: How to add Bitmap to UIComponent
6. FlexTip – Stop displaying Focus
7. FlexTip: Preventing CheckBox selection with Key.SPACE
8. FlexTip: WordWrap for mx:Text
9. FlexTip: Add Thumbs to Mx:Slider programatically
10. AS3 Conditional Breakpoint – enterDebugger()

This is quick Flex Tip. If you do not need or do not want change CheckBox selection with space key, you can set mouseFocusEnabled to false.

If you know about any other solutions, let us know.

Table of contents for flex-tips

1. FlexTips
2. FlexTip: mx:Text vs. mx:TextArea
3. FlexTip: XMLSocket connect() after disconnect from server
4. FlexTip: Problem with masks and scalable Flash
5. FlexTips: How to add Bitmap to UIComponent
6. FlexTip – Stop displaying Focus
7. FlexTip: Preventing CheckBox selection with Key.SPACE
8. FlexTip: WordWrap for mx:Text
9. FlexTip: Add Thumbs to Mx:Slider programatically
10. AS3 Conditional Breakpoint – enterDebugger()

Here is quick Flex Tip. If you don’t want to display focus rectangle on pressing TAB key, you should use focusEnabled = false;
It’s quick solution for 1 component, but if you want disable focus for all components in your application just use focusManager.deactivate();

That’s all, hope it helps to anyone…

Table of contents for flex-tips

1. FlexTips
2. FlexTip: mx:Text vs. mx:TextArea
3. FlexTip: XMLSocket connect() after disconnect from server
4. FlexTip: Problem with masks and scalable Flash
5. FlexTips: How to add Bitmap to UIComponent
6. FlexTip – Stop displaying Focus
7. FlexTip: Preventing CheckBox selection with Key.SPACE
8. FlexTip: WordWrap for mx:Text
9. FlexTip: Add Thumbs to Mx:Slider programatically
10. AS3 Conditional Breakpoint – enterDebugger()

I didn’t know it, but here is solution. Best UIComponent for Bitmap is mx:Image (no surprise), You can just write:

<mx :Image creationComplete=”(event.currentTarget as Image).source = new Bitmap( bitmapData)”/>

So for mx:Image except source=”path” you can add reference to Bitmap as well.
Enjoy

Table of contents for flex-tips

1. FlexTips
2. FlexTip: mx:Text vs. mx:TextArea
3. FlexTip: XMLSocket connect() after disconnect from server
4. FlexTip: Problem with masks and scalable Flash
5. FlexTips: How to add Bitmap to UIComponent
6. FlexTip – Stop displaying Focus
7. FlexTip: Preventing CheckBox selection with Key.SPACE
8. FlexTip: WordWrap for mx:Text
9. FlexTip: Add Thumbs to Mx:Slider programatically
10. AS3 Conditional Breakpoint – enterDebugger()

This may be useful for someone who does not read Flex documentation in more detail. When you have content which is masked and you allow scale for your application, mask will not scale if it is not added to display list (it’s written in documentation ). So if you have such problem, add you mask to display list (addChild) and it solves your problem.

Another problem with scaling is mx:Text component. When you do not set width for Text, there is problem with resizing of you app. Some word from end of text can be not visible sometime. Setting width=”100%” is helpful….

This we have found in our project. It’s just for apps which are scalable.

Hope this will help.