Homework I1

From Cmsc434_s10
Jump to: navigation, search

Implementation 1 (Due date: 2/1)

Objectives

  • Get familiar with Eclipse Editor and Flex Builder 3
  • Learn the basics of MXML

Instructions

Part 1. Setting up the development environment (10 points)

  1. Install Eclipse 3.4 Ganymede. Choose Eclipse Classic 3.4.2. Do not get the newest Eclipse 3.5 Galileo because Flex Builder 3 currently only supports up to Eclipse 3.4.
  2. Install Adobe Flex Builder 3 Professional Plug-in for Eclipse. On the download page, select "Other" for the survey question regarding the backend technology. While you are waiting for the Builder to be downloaded and installed, you can visit freeaitools to apply for a free education license.
  3. Install Google App Engine SDK for Java. The particular version of the SDK you need to install is Google Plug-in for Eclipse 3.4 (Ganymede). Follow the online instruction. In this assignment you don’t need to do anything with this SDK other than installing it. In later assignments you will learn how to use the SDK to implement web services for the final project.
  4. Insert a new row for yourself (last name alphabetical order) to the submission table in the bottom of the page. Under Part 1, enter the word “done” to indicate you have completed this part.

Part 2: Creating a Flickr RIA using Flex (30 points)

  1. Read Chapter 1 and 3 of the book Getting Started with Flex. The PDF of the book can be downloaded for free. You can also find this book at Safari Books Online through UMD digital library access. You can also search for other books on Flex if you wish.
  2. Follow the steps described in these chapters to create a Flickr RIA.
  3. Customize the RIA by adding a title that reads “Flickr RIA – created by [Your Name]” to the top of the page, using the Label control. The interface should look similar to the screenshot below.
    Part 2
  4. Export the Flex application
    • In Eclipse menu, select Project->Export Release Build
    • In the dialog window, choose the folder location to export. The default is bin-release.
    • Click Finish, a bunch of files will be generated and stored in the chosen folder.
  5. Submit to the course wiki
    • Locate the file FlickrRIA.swf in the export folder you chose earlier.
    • Upload the file to the course wiki.
    • Select a unique destination file name for your file so that it won’t replace others’ submissions (e.g., media:yeh-FlickrRIA-I1-2.swf).
    • Wiki may give warning that the file size is too big. You can ignore the warning and upload anyway.
    • Add a link to the .swf file in the table in your row under part 2.

Part 3: Designing UI using MXML (30 points)

Read Chapter 4 of Getting Started with Flex from page 37 to 49. You will learn to write MXML to define UI containers including Application, Box, Canvas, Form, and Panel. Apply what you learn from the reading to create a simple Flex application that looks like below.

Part 3

This application shows a person’s name and photo as well as a form for editing personal information such as e-mail and age. You can download the example (media:yeh-FlickrRIA-I1-3.swf) and run it in your Web browser. You need to personalize this application with your name and profile photo. When you are done, upload the exported .swf file to the course wiki and add a link to the file in your row under part 3 in the submission table. Note that you need to use <mx:image source="@Embed(...)"/> to include the photo so that the image file can be embedded in the exported Flex application.

Part 4: Adding your own extensions (30 points)

Flex supports a wide variety of UI components. When you switch to the design view, Flex Builder displays in one of the view windows a long list of components you can add to the application. You can read the official documentation to learn more about them. Using your creativity, extend the Flex application you have built in Part 3 by adding at least three new and unique UI components. These additions should be meaningful with respect to the goal of the application (editing person profile). Feel free to add more than three components. You do not need to make the components interactive. You will learn ActionScript to implement interactive UI behaviors in the next homework assignment. To submit, export and upload the .swf file to the course wiki following the similar procedure as before. In addition, write a bullet list of the extensions you have introduced.

Submissions

A - H

Name Part 1 Part 2 Part 3 Part 4
Example Done swf-I1-2 swf-I1-3 swf-I1-4
  1. description of extension
  2. description of extension
  3. description of extension
Javed Ahamed Done media:Javed_FlickrRIA.swf media:Javed_HW1_P3.swf media:Javed_HW1_P4.swf
  1. Added color picker for favorite color
  2. Added progress bar for total experience
  3. Added link button to homepage
Kevin Barrett Done media:Barrett-FlickrRIA.swf media:Barrett-Profile.swf media:Barrett-Profile2.swf
  1. Made email and city fields required
  2. Added slider to change picture size
  3. Added a Bio field to form
Robin Brewer Done media:Brewer-FlickrRIA.swf media:RBrewer-Profile.swf media:RBrewer-Profile-2.swf
  1. Favorite Color Selector
  2. Graduating Senior Radio Button
  3. Current Date Selector
Frank Cannavo Done media:fcannavo-FlickrRIA-I1-2.swf media:fcannavo-ProfileThingy-I1-3.swf media:fcannavo-ProfileThingy2-I1-4.swf
  1. Homepage Hyperlink Button (it works)
  2. Gender RadioButton Group
  3. Description Text Area
