Flex20100906

1,181 views
1,121 views

Published on

demo开始

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,181
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Flex20100906

  1. 1. Flex 学习小结之 demo 按照之前做过的一个小系统山寨一个 demo Copyright by reasonpun 2010-09-06 13:04
  2. 2. 整体结构(以为主) <ul><li>flex 界面 </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><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>
  3. 3. 登录界面 <ul><li>登录界面我们仿照这个来做,因为没有美工,我们暂且保持 Flex 原有样式! </li></ul>
  4. 4. 新建工程,并创建目录 <ul><li>之前我们已经讲过创建工程的步骤,我们现在直接自布局开始,我们需要如右图作为入手点: </li></ul>
  5. 5. 新建工程,并创建目录 <ul><li>点击右侧“包资源管理器”,后在目录“ src” 处右击新建 -> 文件夹,在“文件夹名”输入框中填入目录的名称,比如: dUtils </li></ul>
  6. 6. 创建好的目录如下: <ul><li>创建好的目录如右图所示,大体的目录使用目的已经添加了标注 </li></ul>
  7. 7. 第一步:创建登录组件 <ul><li>(如有图)右击 dComponents 后选择新建 ->MXML 组件,点击后弹出如下所示: </li></ul>
  8. 8. (插播)上文可以看到有一个注释:“布局方式”: <ul><li>四种 Flex4 布局类概述 </li></ul><ul><li>在 FlexSDK4(Gumbo) 的 spark 组件库里面增加了一个 page : spark.layouts 。其中包括了比较重要的四个 Flex4 布局类( class ),分别是: BasicLayout 、 HorizontalLayout 、 TileLayout 、 VerticalLayout 。 </li></ul><ul><li>1 、 BasicLayoutFlex4 布局: </li></ul><ul><li>(默认属性,当不指定定位后,则是绝对定位布局) </li></ul><ul><li>这是 spark 组件默认 FlexSDK3 的布局方式,即绝对定位布局。在 FlexSDK3 里面对应的是: layout=&quot;absolute&quot; </li></ul><ul><li>2 、 HorizontalLayoutFlex4 布局: </li></ul><ul><li>这是 spark 组件库里面的水平布局方式。在里面对应的是: layout=&quot;horizontal&quot; </li></ul><ul><li>3 、 VerticalLayoutFlex4 布局: </li></ul><ul><li>这是 spark 组件库里面的竖直布局方式。在 FlexSDK3 里面对应的是: layout=&quot;vertical&quot; </li></ul><ul><li>4 、 TileLayoutFlex4 布局: </li></ul><ul><li>这是 spark 组件库新增的布局方式,即格子布局方式。 TileLayout 布局方式可以说是 HorizontalLayout 和 VerticalLayout 结合的方式。 </li></ul><ul><li>还有一点是需要注意的: </li></ul><ul><li>paddingLeft 、 paddingRight 、 paddingTop 、 paddingBottom 这四个属性已经转移到了 HorizontalLayout 、 VerticalLayout 里面。这点也与 FlexSDK3 有些区别。也就是说,在 spark 组件中的容器,已经不具备 paddingLeft 、 paddingRight 、 paddingTop 、 paddingBottom 属性了。 </li></ul>
  9. 9. 图解布局方式 -- BasicLayoutFlex4 布局 :
  10. 10. 图解布局方式 -- HorizontalLayoutFlex4 布局 :
  11. 11. 图解布局方式 -- VerticalLayoutFlex4 布局 :
  12. 12. 图解布局方式 -- TileLayoutFlex4 布局 :
  13. 13. 言归正传:继续登录窗口的创建 <ul><li>做好了的登录窗口如右图所示 </li></ul><ul><li>其中,我们在布局上用到了几点隐藏属性: </li></ul><ul><ul><li>1 、默认添加的这个组件是 <s:Group> ,我们需要打开源代码页面,把 <s:Group> 改成 <s:Panel> , 这个随大家喜欢,可以改成 <s:Titlewindow> 什么的。 </li></ul></ul><ul><ul><li>2 、在修改为 <s:Panel> 后,我们把这个 Panel 的布局改成了“ VerticalLayout” </li></ul></ul><ul><ul><li>所以,我们如果想要实现用户名标签显示和输入框在一行,那么我们需要 <s:HGroup> 这个组件辅助,步骤是( 1 )添加组件 HGroup ,后在 HGroup 中添加 Label 和 InputText 组件即可。 </li></ul></ul>
  14. 14. 界面工作完成,需要添加些逻辑: <ul><li>我们想实现的功能如下: </li></ul><ul><li>1 、输入用户名称和密码; </li></ul><ul><li>2 、如果用户名或者密码为空,则提示输入; </li></ul><ul><li>3 、如果输入的用户名和密码与系统要求的一致,则提示登录成功,否则提示失败。 </li></ul>
  15. 15. 界面工作完成,需要添加些逻辑: <ul><li>具体代码修改: </li></ul><ul><li>1 、在组件 Login.mxml 中,我们需要他加载完毕就添加两个按钮事件,登录按钮和重置按钮; </li></ul><ul><li>internal function initApp():void </li></ul><ul><li>{ </li></ul><ul><li>btnLogin.addEventListener(MouseEvent.CLICK, function():void{ </li></ul><ul><li>_login(); </li></ul><ul><li>}); </li></ul><ul><li>btnReset.addEventListener(MouseEvent.CLICK, function():void{ </li></ul><ul><li>_reset(); </li></ul><ul><li>}); </li></ul><ul><li>} </li></ul>
  16. 16. 界面工作完成,需要添加些逻辑: <ul><li>具体代码修改: </li></ul><ul><li>我们添加了 2 个新的自定义函数: </li></ul><ul><li>_login() </li></ul><ul><li>internal function _login():void </li></ul><ul><li>{ </li></ul><ul><li>var username:String = txtUserName.text; </li></ul><ul><li>var passwd:String = txtPasswd.text; </li></ul><ul><li>if(username == &quot;&quot;) </li></ul><ul><li>{ </li></ul><ul><li>Alert.show( &quot; 用户名称不能为空! &quot;, &quot; 提示 &quot;); </li></ul><ul><li>return; </li></ul><ul><li>} </li></ul><ul><li>if(passwd == &quot;&quot;) </li></ul><ul><li>{ </li></ul><ul><li>Alert.show( &quot; 密码不能为空! &quot;, &quot; 提示 &quot;); </li></ul><ul><li>return; </li></ul><ul><li>} </li></ul><ul><li>if(username == &quot;admin&quot; && passwd == &quot;admin&quot;) </li></ul><ul><li>{ </li></ul><ul><li>Alert.show( &quot; 登录成功! &quot;, &quot; 提示 &quot;); </li></ul><ul><li>} </li></ul><ul><li>else </li></ul><ul><li>{ </li></ul><ul><li>Alert.show( &quot; 用户名或密码错误! &quot;, &quot; 提示 &quot;); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  17. 17. 界面工作完成,需要添加些逻辑: <ul><li>具体代码修改: </li></ul><ul><li>此外我们因为要和大环境关联,所以要在主 mxml 中添加关联函数: </li></ul><ul><li>在主 mxml : Study_Flex_Demo001 中添加代码 </li></ul><ul><li><fx:Script> </li></ul><ul><li><![CDATA[ </li></ul><ul><li>import dComponents.Login; //@ 导入登录组件 </li></ul><ul><li>import mx.managers.PopUpManager; //@ 我们需要这个类实现我们登录框的弹出实现 </li></ul><ul><li>internal function initApp():void </li></ul><ul><li>{ </li></ul><ul><li>var lo:Login = new Login(); //@ 生成一个登录组件的实例 </li></ul><ul><li>PopUpManager.addPopUp(lo, this, true);   //@ 将这个实例添加到管理器中,实现弹出 </li></ul><ul><li>PopUpManager.centerPopUp(lo); //@  实现弹出的登录框居中 </li></ul><ul><li>} </li></ul><ul><li>]]> </li></ul><ul><li></fx:Script> </li></ul>
  18. 18. 登录框的功能实现完毕 我们需要从远程数据库获得用户信息该如何实现呢? 下一讲我们会以 Flex 的 HttpService 为例讲解网络通讯, 实现远程数据库读取用户登录信息进行验证吧~ 敬请期待……( email: [email_address] )

×