Flex 入门

1.下载 Flex Builder 3: 
http://download.macromedia.com/pub/flex/flex_builder/FB3_win.exe
破解:http://blog.5d.cn/user39/riahome/upload/2008-02/flex破解补丁.rar

2.安装flex builder好后,启动Flex Builder,选择File->New->Flex Project  输入项目名FirstFlex
点击完成后,自动生成与项目同名的mxml格式文件.

3.打开FirstFlex.mxml文件,点击"Design"将其调到设计模式,从components中拖一面板(panel)到其中
并拖一Label控件到面板中, 选定Label控件,在Flex properties中修改其属性,在Text中输入:HelloWorld 

4.最后形成的FirstFlex.mxml代码如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
<mx:Panel title="My Application" width="200" height="300">
<mx:Label text="Hello World!" />
</mx:Panel>
 
</mx:Application>

5.右击FirstFlex.mxml->Run Application

 

6.通过HTTPService 的RPC service 组件从RSS 中获取数据例子

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="feedRequest.send()">
3.     <mx:HTTPService
4.         id="feedRequest"
5.         url="http://blog.csdn.net/pengchua/category/313653.aspx/rss"
6.         useProxy="false"/>
7.     <mx:Panel x="10" y="10" width="475" height="400" layout="absolute" title="{feedRequest.lastResult.rss.channel.title}">
8.         <mx:DataGrid x="20" y="20" id="dgPosts" width="400" dataProvider="{feedRequest.lastResult.rss.channel.item}">
9.             <mx:columns>
10.                 <mx:DataGridColumn headerText="Posts" dataField="title"/>
11.                 <mx:DataGridColumn headerText="Date" dataField="pubDate" width="150"/>
12.             </mx:columns>
13.         </mx:DataGrid>
14.         <mx:TextArea x="20" y="175" width="400" htmlText="{dgPosts.selectedItem.description}"/>
15.         <mx:LinkButton x="20" y="225" label="Read Full Post" click="navigateToURL(new URLRequest(dgPosts.selectedItem.link));"/>
16.     </mx:Panel>
17. </mx:Application>

7.使用Flex WebService 组件去访问使用SOAP 的web 服务器并获取相应的信息

1. ?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="wsBlogAggr.getMostPopularPosts.send()">
3. <mx:WebService id="wsBlogAggr"
4.     wsdl="http://weblogs.macromedia.com/mxna/webservices/mxna2.cfc?wsdl"
5.     useProxy="false">
6.     <mx:operation name="getMostPopularPosts">
7.         <mx:request>
8.             <daysBack>30</daysBack>
9.             <limit>{cbxNumPosts.value}</limit>
10.         </mx:request>
11.     </mx:operation>
12. </mx:WebService>
13. <mx:Panel x="10" y="10" width="475" height="400" layout="absolute"
14.     title="Most Popular Posts">
15. <mx:ComboBox x="30" y="25" id="cbxNumPosts" change="wsBlogAggr.getMostPopularPosts.send()">
16.     <mx:Object label="Top 5" data="5" />
17.     <mx:Object label="Top 10" data="10" />
18.     <mx:Object label="Top 15" data="15" />
19. </mx:ComboBox>
20. <mx:DataGrid x="30" y="75" id="dgTopPosts" width="400" dataProvider="{wsBlogAggr.getMostPopularPosts.lastResult}">
21. <mx:columns>
22.     <mx:DataGridColumn headerText="Top Posts" dataField="postTitle"/>
23.     <mx:DataGridColumn headerText="Clicks" dataField="clicks" width="75" />
24.     </mx:columns>
25.     </mx:DataGrid>
26. <mx:LinkButton x="30" y="250" label="Select an item and click here for full post"
27.             click="navigateToURL(new URLRequest(dgTopPosts.selectedItem.postLink));" />
28. </mx:Panel>
29. </mx:Application>

8.MXML标签与ActionScript类或者类中的属性是相对应的。当你编译你的Flex应用程序的时候，Flex解析你的MXML标签并且生成相应的

 

ActionScript类。然后这些ActionScript类会被编译成SWF字节码存储到一个SWF文件中。

 

提示：你可以把--keep-generated-actionscript 选项添加到你的mxmlc命令行中，来查看Flex生成的ActionScript中间文件。

 

 

接收事件通知有三种方式：

• 在MXML中注册一个事件处理器

• 在MXML中创建一个内联（inline）的事件处理器  (一个好的经验法则就是不要在内联事件处理器中包含一条语句以上的ActionScript。如果你必            须包含更复杂的逻辑，就把它放到一个ActionScript helper方法（即第一种方法）或者一个ActionScript事件处理器（即第三种方法）                 中。)

• 通过ActionScript注册一个事件处理器

 

 

在一个Flex程序中，有三种方法来定位你的组件。

• 使用自动定位

• 使用绝对定位

• 使用基于约束的布局