Flex 4  学习小结 隔三差五的 flex 学习笔记 ( 我们使用的 flash builder 4,  Flex4 下载地址  : https://www.adobe.com/cfusion/tdrc/index.cfm?product=...
Flex4 初识 <ul><li>新建工程: HelloFlex </li></ul><ul><li>添加点小控件 </li></ul><ul><ul><li>标签 label </li></ul></ul><ul><ul><li>输入框  t...
新建工程 --001 <ul><li>点击 Flash builder 4 选择新建 ->Flex 项目 </li></ul>
新建工程 --002 <ul><li>输入你希望的项目工程: Study_HelloFlex </li></ul><ul><li>应用程序类型保持默认情况( Web, 在 Adobe Flash Player 中运行) </li></ul><u...
工程创建完毕 <ul><li>默认窗口布局 </li></ul><ul><ul><li>画布,可以在此布置控件; </li></ul></ul><ul><ul><li>包资源管理器,管理项目中的文件; </li></ul></ul><ul><u...
开始布局 <ul><li>我们在组建窗口选择我们需要的组建: </li></ul><ul><ul><li>Panel </li></ul></ul><ul><ul><li>Button </li></ul></ul><ul><ul><li>Te...
布局完成  设置 & 调整属性 <ul><li>我们的布局完成后大约是这么一个样式; </li></ul><ul><li>同时我们对 panel 的部分属性进行设置。 </li></ul><ul><li>方法: </li></ul><ul><u...
获取属性值,并添加事件 <ul><li>现在开始代码的编写,按照右图所示,点击“源代码标签页”,进入编码页面; </li></ul>左图所示为初始化的编码页面。
编码开始 <ul><li>添加初始化代码: </li></ul><ul><li><s:Application xmlns:fx=&quot;http://ns.adobe.com/mxml/2009&quot;  </li></ul><ul><...
编码开始 <ul><li>添加初始化函数的代码: </li></ul><ul><li><fx:Script> </li></ul><ul><li><![CDATA[ </li></ul><ul><li>internal function ini...
编码开始 <ul><li>添加具体逻辑: </li></ul><ul><li><fx:Script> </li></ul><ul><li><![CDATA[ </li></ul><ul><li>import mx.controls.Alert;...
事件代码的 2 种常用写法 <ul><li>以鼠标的点击事件为例 </li></ul><ul><li>第一种: </li></ul><ul><li>btnOk.addEventListener(MouseEvent.CLICK,  functi...
开始运行吧~~ <ul><li>点击运行按钮 </li></ul><ul><li>是否看到如右图的界面了? </li></ul>
项目的导入 <ul><li>跟随着这个 PPT 的还有例子的所有代码,当你拿到以后是不是想试试: </li></ul><ul><li>那么导入到你自己的 Flash builder 里吧! </li></ul><ul><ul><li>右击包资源...
项目的导入 <ul><li>选择项目文件夹,后浏览找到项目所在目录,点击确定按钮; </li></ul><ul><li>此时点击完成按钮就可以完成项目的导入。 </li></ul>
导入完成 并打开文件 <ul><li>All Over </li></ul>
Q&A <ul><li>And </li></ul><ul><li>现在先给大家个入门的 PPT ,估计差不多了,以后组件可和 AS3 的编写,大家可以 google 了,之后我会隔三差五的写点组件的应用和一些“奇技淫巧”,还请大家指教。 </...
Upcoming SlideShare
Loading in...5
×

Flex4 20100827

792

Published on

flex入门贴

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
792
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Flex4 20100827

  1. 1. Flex 4 学习小结 隔三差五的 flex 学习笔记 ( 我们使用的 flash builder 4, Flex4 下载地址 : https://www.adobe.com/cfusion/tdrc/index.cfm?product=flash_builder 注册码: 1423-4247-9736-5135-4786-7260
  2. 2. Flex4 初识 <ul><li>新建工程: HelloFlex </li></ul><ul><li>添加点小控件 </li></ul><ul><ul><li>标签 label </li></ul></ul><ul><ul><li>输入框 textinput </li></ul></ul><ul><ul><li>按钮 button </li></ul></ul><ul><ul><li>提示框 </li></ul></ul><ul><li>导入已有工程 </li></ul>
  3. 3. 新建工程 --001 <ul><li>点击 Flash builder 4 选择新建 ->Flex 项目 </li></ul>
  4. 4. 新建工程 --002 <ul><li>输入你希望的项目工程: Study_HelloFlex </li></ul><ul><li>应用程序类型保持默认情况( Web, 在 Adobe Flash Player 中运行) </li></ul><ul><li>其他保持默认,点击下一步或者(之后的设置保持缺省值,则)可以点击完成按钮。 </li></ul>
  5. 5. 工程创建完毕 <ul><li>默认窗口布局 </li></ul><ul><ul><li>画布,可以在此布置控件; </li></ul></ul><ul><ul><li>包资源管理器,管理项目中的文件; </li></ul></ul><ul><ul><li>组件,我们需要用于展现的各个组件; </li></ul></ul><ul><ul><li>属性,组件的属性。 </li></ul></ul>
  6. 6. 开始布局 <ul><li>我们在组建窗口选择我们需要的组建: </li></ul><ul><ul><li>Panel </li></ul></ul><ul><ul><li>Button </li></ul></ul><ul><ul><li>TextInput </li></ul></ul><ul><ul><li>通过鼠标的拖拽到画布上 </li></ul></ul>
  7. 7. 布局完成 设置 & 调整属性 <ul><li>我们的布局完成后大约是这么一个样式; </li></ul><ul><li>同时我们对 panel 的部分属性进行设置。 </li></ul><ul><li>方法: </li></ul><ul><ul><li>点选你要设置属性的组件后再属性窗口添加相应的值。 </li></ul></ul>
  8. 8. 获取属性值,并添加事件 <ul><li>现在开始代码的编写,按照右图所示,点击“源代码标签页”,进入编码页面; </li></ul>左图所示为初始化的编码页面。
  9. 9. 编码开始 <ul><li>添加初始化代码: </li></ul><ul><li><s:Application xmlns:fx=&quot;http://ns.adobe.com/mxml/2009&quot; </li></ul><ul><li>xmlns:s=&quot;library://ns.adobe.com/flex/spark&quot; </li></ul><ul><li>xmlns:mx=&quot;library://ns.adobe.com/flex/mx&quot; minWidth=&quot;955&quot; minHeight=&quot;600&quot; </li></ul><ul><li>creationComplete=&quot;initApp()&quot;> </li></ul><ul><li>我们添加以上红字代码,实现程序加载完毕后执行函数 initApp() </li></ul>
  10. 10. 编码开始 <ul><li>添加初始化函数的代码: </li></ul><ul><li><fx:Script> </li></ul><ul><li><![CDATA[ </li></ul><ul><li>internal function initApp():void </li></ul><ul><li>{ </li></ul><ul><li>// 在这里我们可以添加我们需要的逻辑 </li></ul><ul><li>} </li></ul><ul><li>]]> </li></ul><ul><li></fx:Script> </li></ul>
  11. 11. 编码开始 <ul><li>添加具体逻辑: </li></ul><ul><li><fx:Script> </li></ul><ul><li><![CDATA[ </li></ul><ul><li>import mx.controls.Alert; //@ 在使用提示框之前,需要导入的包 </li></ul><ul><li>internal function initApp():void </li></ul><ul><li>{ </li></ul><ul><li>// 在这里可以添加我们需要的逻辑 </li></ul><ul><li>//@ 添加按钮的点击事件 </li></ul><ul><ul><li>btnOk.addEventListener(MouseEvent.CLICK , </li></ul></ul><ul><ul><li>function():void //@ 这就是传说中的无敌霹雳的“匿名函数” </li></ul></ul><ul><ul><li>{ </li></ul></ul><ul><ul><ul><li>//@ 获取我们在输入框中的内容 </li></ul></ul></ul><ul><ul><ul><li>var myInput:String = txtInputStr.text; //@ Text.Inputtext 可以直接得到输入框中的内容 </li></ul></ul></ul><ul><ul><ul><li>Alert.show(myInput, “ 提示” ); //@ 提示框代码 </li></ul></ul></ul><ul><ul><li>}); </li></ul></ul><ul><li>} </li></ul><ul><li>]]> </li></ul><ul><li></fx:Script>l </li></ul>
  12. 12. 事件代码的 2 种常用写法 <ul><li>以鼠标的点击事件为例 </li></ul><ul><li>第一种: </li></ul><ul><li>btnOk.addEventListener(MouseEvent.CLICK, function():void{ </li></ul><ul><li> //@ 执行的代码 </li></ul><ul><li>}); </li></ul><ul><li>------------------------------------------------------------------------------------------ </li></ul><ul><li>第二种: </li></ul><ul><li>btnOk.addEventListener(MouseEvent.CLICK, _doClick ); </li></ul><ul><li>Internal function _doClick(event:MouseEvent):void </li></ul><ul><li>{ </li></ul><ul><li>//@ 执行的代码 </li></ul><ul><li>} </li></ul>
  13. 13. 开始运行吧~~ <ul><li>点击运行按钮 </li></ul><ul><li>是否看到如右图的界面了? </li></ul>
  14. 14. 项目的导入 <ul><li>跟随着这个 PPT 的还有例子的所有代码,当你拿到以后是不是想试试: </li></ul><ul><li>那么导入到你自己的 Flash builder 里吧! </li></ul><ul><ul><li>右击包资源管理器后选择“导入”; </li></ul></ul><ul><ul><li>选择 Flash Builder 项目,后点击下一步 </li></ul></ul>
  15. 15. 项目的导入 <ul><li>选择项目文件夹,后浏览找到项目所在目录,点击确定按钮; </li></ul><ul><li>此时点击完成按钮就可以完成项目的导入。 </li></ul>
  16. 16. 导入完成 并打开文件 <ul><li>All Over </li></ul>
  17. 17. Q&A <ul><li>And </li></ul><ul><li>现在先给大家个入门的 PPT ,估计差不多了,以后组件可和 AS3 的编写,大家可以 google 了,之后我会隔三差五的写点组件的应用和一些“奇技淫巧”,还请大家指教。 </li></ul><ul><li>我的新邮箱: [email_address] </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×