Question

I am having a consistent problem with Flash Builder 4 in a very specific case where the intellisense auto-complete stops working.

It happens when I use inline components in a DataGroup.
I have one Script tag for the component class, and then, in the DataGroup I have a Component tag under itemRenderer and a Script tag under that component’s class tag. At this point intellisense stops working. Has anyone encountered this and found a work-around?

Here is a source code example.
Load it in Flash Builder and if you have the same problem I do, auto-complete will not work in first Script tag. This is annoying since I like to use inline components.

<?xml version="1.0" encoding="utf-8"?>
<s:Group 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="400" height="300">
  <fx:Script>
    <![CDATA[
      //Try to use auto-complete
      //It doesn't work
      var p:Object;
    ]]>
  </fx:Script>
  <s:DataGroup>
    <s:itemRenderer>
      <fx:Component className="MyItemRenderer">
        <s:Group implements="mx.core.IDataRenderer">
          <fx:Script>
            <![CDATA[
              //auto-complete is ok here...
              private var _data:Object;

              public function get data():Object {
                return _data;
              }

              public function set data(value:Object):void {
                _data = value;
                invalidateProperties();
              }
            ]]>
          </fx:Script>
        </s:Group>
      </fx:Component>
    </s:itemRenderer>
  </s:DataGroup>
</s:Group>

Answer 1

Ok, here is another work-around which works better since it lets me keep the item renderer code in the same mxml file with minimal change. I found it quite by chance. What you do is instead of defining the item renderer’s <fx:Component> tag inline as a child element of the <s:itemRenderer> tag, you move it to the <fx:Declarations> tag and give it a class name. Then, put that class name inside the <s:itemRenderer> tag. This is slightly better for me than externalizing the item renderer component.

Here is a bare-bones example:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx">
  <fx:Declarations>
    <fx:Component className="PrintLine" id="printLineFactory">
      <s:Label implements="mx.core.IDataRenderer" width="100%">
        <fx:Script>
          <![CDATA[
            private var _data:Object;

            public function get data():Object {
              return _data;
            }

            public function set data(value:Object):void {
              _data = value;
              invalidateProperties();
            }

            override protected function commitProperties():void {
              super.commitProperties();
              if (_data) {
                text = String(_data);
              }
            }
          ]]>
        </fx:Script>
      </s:Label>
    </fx:Component>
  </fx:Declarations>
  <fx:Script>
    <![CDATA[
      //auto-complete works here now!
    ]]>
  </fx:Script>
  <s:layout>
    <s:VerticalLayout />
  </s:layout>
  <s:Scroller height="100">
    <s:viewport>
      <s:DataGroup width="100%">
        <s:layout>
          <s:VerticalLayout />
        </s:layout>
        <s:itemRenderer>
          PrintLine
        </s:itemRenderer>
      </s:DataGroup>
    </s:viewport>
  </s:Scroller>
</s:Application>

That I have to do this is still stupid and I still hate Adobe. 🙁

UPDATE:
Using the class name “PrintLine” only works in the above code because the root tag is an Application tag. In custom sub-components, you need to bind to the factory reference instead:

<s:itemRenderer>{printLineFactory}</s:itemRenderer>