Homework I3

From Cmsc434_s10
Jump to: navigation, search

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)

Cart details

Jeffjacob.png Contributed by Jeff Jacob

I3-cart-details.png

Requirements

  • Users should be able to see the total price of the items in the cart.

Implementation

Part 1:

  • 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.


Part 2:

  • 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.


Part 3:

  • 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.

Alert

Codysmith.png Contributed by Cody Smith

I3-alert-empty-cart.png

I3-alert-order-confirmation.png

I3-alert-submitted.png

Requirements

  • Users should be informed when they are trying to perform and illegal operation including feedback.
  • Users should be required for confirmation on critical operations.

Learning

Implementation

  • 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

Kevinbarrett.png Contributed by Kevin Barrett

I3-drag.png I3-drop.png


Requirements

  • Users should be able to add an item to the cart using drag-and-drop.

Learning

Implementation

  • 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.

Web Services

View Stack

I3-admin-view.png I3-customer-view.png


Requirements

  • 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.

Implementation

  • 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).

States

Requirements

  • Administrators should be able to add a new menu item by specifying its name, price, and the restaurant it's for.

Learning

Read one of the articles below to learn about Flex states.

Implementation

  • 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

I3-states-1.png

  • State 2: Form opened

I3-states-2.png

  • State 3: Form ready

I3-states-3.png

  • 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.

HTTP Service

Requirements

  • Administrators should be able to submit a filled form.
  • Administrators should be able to see the content of the Datagrid updated.

Learning

Read one of the articles below to learn how to pass parameters to http calls (i.e., .../create?price=15&name=Salad)

Implementation

  • 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.

Update/Delete

I3-update-form.png

Requirements

  • Administrators should be able to update the properties of a menu item
  • Administrators should be able to delete a menu item

Implementation

  • 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.

Grading Key

  • 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)

Submissions

Examples

Name Part 1 Part 2
Sureyya Tarkan Media:tarkan-I3-1.swf Media:tarkan-I3-2.swf
Tom Yeh Media:swf-I3-1.swf Media:swf-I3-2.swf

A - H

Name Part 1 Part 2
Firstname lastname Media:swf-I3-1.swf Media:swf-I3-2.swf
Javed Ahamed Media:Javed stampH2P1.swf Media:Javed stamp3p2.swf
Kevin Barrett Media:Barrett_I3_1.swf Media:Barrett_I3_2.swf
Robin Brewer Media:Robin-Brewer-pt-1.swf Media:Robin-Brewer-pt-2.swf
Frank Cannavo Media:fcannavo-I3a.swf Media:fcannavo-I3b.swf
Amit Chauhan Media:Chauhan-I3-1.swf Media:Chauhan-I3-2.swf
Patrick Dattilio Media:Dattilio-I3-1.swf Media:Dattilio-I3-2.swf
Nathan DeSelms Media:ndeselms-fc1.swf Media:ndeselms-fc2.swf
Venkat Dinavahi Media:venkatd_I3-1.swf Media:venkatd_I3-2-fixed.swf
Michael Donovan Media:implementation3_1.swf Media:implementation3_2.swf
John Fan Media:Johnfanp1imp3.swf (without drag-and-drop) Media:johnfanlatei3p1.swf (late with drag-and-drop) Media:Johnfanp2imp3.swf (without update/delete) Media:johnfanlatei3p2.swf (late with update/delete)
Andrew Ferguson Media:Ferguson-I3-1.swf Media:Ferguson-I3-2.swf
Pedro Ferreira Media:Pedro-l3-1f.swf Media:Pedro-I3-2.swf
Lucas Gonzalez-Fernandez Media:lgf_I3_1.swf Media:lgf_I3_2.swf
Mark Heneks Media:MheneksI3p1.swf Media:MheneksI3p2.swf
Monzer Hijazi Media:MhijaziI3p1.swf Media:MhijaziI3p1.swf

I - P

Name Part 1 Part 2
Firstname lastname Media:swf-I3-1.swf Media:swf-I3-2.swf
Joseph Isaac Media:JIsaac-I3-1.swf Media:JIsaac-I3-2.swf
Jeff Jacobs Media:Jacobs-swf-I3-1.swf Media:Jacobs-swf-I3-2.swf
Asmi Joshi Media:AsmiStamp.swf Media:AsmiStamp.swf
Kashif Khan Media:kkhan_hw3_p2.swf Media:kkhan_hw3_part2.swf
Jonathan Lee Media:LeeI3-1.swf Media:LeeI3-2.swf
Ben Li Media:bliI3-1.swf Media:bliI3-2.swf
Wen Li Media:Li3-1.swf Media:Li3-2.swf
Justin Lindsey Media:jlindseyi3-1.swf Media:jlindseyi3-2.swf
Ran Liu Media:ran3-1.swf Media:ran3-2.swf
Kelly McDuffie Media:McDuffie-swf-I3-1.swf Media:McDuffie-swf-I3-2.swf
David Moore Part 1 Part 2
Mihir Patel Media:mpatel-i3-1.swf Media:mpatel-i3-2.swf
Leyla Norooz Media:lnorooz-I3-Stamp.swf Media:lnorooz-I3-part2-Stamp.swf
Kelly O'Neil Media:oneil-I3-1.swf Media:oneil-I3-2.swf

Q - Z

Name Part 1 Part 2
Firstname lastname Media:swf-I3-1.swf Media:swf-I3-2.swf
Brian Ramnarain Media: ramnarain-I3-1.swf Media: ramnarain-I3-2.swf
Corey Richardson Media: Richardson-I3-1.swf Media: Richardson-I3-2.swf
Luis Sanchez Part1 Part2
Nidhi Sethi Media: nsethi-I3-1.swf Media: nsethi-I3-2.swf
Anand Shroff Media: Ashroff-I3-1.swf Media: Ashroff-I3-2.swf
Cody Smith Media: csmith71_I3-1.swf Media: csmith71_I3-2.swf
Adam Stephenson Media: gladst4_I3-1.swf Media: gladst4_I3-2.swf
David Thomas Media: Dthom_I31.swf Media: Dthom_I32.swf
Mekias Yohannes Media: Mekias-p3p1.swf Media: Mekias-I3-p2.swf