学步园

 

 

1.启动画面

 

 

<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.MainView" applicationDPI="240"
splashScreenImage="@Embed('图片地址')">
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
</s:ViewNavigatorApplication>

 

 2.增加HTTPService 连接XML  

在界面启动完后 添加完成事件来发送HTTPService服务

 

 

<?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="Explore California"
        creationComplete="getTrips.send()">

 

    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
            <s:HTTPService url="http://services.explorecalifornia.org/rest/tours.php"
                   id="getTrips"
                   result="getTrips_resultHandler(event)"/>
    </fx:Declarations>    

 

3.声明一个myTrips的ArrayCollection 来装内容     生成result事件  把收到的内容放到myTrips

<fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.rpc.events.ResultEvent;
            [Bindable]
            protected var myTrips:ArrayCollection;
            protected function getTrips_resultHandler(event:ResultEvent):void
            {
                // TODO Auto-generated method stub
                myTrips=event.result.tours.tour;
            }
            
        ]]>
    </fx:Script>

4.拉一个list  来绑定显示 myTrips 

    <s:List left="0" right="0" top="0" bottom="0"
            dataProvider="{myTrips}">
      
    </s:List>

5.在List中每一个XML对象会有一张图片作为标题图片

 这里用iconFunction 覆盖 iconField 

iconFunction 主要是返回一个图片的方法来覆盖iconField

<s:List left="0" right="0" top="0" bottom="0"
            dataProvider="{myTrips}">
            <s:itemRenderer>
                <fx:Component>
                    <s:IconItemRenderer iconFunction="getPhotoURL" iconWidth="72"
                                        iconHeight="72" height="110" verticalAlign="top">
                        <fx:Script>
                            <![CDATA[
                                protected function getPhotoURL(item:Object):String
                                {
                                return "images/"+item.image;
                                }                
                            ]]>
                        </fx:Script>
                        
                    </s:IconItemRenderer>
                </fx:Component>
            </s:itemRenderer>    
    </s:List>

 

 6.为List添加点击出现详细页面

这是我们新建一个自定义组建 TripDetails

在上面 list 添加 id 和 change事件

<s:List id="tripList" change="tripList_changeHandler(event)" left="0" right="0" top="0" bottom="0"
    </s:List>

 

            protected function tripList_changeHandler(event:IndexChangeEvent):void
            {
                // TODO Auto-generated method stub
                navigator.pushView(views.TripDetails,tripList.selectedItem)
            }

 

7.在TripDetails里添加内容

 

 

<?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="TripDetails">
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    <s:BitmapImage source="images/{data.image}"/>
    <s:TextArea editable="false" text="{data.description}"/>
    <s:Label text="{data.price}"/>
    <s:Button label="Go to Site"/>    
</s:View>