用FLex实现类似论坛个人信息页面

      该页面主要利用List控件的selectedIndex作为索引来实现，取出相关的其他XML节点的值。先建view.mxml的作为组件形式，嵌入主程序Main.mxml中，代码中先绑定赋值好变量，再绑定所要相关显示控件上！该实例只供参考！

效果如下：

 
代码如下：
view.mxml

view plaincopy to clipboardprint?
<?xml version="1.0" encoding="utf-8"?>   
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="480" height="280"  
           borderStyle="solid" creationComplete="init()">   
    <mx:Script>   
        <!--[CDATA[   
            [Bindable]   
            private var nickName:String="";   
            [Bindable]   
            private var names:String="";   
            [Bindable]   
            private var content:String="";   
            [Bindable]   
            private var qq:String="";   
            [Bindable]   
            private var email:String="";   
            [Bindable]   
            private var img:String="no.jpg";   
               
            private var _xml:XML;   
            private var _xmlpath:String = "list.xml";   
            public function init():void  
            {   
                var _loader:URLLoader = new URLLoader();   
                _loader.load(new URLRequest(_xmlpath));   
                _loader.addEventListener(Event.COMPLETE,onLoad);   
            }   
            private function onLoad(event:Event):void  
            {   
                _xml = new XML(event.target.data);   
                list.dataProvider = _xml.item.nickname;   
            }   
            public function selectItem(event:Event):void  
            {   
                var num:Number = event.target.selectedIndex;   
                nickName = _xml.item[num].nickname;   
                names = _xml.item[num].name;   
                email = _xml.item[num].email;   
                qq = _xml.item[num].qq;   
                img = _xml.item[num].img;   
                content = _xml.item[num].content;   
            }   
        ]]-->   
    </mx:Script>   
    <mx:List id="list" x="314" y="20" width="150" height="230" change="selectItem(event);"/>   
    <mx:Canvas x="0" y="0" width="100%" height="100%">   
        <mx:Image width="120" height="120" x="180" y="20" source="{img}"/>   
        <mx:Label x="19" y="15" text="姓名：{names}"/>   
        <mx:HRule x="18" y="39" width="129"/>   
        <mx:Label x="19" y="44" text="昵称：{nickName}"/>       
        <mx:HRule x="18" y="68" width="129"/>   
        <mx:Label x="19" y="112" text="QQ：{qq}"/>   
        <mx:HRule x="18" y="136" width="129"/>   
        <mx:Label x="19" y="78" text="邮箱：{email}"/>      
        <mx:HRule x="18" y="102" width="129"/>   
           
        <mx:Label x="18" y="147" text="介绍："/>   
        <mx:TextArea x="55" y="146" width="244" height="102" text="{content}"/>   
    </mx:Canvas>   
</mx:Canvas>  
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="480" height="280"
     borderStyle="solid" creationComplete="init()">
 <mx:Script>
  <!--[CDATA[
   [Bindable]
   private var nickName:String="";
   [Bindable]
   private var names:String="";
   [Bindable]
   private var content:String="";
   [Bindable]
   private var qq:String="";
   [Bindable]
   private var email:String="";
   [Bindable]
   private var img:String="no.jpg";
   
   private var _xml:XML;
   private var _xmlpath:String = "list.xml";
   public function init():void
   {
    var _loader:URLLoader = new URLLoader();
    _loader.load(new URLRequest(_xmlpath));
    _loader.addEventListener(Event.COMPLETE,onLoad);
   }
   private function onLoad(event:Event):void
   {
    _xml = new XML(event.target.data);
    list.dataProvider = _xml.item.nickname;
   }
   public function selectItem(event:Event):void
   {
    var num:Number = event.target.selectedIndex;
    nickName = _xml.item[num].nickname;
    names = _xml.item[num].name;
    email = _xml.item[num].email;
    qq = _xml.item[num].qq;
    img = _xml.item[num].img;
    content = _xml.item[num].content;
   }
  ]]-->
 </mx:Script>
 <mx:List id="list" x="314" y="20" width="150" height="230" change="selectItem(event);"/>
 <mx:Canvas x="0" y="0" width="100%" height="100%">
  <mx:Image width="120" height="120" x="180" y="20" source="{img}"/>
  <mx:Label x="19" y="15" text="姓名：{names}"/>
  <mx:HRule x="18" y="39" width="129"/>
  <mx:Label x="19" y="44" text="昵称：{nickName}"/> 
  <mx:HRule x="18" y="68" width="129"/>
  <mx:Label x="19" y="112" text="QQ：{qq}"/>
  <mx:HRule x="18" y="136" width="129"/>
  <mx:Label x="19" y="78" text="邮箱：{email}"/> 
  <mx:HRule x="18" y="102" width="129"/>
  
  <mx:Label x="18" y="147" text="介绍："/>
  <mx:TextArea x="55" y="146" width="244" height="102" text="{content}"/>
 </mx:Canvas>
</mx:Canvas>

  
Main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="horizontal" horizontalAlign="center"
    backgroundColor="0x414141"
    xmlns:view="*">
 <view:view>
 </view:view>
</mx:Application> 

 
list.xml文件

<?xml version="1.0" encoding="UTF-8"?>   
<items>   
    <item>   
        <nickname>为爱守望</nickname>   
        <name>小罗</name>   
        <qq>280000693</qq>   
        <email>[e-mail]</email>   
        <img>3.gif</img>   
        <content>我嘛！学习Flex+JAVA的爱好者小鸟级别而已</content>   
    </item>   
    <item>   
        <nickname>老细</nickname>   
        <name>江雪</name>   
        <qq>77626449</qq>   
        <email>[e-mail]</email>   
        <img>2.jpg</img>   
        <content>这家伙很懒，什么都没留下</content>   
    </item>   
    <item>   
        <nickname>老细的老细</nickname>   
        <name>祖宇</name>   
        <qq>8888888</qq>   
        <email>[e-mail]</email>   
        <img>1.jpg</img>   
        <content>改变不能接受的，接受不能改变的</content>   
    </item>   
</items>  
<?xml version="1.0" encoding="UTF-8"?>
<items>
 <item>
  <nickname>为爱守望</nickname>
  <name>小罗</name>
  <qq>280000693</qq>
  <email>[e-mail]</email>
  <img>3.gif</img>
  <content>我嘛！学习Flex+JAVA的爱好者小鸟级别而已</content>
 </item>
 <item>
  <nickname>老细</nickname>
  <name>江雪</name>
  <qq>77626449</qq>
  <email>[e-mail]</email>
  <img>2.jpg</img>
  <content>这家伙很懒，什么都没留下</content>
 </item>
 <item>
  <nickname>老细的老细</nickname>
  <name>祖宇</name>
  <qq>8888888</qq>
  <email>[e-mail]</email>
  <img>1.jpg</img>
  <content>改变不能接受的，接受不能改变的</content>
 </item>
</items>