实习日志（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，否则依旧报错，神奇的。