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 , diaryID:1 , floor:2 , nickName:"Shangle" , reFloor:1 , reNickName:"S" , content:"不错" , addTime:"2011年3月26日 12:00"} ,{commentID:3 , diaryID:1 , floor:3 , nickName:"Shangle" , reFloor:0 , reNickName:"" , content:"不错" , addTime:"2011年3月26日 12:00"} ,{commentID:4 , diaryID:1 , floor:4 , nickName:"Shangle" , reFloor:0 , reNickName:"" , content:"不错" , addTime:"2011年3月26日 12:00"} ,{commentID:5 , diaryID:1 , floor:5 , nickName:"Shangle" , reFloor:0 , reNickName:"" , content:"不错" , addTime:"2011年3月26日 12:00"} ,{commentID:6 , diaryID:1 , floor:6 , nickName:"Shangle" , reFloor:0 , reNickName:"" , content:"不错" , addTime:"2011年3月26日 12:00"} ,{commentID:7 , diaryID:1 , floor:7 , nickName:"Shangle" , reFloor:0 , reNickName:"" , content:"不错" , addTime:"2011年3月26日 12:00"} ,{commentID:8 , diaryID:1 , floor:8 , nickName:"Shangle" , reFloor:0 , reNickName:"" , content:"不错" , addTime:"2011年3月26日 12:00"} ,{commentID:9 , diaryID:1 , floor:9 , nickName:"Shangle" , reFloor:0 , reNickName:"" , content:"不错" , addTime:"2011年3月26日 12:00"} ,{commentID:10 , diaryID:1 , floor:10 , nickName:"Shangle" , reFloor:0 , reNickName:"" , content:"不错" , 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类型对象commentDataSourceprivate var commentDataSource:ArrayCollection;

       

        2、接收并提供数据       

commentDataSource= new ArrayCollection([{commentID:1 , diaryID:1 , floor:1 , nickName:"S" , reFloor:0 , reNickName:"" , content:"不错" , addTime:"2011年3月26日 12:00"} ,        ...,        {commentID:10 , diaryID:1 , floor:10 , nickName:"Shangle" , reFloor:0 , reNickName:"" , content:"不错" , 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.dataProviderclosePopUpHandler(null);alertDialog = new AlertDialog();alertDialog.title = "提示";alertDialog.content = "添加成功！";alertDialog.setStyle("modalTrasparancy" , 0.2);alertDialog.setStyle("modalTransparencyColor" , 0x000000);alertDialog.setStyle("modalTransparencyDuration" , 500);PopUpManager.addPopUp(alertDialog , this.parentApplication as DisplayObject , 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 , diaryID:1 , floor:11 , nickName:nickName , reFloor:0 , reNickName:"" , 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 , diaryID:1 , floor:theFloor , nickName:theNickName , reFloor:theReFloor , reNickName:theReNickName , content:theContent , addTime:theAddTime});commentList.dataProvider=commentDataSource;//重新绑定commentList.dataProvider