Archive for October, 2011

Spark combobox issue in sdk 4.1.0

selected index 4 value shown in prompt textinput on up/down array key in dropdown

<s:ComboBox id=”myCB” width=”140″ color=”#000000″ requireSelection=”true”>
<s:dataProvider>
<mx:ArrayList>
<fx:String>Red</fx:String>
<fx:String>Orange</fx:String>
<fx:String>Yellow</fx:String>
<fx:String>Blue</fx:String>
<fx:String>Green</fx:String>
</mx:ArrayList>
</s:dataProvider>
</s:ComboBox>

Spark combobox shows value corresponding to selected index 4 but does not work with selected index 0 on down/up arrow key in dropdown

do not show value for selected index = 0 on down/up arrow key in dropdown

It is an issue in Flash builder 4.1.0 sdk and solved in 4.5 sdk.

ComboBox.as

override mx_internal function changeHighlightedSelection(newIndex:int, scrollToTop:Boolean = false):void
{
super.changeHighlightedSelection(newIndex, scrollToTop);

if (newIndex > 0)// new Index is not checked for 0th index
{
var item:Object = dataProvider ? dataProvider.getItemAt(newIndex) : undefined;
if (item)
{
var itemString:String = itemToLabel(item);
textInput.selectAll();
textInput.insertText(itemString);
textInput.selectAll();

userTypedIntoText = false;
}
}
}

In Flash builder 4.5 they solved by changing condition if (newIndex >= 0).

Found by Shailesh Kadam

 

Advertisements

Leave a comment

Singleton class for Localization in Flex

Default way of using resourceManager

resourceManager.getString(bundleName,resourceName,parameters)

We have customized way of using resourceManager by using singleton class : ResourceUtil

Modified syntax of using ResourceUtil

ResourceUtil.string(resourceName,parameters)

— It reduced the code by not using bundleName each time. Find the code below to create singleton class

ResourceUtil.as

public class ResourceUtil
{
public static const DEFAULT_BUNDLE:String = ‘ResourceFileName’;

public static function string(key:String,parameters:Array=null):String
{
return ResourceLoader.instance().getString(DEFAULT_BUNDLE,key,parameters);
}
}

ResourceLoader.as :

package
{
import flash.events.EventDispatcher;
import flash.events.IEventDispatcher;

import mx.resources.IResourceManager;
import mx.resources.ResourceManager;

[ResourceBundle(“ResourceFileName”)]
public class ResourceLoader extends EventDispatcher
{
public static const DEFAULT_LOCALE:String=’en_US’ ;
public static var _instance:ResourceLoader ;
private var _resourceManager:IResourceManager ;

public static function instance():ResourceLoader
{
if(_instance == null)
{
_instance = new ResourceLoader(PrivateSingletonEnforcer);
}

return _instance ;
}

public function ResourceLoader(singletonEnforcer:Class)
{
if(singletonEnforcer!=PrivateSingletonEnforcer)
{
throw new Error(‘ResourceLoader cannot be instantiated directly.’)
}
_resourceManager = ResourceManager.getInstance();
}

public function getString(bundleName:String,resourceName:String,parameters:Array = null):String
{
var value:String = _resourceManager.getString(bundleName,resourceName,parameters);
if(value == null)
return resourceName ;
else
return value ;
}

}
}

class PrivateSingletonEnforcer
{
}

1 Comment

Spark TabBar with different image as skin for each button

Problem:

To show each tab in TabBar with  different images as skin

Solution :

Spark TabBar with dataprovider

<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]private var tabs:ArrayCollection = new ArrayCollection([
{label:’Fabric’,imageIcon:’color.png’,id:’FABRIC’},
{label:’Design’,imageIcon:’design.png’,id:’DESIGN’},
{label:’Color Contrast’,imageIcon:’fabric.png’,id:’COLOR_CONTRAST’},
{label:’Measurement’,imageIcon:’measurment.png’,id:’MEASUREMENT’}
]);
]]>
</fx:Script>

