注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

无线时代辐射无穷

抓紧生宝宝,小心辐射

 
 
 

日志

 
 

FLEX4 实战、源码和效果图  

2011-06-02 08:26:56|  分类: flex |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

1、 Accordion组件的用法。折叠效果。

<?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" backgroundColor="#E41616">

<fx:Declarations>

<!-- 将非可视元素(例如服务、值对象)放在此处 -->

</fx:Declarations>

<mx:Accordion x="103" y="156" width="547" height="393">

<s:NavigatorContent label="好友管理" width="100%" height="100%">

</s:NavigatorContent>

<mx:VBox label="我的好友">

<mx:HBox  width="100%" height="100%">

<s:Label text="张三" width="40" height="15"/>

<mx:Image source="image/a.jpg" width="417" height="100"/>

</mx:HBox>

<mx:HBox  width="100%" height="100%">

<s:Label text="张三" width="38"/>

<mx:Image source="image/b.jpg" width="100" height="100"/>

</mx:HBox>

<mx:HBox  width="100%" height="100%">

<s:Label text="王五" width="40"/>

<mx:Image source="image/c.jpg" width="100" height="100"/>

</mx:HBox>

<mx:HBox  width="100%" height="100%">

<s:Label text="李麻子"/>

<mx:Image source="image/d.jpg" width="100" height="100"/>

</mx:HBox>

</mx:VBox>

<mx:VBox label="陌生人">

<mx:HBox  width="100%" height="100%">

<s:Label text="姜鹏" width="40" height="15"/>

<mx:Image source="image/a.jpg" width="417" height="100"/>

</mx:HBox>

<mx:HBox  width="100%" height="100%">

<s:Label text="信哲" width="38"/>

<mx:Image source="image/b.jpg" width="100" height="100"/>

</mx:HBox>

<mx:HBox  width="100%" height="100%">

<s:Label text="麻子" width="40"/>

<mx:Image source="image/c.jpg" width="100" height="100"/>

</mx:HBox>

<mx:HBox  width="100%" height="100%">

<s:Label text="山子"/>

<mx:Image source="image/d.jpg" width="100" height="100"/>

</mx:HBox>

</mx:VBox>

</mx:Accordion>

</s:Application>

FLEX4 实战、源码和效果图 - wolfgangkiefer - wolfgangkiefer的博客

2CotrolBar 的应用

<?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" backgroundColor="#E41616">

<fx:Declarations>

<!-- 将非可视元素(例如服务、值对象)放在此处 -->

</fx:Declarations>

<fx:Script>

<![CDATA[

function write():void

{

small.text="Hello";

}

function  erase():void

{

big.text="Ha ha!";

if(good.source=="image/d.jpg")

{

good.source="image/a.jpg";

}

else

{

good.source="image/d.jpg";

}

}

]]>

</fx:Script>

<s:Panel x="28" y="98" width="487" height="406" title="Panel Layout">

<s:VGroup>

<s:HGroup x="20" y="10" width="366" height="112">

<s:Label id="small" text="This is a ControlBar example" width="239" height="34" paddingTop="8"/>

<mx:Image source="image/a.jpg" width="100" height="100" id="good/>

</s:HGroup>

<s:HGroup x="20" y="110" width="366" height="112">

<s:Label id="big" text="This is a ControlBar example" width="241" height="34" paddingTop="8"/>

<mx:Image source="image/a.jpg" width="100" height="100" id="bad"/>

</s:HGroup>

</s:VGroup>

<mx:ControlBar height="40" width="366" borderStyle="outsethorizontalAlign="center" x="0" y="239" verticalAlign="middle">

<mx:Button label="cancel" click="erase()"/>

<mx:Button label="OK" click="write()"/>

</mx:ControlBar>

</s:Panel>

</s:Application>

FLEX4 实战、源码和效果图 - wolfgangkiefer - wolfgangkiefer的博客

3、 DividedBox/HDividedBox/VDividedBox组件

<?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" backgroundColor="#E41616">

<fx:Declarations>

<!-- 将非可视元素(例如服务、值对象)放在此处 -->

</fx:Declarations>

<s:Panel x="42" y="96" width="577height="392">

<mx:HDividedBox  x="24" y="13" width="450height="115"  contentBackgroundColor="#F47A30" backgroundColor="#7A1111" chromeColor="#E9DDDD">

<s:TextArea width="237height="60" text="I am good skiller!"/>

<mx:Image source="image/a.jpg" width="100height="100"/>

</mx:HDividedBox>

<mx:VDividedBox x="24" y="151height="105"  backgroundColor="#7A1111" chromeColor="#E9DDDD" width="464">

<s:TextArea height="31" width="462" text="I am here, do you see me?"/>

<mx:Image  source="image/b.jpg" width="464height="100"/>

</mx:VDividedBox>

</s:Panel>

</s:Application>

FLEX4 实战、源码和效果图 - wolfgangkiefer - wolfgangkiefer的博客

4、 VideoDisplay

<?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" backgroundColor="#E41616">

<fx:Declarations>

<!-- 将非可视元素(例如服务、值对象)放在此处 -->

</fx:Declarations>

<s:Panel x="42" y="96" width="577" height="392">

<s:VideoDisplay  id="video" x="124" y="26" height="223" width="326" source="a.flv"/>

<s:Button x="158" y="283" label="play" width="78" height="30click="video.play()"/>

<s:Button x="261" y="283" label="pause" width="77" height="30"  click="video.pause()"/>

<s:Button x="358" y="283" label="stop" width="75" height="30click="video.stop()"/>

