Implementation 2 (Due date: 3/1, 2pm)
Your mission is to implement a web application called Virtual STAMP food court using Flex. This application consists of four components: an ordering form for users to enter basic information, a menu that displays food items users can order, a view component that displays a particular food item in details, and a cart component that keeps a list of items users intend to order.
This implementation homework consists of four parts. In each part you will build a component for the application. Each part is further divided into a series of smaller steps. Each step is designed for you to learn a particular Flex programming concept and technique as indicated by the heading. Your task is to make an incremental improvement to the application. Each improvement includes a set of features motivated by some fictional but reasonable user requirements. Before you attempt to implement these features, you should watch the tutorial video or read the article listed under the Learning section. The video and/or article will teach you what you need to implement the desired features. You can also find additional hints under the Implementation section. This homework is designed in the way that each part depends on what you have learned in the previous parts. So it is important to proceed sequentially.
- 1 Part 1: Order form (20 points)
- 2 Part 2: Menu (20 points)
- 3 Part 3: Item details (30 points)
- 4 Part 4: Cart (30 points)
- 5 Part 5: Extra Credits (max: 15 points)
- 6 Grading Key
- 7 Submissions
Part 1: Order form (20 points)
- Users should be able to enter the name of the food and the location to deliver the food to.
- Users should be able to tell the application to submit the order.
- You should have learned the basic layout techniques in the previous implementation homework.
- Create a new Flex application file named stamp.mxml.
- Add TextInput controls for entering the food name and delivery location.
- Add a Button control for submitting the order.
- Users should find the UI visually pleasing.
- Check out the Flex Style Explorer.
- Read the online book Programming Flex 3 sections 8.1.1, 8.1.2, and 8.1.3 about styles.
- Use the Style Explorer to choose a background color you like for your application. Set the backgroundColor attribute of the <mx:Application> tag to the color you choose.
- Add a <mx:Style> block and set the style for various controls in the application to make them look nicer. For example, you can add some padding, change the font, change the color...etc.
- Users should be able to choose from a list of popular delivery locations.
- Users should be able to see the delivery location input field is automatically populated with the name of the location they select from the list.
- Watch the tutorial video Binding data between controls (5:48).
- Add a ComboBox to the form with at least two locations (AVW and CSIC).
- Bind the text property of the TextInput control to the text property of the ComboBox control.
Handling user events
- Users should be able to specify they are only interested in a pickup order.
- Users should not be distracted by the input controls related to the delivery location.
- Watch the video Handling user events (6:22).
- Add a CheckBox control for users to specify this order is for pickup only.
- Add a Box container to group all the components related to the delivery location.
- Assign an event handler function to the click event of the CheckBox control.
- Add the handler function in ActionScript in the <mx:Script> block.
- In the handler function, manipulate the visible property to show or hide the box container depending on the value of the CheckBox control. Manipulate the height property to shrink the box when it is hidden. Store the original height of the box in its data property so that you can restore its height when it is shown again. You will need to coerce the data to int type using (int), which is similar to Java typecasting.
Part 2: Menu (20 points)
- Users should be able to read the menu of a restaurant.
- Users should be able to see the name and price of each item on the menu.
- Watch the video Retrieving data via HTTPService (8:26).
- Add a Panel container with the title 'menu'.
- Add a DataGrid control.
- Add a HTTPService component and name it as menuService to retrieve menu information from an XML file at the url http://cmsc434.appspot.com/McDonald.xml.
- Add an initialization function called init() and set it to handle the creationComplete event of the main Application component. In this function, call the send() method of menuService to retrieve the XML file. This ensures the menu data is being retrieved when the application is initialized.
- Add a handler function to handle the result event of menuService to process the retrieved information.
- Implement the handler function in the <mx:Script> block. In the function, bind the retrieval result (accessible via event.result.menuItems.menuItem) to the DataGrid.
- Users should not need to see the internal system data such as the ID of each food item.
- Watch the tutorial video Displaying data in the DataGrid (6:35).
- Add two DataGridColumn components to the DataGrid.
- Customize the way each data field is displayed by setting the headerText and dataField property to appropriate values.
Custom MXML components
- Users want to see multiple copies of the same menu (at least for the purpose of this homework).
- Watch the video Creating custom MXML components (8:42).
- Create a new MXML component file menu.mxml based on a Panel container.
- Move the DataGrid component from stamp.mxml to menu.mxml.
- Move the HTTPService component to menu.mxml.
- Move the result event handler to the <mx:Script> block in menu.mxml.
- Move the action script statements responsible for retrieving menu information to menu.mxml.
- In stamp.mxml, add three instances of the custom menu component (i.e., <comp:menu />) to see if the component is implemented correctly.
Passing data into custom MXML components
- Users want to see menus of three different restaurants: McDonald, Sbarro, Panda.
- The menu for each restaurant is stored at:
- In menu.mxml, add a public variable restaurantName and make this variable Bindable.
- In stamp.mxml, set the restaurantName attribute of each menu component to a different restaurant name (passing data into the component).
- In menu.mxml, bind the title attribute of the Panel container to restaurantName.
- Also, change the url attribute of the HTTPService component to a dynamic string based on restaurantName. This dynamic string should form the URL to the corresponding XML file.
Value Object Classes
- Users want to see the name of restaurant displayed in each row.
- Watch the video Implementing value object classes (13:46)
- Create a new value object class called MenuItem. This class should have three public and bindable attributes: name, price, and restaurantName.
- In menu.mxml, create an ArrayCollection called menuItems to store a list of MenuItem objects converted from XML data. For each instance of MenuItem, set its restaurantName to the restaurantName of the menu component (passed in by the main application).
- Also in menu.mxml, make sure the DataGrid component displays the content of menuItems. Instead of two columns, there should be three columns.
Part 3: Item details (30 points)
Passing data out of custom MXML components
- Users want to see the details of an item in the menu when they click on the item.
- When an item in the list is clicked, we want to generate a custom event to notify another component and pass along the information which menu item is clicked so that the other component can display it.
- Watch the videos Creating custom events (5:59) and Creating custom event classes (23:06)
- Create a new event class called MenuItemEvent that can include a MenuItem object. The file should be named MenuItemEvent.as and stored in the events subfolder.
- In stamp.mxml, add a new Panel container for showing details of a MenuItem object. Use a Label to display each property of the object.
- Add a bindable variable selectedMenuItem of type MenuItem and bind it to the labels in the details panel.
- In menu.mxml, declare a custom event in <mx:Metadata> block. Name this event selectedMenuItemEvent of the type events.MenuItemEvent.
- Implement a function to handle the itemClick event of the DataGrid component. This handler function should create and dispatch a custom event named selectedMenuItemEvent of the type MenuItemEvent that contains the selected MenuItem object.
- In stmp.mxml, write a function to handle the custom selectedMenuItemEvent dispatched by the menu component. This function should assign the MenuItem object selected by the user to the variable selectedMenuItem, so that the details panel can display the object's content.
- Users want to see an image of each food item in the details view.
- The format of the image url for each food item is: http: //cmsc434.appspot.com/[name].png (case-sensitive).
- In stamp.mxml, add an Image component to display the image of food item. Set the max and min height and width attributes so that the images are displayed properly.
- Users want to see a thumbnail image of each food item in the menu view.
- Watch the video Customizing item renderers (6:42)
- Explore the properties of DataGrid and its superclasses in the online documentation. Find the property for hiding the titles.
- Create a new component file MenuItemRenderer.mxml to act as the renderer for MenuItem objects.
- In menu.mxml, modify the DataGrid to use the render.
Part 4: Cart (30 points)
Creating custom MXML components revisited
- Users want to see multiple images of the same food for pleasure.
- Create a new component file called menuItemDetails.mxml for the details panel.
- Move all the necessary code from stamp.mxml to the component file.
- Create several instances of the component to test if the component is properly coded.
Creating UI controls dynamically
- Users want to order multiple items in one order.
- Users should be able to see a shopping cart. When they click on an item in the menu, the name of the item should be added to the cart.
- Add a shopping cart component based on Panel. Save the file as cart.mxml.
- In cart.mxml, create a public function called addMenuItem that takes a MenuItem object as an input argument. In this function, create a new Label control using the new operator. Set the text attribute of this label to the name of MenuItem object. Call the addChild method on the this pointer (that points to the component itself) to add the newly created Label to the Panel.
- In stamp.mxml, add a cart component in the proper position and give it an ID cart.
- In the handler function for the selectItemEvent, call cart.addMenuItem function with the selected MenuItem object as the input argument to add this item to the cart.
Creating compound UI controls dynamically
- Users want to see more information about each item in the cart including the price and restaurant name.
- In cart.mxml, modify the function addMenuItem. Instead of using a single Label for each item, use a HBox that groups three Label controls (one for each data field).
Deleting UI controls dynamically
- Users want to remove items from the cart.
- In cart.mxml, modify the addMenuItem function by adding a Button that reads 'remove'.
- Call the addEventListener method of the Button to listen for the MouseEvent.CLICK and specify an event handler function.
- Implement the handler function. A click event should originate from a particular Button control. Use the parent attribute to access the HBox control containing that button. Call the removeChild method of the this attribute to remove the particular HBox control.
Communicating between custom MXML components
- Users want to add the item to the cart after reviewing the item in the details view.
- Users want to do so by clicking an Add button.
- In 'menuItemDetails.mxml', make the details view component to be able to generate a custom event of the type MenuItemEvent to tell the cart component which item to add. Name this custom event addMenuItemEvent. Do this in the <mx:Metadata block.
- Add a Button control with the label Add and write a function to handle its click event. This handler should dispatch a custom event addMenuItemEvent that contains the selected MenuItem object.
- In 'stamp.mxml', write a function to handle the addMenuItemEvent that is now dispatched by the details component. This handler should call the addMenuItem public method of the cart component to add the selected MenuItem object indicated in the custom event.
- Remember to modify the selectMenuItemEvent function so that it no longer add items to thte cart when users click on the menu.
Part 5: Extra Credits (max: 15 points)
Add up to three non-trivial and meaningful extensions to the interface to earn extra credits!!
- Order form (20 points)
- Layout: two TextInput and Label components, and a Button (1 pt for each)
- Style: font and color changes (1 pt for each)
- Data binding: ComboBox including AVW and CSIC (1 pt for each), binding with TextInput (3 pts)
- Handling user events: CheckBox and Box controls (1 pt for each), click event changes visible/height attributes (5 pts)
- Menu (20 points)
- HTTPService: menu Panel, DataGrid control, HTTPService retrieves information (1 pt for each)
- DataGrid: DataGridColumn sets headerText and dataField properties (2 pts)
- Custom MXML components: three instances of the custom menu component (1 pt for each)
- Passing data into custom MXML components: restaurantName title and content for three different dynamic restaurants (2 pts for each)
- Value Object Classes: DataGrid component displays the content of MenuItem with name, price, and restaurantName attributes (2 pts for each)
- Item details (30 points)
- Passing data out of custom MXML components: details Panel (2 pts), three Label components display MenuItem properties (1 pt for each), itemClick event of DataGrid triggers selectedMenuItemEvent custom event whose handler function binds to selectedMenuItem of details panel (15 pts)
- Displaying images: Image component to display food item (2 pts)
- Item renderer: DataGrid uses MenuItemRenderer to display a thumbnail image of each food item in the menu view (5 pts), the headers are hidden (3 pts)
- Cart (30 points)
- Creating UI controls dynamically: cart Panel (1 pt)
- Creating compound UI controls dynamically: HBox groups three Label controls (1 pt)
- Deleting UI controls dynamically: remove Button (1 pt), addEventListener listens MouseEvent.CLICK events (2 pts), removeChild method removes the particular HBox control (3 pts)
- Communicating between custom MXML components: Add to cart Button with a click event handler (5 pts), addMenuItemEvent custom event of type MenuItemEvent calls the addMenuItem of cart to add the selected MenuItem object (15 pts), selectMenuItemEvent function no longer adds items to the cart (2 pts)
- Extra Credits (max: 15 points)
- non-trivial and meaningful extensions (5 pts each)
As in the previous implementation homework, add a row to the table in last name alphabetic order. After completing each part, export your application and upload the .swf file to the course wiki under the corresponding column.
|Name||Part 1||Part 2||Part 3||Part 4||Part 5|
A - H
I - P
|Name||Part 1||Part 2||Part 3||Part 4||Part 5|
|Kelly McDuffie||Media:Mcduffie_l2_1.swf||Media:McDuffie-I2-2.swf||part 3||Media:mcduffie-4.swf||Media:swf-I2-5.swf
|David Moore||Part 1||Part 2||Part 3||Part 4|
|Leyla Norooz||Part 1||Part 2||Part 3||Media:swf-I2-4.swf||Media:swf-I2-5.swf