In this task, you will add a new button that, when clicked, will read the data from the end user's shopping cart and write that information to a shared object on their client machine. This will enable users to access their shopping cart data any time before they have actually gone through the purchasing process. You will also examine the resulting .sol file on the client machine.
1. | From the FlexGrocer project, open the file views/ecomm/Cart.mxml.
In this file, you will add a Save For Later button. When clicked, this button will read the shopping cart data and write this data to a shared object on the client machine.
|
2. | Immediately after the <mx:Script> block, add a <mx:Button> tag with the label of Save for Later.
<mx:Button label="Save for Later"/>
This code displays a Button with the label of Save for Later immediately below the current DataGrid.
|
3. | Add a click event to the <mx:Button> tag that will call the saveCart() method of the cart object.
<mx:Button label="Save for Later" click="cart.saveCart()"/>
The cart object, an instance of the ShoppingCart class, has already been created in the script block. You will add a saveCart() method to this class, which will read the data from the user's shopping cart and write this data to a shared object.
|
| |
4. | Save the changes to Cart.mxml and open up the valueObjects/ShoppingCart.as file.
It makes sense to place the saveCart() method in the ShoppingCart class because this is where the shopping cart data, aItems, that will be written to the shared object is stored.
|
5. | At the top of the class, add an import statement that will import the flash.net.SharedObject class. Within the class, declare a new, public, bindable shared object with the name of soCart. At the end of the ShoppingCart class, add the skeleton of a new public() method with the name of saveCart() data typed as void.
import flash.net.SharedObject; public class ShoppingCart { [Bindable] public var soCart:SharedObject; public function saveCart():void{ } ... }
You will be using the data structure written to the client machine, the shared object, to populate the DataGrid when the application first starts. Therefore, it is important to declare the shared object itself as Bindable.
|
6. | In the saveCart() method, using the static getLocal() method of the SharedObject class, declare a new shared object with the name of soCart. Pass the parameter of cartInfo to the getLocal() method.
public function saveCart():void{ this.soCart = SharedObject.getLocal("cartInfo"); }
This will create a new shared object and write a file to the end user's machine with the name of cartInfo. The extension of the file created will be .sol.
|
7. | In the saveCart() method, declare a new Array with the name of aCart in the data property of the SharedObject.
public function saveCart():void{ this.soCart = SharedObject.getLocal("cartInfo"); this.soCart.data.aCart = new Array(); }
To assign data to a shared object, you must use the data property. This is the only property of the shared object class and how all data can be set and retrieved. If you are storing complex data structures in the shared object, the object itself must be instantiated within the object.
|
| |
8. | Immediately after declaring the Array, create a new variable with the name of len that will obtain the length of the aItems ArrayCollection and build the skeleton of a for loop that will loop through the aItems ArrayCollection:
var len:int = aItems.length; for (var i:int = 0;i < len;i++){ }
Remember that the current contents of the shopping cart are stored in the aItems ArrayCollection. You are building a for loop to loop through the aItems array and populate the client-side shared object with that information.
|
9. | Inside of the for loop, populate the soCart.data.aCart array, inside the SharedObject with the aItems ArrayCollection. Use the getItemAt() method to access the data in the ArrayCollection. The final saveCart() method should look as follows:
public function saveCart():void{ this.soCart = SharedObject.getLocal("cartInfo"); this.soCart.data.aCart = new Array(); var len:int = aItems.length; for (var i:int = 0;i < len;i++){ this.soCart.data.aCart[i] = this.aItems.getItemAt(i); } }
This will place the values from the ArrayCollection into the shared object. The SharedObject class can store only native ActionScript data structures such as an array of objects. An ArrayCollection cannot be stored in a shared object, nor can objects created using the value object pattern. These data structures will be converted to arrays of objects.
|
10. | Run the EComm application. Add some items to the shopping cart and view the cart. Click the Save for Later button.
When you click the Save For Later button, you will write a .sol file to the client machine. When you call the SharedObject.flush() method or simply close your browser, all the information in the shopping cart will be written to this file.
|
11. | The storage location of Local Shared Objects is operating systemdependent. If you are using Windows, browse to driveroot:/Documents and Settings/{username}/Application-Data/Macromedia/Flash Player/#Shared Objects. From this point, search for cartInfo.sol.
|
| |
12. | Save ShoppingCart.as.
Tip  | The path might include some odd directory names because you are not browsing the MXML file, but running it from Flex Builder. |
Tip | On Macintosh OSX, shared objects are stored in /Users/{username}/Library/Preferences/Macromedia/Flash Player. |
Inside the .sol file you will see the data structure of the shopping cart. This is the file that Flash Player can read and use to populate controls.
|