Amit Chauhan Done media:Chauhan-Amit-FlickrRIA2.swf media:Chauhan-Amit-Profile.swf media:Chauhan-Amit-CustomProfile.swf
  1. 1) DateField for birthday
  2. 2) List of majors
  3. 3) RadioButton group for emplyoment status
Jason Covey Done media:JCFlickrRIA.swf media:JCProfiler.swf media:JCProfilerCustum.swf
  1. Fav Color : Color Picker
  2. Home Page : Link Button
  3. Fav Game System : Radial Button Group
Ben Cwik Done media:BcwikFlickrRIA.swf media:BcwikProfile.swf media: BcwikExtendedProfile.swf
  1. DateField for birthday
  2. ComboBox for gender
  3. TextInput for favorite instrument
Patrick Dattilio Done media:dattilio-FlickrRIA-I1-2.swf media:dattilio-Profile.swf media:dattilio-Profile-advanced.swf
  1. Student education radio button group
  2. Birthday Calendar datechooser object
  3. Favorite season list
Nathan DeSelms Done media:ndeselmsFlickrRIA.swf media:ndeselms-Profile.swf media:ndeselms-Profile-added.swf
  1. Liberal-Conservative slider
  2. School year radio button group
  3. Favorite word text box
Venkat Dinavahi Done venkat_flickrria.swf venkat_profile.swf venkat_profile_2.swf
  1. Graduation date picker
  2. Bio rich text box
  3. Favorite color because everyone cares about your favorite color
Mike Donovan Done media:Media-miked-FlickrRIA.swf media:434-miked-Profile.swf media:miked-Profile-v2.swf
  1. Profile completeness status bar
  2. Profile color theme picker (background changes)
  3. Facebook like status text field
John Fan Done media:Media-John_Fan_-_FlickrRIA.swf media:John_Fan_Personalinfo.swf media:John_Fan_Personalinfo2.swf
  1. Birthday date selector
  2. Year radio button choice
  3. Favorite hobbies text area
Andrew Ferguson Done media:ferguson-FlickrRIA2.swf media:ferguson_profile_raw.swf media:ferguson_profile_edited.swf
  1. RadioButtonGroup for gender
  2. Combo box / Numeric stepper for birthday
  3. Button for 'finished'
Pedro Ferreira Done media:pedro-FlickrRIA.swf media:pedro-1-1.swf media:pedro-1-2.swf
  1. Radio buttons for years in school
  2. Favorite color color selector
  3. Combo box for sex
David Forsythe Done media:forsythe-FlickrRIA-I1-2.swf media:forsythe-IDMock-I1-3.swf media:forsythe-MockIDMod-I1-3.swf
  1. DateField for birthday
  2. HSlider for interest in HCI
  3. TextArea for bio
Paul Goldin Done media:pgoldin-FlickrRIA.swf media:pgoldin-Profile.swf media:pgoldin-ExtendedProfile.swf
  1. Mood Indicator (slider)
  2. Birthday Selector
  3. Input for favorite quote
Lucas Gonzalez-Fernandez Done media:LucGonFerFlickerRIA.swf media:LucGonFerSampleUI.swf media:LucGonFerImprovedSampleUI.swf
  1. Graduation Date Selector
  2. Slider for GPA
  3. Radio Buttons for Cat/Dog Lover
Jeffrey Gunzelman Done media:Jeff gunzelman flickr RIA.swf media:jgunzelmanPart3.swf media:Part_4_jgunzelman.swf
  1. datefield for birthday
  2. age is calculated automatically
  3. favorite color
  4. Class standing combo box
Mark Heneks Done media:MarkHeneksFlickrRIA.swf media:MarkHeneksProfilePt3.swf media:MarkHeneksProfileV2.swf
  1. DatePicker for Date of Birth, defaulted to Jan 1988
  2. Favorite Color Color Picker
  3. Political Leanings Slider, 0-100 in with ticks every 10
Monzer Hijazi Done media:Monzer Hijazi-FlickrRIA.swf media:Monzer_Hijazi-Part3.swf media:Monzer_Hijazi-Part4.swf
  1. DateField for graduation date
  2. Radiobuttions for gender
  3. Linkbutton navigates to homepage

I - P

Name Part 1 Part 2 Part 3 Part 4
Example Done swf-I1-2 swf-I1-3 swf-I1-4
  1. description of extension
  2. description of extension
  3. description of extension
Joseph Isaac Done mediaJosephIsaac-FlickrRIA-1-2.swf mediaJosephIsaac-FlickrRIA-1-3.swf mediaJosephIsaac-FlickrRIA-1-4.swf
  1. Added Favorite Color ColorPicker
  2. Added Favorite Website LinkButton
  3. Added Bio TextArea
Jeff Jacobs Done media:JeffJacobs-swf-I1-2.swf media:JeffJacobs-swf-I1-3.swf media:JeffJacobs-swf-I1-4.swf
  1. Added ColorPicker for Favorite Color
  2. Added RadioButtonGroup & RadioButton for Class
  3. Added TextArea for Favorite Books
