Implementation 3 (Due date: 4/5, 2pm)
This implementation homework consists of two parts. In the first part, you need to make three extensions to the STAMP virtual food court application you built in the previous homework. You will refresh some of the Flex skills you acquired from the previous homework such as creating Flex compomnents and defining, dispatching, and handling custom events. Also, you will learn to use Alert messages and Drag-and-drop operations. In the second part, you need to implement an interface for a new class of users --- administrators. They want to be able to modify the content of the menus such as adding, updating, deleting items. You will learn two useful ways in Flex to manage multiple views: ViewStack and States. In addition, you will learn how to communicate with an online database through simple HTTP web service calls. As a preview, you will be implementing these web services yourself in the next and final implementation homework.
Part 1: Extensions (30 points)
- Users should be able to see the total price of the items in the cart.
- Create a new Flex component file named cartDetails.mxml based on a Panel container.
- Add a Label control for displaying the total cost of the cart.
- Create an mx:Script section in the cartDetails.mxml code for holding the component's functions.
- Create a private variable within cartDetails.mxml called total, of type Number, for holding the cart's total amount. Initialize it to 0.
- Modify the Label control within the panel so it displays the value of total (You will have to make sure you put the [Bindable] directive on the line above the line where total is defined).
- Create a void function named updateDetails within cartDetails.mxml which takes a Number parameter called newTotal.
- Within the function you just created, set the total variable so it has the value of newTotal.
- Add another function to cartDetails.mxml named getTotal, which returns a Number representing the current total amount of the cart.
- In your addMenuItem() function within cart.mxml, add a line which sets the id attribute of the HBox you are adding to be the price of the item you are adding. (i.e. box.id = "" + item.price;).
- Above the mx:Script section, add an mx:Metadata section which creates an event with the name "removeMenuItemEvent" and the type "events.MenuItemEvent" (or whatever you called your MenuItemEvent class).
- In your event handler function for the HBox's remove button, add a section which creates a temporary MenuItem object, sets its price to be the price of the item the user just removed (remember that the price is saved in the id attribute of the HBox), creates a removeMenuItemEventObject with the temporary MenuItem object you created as the constructor's second argument, and dispatches the event.
- In your stamp.mxml file, create a new function named removeMenuItemEventHandler which takes a MenuItemEvent as its only parameter.
- Add the custom cartDetails component to stamp.mxml (using <comp:cartDetails />) and set the id attribute to "theCartDetails".
- Update the cart component so that its removeMenuItemEventcustom event is handled by the removeMenuItemEventHandler for the given event.
- Back in the removeMenuItemEventHandler function, call the updateDetails function of theCartDetails with the new calculated total (You will need to use the getTotal() function of theCartDetails as well as the menuItem.price attribute of the MenuItemEvent parameter to perform this calculation).
- Call the updateDetails function of theCartDetails with the new calculated total somewhere in the application where an item is added to the cart, so that money gets added to the total as well as deleted.
- Users should be informed when they are trying to perform and illegal operation including feedback.
- Users should be required for confirmation on critical operations.
- Read the tutorial on Alert control at http://livedocs.adobe.com/flex/3/html/help.html?content=controls_19.html
- Remember to import mx.controls.Alert into code where you would like to use it’s functionality.
- Alert the user if their cart is empty when they try to submit the order using Alert.show with a custom message and title. The alert should be visually pleasing.
- Summarize the order cost with an alert when they submit the order. The user can confirm whether the order should be committed or canceled. The default button should be cancel.
- Display a message to confirm the order has been submitted by assigning a handler to the closeEvent of the previous Alert (as one of the arguments to Alert.show).
- If you implemented the order form as a separate component, try to handle the click event of the Submit Order button in the main application file (i.e., stamp.mxml), because it is where you can also access the cart component to read the total price and check the number of items in the cart. One way to do this is to have the order form component dispatch a custom event that can be handled by the main application.
Drag and Drop
- Users should be able to add an item to the cart using drag-and-drop.
- Add dragEnterHandler, dragExitHandler, and dragDropHandler functions to cart.mxml, and set them as the callbacks for the dragEnter, dragExit, and dragDrop events in the cart's main tag. In dragEnterHandler, get the event parameter's currentTarget property and make sure to call DragManager.acceptDragDrop() on it. This tells the application that the cart can accept whatever you're dragging. In dragDropHandler write whatever code necessary to add the item you're dragging to the cart (you need to dispatch a custom event that should be handled in stamp.mxml). Feel free to store the dragged item in any way you choose the way I did is detailed in next.
- In the DataGrid that stores your menu items (in menu.mxml), set dragEnabled to true. This lets you drag the individual menu items in the DataGrid.
- Figure out a way to store data between grabbing the menu item and dropping it on the cart. I used a mouseDownHandler in my MenuItemRenderer.mxml to set a variable in the renderer's parentApplication property (which is expected to be cart.mxml) equal to the MouseEvent's data object. This means I can access the individual most-recently-clicked menu item from anywhere in the application (don't forget to set it as callback for mouseDown in the main tag). I then use this property to add the item to the cart in the cart's DragDropHandler callback.
- (Optional) If you really want, you can animate the drag-and-drop by playing with Flex's animation elements and calling them in the three different handlers. I used mx:Zoom to grow and shrink the cart when the dragged object enters and leaves it.
Part 2: Menu Editor (70 points)
Before you start this section, do not forget to upload your swf file from Part 1 under Submissions section in alphabetical order of last name.
- Pick a unique user id and create an account by making a web service call to http://cmsc434-i3.heroku.com/register/johnsmith, replacing johnsmith with your id. You can either type the URL in a web browser or using a command line tool such as curl.
- A set of web services are available for you to interact with an online database to create/read/update/delete menu items:
- Retrieve the entire menu: http://cmsc434-i3.heroku.com/johnsmith/menuItems/list
- Retrieve the menu for a specific restaurant: http://cmsc434-i3.heroku.com/johnsmith/menuItems/list?restaurant=Sbarro
- Create a new menu item: http://cmsc434-i3.heroku.com/johnsmith/menuItems/create?restaurant=Sbarro&name=Salad&price=15
- Delete an existing menu item whose id is 123: http://cmsc434-i3.heroku.com/johnsmith/menuItems/delete?id=123
- Update an existing menu item whose id is 123: http://cmsc434-i3.heroku.com/johnsmith/menuItems/update?id=123&restaurant=Sbarro&name=Salad&price=10
- (For debugging) Restore the database to the original state: http://cmsc434-i3.heroku.com/johnsmith/menuItems/reset
- Experiment making these web service calls to modify the menu items in the database. It is important to use your own user name so that you won't interfere with others.
- Administrators should be able to see a tabular view of all the menu items in a separate screen
Learning Read one of the articles below to learn about Flex ViewStack.
- ViewStack demo in Flex 3 Getting started
- Using a ButtonBar control with a ViewStack
- ViewStack in Adobe Flex 3 Help
- ButtonBar and ToggleButtonBar Controls
- Add a ViewStack component with two Canvas components to hold views for customers and administrators respectively.
- Add a ToggleButtonBar control to allow users to switch between the two views.
- In the administrator view, add a DataGrid to display the content of the menu.
- Define an HTTPService component named listMenuItemService and set its url to the web service for retrieving all the menu items (e.g., http://cmsc434-i3.heroku.com/johnsmith/menuItems/list).
- Add an event handler to handle the creationComplete event of the container component you use to hold the DataGrid. In this event handler, call listMenuItemService to retrieve menu items and populate the DataGrid with the retrieved data. This step is similar to the first step of Part 2 in the previous implementation homework (see I2).
- Administrators should be able to add a new menu item by specifying its name, price, and the restaurant it's for.
Read one of the articles below to learn about Flex states.
- Create a Panel component to hold the controls for adding new menu items.
- Create the following three states for this Panel component.
- State 1: Form closed
- State 2: Form opened
- State 3: Form ready
- Add an event handler to handle the click event of the Click to start button in State 1 to switch to State 2.
- Add an event handler to the Cancel button in State 2 to switch back to State 1.
- Set the enabled property of the Add button in State 2 to false.
- Set the basedOn property of State 3 to State 2 so that State 3 can share the same set of controls as State 2.
- Add an mx:SetProperty tag to State 3 to enable the Add button.
- Add an event handler to handle the change event of the text input components for Name and Price. In the event handler function, check if both fields have been filled. If so, switch to State 3. If not, switch to State 2.
- Administrators should be able to submit a filled form.
- Administrators should be able to see the content of the Datagrid updated.
Read one of the articles below to learn how to pass parameters to http calls (i.e., .../create?price=15&name=Salad)
- Define an HTTPService component named createMenuItemService and set its url to the web service for adding a new menu item (i.e., http://...../johnsmith/menuItems/create......).
- Add an event handler to handle the click event of the Add button. In this event handler, call the service with the parameters including the name, price, and restaurant of the new menu item.
- Add an event handler to handle the result event of createMenuItemService. In this event handler, call listMenuItemService to retrieve the updated list of menu items, and refresh the content of the DataGrid.
- Administrators should be able to update the properties of a menu item
- Administrators should be able to delete a menu item
- Create a new form to show the details of a menu item.
- Add an event handler to the DataGrid to handle the itemClick event. The goal is to display the details of the menu item clicked by the user in the form.
- Add HTTPService components for update and delete services. Call these services in the handlers of the click events of the delete and update buttons respectively. Pass the appropriate parameters.
- Refresh the content of the menu displayed after delete and update.
- Extensions (30 pts)
- Cart Details: Cart Details panel (1 pt), Total cost label (1 pt), total increases when items are added (4 pts), total is decreased when items are deleted (4 pts)
- Alert: Show an Alert with a custom message when cart is empty (2 pt), visually pleasing (2 pt), summarize the order cost with an alert when order submitted (2 pt), commit/cancel option (2 pt), cancel as default button (2 pt)
- Drag and Drop: grabbing the menu item (3 pts), dropping the menu item on the cart (7 pts)
- Menu Editor (70 pts)
- View Stack: ViewStack with two Canvases to hold views for customers and administrators (1 pt), ToggleButtonBar that switches between two views (2 pts), DataGrid to display the menu content (1 pt), populate DataGrid with retrieved menu items (4 pts)
- States: Panel for adding new menu items (1 pt), Click to start button (1 pt), name text input (1 pt), price text input (1 pt), restaurant combo box (1 pt), Add button (2 pts), Cancel button (1 pt), Form closed switches to Form opened with click (4 pts), Cancel button switches from Form opened to Form closed (4 pts), change event of text inputs causes to switch between Form opened and Form ready (7 pts)
- HTTP Service: show the updated list of menu items in DataGrid (10 pts)
- Update/Delete: Details form (1 pt), id label (2 pts), name text input (2 pts), price text input (2 pts), restaurant combo box (2 pts) shows the details of a clicked menu item, delete link button deletes from DataGrid (10 pts), update button updates DataGrid (10 pts)
|Name||Part 1||Part 2|