Flash Builder项呈示器显示正确的数量但没有数据

时间:2014-08-05 14:37:12

标签: flash flex flash-builder

我无法将API中的数据导入我的项呈示器。应用程序只需要使用api搜索电影,然后使用项呈示器显示结果。

与API的连接始终有效,因为我查看了Flash构建器中的网络选项卡,并看到数据进来。此外,项目渲染显示正确的字段数量(例如:如果我搜索电影获得返回4个结果,它显示项目渲染器中的4个白色框)但是它不会显示数据。我试图展示这个标题。

主要的mxml文件

<?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" minWidth="955" minHeight="600"
           creationComplete="application1_creationCompleteHandler(event)">
<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.controls.Button;
        import mx.events.FlexEvent;
        import mx.rpc.events.ResultEvent;
        import mx.rpc.http.HTTPService;

        import classes.MovieSearch;
        import classes.Movie;

        public var http:HTTPService = new HTTPService();
        [Bindable]public var acMovies:ArrayCollection = new ArrayCollection();

        protected function application1_creationCompleteHandler(event:FlexEvent):void
        {

            txtSearch.addEventListener(FlexEvent.ENTER, search);

        }

        protected function search(event:Event):void
        {
            if(txtSearch.text == "")
            {
                //var top100:Itunes = new Itunes();
                //top100songs.dataProvider = top100.getSongs();

            }
            else
            {
                var movieSearch:MovieSearch = new MovieSearch(txtSearch.text);
                movieResults.dataProvider = movieSearch.search();
                //lblFullTitle.text = "Search results for: " + txtSearch.text;
            }



        }


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

<s:VGroup width="1090" height="90%" gap="30" paddingTop="30">
    <s:HGroup width="100%" height="35" gap="60" horizontalAlign="right" verticalAlign="middle">
        <s:HGroup width="100%" height="35" gap="20" horizontalAlign="left" verticalAlign="middle">

        </s:HGroup>
        <s:TextInput id="txtSearch" x="635" y="3" width="225" height="25" text="Search...">
            <s:filters>
                <s:DropShadowFilter distance="0" blurX="8" blurY="8" angle="310" alpha="0.75"/>
            </s:filters>    
        </s:TextInput>
    </s:HGroup>
    <s:Group width="100%">
        <s:DataGroup id="movieResults" itemRenderer="customComponents.MovieRenderer" width="100%" contentBackgroundColor="#ffffff">
            <s:layout>
                <s:TileLayout horizontalGap="60" verticalGap="30" requestedColumnCount="5" />
            </s:layout>
        </s:DataGroup>
    </s:Group>
</s:VGroup>

</s:Application>

目前简单的电影类

package classes
{
public class Movie extends Object
{
    public var title:String;

    public function Movie(title:String)
    {
        this.title = title;
    }   
}
}

movieSearch类

package classes
{
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
import mx.rpc.http.HTTPService;

public class MovieSearch extends Object
{   
    private var url:String;

    private var result:ArrayCollection;

    public function MovieSearch(keywords:String)
    {
        result = new ArrayCollection();
        url = "http://api.themoviedb.org/3/search/movie?api_key=7f182385c9030e466efebf258c9a5f37&query="+ keywords;

        var request:HTTPService = new HTTPService();
        request.url = url;
        request.showBusyCursor = true;
        request.addEventListener(ResultEvent.RESULT, setInfo);
        request.send();
    }

    public function setInfo(ev:ResultEvent):void{
        var json_result:Object = JSON.parse(ev.result.toString());
        json_result.results.splice(0, 1);
        for each (var results:Object in json_result.results){

            var newMovie:Movie = new Movie(results.original_titel);

            result.addItem(newMovie);
        }
    }

    private function strReplace(str:String, search:String, replace:String):String {
        return str.split(search).join(replace);
    }

    public function search():ArrayCollection {
        return this.result;
    }
}

}

以及最后一个项目渲染器,(注意:我在代码末尾附近的标签处收到警告:数据绑定将无法检测到标题的分配)

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark" 
            xmlns:mx="library://ns.adobe.com/flex/mx"
            dataChange="validateNow();"
            creationComplete="itemrenderer1_creationCompleteHandler(event)"
            autoDrawBackground="false">
<s:layout>
    <s:VerticalLayout/>
</s:layout>
<fx:Declarations>

</fx:Declarations>
<fx:Script>
    <![CDATA[
        import classes.Movie;

        import mx.events.FlexEvent;

        [Bindable]
        public var movieData:Movie;

        protected function itemrenderer1_creationCompleteHandler(event:FlexEvent):void
        {
            // TODO Auto-generated method stub
            movieData = data as Movie;

            //lbl_more.addEventListener(MouseEvent.CLICK, parentDocument.moreInfo(songData));
        }


    ]]>
</fx:Script>
<s:states>
    <s:State name="normal"/>
    <s:State name="hovered"/>
</s:states>

<s:BorderContainer styleName="bc_song" width="170">
    <s:layout>
        <s:VerticalLayout gap="12" horizontalAlign="center" verticalAlign="middle"/>
    </s:layout>
    <s:Group>
        <s:filters>
            <s:DropShadowFilter distance="0" blurX="8" blurY="8" angle="310" alpha="0.75"/>
        </s:filters>
        <!--<s:Image width="170" height="170" x="-4" y="-4" source="{movieData.image}"/>-->

    </s:Group>
    <s:Label width="170" text="{movieData.title}"/>

</s:BorderContainer>
</s:ItemRenderer>

提前感谢您查看我的问题!

1 个答案:

答案 0 :(得分:0)

这可能是数据绑定如何工作的问题。

&#39; [Bindable]&#39;当应用于非原始对象时,将在应用绑定时使绑定应用于对象,当引用更改时绑定不会移动。所以:

    [Bindable]
    public var movieData:Movie;//this creates a null or undefined object, 
                               //anything binding to this will be stuck 
                               //referencing this null object

    protected function itemrenderer1_creationCompleteHandler(event:FlexEvent):void
    {
        movieData = data as Movie;//once this line is applied, any future binds 
                                  //will link to this but all the UI object are 
                                  //already bound to the old one
        parentDocument.moreInfo(songData));
    }

解决这个问题的方法是使用[Bindable] get/set functions

EG:

private var _movieData:Movie;

[Bindable]
public function get movieData():Movie
{
    return _movieData;
}
public function set movieData(value:Movie):void
{
    _movieData = value;
}