Flex - Combobox as Dropdownlist

Creating CustomComboBoxDropDownList – Use to switch from ComboBox to DropDownList and v/s.

I was wondering how developer can use same component to switch from ComboBox to DropDownList and v/s. so I did some workaround to find out the solution, Here we go –

Q. - How to user combobox as dropdownlist by using user defined custom property.

Steps to create custom component. Consider file name as below: -

Class Name: - CustomComboBoxDropDownList.MXML

Step 1: - Create custom component which extend combobox

Ex: -

s:ComboBox xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"

change="onComBoxIndexChange(event)" creationComplete="setPromptText()"

skinClass="skins.SkinComboBox ">

     

     

       fx:Script>

      import mx.controls.Alert;

                 

      import skins.SkinDropDownList;

                 

      import spark.components.DropDownList;

      import spark.core.IDisplayText;

      import spark.events.IndexChangeEvent;

                 

      private var promptText:String;

                 

      public var _useAsDropDown:Boolean = false;

                 

      private function setPromptText():void

      {

        promptText = this.prompt;

        setUserSelectedSkin();

      }

                 

      public function set useAsDropDown(value:Boolean):void

      {

         _useAsDropDown = value;

      }

                 

      public function get useAsDropDown():Boolean

      {

          return _useAsDropDown;

      }

                 

      private function setUserSelectedSkin():void

      {

         if(_useAsDropDown)

         {

          this.setStyle("skinClass", SkinDropDownList);

         }

      }

                 

      private function onComBoxIndexChange(event:IndexChangeEvent):void{

        if (event.newIndex < 0){

          if(this.textInput)

           this.textInput.text = promptText;

           Alert.show("Typed item is not present in list","Warning");

        }

      }

]]>

fx:Script>

s:ComboBox>

Step 2: - Create combobox skin named as SkinComboBox.

Step 3: - Create DropDownList skin as SkinDropDownList

      In SkinDropDownList skin Class remove Label and replace TextInput.

Ex. as below: -

id="textInput" borderAlpha="0" borderVisible="false"

mouseEnabled="false" mouseChildren="false" editable="false" selectable="false" left="7" right="30" top="2" bottom="2" width="75" verticalCenter="1" contentBackgroundAlpha="0" color="0x000000" />

Solution: -

You have to change skin at run time on condition. Here I have created “useAsDropDown” property which will define which component you want to show i.e. ComboBox or DropDownList.

Flex - Crossdomain

Hi All,

Crossdomain is one of the points where developer has to suffer a lot. To make it simple I have some important points below, which will make developer bit relax on crossdomain concept.

To check for authentication on flex side: -

If Flex application want to communicate with server side, below code need to be added on Flex side.

Security.allowDomain("*");

Above lines will check for the permission form public domain.


What is Security.allowDomain: -

The primary purpose of calling the Security.allowDomain() method is to grant permission for SWF files in an outside domain to script the SWF file, calling the Security.allowDomain() method.
Specifying an IP address as a parameter to the Security.allowDomain(ipAdd) method does not permit access by all parties that originate at the specified IP address. Instead, it permits access only by a party that contains the specified IP address as its URL, rather than a domain name that maps to that IP address. For example, if the domain name www.example.com maps to the IP address 192.0.34.166, a call to Security.allowDomain("192.0.34.166") does not grant access to www.example.com.
You can pass the "*" wildcard to the Security.allowDomain() method to allow access from all domains. Because it grants permission for SWF files from all domains to script the calling SWF file, use the "*" wildcard with care.


Flash Player restriction for lower version than 9.0.124: -

Flash Player version 9.0.124: It no longer allows you to send custom HTTP headers to a remote host. Example: a SWF from “Domain A” wants to send custom HTTP headers in a GET/POST request to “Domain B”. By default, starting with Flash Player 9.0.124 this won't work!"

As we are using both web service and HTTP service (method="GET") call to get data from server

crossdomain.xml format: -

File Name should be: - crossdomain.xml








How swf behaves with crossdomain file: -

When a SWF file attempts to access data from another domain, Flash Player automatically attempts to load a policy file from that domain. If the domain of the SWF file that is attempting to access the data is included in the policy file, the data is automatically accessible.
By default, policy files must be named crossdomain.xml and must reside in the root directory of the server.
A policy file affects access only to the particular server on which it resides.

Why “*”:-
Wildcard domains are indicated by either a single asterisk (*), which matches all domains and all IP addresses.

