实习日志（8）：Flex的TitleWindow控件

上午进行了一些关于删除板报的收尾工作。例如考虑到可能存在误删的情况，决定在进行删除操作的时候弹出一个对话框，让用户确定是否真的删除该条信息。

但是简单的Alert.Show()只能提供一个按钮，没有“取消”按钮。因此需要对弹出框进行自定义。实现过程如下：

 

参考博客：http://www.flexbj.com/post-110.html

 

 点击按钮调用函数：
<mx:LinkButton toolTip="删除板报"  click="deletebtn(event)" icon="@Embed('image/delete.gif')">

 

相关函数：

public function deletebtn(event:MouseEvent):void            {              //设置按钮标签文本              Alert.okLabel = "删除";              Alert.cancelLabel = "取消";              //设置弹出框的内容，标题(不需要标题，所以搞了个空字符串)，包含按钮，控制alert的对象，按钮响应事件函数              Alert.show("删除该条板报信息？","",Alert.OK | Alert.CANCEL,this,myAlertHandler);            }           protected function myAlertHandler(event:CloseEvent):void            {              if(event.detail == Alert.OK) {              //点击确定按钮，调用删除HTTPService              deleteContent.send();             }              if(event.detail == Alert.CANCEL) {                    }          }  

运行效果：

 

下午研究了修改板报信息的方法，因为修改是通过单击DataGrid中某一行之后对该行数据进行修改，如果“跳转”到其他页面去修改显的不太直观，因此考虑将TitleWindow控件应用于修改板报的功能当中。

控件用法如下：

父窗体代码：

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" borderStyle="none" fontWeight="bold" fontSize="15" alpha="1.0" borderColor="#FEFFFF" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFBFB, #FFFBFB]">  <mx:Script>      <![CDATA[         import mx.managers.PopUpManager;                       public function updatebtn(event:MouseEvent):void            {                //实例titleWin对象                var popWin:titleWin = titleWin(PopUpManager.createPopUp(this,titleWin,true));                  popWin.title="修改板报";                  //将父窗口的值传过去                popWin.boardId=list.selectedItem.id;                popWin.boardTitle=list.selectedItem.title;                  popWin.boardContent=list.selectedItem.content;                popWin.boardFinish=list.selectedItem.finish;                //定位弹出窗口的位置                popWin.x=350;                popWin.y=60;                              }     ]]>   </mx:Script>       <mx:Canvas label="管理板报" width="100%" height="100%" borderStyle="outset">    <!--dataProvider接收HttpService(lookContent)返回的值-->  <mx:DataGrid dataProvider="{lookContent.lastResult.Contents.Content}" width="808" textAlign="center" borderStyle="inset" height="334" id="list" verticalCenter="-10" x="16.5"> <mx:columns><mx:DataGridColumn headerText="板报标题" dataField="title" width="150"/>  <mx:DataGridColumn headerText="失效时间" dataField="finish" width="150"/><!--在该列中（修改板报）添加LinkButton-->      <mx:DataGridColumn headerText="修改板报"  dataField="id" width="60" ><mx:itemRenderer>              <mx:Component>                 <mx:LinkButton toolTip="修改板报" click="updatebtn(event)" icon="@Embed('image/update.gif')">                     <mx:Script>  <![CDATA[  private function updatebtn(event:MouseEvent):void{  outerDocument.updatebtn(event);  }   ]]></mx:Script>                  </mx:LinkButton>              </mx:Component>             </mx:itemRenderer></mx:DataGridColumn></mx:columns>  </mx:DataGrid></mx:Canvas></mx:Application>

弹出窗体titleWin.mxml代码：

<?xml version="1.0" encoding="utf-8"?><mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="696" height="478" showCloseButton="true" close="PopUpManager.removePopUp(this)"title="修改板报"><!--修改板报--><mx:HTTPService id="updateContent" url="http://localhost:8080/BlackBoardV1.6/ContentServlet"useProxy="false"method="post" result="updateHandler(event)">   <mx:request>       <!--将titleWindow中值传给Servlet进行处理-->       <flag>{"update"}</flag>       <id>{boardId}</id>       <title>{bTitle.text}</title>       <content>{content.text}</content>       <finish>{finish.text}</finish>   </mx:request></mx:HTTPService>    <mx:Script>        <![CDATA[        import mx.controls.Alert;            import mx.managers.PopUpManager;            [Bindable]            public var boardId:int;            [Bindable]            public var boardTitle:String;            [Bindable]            public var boardContent:String;            [Bindable]            public var boardFinish:String;                       public function update():void            {                updateContent.send();                 }                          public function updateHandler(event:Event):void{             if(updateContent.lastResult.toString()=="true")            {                    PopUpManager.removePopUp(this);            Alert.show("修改成功，请刷新页面查看。");            }else            {            Alert.show("对不起，修改板报信息失败，请联系开发人员。");            }                                  }        ]]>    </mx:Script>    <mx:Label x="115" y="43" text="板报标题：" fontWeight="bold" fontSize="15"/><mx:Label x="115" y="93" text="板报内容：" fontWeight="bold" fontSize="15"/><mx:TextArea x="208" y="97" width="368" height="162" id="content" text="{boardContent}"/><mx:Label x="115" y="288" text="失效时间：" fontWeight="bold" fontSize="15"/><mx:DateField x="208" y="291" width="142" id="finish" text="{boardFinish}"/><mx:Button x="293" y="337" label="确定修改" fontWeight="bold" fontSize="15" click="update()"/><mx:TextInput x="208" y="43" text="{boardTitle}" id="bTitle"/></mx:TitleWindow>

运行效果：

因为代码关联性较强，放上来的代码只是个示例，可能无法运行，不过这有一个简单的TitleWindow控件的使用Demo。

参考博客：http://justcoding.iteye.com/blog/569794 

可以运行的好例子~~~

目前在TitleWindow中可以对板报信息进行修改，但是修改成功之后如何更改父窗口的数据呢？？？目前只能手动刷新，逊爆了。。有待解决、、、

 

错误处理：

找不到类型，或者它不是编译时常数: TextInput。
解决方法：打开设计视图，拖进去一个TextInput，报错消失，但是不能指定所拖TextInput的id，否则依旧报错，神奇的。