狠狠撸

Flex 学习小结之 demo 按照之前做过的一个小系统山寨一个 demo Copyright by reasonpun 2010-09-06 13:04

整体结构（以为主） flex 界面登录界面数据界面（默认初始化界面）用户管理界面系统管理界面功能用户登录数据查询用户管理系统管理

登录界面登录界面我们仿照这个来做，因为没有美工，我们暂且保持 Flex 原有样式！

新建工程，并创建目录之前我们已经讲过创建工程的步骤，我们现在直接自布局开始，我们需要如右图作为入手点：

新建工程，并创建目录点击右侧“包资源管理器”，后在目录“ src” 处右击新建 -> 文件夹，在“文件夹名”输入框中填入目录的名称，比如： dUtils

创建好的目录如下：创建好的目录如右图所示，大体的目录使用目的已经添加了标注

第一步：创建登录组件（如有图）右击 dComponents 后选择新建 ->MXML 组件，点击后弹出如下所示：

（插播）上文可以看到有一个注释：“布局方式”：四种 Flex4 布局类概述在 FlexSDK4(Gumbo) 的 spark 组件库里面增加了一个 page ： spark.layouts 。其中包括了比较重要的四个 Flex4 布局类（ class ），分别是： BasicLayout 、 HorizontalLayout 、 TileLayout 、 VerticalLayout 。 1 、 BasicLayoutFlex4 布局：（默认属性，当不指定定位后，则是绝对定位布局）这是 spark 组件默认 FlexSDK3 的布局方式，即绝对定位布局。在 FlexSDK3 里面对应的是： layout="absolute" 2 、 HorizontalLayoutFlex4 布局：这是 spark 组件库里面的水平布局方式。在里面对应的是： layout="horizontal" 3 、 VerticalLayoutFlex4 布局：这是 spark 组件库里面的竖直布局方式。在 FlexSDK3 里面对应的是： layout="vertical" 4 、 TileLayoutFlex4 布局：这是 spark 组件库新增的布局方式，即格子布局方式。 TileLayout 布局方式可以说是 HorizontalLayout 和 VerticalLayout 结合的方式。还有一点是需要注意的： paddingLeft 、 paddingRight 、 paddingTop 、 paddingBottom 这四个属性已经转移到了 HorizontalLayout 、 VerticalLayout 里面。这点也与 FlexSDK3 有些区别。也就是说，在 spark 组件中的容器，已经不具备 paddingLeft 、 paddingRight 、 paddingTop 、 paddingBottom 属性了。

图解布局方式 -- BasicLayoutFlex4 布局：

图解布局方式 -- HorizontalLayoutFlex4 布局：

图解布局方式 -- VerticalLayoutFlex4 布局：

图解布局方式 -- TileLayoutFlex4 布局：

言归正传：继续登录窗口的创建做好了的登录窗口如右图所示其中，我们在布局上用到了几点隐藏属性： 1 、默认添加的这个组件是 <s:Group> ，我们需要打开源代码页面，把 <s:Group> 改成 <s:Panel> , 这个随大家喜欢，可以改成 <s:Titlewindow> 什么的。 2 、在修改为 <s:Panel> 后，我们把这个 Panel 的布局改成了“ VerticalLayout” 所以，我们如果想要实现用户名标签显示和输入框在一行，那么我们需要 <s:HGroup> 这个组件辅助，步骤是（ 1 ）添加组件 HGroup ，后在 HGroup 中添加 Label 和 InputText 组件即可。

界面工作完成，需要添加些逻辑：我们想实现的功能如下： 1 、输入用户名称和密码； 2 、如果用户名或者密码为空，则提示输入； 3 、如果输入的用户名和密码与系统要求的一致，则提示登录成功，否则提示失败。

界面工作完成，需要添加些逻辑：具体代码修改： 1 、在组件 Login.mxml 中，我们需要他加载完毕就添加两个按钮事件，登录按钮和重置按钮； internal function initApp():void { btnLogin.addEventListener(MouseEvent.CLICK, function():void{ _login(); }); btnReset.addEventListener(MouseEvent.CLICK, function():void{ _reset(); }); }

界面工作完成，需要添加些逻辑：具体代码修改：我们添加了 2 个新的自定义函数： _login() internal function _login():void { var username:String = txtUserName.text; var passwd:String = txtPasswd.text; if(username == "") { Alert.show( " 用户名称不能为空！ ", " 提示 "); return; } if(passwd == "") { Alert.show( " 密码不能为空！ ", " 提示 "); return; } if(username == "admin" && passwd == "admin") { Alert.show( " 登录成功！ ", " 提示 "); } else { Alert.show( " 用户名或密码错误！ ", " 提示 "); } }

界面工作完成，需要添加些逻辑：具体代码修改：此外我们因为要和大环境关联，所以要在主 mxml 中添加关联函数：在主 mxml ： Study_Flex_Demo001 中添加代码 <fx:Script> <![CDATA[ import dComponents.Login; //@ 导入登录组件 import mx.managers.PopUpManager; //@ 我们需要这个类实现我们登录框的弹出实现 internal function initApp():void { var lo:Login = new Login(); //@ 生成一个登录组件的实例 PopUpManager.addPopUp(lo, this, true); 　 //@ 将这个实例添加到管理器中，实现弹出 PopUpManager.centerPopUp(lo); //@ 　实现弹出的登录框居中 } ]]> </fx:Script>

登录框的功能实现完毕我们需要从远程数据库获得用户信息该如何实现呢？下一讲我们会以 Flex 的 HttpService 为例讲解网络通讯，实现远程数据库读取用户登录信息进行验证吧～敬请期待……（ email: [email_address] ）

狠狠撸

Flex20100906

Recommended

More Related Content

Similar to Flex20100906 (20)

Flex20100906