1

我是 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 to be source="{parentDocument.data.link.getItemAt('1').href}... 时，它会消除错误，但不会在生成的应用程序上显示任何内容。

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

此行有多个标记：

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

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

4

2 回答 2

3

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

在 Flex 3 中，许多组件都可以用作项目渲染器，HBox您在视频中看到的旧 (Flex 3) 组件用作项目渲染器 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，为移动设备优化文本
于 2012-05-04T04:59:24.613 回答
0

在您的 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 时，它变得比这更复杂......
于 2012-05-04T15:13:19.583 回答