Flash Project 3

From Cmsc434_f08
Jump to: navigation, search

Flash Project 3: Free items around the corner (part 2)

Due

November 11, 2008 (deadline extended).

Method of submission:

  • Email your .FLA file + any changed .AS files to umd.cs.ta at google's email service (@gmail.com).
  • DO NOT upload your application to the wiki.

Description

In this project you will expand the functionality of Project 2. There, you created a posting interface to allow owners to advertise free items. Here, you will complete the interface, creating a welcome screen and a search interface to search and display results. Results will be displayed in a tabular form as well as on a map. You are encouraged to use your project 2 implementation, but you may rewrite parts or all of it. This project will be graded holistically, so make sure the different parts of the interface are consistent and well integrated.

In the interest of keeping this project manageable, we will make certain simplifying assumptions:

  • You will use an in-memory pre-populated database to store postings. New postings will be added to the existing ones. The source code for this database is linked below.
  • You will not be required to filter search results by location, however you will sort them by proximity.

Requirements

This is a two-person group project. You should develop the design together and integrate your parts into a single cohesive application. Each student should work on a separate part such that their contribution can be clearly evaluated.

In order to have a more realistic team development experience, you shall divide your work in the following manner:

  • Student A
    • Implement/modify the posting and ad preview interface
    • Implement mapping behavior
    • Implement help screens for your parts
    • Implement help tooltips
    • Implement Welcome Screen
  • Student B
    • Implement the search and results display interface
    • Implement database management
    • Implement help screens for your parts
    • Implement feedback submission interface

Technical requirements

  • As in project 2, keep the stage dimensions to 800x600.
  • The welcome screen must include the following:
    • A title
    • The University of Maryland logo
    • Post (Button), which leads to the posting interface
    • Search (Button), which leads to the search interface
    • Exit (Button), which leads to (an otherwise) blank "Thank You" screen
  • The posting interface must include:
    • The posting interface requirements were covered in Project 2
    • Make the Cancel button lead back to the welcome screen
    • Make sure the form is cleared whenever it is reused
    • The preview screen that is shown after submission should have an OK button that leads back to the welcome screen
    • You should add code to save the new post to our in-memory database
  • The search interface must include:
    • Mandatory location information: Address (TextInput, free form)
    • Optional item list (TextInput, a comma separated list of items. Assume valid input. Interpret as logical-AND between items for result filtering purposes. Your search should be case insensitive. If left blank, show all results)
    • Mandatory availability date range: Start date (DateChooser with an associated read-only TextInput), time span (ComboBox, only today/next 3 days/next 5 days/next 7 days). Initialize with today’s date and a range of one day (only items available today).
    • Search (Button)
    • Results table (DataGrid), columns are: Row index (1 through 4), Items description, Full address (Street + City + State + Zip), Availability date and time, (Aerial) distance from search location (in miles)
    • Previous (Button), Next (Button): to see the previous or next 4 results
    • Map (Google Map component): will show markers for the current displayed results. Each marker should show the table row index ([1,4]) to which it relates (set the marker’s label or icon accordingly)
      • The map should be initially centered at (38.986, -76.94255) which is where the UMD campus is. Initialize the zoom level to 14.
      • Enable zooming
    • Double clicking on a table row or a map marker will open the full posting (you may reuse the preview dialog from Project 2)
    • Return to welcome screen (Button)
  • The program must include online help (embedded in your application) and a user feedback form:
    • Create an online help that explains the key parts of your interface. Add a help button to each of your screens and make sure it causes the relevant part of the online help to display.
    • Create some tooltips for some key fields. See this tooltip tutorial (you will need to migrate the code to ActionScript 3).
    • Create a feedback button on the welcome screen that leads to a feedback form. On that form, submitting feedback would lead to a "Thank You!" screen which will navigate back to the Welcome screen after a 5 seconds delay (be sure to advise the user about this).

Reporting requirements

