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

Question

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

我正在关注这个视频教程。 （我正在创建 Mobile Project 而不是像视频中那样简单的 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="{parentDocument.data.link.getItemAt('1').href} ...时，它会删除错误，但在生成的应用程序上什么也不显示。

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

这一行有多个标记：

-1120：访问未定义的属性数据。
-父文档

需要做什么才能在自定义组件中使用项目渲染器？请告诉我解决方案...我被困了好久。

Answer 1

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

在 Flex 3 中，许多组件都可以用作项目渲染器，您在视频中看到的旧 (Flex 3) HBox 组件用作项目渲染器，因为它具有 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 - 这类似于您指定布局的组，但它创建“渲染器” - 使用数据提供程序具有“数据”属性的任何内容，但关键是没有虚拟化它只是创建所有其中。
3. 当您切换到 DataGrid 时，情况会变得更加复杂...