[RemoteClass(alias="flex.samples.product.Product")]、前台和后台的数据更新举例

【问题描述】

点击左侧的表格，数据的信息将在右侧显示出来，此时更改右侧的数据，左侧的表格也将改变，这是前端的数据更新，刷新页面时数据又回到更新前

如果点击update按钮，则进行的是后台的数据更新，这意味着如果刷新网页，更改仍起效果

【代码分析】

前端的主文件mxml中有这样的代码

 

<ProductForm product="{Product(list.selectedItem)}"/>

 

用被选中的数据list.selectedItem实例化一个Product，并将这个对象赋值给product这个ProductForm。

（这里的Product()调用的是前台的Product.as中的实例化函数，在这个文件中有这么一条语句

[RemoteClass(alias="flex.samples.product.Product")]

 作用是将前台的Product.as和后台的Product.java映射在一起，这样从后台的getProduct()方法取回的Product返回到前台就用Product.as类来代表，而前台传给后台的Product类到了后台就被当成Product.java类来处理）

而在ProductForm中

 

    <mx:Form width="100%">
<mx:FormItem label="Name">
<mx:TextInput id="productName" text="{product.name}"/>
</mx:FormItem>
<mx:FormItem label="Category">
<mx:TextInput id="category" text="{product.category}"/>
</mx:FormItem>
<mx:FormItem label="Image">
<mx:TextInput id="image" text="{product.image}"/>
</mx:FormItem>
<mx:FormItem label="Price">
<mx:TextInput id="price" text="{product.price}"/>
</mx:FormItem>
<mx:FormItem label="Description" width="100%">
<mx:TextArea id="description" text="{product.description}" width="100%" height="100"/>
</mx:FormItem>
</mx:Form>

 

这段代码是将product的各个值在TextInput 控件中显示出来

紧接着ProductForm中有这样的代码

 

    <Product id="product"
name="{productName.text}"
category="{category.text}"
price="{Number(price.text)}"
image="{image.text}"
description="{description.text}"/>

 

进行的是前台的更新，这个更新是和TextInput控件中的更新同时发生的。

后台的更新则需要在点击update按钮时触发

 

    <mx:ControlBar>
<mx:Button label="Update" click="srv.update(product);"/>
</mx:ControlBar>