Flex TextArea problem in DataGrid

Problem

Flex 4 TextArea does not take multi-line entry when used as editor in DataGrid.

Solution

Add editorUsesEnterKey="true" attribute to the column with TextArea editor.

P.S.

The solution is straightforward. But the route to finding this solution kind of proves open source or at least show your customer the source code is very important.

I first suspect the enter key is intercepted by DataGrid, but it appears that keydown event is intercepted by DataGrid before the TextArea. Some Googling with various keyword combination did not turn up anything interesting.

Not sure where to start, I added a itemEditEnd event handler to the DataGrid, and set a breakpoint there. After walking through the stack, I saw the following code segment, and thus the solution above pops out. Now I can simply go to documentation of editorUsedEnterKey and make sure this is what I want.

(Code of interest from DataGrid.as)
    /**
     *  @private
     */
    private function editorKeyDownHandler(event:KeyboardEvent):void
    {
        // ESC just kills the editor, no new data
        if (event.keyCode == Keyboard.ESCAPE)
        {
            endEdit(DataGridEventReason.CANCELLED);
        }
        else if (event.ctrlKey && event.charCode == 46)
        {   // Check for Ctrl-.
            endEdit(DataGridEventReason.CANCELLED);
        }
        else if (event.charCode == Keyboard.ENTER && event.keyCode != 229)
        {
            // multiline editors can take the enter key.
            if (!_editedItemPosition)
                return;

            if (columns[_editedItemPosition.columnIndex].editorUsesEnterKey)
                return;

            // Enter edits the item, moves down a row
            // The 229 keyCode is for IME compatability. When entering an IME expression,
            // the enter key is down, but the keyCode is 229 instead of the enter key code.
            // Thanks to Yukari for this little trick...
            if (endEdit(DataGridEventReason.NEW_ROW) && !dontEdit)
            {
                findNextEnterItemRenderer(event);
                if (focusManager)
                    focusManager.defaultButtonEnabled = false;
            }
        }
    }

Adobe Flex RSL Error in IE

This is another case which I know the cause and the solution for a problem. But I don't understand why it would cause a problem.

Environment:
  - IE10, Win7, Flash Player 11.8 debugger
  - Google Chrome  28.0 with Flash Player 11.8

Symptom:
  Flex application stopped  working in IE. Always getting this error message: "RSL Error 1 of 2". RSL is short for Runtime Shared Library. Using ServiceCapture, I do see the main SWF loaded, and the first RSL loaded, but no the rest.
  The same Flex application works perfectly in Google Chrome.

Cause:
  In the the IE Security setting, "Enable Protected Mode" is unchecked.


Solution:
  Go to IE > Tools > Internet Options > Security, make sure "Enable Protected Mode" is checked. Then restart IE. Voila, it all works again. In retrospect, I might turned it off when I was trying to set up Selenium test framework.

Question:
  It's still beyond me why "Protected Mode" seems to make IE 10 more compatible. Just a few days back I had another problem with Office Web application due to the exact same cause. An extra IE windows will always popup when I open an Office 2013 application in Excel. The problem is gone after I enabled protected mode.

----
Flex: a RIA web application development framework based on Adobe Flash technology

Flex: set cursor shape to hand

The catch is to remember to also set "buttonMode" to true.

Flex Builder Error 1046: "Type was not found or was not a compile-time constant"

Problem:
While editing a big .as file in Flex Builder 3, the compile is broken suddenly. Got this error:

1046: Type was not found or was not a compile-time constant: ?????.

Cause:
Seems like Flex editor tend to wrongly remove import statement at the top of .as file without user consent.

Solution:
Disable Flex Builder feature:
Windown > Preferences > Flex > Editors > ActionScript Code, uncheck "Remove unused imports when organizing"

Flex Compiler Error - Could not resolve * to a component implementation

While extending MX control ComboBox, I am trying to alter it's property.

<mx:dropdownfactory>
     <mx:component>
      <mx:tree change="outerDocument.updateLabel()" height="200" allowmultipleselection="{outerDocument.allowMultipleSelection}" showroot="{outerDocument.showRoot}" showdatatips="true" datatipfield="{outerDocument.labelField}">
   </mx:tree>
</mx:component>
</mx:dropdownfactory>

I got the compiler error as stated in the tile. Turns out I should refer to the property using my custom control's own name space. So the code should be like this:

<local:dropdownfactory>
     <mx:component>
      <mx:tree change="outerDocument.updateLabel()" height="200" allowmultipleselection="{outerDocument.allowMultipleSelection}" showroot="{outerDocument.showRoot}" showdatatips="true" datatipfield="{outerDocument.labelField}">
   </mx:tree>
</mx:component>
</local:dropdownfactory>

Dynamically Hide Cells in Flex DataGrid

Goal: Control visibility of controls in Flex DataGrid

Problem:
Control of cells' visibility in Flex DataGrid turns out to be pretty tricky. If you simply use inline item renderer and bind it's visibility attribute to a data provider, it won't work.

Why:
Fortunately, Flex is open source. So, we can dig a little deeper into why it does not work.

1. Look at SDK 3.2.0: DataGridBase.as, line 1073 will show that Flex SDK will actually set the renderer to visible after set "data" property of the control.
2. Also, the SDK may decide to hide the cell when it sees fit in various situations;
   

So, it is not desirable to control visibility directly. You are fighting with the SDK.

Solution(s):
Solution 1: Use a container as item renderer, and embed your control inside the container.
Pros: Quick and easy to implement. An added benefit is that you can control cell layout;
Cons: As all the Flex text book will stress: using too many containers is very BAD for performance! How bad? A 20X20 DataGrid may take at least 5 seconds to render!

Solution 2: Create custom control based on the control you want to use in the cell. And manage a new "forceHide" attribute, which will cooperate with the original "visible" attribute to decide a control's visibility. Please see the sample code below. Some details are missing, but you get the idea.

...
protected var _forceHide:Boolean = false;
/**
* visible by set method
*/        
protected var _setVisible:Boolean = false;
/**
* If set, this control will not be visible. It will overwrite visible property.
* DataGrid tend to manipulate visible directly, we can only use
* this extra field to force hide control even if DataGrid decides
* that it can be shown.
*/
public function set forceHide(value:Boolean):void {
    _forceHide = value;                          
    setVisible(_setVisible);
    invalidateProperties();
}
override public function setVisible(value:Boolean, noEvent:Boolean=false):void {
    //save desired settings
    _setVisible = value;
    //forceHide can mask out change request
    super.setVisible((!_forceHide) && value, noEvent);
}
...

Other Thoughts:
How about "CallLater"? It turns out to be a bad idea. As stated before, Flex SDK may want to hide some controls. If your "CallLater" set a control's visible to true, when Flex SDK think it is invisible, you may see some ghost controls hanging around.

Flex Builder Error: "Unable to export SWC oem"

Solution: Right click on project, select Properties > Flex Library Build Path > Assets. Uncheck the root node and check it again, then compile project. The error is gone.

I found the solution here: http://flexdevtips.blogspot.com/2009/06/unable-to-export-swc-oem.html