</s:Panel>

</s:Application>

FLEX4 实战、源码和效果图 - wolfgangkiefer - wolfgangkiefer的博客

5、 Grid/GridRow/GridItem的使用

<?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" backgroundColor="#E41616">

<fx:Declarations>

<!-- 将非可视元素(例如服务、值对象)放在此处 -->

</fx:Declarations>

<s:Panel x="59" y="46" width="535height="353">

<mx:Grid x="4" y="7" width="514height="276">

<mx:GridRow width="514height="100">

<mx:GridItem   width="100%height="100%" dropShadowVisible="false">

<mx:Image source="image/a.jpg" width="100height="100"/>

</mx:GridItem>

<mx:GridItem width="100%height="100%" verticalAlign="bottom">

<mx:Image source="image/b.jpg" width="100" height="100"/>

</mx:GridItem>

</mx:GridRow>

 

</mx:Grid>

<mx:Grid x="4" y="107" width="514height="276">

<mx:GridRow width="514height="100">

<mx:GridItem   width="100%height="79" verticalAlign="bottom">

<mx:Image source="image/c.jpg" width="100" height="100"/>

</mx:GridItem>

<mx:GridItem width="100%height="100%">

<mx:Image source="image/d.jpg" width="100" height="100"/>

</mx:GridItem>

</mx:GridRow>

</mx:Grid>

</s:Panel>

</s:Application>

FLEX4 实战、源码和效果图 - wolfgangkiefer - wolfgangkiefer的博客

6、 TabNavigator

<?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" backgroundColor="#E41616">

<fx:Declarations>

<!-- 将非可视元素(例如服务、值对象)放在此处 -->

</fx:Declarations>

<s:Panel x="59" y="46" width="535" height="353">

<mx:TabNavigator x="146" y="70" width="283" height="228">

<s:NavigatorContent label="one" width="100%" height="100%">

<mx:Image x="31" y="10" source="image/a.jpg" width="151" height="137"/>

</s:NavigatorContent>

<s:NavigatorContent label="two" width="100%" height="100%">

<mx:Image x="31" y="10" source="image/b.jpg" width="151" height="137"/>

</s:NavigatorContent>

<s:NavigatorContent label="three" width="100%" height="100%">

<mx:Image x="31" y="10" source="image/c.jpg" width="151" height="137"/>

</s:NavigatorContent>

<s:NavigatorContent label="four" width="100%" height="100%">

<mx:Image x="31" y="10" source="image/d.jpg" width="151" height="137"/>

</s:NavigatorContent>

</mx:TabNavigator>

</s:Panel>

</s:Application>

FLEX4 实战、源码和效果图 - wolfgangkiefer - wolfgangkiefer的博客

7、 ColorPicker 组件的使用

<?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" backgroundColor="#E41616">

<fx:Declarations>

<!-- 将非可视元素(例如服务、值对象)放在此处 -->

</fx:Declarations>

<s:Panel x="59" y="46" width="580" height="142">

   <mx:ColorPicker id="picker" x="42" y="25" width="93" height="45/>

     

</s:Panel>

<s:Panel x="73" y="206" width="547" height="200" backgroundColor="{picker.selectedColor}">

</s:Panel>

v

</s:Application>

FLEX4 实战、源码和效果图 - wolfgangkiefer - wolfgangkiefer的博客

8、 ComboBox 下拉组件使用,数据绑定

<?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" backgroundColor="#E41616">

<fx:Declarations>

<!-- 将非可视元素(例如服务、值对象)放在此处 -->

</fx:Declarations>

<fx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

public var tdataProvider:ArrayCollection=new ArrayCollection(

[

{label:"China",value:1},

{label:"America",value:2},

{label:"Japan",value:3}

]);

private function closeHandler(event:Event):void

{

tLabel.text="Selected Country:"+ComboBox(event.target).selectedItem.label;

tValue.text="Value:"+ComboBox(event.target).selectedItem.value;

}

]]>

</fx:Script>

<s:Panel x="162" y="28" width="473" height="377">

<s:ComboBox x="95" y="41" dataProvider="{tdataProvider}" close="closeHandler(event);"/>

<s:Label x="126" y="108" id="tLabel" text="Selected Country:" width="132"/>

<s:Label x="130" y="161" id="tValue" text="Selected Value:" width="99"/>

</s:Panel>

</s:Application>

FLEX4 实战、源码和效果图 - wolfgangkiefer - wolfgangkiefer的博客

9、 DataGrid 组件

<?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" backgroundColor="#E41616">

<fx:Declarations>

<fx:XMLList id="students>

<student>

<name>

   zhangsan

</name>

<sex>

man

</sex>

<age>

35

</age>

</student>

<student>

<name>

zhangsan

</name>

<sex>

man

</sex>

<age>

35

</age>

</student>

<student>

<name>

zhangsan

</name>

<sex>

man

</sex>

<age>

35

</age>

</student>

</fx:XMLList>

</fx:Declarations>

<s:Panel x="150" y="59" width="450" height="346">

<mx:DataGrid x="79" y="37" dataProvider="{students}">

<mx:columns>

<mx:DataGridColumn headerText="name" dataField="name"/>

<mx:DataGridColumn headerText="sex" dataField="sex"/>

<mx:DataGridColumn headerText="age" dataField="age"/>

</mx:columns>

</mx:DataGrid>

</s:Panel>

</s:Application>

FLEX4 实战、源码和效果图 - wolfgangkiefer - wolfgangkiefer的博客

  评论这张
 
阅读(2099)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017