<s:TabBar skinClass=”TabBarSkin” dataProvider=”{tabs}” height=”25″
labelField=”label”/>

 

TabBarSkin.mxml

<s:DataGroup id=”dataGroup” width=”100%” height=”100%”>
<s:layout>
<s:ButtonBarHorizontalLayout gap=”-1″/>
</s:layout>
<s:itemRenderer>
<fx:Component>
<s:ButtonBarButton skinClass=”IconButtonSkin” />
</fx:Component>
</s:itemRenderer>
</s:DataGroup>

IconButtonSkin:

In script file:

— create Class type for each image

[Embed(source=”measurment.png”)]
private var image1:Class;
[Embed(source=”color.png”)]
private var image2:Class;
[Embed(source=”design.png”)]
private var image3:Class;
[Embed(source=”fabric.png)]
private var image4:Class;
— Override function  updateDisplayList

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

var btnId:String = (this as Object).hostComponent.data.id;

var label:String = (this as Object).hostComponent.data.label;
labelDisplay.text = label ;

switch(btnId)
{
case ‘FABRIC’:
icon.source = image1 ;
break;
case ‘DESIGN’:
icon.source = image2 ;
break;
case ‘COLOR_CONTRAST’:
icon.source = image3;
break;
case ‘MEASUREMENT’:
icon.source = image4 ;
break;
}

this.width = this.hostComponent.width;
this.minWidth = this.hostComponent.width;
}

<s:Label id=”labelDisplay” visible=”false” includeInLayout=”false”
textAlign=”center”
verticalAlign=”middle”
maxDisplayedLines=”1″
horizontalCenter=”0″ verticalCenter=”1″
left=”10″ right=”10″ top=”2″ bottom=”2″>
</s:Label>

<s:BitmapImage id=”icon” smooth=”true” width=”91″ height=”101″ visible=”true”
/>

 

 

 

 

 

 

Leave a comment

Advanceddatagrid with HTML Header Renderer

Problem:  Show header and subheader text in each column of AdvancedDataGrid. Subheader is optional and always  come below mainheader text. for e.g.: Delhi\n(India)

Solution:

1) Created custom AdvancedDataGridHeaderRenderer

2) assign it as headerrenderer to AdvancedDataGrid column.

3) provide headertext as ‘mainheadertext/nsubheadertext’. Internally it differentiate text for header and subheader.

HTMLTextADGHeaderRenderer :

import flash.display.DisplayObject;
    import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
    import mx.controls.advancedDataGridClasses.AdvancedDataGridHeaderRenderer;
    import mx.core.UITextField;

    public class HTMLTextADGHeaderRenderer extends AdvancedDataGridHeaderRenderer
    {
        private var htmlHeaderText:UITextField;

        public function HTMLTextADGHeaderRenderer()
        {
            super();
        }

        override protected function createChildren():void
        {
            super.createChildren();
            htmlHeaderText=new UITextField();
            htmlHeaderText.percentWidth=100;
            htmlHeaderText.background=false;
            htmlHeaderText.border=false;

            addChild(DisplayObject(htmlHeaderText));
        }

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

            htmlHeaderText.htmlText = AdvancedDataGridColumn(this.data).headerText;
            var arr:Array=AdvancedDataGridColumn(this.data).headerText.split(‘\\n’);
            if (arr.length > 1)
            {
                htmlHeaderText.htmlText='<TEXTFORMAT><P ALIGN=”CENTER”>’ + arr[0] + ‘\n’ + arr[1] + ‘</P></TEXTFORMAT>’;
            }
            else
            {
                htmlHeaderText.htmlText='<TEXTFORMAT><P ALIGN=”CENTER”>’ + AdvancedDataGridColumn(this.data).headerText + ‘</P></TEXTFORMAT>’;
            }

            htmlHeaderText.width=unscaledWidth – 5;
            htmlHeaderText.wordWrap=true;

            this.label.visible=false;
            this.label.includeInLayout=false;

        }
    }

Leave a comment