[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>