Submit a short write-up (half a page to a page long in PDF, Word document, or text format) that describes:

  • The members of the group
  • Any comments about the division of labor between the members. Be as specific as you can
  • A short summary of the work process (e.g., student A worked on the map API, this was later integrated with the database management developed by student B, etc.)

Additional Resources

DateChooser

An updated version of the DateChooser component is now available. The new version creates the calendar dynamically and should make it easier to have multiple calendar instances at once. The calendar has been made into a class, so the syntax is slightly changed. In order to use this component in your own FLA file, copy all the library symbols from the provided FLA into yours and place the ActionScript code in your initialization frame. For example, the following code instantiates two calendar objects:

 import edu.umd.cs.cmsc434.*;
 var calendar1:DateChooser = new DateChooser(this.stage, 50, 0);
 var calendar2:DateChooser = new DateChooser(this.stage, 50, 200);
 trace(calendar1.getSelectedDate()); 

Google Maps

Google provides a map component for Flash that we will use for this project. Google provides excellent resources that will help you learn how to use it on your own. They provide a tutorial on how to integrate it into Flash CS3 and an API Reference. In addition, they provide numerous code samples that demonstrate common tasks. These examples are written in Flex, but you should be able to easily rewrite them in ActionScript.

Some points to consider:

  • You need not obtain a free API key to use for your application, just initialize the key to an empty string. Your map will be stamped with "DEBUG MODE" which is fine.
  • The process of converting an address to a geographical location is called Geocoding. Google provides a useful geocoding example. In case of ambiguity, pick the first result returned from the Geocoder.
  • Use the mapping API to calculate distance between two lat/lng pairs. Note the distance unit used.

Database

We have provided you with a simple in-memory database implementation. In the archive, under the path edu/umd/cs/cmsc434, you will find four ActionScript source files containing the classes that you should use in your implementation. You must read them and understand what they do; they should be self-explanatory. You are allowed to extend them as needed, but you should support the interface they currently provide. Specifically, we should be able to replace the DatabasePopulator with our own and your code must not break.

Points to consider:

  • The Address class implements single address including longitude and latitude information. For each address, you must only geocode the address once when you create the instance. From that point onward, use these cached values.
  • The Advertisement class implements a single ad, the Database class contains our Database.
  • The DatabasePopulator class creates some sample postings to test your interface.

The following code demonstrates how to use these classes:

 import edu.umd.cs.cmsc434.*;
 var db:Database = DatabasePopulator.createDatabase();
 var ads:Array = db.getAllAdvertisments();
 for each (var ad:Advertisment in ads) {
    trace(ad);
 }

The first line imports all classes to the current namespace. As you can see, the directory structure matches the package hierarchy. Flash will search for the source files in the path indicated in Edit -> Preferences -> ActionScript -> ActionScript 3.0 Settings...

So be sure it includes the path to . (dot, i.e., the current directory, where your FLA is stored), and put the ActionScript files under ./edu/umd/cs/cmsc434/

NOTE: You will have to implement filtering and sorting. To simplify matters:

  • For filtering, besides filtering by date, just look for exact matches between keywords and posted items description; If the user searches for "chair", don't try to match it to "chairs". DO ignore case (lower/upper).
  • For sorting, there's no need for your algorithm to be very efficient. For instance, it is OK to create multiple temporary copies of arrays and implement insertion sort in order to rank ads by proximity.

Grading Criteria

The grading for this assignment will be based on:

  1. (60%) Completeness: Does your program fulfill the specifications?
  2. (20%) HCI Principles: Was your interface designed according to HCI principles? Be sure to point it out in your write-up.
  3. (10%) Aesthetics: Was your use of fonts, colors, animation, and so forth aesthetically pleasing (e.g. readable text)?
  4. (10%) Online Help: Did you complete the online help requirements?

Coding style is not graded. Nonetheless, as with any coding project, it is a good practice to maintain good coding style as it to ease program understanding, and reduce the likelihood of errors. Your project-partner will also appreciate this practice when you have to integrate the two parts of your project.