技术·人生

[Flex]使用DataGrid,ColumnChart,php,mysql创建一个有数据分析功能的记帐本

[目标]:创建一个记帐本程序，记录自己平时的日常开支。前台使用Flex，后台使用PHP+MySQL。
[描述]:记帐本程序应满足如下要求
1、显示详细的日常开支记录
2、可添加、修改、删除
3、有数据统计分析功能。
[分析]:
1、可以使用Flex的DataGrid组件显示记录列表，使用弹出一个TitleWindow的方式显示记录详情
2、添加、修改、删除的功能都需要PHP来实现
3、数据统计功能，可以使用Flex的charts组件

[实现]：
一、MySql数据库结构设计
根据需求，我们需要建立一个数据库，名字定为moneymgr,需要2个数据表，一个为detail,存储记录详情，一个为typelist,存储开支类型列表。
detail表里有8个字段：
id:编号，主键。
title:开支类型，比如早餐、午餐、晚餐等。
money:金额
type:类型，分支出、收入。
status:状态。分已结算、未结算。
info:详细描述。
rddate:记录时间。(记录添加到数据库的时间)
date:发生时间。

typelist表有2个字段：
id:编号。主键
title:开支类型表。

二、前台Flex设计
需要一个显示记录列表的页面；一个查看记录内容的页面；一个添加数据的页面；一个显示数据统计、分析的页面。
可以使用ViewStack管理这些页面。但是我觉得查看记录内容的页面，数据统计、分析的页面没有必要单独存在，作为一个弹出框出现就可以了。[其实添加数据的页面也可以使用弹出框的方式。]
好了，先看下效果图吧;
A : 记录列表页面截图(点击查看大图)

这个界面中主要使用了DataGrid组件，另外使用了Label组件、ControlBar组件
DataGrid组件用来显示记录列表。
Label组件显示合计结果(合计 支出多少、收入多少等)。
ControlBar组件显示一些操作选项(新增记录、管理事务列表、事务分析表、日期分析表)
B:查看记录内容页面截图

这是一个弹出框，基于TitleWindow组件，然后里面是用的Form组件。
C:添加记录页面(点击查看大图)

D:按消费类型的数据统计图(点击查看大图)

基于TitleWindow的一个ColumnChart
E:按消费日期的统计图(点击查看大图)

基于TitleWindow的一个ColumnChart。
当然，以上截图的描述的都是可视化组件，因为DataGrid显示的数据，以及Flex向PHP发送的新增、编辑、删除的数据，都是借助于非可视化组件HTTPService实现的。
三、后台PHP设计
PHP的主要功能是提供实际的数据添加、编辑、删除功能，并向Flex提供查询结果。其实这些都是一些基本的操作。
四、细节处理。
一、通过上面的几张截图，大概看的出：
DataGrid组件中使用了itemRenderer和HeaderRenderer。
使用itemRenderer的作用是为每条记录提供了可以方便查看、编辑、删除操作的按钮。
使用HeaderRenderer是要实现数据过滤功能，使DataGrid中只显示符合某些条件的数据。

如上图所示，这一列的标题栏里我们用一个ComboBox组件，通过更改下拉列表的值，在DataGrid中显示某些类型的数据：比如假如选择彩票，那么DataGrid中显示的数据就是：

二、统计功能。
在DataGrid下面是合计信息：

并且当DataGrid的使用数据更新时，统计信息也会更新，比如我们使用数据过滤，只显示彩票的费用时，合计结果的值也会相应的改变。这里我使用了IViewCursor来遍历当前视图中显示的数据，从而统计结果值。
五、源文件下载
moneymgr.zip
MD5:4F6F0248894DD07C251A649E1DDD10C5
Air版下载
mmgr
六、演示地址
点击这里查看演示