访问Flex中自定义组件中的数据

Question

如果我的问题非常基础，我是Flex的新手，请原谅我。 我在发布之前已经搜索了很多，可能是我没有找到正确的方向。 请将我重定向到导致解决问题的路径。 我非常感谢能得到的任何帮助。

我正在关注这个视频教程。 （我创建的移动项目不像视频中的简单Flex项目）

http://www.gotoandlearn.com/play.php?id=100

一切都很顺利，直到导师想要在应用程序中添加自定义组件。 他添加了我在Flash Builder 4.6中找不到的HBox，所以我在我的新组件中添加了HGroup。 现在，当我想使用自定义组件中父组件中提取的数据时，它会给我错误。 这是代码及其文件名。

文件：SearchHomeView.mxml

<?xml version="1.0" encoding="utf-8"?>    
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"    
        xmlns:s="library://ns.adobe.com/flex/spark" title="Twitter Search">    
    <fx:Declarations>    
        <!-- Place non-visual elements (e.g., services, value objects) here -->    
        <s:HTTPService result="onResult(event)" id="service" url="http://search.twitter.com/search.atom?q=adobe">

        </s:HTTPService>    
    </fx:Declarations>    
    <fx:Script>    
        <![CDATA[    
            import flash.utils.flash_proxy;                       
            import mx.collections.ArrayCollection;    
            import mx.rpc.events.ResultEvent;         

            [Bindable]

            private var ac:ArrayCollection;                       
            private function onResult(event:ResultEvent):void    
            {    
                ac = event.result.feed.entry as ArrayCollection;    
                trace(data);    
                trace(ac);    
            }

            private function doSearch(event:MouseEvent):void    
            {    
                //service.url = "http://search.twitter.com/search.atom?q=" + tearch.text;    
                service.url = "http://search.twitter.com/search.atom?q=adobe";    
                service.send();    
            }    
        ]]>    
    </fx:Script>

    <s:TextInput x="25" y="26" width="146" id="tearch"/>    
    <s:Button x="224" y="26" height="33" label="Search" click="doSearch(event)" />    
    <s:List dataProvider="{ac}" itemRenderer="tweet" x="25" y="92" width="274" height="278"></s:List>    
</s:View>

文件：tweet.mxml

    <?xml version="1.0" encoding="utf-8"?>        
    <s:HGroup xmlns:fx="http://ns.adobe.com/mxml/2009"        
              xmlns:s="library://ns.adobe.com/flex/spark" width="400" height="300">        
        <fx:Declarations>        
            <!-- Place non-visual elements (e.g., services, value objects) here -->

        </fx:Declarations>        
        <s:Image width="50" height="50" source="{parentDocument.data.link.getItemAt('1').href}">

        </s:Image>        
        <s:TextBase width="100%" text="">                               
        </s:TextBase>        
    </s:HGroup>

当我使用source为source="{parentDocument.data.link.getItemAt('1').href} ...时，它会删除错误，但在生成的应用程序中不显示任何内容。

当我使用source为source="{data.link[1].href} ......它给出了错误，

此行有多个标记：

-1120：访问未定义的属性数据。
-parentDocument

在自定义组件中使用项呈示器需要做什么？ 请告诉我它的解决方案......我已经坚持了很多次。

Answer 1

您的组件Tweet.mxml应该扩展ItemRenderer 。

在Flex 3中，许多组件可用作项目渲染器，您在视频中看到的旧（Flex 3） HBox组件用作项目渲染器b / c它具有data属性。

作为Flex 4的“按需付费”方法的一部分，容器类（Group，HGroup等）不支持直接用作项呈示器。 因此， HGroup没有data属性。

尝试使Tweet.mxml看起来像这样：

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark" width="400" height="300">

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:layout>
        <s:HorizontalLayout />
    </s:layout>

    <!-- Typically, the dataProvider of your List is an array of objects of the same
         type. So each item renderer that is on screen has it's data property populated
         with one of these items. You can then craft an MXML document like this that
         uses the properties of your array element. You're going to need to use the
         right expression that finds the image source in the data item. If you really
         want to be rendering the array data.link, pass that data w/an ArrayCollection
         to the list instead ... it's hard to advise here w/out knowing what your data
         looks like. -->
    <s:Image width="50" height="50" source="{data.link.getItemAt('1').href}" />

    <s:StyleableTextField width="100%" text="" />

</s:ItemRenderer>

我正在做的改变是：

• 扩展ItemRenderer
• 使用渲染器中的Horizo​​ntalLayout替换HGroup的布局
• 使用渲染器的data属性作为图像源（使用data属性填充渲染器的所有动态部分（如文本字段）
• 使用StyleableTextField，优化移动文本

Answer 2

在你的onResult事件处理程序中 - 小心检查你实际上是将所有项目分配到arraycollection中 - 如果feed.entry没有显式地是一个ArrayCollection，你将需要迭代列表（假设这是一个xmllist，因为它看起来像一个RSS提要）...

所以与其：

protected function onResult(event:ResultEvent):void
{
    if (!ac) ac = new ArrayCollection();
    for each (var entry:XML in event.result.feed..entry)
    {
        ac.addItem(entry);
    }
}

至于ItemRenderer，你有几个不同的选择......

1. ItemRenderer - 正如@Sunil所建议的那样，这是在基于spark的列表中使用的'基础'渲染器类。
2. DataGroup - 这类似于您指定布局的Group，但它创建了“renderers” - 任何具有使用dataprovider的'data'属性的东西，虽然没有虚拟化，但它只创建了所有这些。
3. 当你切换到DataGrid时，它比这更复杂......