Flex3 on Rails ( 4 )

第三篇 Flex3 on Rails2 进阶(续)

Flex3 on Rails ( 3)

 

下面是“添加”、“编辑”按钮弹出窗口EditPopUp.mxml的文件内容:采用了TitleWindow

 

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="400" height="276"
     showCloseButton="true" close="handleClose(event)" borderColor="#000000" cornerRadius="10">
   <mx:Script>
   <![CDATA[    
    import mx.managers.PopUpManager;
    import mx.events.CloseEvent;
    [Bindable]
     public var callbackFunction:Function; //回调函数
    
private function callback():void{
       PopUpManager.removePopUp(this); //关闭子窗口
       callbackFunction.call(this.parent); // 调用父窗体的刷新函数
     }
     private function handleClose(evt:CloseEvent):void {  
       PopUpManager.removePopUp(this);   //不进行任何操作,就关闭窗口
     }
     private function updatePost(data:Object, msg:String ):void {          
      if ( msg == "edit" ){          //表明是编辑操作
       var selectedPost:XML = XML(data);   
        var params:Object = new Object();
        params['post[title]'] = editPostTI.text;  
        params['post[body]'] = editPostBd.text; 
        params['_method'] = "PUT";
        svcPostsUpdate.url = "/posts/"+ selectedPost.id +".xml";
        svcPostsUpdate.send(params);
      }
     
else svcPostsCreate.send();  //否则是新建记录操作
      setTimeout( callback, 1000);  //需要延迟1000ms后再刷新父窗口,否则新数据来不及更新
     }
   ]]>
  </mx:Script>
  <mx:HTTPService id="svcPostsCreate" url="http://localhost:3000/posts.xml" resultFormat="e4x" contentType="application/xml" method="POST">
    
<mx:request>
        <Post>
          <title>{editPostTI.text}</title>
          <body>{editPostBd.text}</body>
        </Post>
     </mx:request>

  </mx:HTTPService>
  <mx:HTTPService id="svcPostsUpdate" resultFormat="e4x" method="POST" />
    <mx:HBox width="100%" paddingLeft="5" paddingRight="5" paddingTop="5" height="37">
      <mx:Label text="标题" fontFamily="Arial" fontSize="14"/>
      <mx:TextInput id="editPostTI" text="{data.title}" width="100%"  height="27" fontFamily="Arial" fontSize="14"/>
    </mx:HBox>
 
    <mx:HBox width="100%" paddingLeft="5" paddingRight="5" paddingTop="5" height="111">
      <mx:Label text="主体" fontFamily="Arial" fontSize="14" height="23"/>
      <mx:TextArea width="100%" text="{data.body}" height="96" id="editPostBd"   fontFamily="Arial" fontSize="14"/>
    </mx:HBox>

    <mx:Button label="保存" click="updatePost(this.data,this.id)" fontFamily="Arial" fontSize="13" cornerRadius="5"/>
   
</mx:TitleWindow>

 

说明:

主要是父子窗口数据通信问题:

1、在父窗口Blogs.mxml中设置了子窗口EditPopUp.mxml的参数值及c.id ="edit" (c.id = "new")和c.data = post,而在子窗口的相应地方都用到了他们。

2、子窗口回调父窗口函数refresh来刷新父窗口。在父窗口中定义了子窗口的 c.callbackFunction = this.refresh; 以及refresh函数,那么在子窗口便可以如下使用

public var callbackFunction:Function; //回调函数
callbackFunction.call(this.parent); // 调用父窗体的刷新函数 。

OK,整个应用就是这样,下面是效果图:

总结:Flex3组件:DataGrid、TitleWindow、HTTPService 、HBox 、TextInput 、TextArea 、Button 、HBox

Flex3事件:ListEvent、CloseEvent、PopUpManager、

你可能感兴趣的:(C++,c,xml,C#,Rails)