Where do the policy files need to reside XML web server
Policy files must be named crossdomain.xml and must reside in the root directory of the server.

One more important point: -
Check Firewall Security [internal and external access to port] which block user to access port.

Thanks for reading post…….

Issue with custom Item renderer data repainting or data change automatically after focus out

"Issue with custom Item renderer data repainting or data change automatically after focus out".

There are lot of developer who creates custom Item renderer and place logic in side it, but lot of developer make small and common mistakes while creating custom component or custom item renderer.

If developer is overriding function he/she should take care of adding line

super.functionName(Par[..])

Example: -
override public function set data(value:Object):void
{
super.data = value;
//Developer Logic start below……
}

If developer forgot to write super in his override function above issue occurs where developer spend lot of time to find out the solution in written logical code.

Enjoy............

“No Response” Display Issue in TitleBar of your AIR Project.

Issue: If you are working on Air with huge load on your application like lot of DragDrop operation, moving component from here and there and performing lot of animation on your application which will lead to hang your application (stuck your application) but after some time it will work properly but issue is - you can find "No Response" will get displayed at TitleBar of your Application.

Solution: After R&D I found that there is property called applicationActivate in WindowedApplication which is used to solve your problem. Call below function to make your project name assigned to “title” of your application

private function applicationActivateHandler():void{
this.title = "ProjectName";
}

Print AdvancedDataGrid with property variableRowHeight related to page width.

While working on PrintAdvancedDataGrid component I found it is very interesting to do R&D on it. There is couple of issues I faced while working on it.

Issue: - If you are using PrintAdvancedDataGrid and property variableRowHeight is made as "true" you can find data is not getting print properly on page (i.e. percentWidth doesnot work (percentWidth = 100)).

Solution: To make it work properly you have to follow below steps: -

Steps: -
1) Assign data to dataProvider of your PrintAdvancedDataGrid
2) Assign percentWidth = 100
3) Call validateNow()
4) Assign percentHeight = 100
5) Assign variableRowHeight=true
6) Assign wordWrap=true

These six lines will solve your problem; these lines should be in same sequence as mentioned above.

It’s interesting to work on PrintAdvancedDataGrid Component and to do R&D on it. Enjoy…….

Importing more than 10000 records in AdvancedDataGrid issue

Consider you are getting 10000 records from server side in the form of XML and you have to display those records in Client side i.e. Flex AdvancedDataGrid.

It has been very critical to load more than 10000 records in Advanced DataGrid, there are many works around to solve this issue, after some workaround I found one of the solutions to load huge amount of data.

Difficulty faced during Debug this issue: -
1) Flex timeout: while debugging for 10000 and more records on client side.

Solution: After research I came to know that Flex gives timeout error after 2500 - 2900 records has been added in ArrayCollection which lead to Flex Timeout error.

If you are trying to load more records you have to create recursive function to handle it on client side.

setTimeout(recursiveImportHandler,200)

In recursiveImportHandler() function put “count” as variable which will keep track of record no.. Use “for loop” to add record in ArrayCollection.

Make your ArrayCollection as Bindable

Note: Your “count” should not be greater than your imported XML length.

To avoid user click you can provide Progress bar till your data gets loaded in AdvancedDataGrid.

Issue Using (Native) Windows or Detached Window with AIR:-

Create custom component which contains Combobox and Datagrid.

Application conations two button 1) Same Window and 2) New Window. (Label of two button)

When you click on “Same Window” button your custom component should get added dynamically in your application.

And when you click on “New Window” button your custom component should get open in different window (it should get shifted from application and should appear in Window component).

Issue faced:-Clicking on Combobox, list is not getting open as change event doesn’t get fired in Native Window as it looses reference from main application.

Issue with DataGrid in Native window (AIR).

DataGridEvent.COLUMN_STRETCH event get affected if try to open datagrid in Native Window.

DataGridEvent get fired but takes long time or even stuck while column stretch

Tooltips all show up in the main application window rather than the popped up window by using mx:Windows and mx:WindowedApplication.

Note:

Application is a Desktop Application. Only one instance is created in Application for your custom component to preserve current state on your custom component it can be Style, data, or other subcomponent state of your custom component (as above mentioned 2 component are just sample).

Solution 1: - There is no real fix to this issue. You can recreate the component in the pop up window.
It is a heavy on performance.

Solution 2: - Use “Object polling Design Pattern” which will help you to overcome performance issue.

Welcome with good solution for this issue.