Asmi Joshi Done media:AsmiFlickrRIA.swf Profile With Extensions
  1. Added Birthday Field
  2. Added Text Area for Major
  3. Added Favourite Colour Picker
Kashif Khan Done Flicker RIA Designing UI More Extensions
  1. Added DateChooser for date of graduation, along with tool tip
  2. Added TextArea for comments
  3. Added a Button for submitting data which actually works
Jonathan Lee Done media:lee-FlickrRIA-l1-2.swf media:lee-Profile-l1-3.swf media:lee-CustomProfile-l1-4.swf
  1. Added ColorPicker for favorite color
  2. Added Datafield for date of graduation
  3. Added RadiobuttonGroup for Gender
Ben Li Done Flicker RIA Profile Profile
  1. Added RadioButtonGroup for gender
  2. Added ColorPicker for favorite color
  3. Added DateChooser for birthday
Wen Li Done Flicker RIA Profile Profile Extension
  1. Added ColorPicker for favorite color
  2. Added DateField for birthday
  3. Added RadioButtons for CS major
Justin Lindsey Done Flickr RIA Designing UI More Extensions
  1. Added Date chooser for birthdate
  2. Added Radio button group for gender
  3. Added Color choose for profile color and submit info button
Ran Liu Done Flicker RIA Profile Profile extensions
  1. Added RadioButtonGroup for student type
  2. Added TextArea for comment
  3. Added DateField for birthday
Kelly McDuffie Done Flicker RIA GUI More Extensions
  1. Added Birth date day chooser
  2. Added Eye Color Chooser
  3. Added Submit Button
David Moore Done Flicker RIA Profile Profile Extension
  1. Added Birthday Month and Day Selectors
  2. Added Favorite Sport Radio Buttons
  3. Added Favorite Bands Textbox
Leyla Norooz Done Flickr RIA Designing UI Extras
  1. Added Gender Option
  2. Added Graduation Date Chooser
  3. Added Favorite Color Picker
Kelly O'Neil Done media:oneil-FlickrRIA-2.swf media:oneil-FlickrRIA3-2.swf media:oneil-FlickrRIA4.swf
  1. Added Birthday Option
  2. Added Favorite Color Option
  3. Added Graduation Year Option

Q - Z

Name Part 1 Part 2 Part 3 Part 4
Example Done swf-I1-2 swf-I1-3 swf-I1-4
  1. description of extension
  2. description of extension
  3. description of extension
Brian Ramnarain Done media:Media-ramnarain_FlickrRia.swf media:ramnarain_ProfileApp.swf media:Ramnarain_ProfileApp2.swf
  • Radio Buttons for graduation
  • List for major
  • Hslider for GPA
Corey Richardson Done media:Richardson-FlickrRIA-I 1-2.swf media:UI CR.swf media:UI CR2.swf
  1. Favorite Color
  2. My Birthday Month and Year in a Calendar
  3. Favorite Season Picker
Sureyya Tarkan Done media:tarkan-FlickrRIA-I1-2.swf media:tarkan-FlickrRIA-I1-3.swf media:tarkan-FlickrRIA-I1-4.swf
  1. RadioButtonGroup & RadioButton for Sex
  2. DateChooser for Birth Date
  3. List for Courses
Luis Sanchez Done media:Media-Luis Sanchez FlickrRIA.swf media:LuisProfile.swf media:LuisProfileExtended.swf
  1. Radio Buttons for Sex
  2. Date Chooser for Graduation Date
  3. HSlider for Height
Nidhi Sethi Done media:FlickrRIA_NS_Part3.swf media:UI_NS_fin.swf media:UI_NSnew.swf
  1. colorpicker to change the panel color
  2. Button to upload or change the profile pic
  3. A Webpage link
Anand Shroff Done media:Ashroff-FlickrRIA-I1-2.swf media:Ashroff-profile.swf media:Ashroff-profile2.swf
  1. CheckBox for Status
  2. DateField for Graduation
  3. LinkButton for Homepage
Cody Smith Done media:csmith71-FlickrRIA-I1-2.swf media:csmith71-UI-I1-3.swf media:csmith71-UI-I1-4.swf
  1. LinkButton for Homepage
  2. DateField for Birthday
  3. ColorPicker for Favorite Color
Adam Stephenson Done media:gladst4_FlickrRIA.swf media:gladst4's_personal_info.swf media:gladst4's_personal_info_plus.swf
  1. Slider for current mood
  2. Color selector for favorite color
  3. Date chooser for Birthday
James Tarkenton Done media:jtark_FlickrRIA.swf In progress In progress
  1. In progress
  2. In progress
  3. In progress
David Thomas Done media:Media-dthom-FlickrRIA.swf media:Dthom-Profile.swf media:Dthom-Profile_1_4.swf
  1. Radio Buttons for Gender
  2. Text Area for Bio
  3. DateChooser for Graduation Date
Mekias Yohannes Done media:Mekias-Yohannes-FlickrRIA-I1-2.swf media:Mekias-Profile.swf media:Mekias-Profile2.swf
  1. Radio Buttons (Sex)
  2. Text Area (About me)
  3. Color Picker (Favorite Color)