Flex实例【Shangle.net】解析【五】

??????? 我们在net/shangle/modules包中找到DiaryModule.mxml。在看代码之前，我们首先运行下这个应用，然后我们会发现如下几个问题：

??????? 1、不知道在哪边添加目录（如果有的话）。

??????? 2、不知道在哪边添加日记（这个肯定应该有）。

??????? 3、添加评论后无法保存数据。

??????? 4、分页无效。

??????? 这四个问题我们从小到大，从易到难的解决，其中第一个问题可以暂时放一放的，人生不能太完美（偷懒是很应该的……）。

??????? 拟解决问题一：评论的添加

??????? 按照以前做网页的习惯，点日记后显示当前评论，那么需要有个数据库用来将评论与日记关联，然后读数据库即可，再不济也该有个XML文件之类的，总之需要一个数据源。OK，那让我们来找数据源吧。???????

<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"
		   layout="absolute" creationComplete="init()" height="434" width="600" creationCompleteEffect="Fade"> 

??????? 上面的代码中我们要关注的就是creationComplete事件，这个基本就类似于Page的Load事件了，响应函数为init，继续找：

private function init() : void
{
	maxDiary = 1;
	currentDiary = 1;
	diaryID = 1;
	totalComment = 10;
	maxComment = 1;
	currentComment = 1;
	diaryTitle = "这是一篇测试日记";
	title.text = "这是一篇测试日记";
	addTime.text = "2011年03月26日";
	catName.text = "生活";
	content.text = "这是测试日记的内容";
	commentList.dataProvider = new ArrayCollection([
	{commentID:1,diaryID:1,floor:1,nickName:"S",reFloor:0,reNickName:"",content:"不错",addTime:"2011年3月26日 12:00"},{commentID:2,floor:2,nickName:"Shangle",reFloor:1,reNickName:"S",{commentID:3,floor:3,{commentID:4,floor:4,{commentID:5,floor:5,{commentID:6,floor:6,{commentID:7,floor:7,{commentID:8,floor:8,{commentID:9,floor:9,{commentID:10,floor:10,addTime:"2011年3月26日 12:00"}]);
}

??????? 从上面代码中其实我们已经发现了一个比较头疼的问题，那就是他的日记显示是写死的，没有做好动态添加的模板，唉，修改工作量大啊。然后前面的一些变量初始赋值需要查看文件代码的变量声明部分，不过猜也大概都能猜到那几个变量的概念，如maxDiary基本表示日记数，currentDiary表示当前日记，diaryID表示当前日记序号，totalComment表示总共的评论数，maxComment比较难猜，查看声明后发现这个变量表示总共的页数，那么currentComment就表示当前页数。接下来的五行代码分别表示当前日记的一些信息。这里有个伏笔：为什么在变量声明的地方有个[Bindable]标记，留待后续讨论。

??????? 最最关键的那句就是commentList.dataProvider=.......总算看到和数据源有点关系的地方了。嗯，先要研究下dataProvider。

??????? data provider 就是一个包含控件需要的数据的对象[转自liruizhuang的专栏——Flex基础-----之DataProvider ]

??????? 简单的理解就是它用来提供数据，那么这里的数据是什么呢？就是一个ArrayCollection类型的数组集合，里面的每一项Item有8个元素Elements，分别对应了：自身的ID、评论的日记ID、层数、昵称、回复的层数、回复的昵称、回复内容和添加时间。那么如果我们需要评论添加成功，这里的数据提供值就不能固定，需要能动态添加，所以需要做个简单的变换，用文字描述如下：

??????? 1、用一个ArrayCollection类型的全局变量

??????? 2、用这个全局变量来接收原先的ArrayCollection对象，并作为commentList组件的数据提供者

??????? 3、当我们点击“评论”按钮并添加成功评论之后需要往这个全局变量中插入新的值

??????? 3、重新设置commentList组件的数据提供者为当前的ArrayCollection对象

??????? 代码实现：

? ? ? ? 1、声明 ??????

//声明一个全局ArrayCollection类型对象commentDataSource
private var commentDataSource:ArrayCollection;

???????

??????? 2、接收并提供数据???????

commentDataSource= new ArrayCollection([
	{commentID:1,...,?{commentID:10,addTime:"2011年3月26日 12:00"}]);
commentList.dataProvider=commentDataSource;

???????

??????? 3、先要找到评论添加完成事件。先找评论按钮事件click="replyDiaryDialogPopUp(event)"

private function replyDiaryDialogPopUp(event : MouseEvent) : void
{
	cmtDialog = new CommentDialog();
	cmtDialog.diaryID = diaryID;
	cmtDialog.title = diaryTitle;
	cmtDialog.flag = "replyDiary";
	cmtDialog.setStyle("modalTrasparancy",0.2);
	cmtDialog.setStyle("modalTransparencyColor",0x000000);
	cmtDialog.setStyle("modalTransparencyDuration",500);
	cmtDialog.addEventListener("closePopUp",closePopUpHandler);
	cmtDialog.addEventListener("addCommentComplete",addCommentCompleteHandler);
	PopUpManager.addPopUp(cmtDialog,this.parentApplication as DisplayObject,true);
	PopUpManager.centerPopUp(cmtDialog);
}

??????? 在这个事件中，首先大致了解下过程：有个Dialog，然后被POP出来了，然后里面填写些内容，然后有个CLOSE和ADDCOMPLETE的事件监听。这里我们要关注的是这个Dialog是在哪里被定义的，然后在这个Dialog中填写的内容怎么来获取，然后在addCommentComplete的事件函数中主要实现了哪些内容。

??????? （1）Dialog的定义：CommentDialog在net.shangle.views包中被定义，

??????? （2）经简单分析，里面主要有名为nickName和content的必填文本框是重点，然后因为涉及到后面可能有评论评论的评论（拗口吧，就是那些不是直接对日记的评论，而是对已有的评论的评论），所以我们还要关注一个reNickName的属性。（另外还有些其他的属性暂时不需要，因为现在讨论的是只有一篇且是固定的日记的情况）。

??????? （3）根据前面的分析，我们可以通过cmtDialog这个对象来得到想要得到一些数据。

??????? （4）最后看下addCommentComplete事件代码：

private function addCommentCompleteHandler(event : Event) : void
{		
	//重新绑定commentList.dataProvider
	closePopUpHandler(null);
	alertDialog = new AlertDialog();
	alertDialog.title = "提示";
	alertDialog.content = "添加成功！";
	alertDialog.setStyle("modalTrasparancy",0.2);
	alertDialog.setStyle("modalTransparencyColor",0x000000);
	alertDialog.setStyle("modalTransparencyDuration",500);
	PopUpManager.addPopUp(alertDialog,true);
	PopUpManager.centerPopUp(alertDialog);
	alertDialog.addEventListener("closeAlertDialog",closeAlertDialogHandler);
}

??????? 这里在原来的代码中第一行就是个提醒注释，告诉我们这里需要重新绑定下commentList的数据提供者。那么我们就在这句注释上面写下如下代码：

var nickName:String=cmtDialog.nickName.text;
var content:String=cmtDialog.content.text;
commentDataSource.addItem({commentID:11,floor:11,nickName:nickName,content:content,addTime:"2014年4月29日 12:00"});
commentList.dataProvider=commentDataSource;
//重新绑定commentList.dataProvider

??????? 那么就完成了基本的添加以及重新绑定的功能了。但是这里还有不少问题，在添加评论的时候commentID、floor、reFloor、reNickName、addTime这项的值目前都是固定的，我们需要将这些内容都设置为动态获取。其中reFloor和reNickName在commentDialog中有定义（reNickName有明确定义，reFloor只有一个初始化而没有实际赋值），addTime可以利用Date类获取当前事件，那么commentID和Floor的值如何来得到呢？很简单我们只要获取当前的commentDataSource的项目数，然后加1即可。最终版代码如下所示：

var theNickName:String=cmtDialog.nickName.text;
var theContent:String=cmtDialog.content.text;
var theReNickName:String=cmtDialog.reNickName;
var theReFloor:int=cmtDialog.reFloor;
var theCommentID:int=commentDataSource.length+1;
var theFloor:int=theCommentID; //这里不考虑中间评论被删除后ID会有空缺的情况
var theDate:Date=new Date();
var theAddTime:String=theDate.fullYear+"年"+(theDate.month+1)+"月"+theDate.date+"日 "+theDate.hours+":"+theDate.minutes;
commentDataSource.addItem({commentID:theCommentID,floor:theFloor,nickName:theNickName,reFloor:theReFloor,reNickName:theReNickName,content:theContent,addTime:theAddTime});
commentList.dataProvider=commentDataSource;
//重新绑定commentList.dataProvider