`

Flex3 CRUD 与Java后台交互 完整Demo

 
阅读更多
网上关于flex java curd的例子很少,官方的文档不全且有错误.今天自己做的个crud的例子,
不带分页(分页网上有很多例子了).
上图:


mxml:
<mx:Application
    
xmlns:mx="http://www.adobe.com/2006/mxml"
    layout
="absolute">

   
<mx:Script>
        
<![CDATA[
            include "product.as";
        
]]>
    
</mx:Script>

    
<mx:HTTPService
        
id="productService"
        url
="http://localhost:8888/flex2/productServlet"
        resultFormat
="e4x"
        useProxy
="false" />  <!--url改成您的数据请求地址-->

    
<mx:ViewStack id="viewstack1" width="731" height="473"  x="86.5" y="10">
    
<!--index 0 -->
        
<mx:Canvas label="Form View" width="100%" height="100%">
            
<mx:Form horizontalCenter="0" verticalCenter="0"
                backgroundColor
="#18E1CC" width="124" height="56">
                    
<mx:Button label="进入" click="fill()" width="100"/>
            
</mx:Form>
        
</mx:Canvas>
    
<!--index 1-->    
        
<mx:Panel label="AdvancedDataGrid 显示" width="100%" height="100%"  layout="absolute">
            
<mx:AdvancedDataGrid id="grid1" width="666" height="380" dataProvider="{_result.product}"  editable="true" itemEditEnd="updateHandler(event)"   x="10" y="10">
                  
<mx:columns>
                     
<mx:AdvancedDataGridColumn  dataField="id" headerText="ID"  editable="false"/>
                    
<mx:AdvancedDataGridColumn  dataField="productName" headerText="产品名称" />
                    
<mx:AdvancedDataGridColumn  dataField="remark" headerText="备注" />
                  
</mx:columns>
            
</mx:AdvancedDataGrid>
            
            
<mx:Button x="60" y="401" label="添加" click="{viewstack1.selectedIndex = 2}"/>
            
<mx:Button label="删除"   x="180" y="401" click="remove()"/>    
        
</mx:Panel>
    
<!--index 2-->
        
<mx:Canvas label="添加新记录" width="100%" height="100%" id="canvas3" >
            
<mx:Form
                    
backgroundColor="#FFFFFF"  verticalCenter="-91" horizontalCenter="-138">
                    
                
<mx:FormItem label="" width="189" height="20">
                    
<mx:Button  label="返回" click="this.viewstack1.selectedIndex=1"/>
                    
<mx:TextInput id="hidden_id"  visible="false" />
                
</mx:FormItem>    
                
                
<mx:FormItem label="产品名称">
                    
<mx:TextInput id="productName"/>
                
</mx:FormItem>
                
                
<mx:FormItem label="备注">
                    
<mx:TextInput id="remark"/>
                
</mx:FormItem>
                
                
<mx:Button label="保存" click="insertProduct()" id="btn" />
            
</mx:Form>
        
</mx:Canvas>
        
    
</mx:ViewStack>

   
</mx:Application>
as:
import mx.collections.XMLListCollection;
import mx.controls.Alert;
import mx.controls.TextInput;
import mx.events.AdvancedDataGridEvent;
import mx.events.CloseEvent;
import mx.rpc.events.ResultEvent;

private var params:Object = new Object();

//private var ld:XMLListCollection; 官方文档的XMLListCollection并不能用,例子有问题郁闷
[Bindable]
private var _result : XML ; //注意文件名防止冲突
/** *//**
 * xml数据的渲染
 * 
*/

public function resultHandler(event:ResultEvent):void 
{
    _result 
= XML(event.result);
}

/** *//**
 * 查询所有产品的按钮事件
 * 
*/

public function insertItemHandler(event:ResultEvent):void 
{
    fill();
}

/** *//**
 * 查询所有产品的方法 
 * 
*/

public function fill():void
{
    
//为productService(HTTPService) 重新绑定监听器(查询)
    productService.removeEventListener(ResultEvent.RESULT,insertItemHandler);
    productService.addEventListener(ResultEvent.RESULT,resultHandler);
    productService.method 
= "GET";
    
//要传递的参数
    params['method'= "findAll";
    productService.cancel();
    productService.send(params);
    
//切换到Grid视图
    viewstack1.selectedIndex=1;
}

/** *//**
 * 插入产品
 * 
*/

public function insertProduct():void
{
    
//绑定新的监听器(插入)
    productService.removeEventListener(ResultEvent.RESULT,resultHandler);
    productService.addEventListener(ResultEvent.RESULT,insertItemHandler);
    productService.method 
= "POST";
    
//传递Form表单参数
    params = {"method""save""id": NaN, "productName": productName.text,
                 
"remark": remark.text}
;
    productService.cancel();
    productService.send(params);
    clearInputFields();
}

/** *//**
 * 
 * 更新记录的事件处理函数
 * 
 * 
*/

public function updateHandler(event:AdvancedDataGridEvent):void
{
    
//取消的话不更新
    if(event.reason == "cancelled")
    
{
        
return;
    }

    
//重新注册
    productService.removeEventListener(ResultEvent.RESULT,resultHandler);
    productService.addEventListener(ResultEvent.RESULT,insertItemHandler);
     
//得到输入后的新数据    
     var newData:String = (TextInput(event.currentTarget.itemEditorInstance)).text;
     
//得到输入前的三个数据
     var _id : int  = this.grid1.selectedItem["id"];
     var _productName :String 
= this.grid1.selectedItem["productName"];
     var _remark :String 
= this.grid1.selectedItem["remark"];
     
//第二列为产品名称
     if(event.columnIndex == 1)
     
{
         _productName 
= newData;
     }

     
//第三列为备注
     if(event.columnIndex == 2)
     
{
         _remark 
= newData;
     }

     params 
= {"method""update""id": _id,"productName":_productName,"remark":_remark};
     productService.cancel();
     productService.send(params);
}


/** *//**
 * 删除的方法
 * 
*/

public function remove() : void
{
    var index:
int = this.grid1.selectedIndex;
    
if(index == -1)
    
{
         Alert.show(
"您没有选择任何记录","提示");
         
return;
    }

     Alert.yesLabel 
= "确定";
     Alert.cancelLabel 
= "取消";
     Alert.show(
"确定要删除吗?","提示",Alert.YES|Alert.CANCEL,this,defaultCloseHandler);
}

/** *//**
 * 处理选择是否删除后的事件
 * 
 * 
*/

public function defaultCloseHandler(event:CloseEvent):void
{
     
//如果点击了确定
     if(event.detail == Alert.YES)
     
{
          productService.removeEventListener(ResultEvent.RESULT,resultHandler);
         productService.addEventListener(ResultEvent.RESULT,insertItemHandler);
          var id : String  
= this.grid1.selectedItem["id"];
         params 
= {"method""remove""id": id};
         productService.cancel();
         productService.send(params);
     }

}

/** *//**
 * 清除form中的属性值
 * 
*/

private function clearInputFields():void
{
    productName.text 
= "";
    remark.text 
= "";
}

源码下载地址:
点击下载
分享到:
评论

相关推荐

    flexdemo flex+java访问数据库

    在"flexdemo flex+java访问数据库"这个主题中,我们主要探讨的是如何使用Flex作为前端开发工具,与Java后端相结合,实现对数据库的交互。 Flex提供了ActionScript编程语言,它是基于ECMAScript的一个方言,用于在...

    flex和java进行CRUD操作(转贴)

    本篇文章将围绕“Flex与Java进行CRUD操作”的主题,深入探讨如何使用这两者协同工作来实现数据的创建(Create)、读取(Retrieve)、更新(Update)和删除(Delete)功能。 首先,让我们了解一下CRUD操作的基本概念。在...

    Flex+java入门

    "Demo1.zip"则可能是一个示例项目,包含了Flex和Java集成的完整代码,供学习者实践和理解。 学习Flex+Java开发,你需要了解以下知识点: 1. Flex基础:学习MXML和ActionScript3,理解组件模型,如何创建和布局UI。...

    flex+java增删改查(spring+jpa)简单例子

    标题 "flex+java增删改查(spring+jpa)简单例子" 暗示了这是一个关于使用Adobe Flex作为前端UI框架,与Java后端结合,实现数据的CRUD(创建、读取、更新、删除)操作的教程。在这个场景中,Java后端使用Spring框架...

    flex+java+mysql做的一个简单的小程序

    在这个demo中,Java可能实现了简单的CRUD(创建、读取、更新、删除)操作,用于对MySQL数据库中的数据进行操作。 3. **MySQL**: MySQL是一个流行的开源关系型数据库管理系统,适用于各种规模的应用。在本项目中,...

    Flex+BlazeDB+mysql实现数据交互

    在Flex应用中,数据交互主要通过RemoteObject组件来实现,它可以调用后台Java或.NET服务,从而进行CRUD(创建、读取、更新和删除)操作。 **BlazeDS**: BlazeDS是Adobe提供的一款开源服务器端技术,它允许Flex...

    Flex3GSEIII_a_WorkingWithData_CF

    《Flex3GSEIII_a_WorkingWithData_CF:深入探索数据处理与Adobe Flex的结合》 在数字时代,软件开发中的用户界面设计与数据处理能力至关重要。Adobe Flex作为一个强大的富互联网应用(RIA)开发框架,为开发者提供...

    flex hibernate

    4. **Flex与Hibernate集成**:学习如何在Flex中调用Java服务,通过BlazeDS将Flex的请求转发到Hibernate实现的业务逻辑层,处理数据库操作,如CRUD(Create, Read, Update, Delete)。 5. **数据传输对象(DTO)**:...

    跟我StepByStep学FLEX教程------王一松

    Demo3:数据类型 - **基本数据类型**:如String、Number等。 - **复合数据类型**:包括Array、Object等。 - **类型转换**:讲解如何在不同数据类型之间进行转换。 #### 9. Demo4:进度条的数据绑定 - **数据绑定...

    跟我StepByStep学FLEX

    - **通信协议**:介绍FLEX与后端服务(特别是Java服务)之间的通信方式,如使用BlazeDS进行远程数据交换。 - **工具准备**:列出所需的开发工具和库,并提供配置指南。 #### Flex+LCDS(BlazeDS)+Java开发 - **系统...

    Angular资料(权威指南及其相关插件与demo实现)

    通过分析和运行这些示例,你可以了解如何将理论知识应用于实际开发,例如,如何创建一个完整的CRUD应用、如何使用Angular路由实现页面跳转、如何集成第三方API等。 4. **学习路径**:对于初学者,可以先从阅读权威...

Global site tag (gtag.js) - Google Analytics