To create an interactive application that uses the YouTube API to search and display videos in grid or list format. Users can then rate videos and filter them based on the rating, and save the results.
- Learning visual design and dynamic layout,
- Creating custom controls/widgets, and
- Learn to work with real-world web APIs to implement interactive, responsive applications.
- When first launched, the application launches an empty window with a toolbar at the top.
- The application should show a toolbar that contains: a toggle button to switch between grid and list view, a search field, a search button, a load/save button, and a filter widget that filters based on rating.
- View toggle: Clicking the grid/list toggle buttons should switch the application view accordingly, and update the status of both buttons in the right manner. See the 'Layouts' section for a mockup of both views.
- Search: Entering text in the search field and clicking the search button should make a network request to search YouTube for that query and show the results in either the grid or the list view as specified. Limit your search to 25 results. Your application should stay responsive while fetching data; to support this you need to fetch data asynchronously from the web service.
Load/save button: The user should be able to save and load the search results to/from a file, including the search-term itself, resulting matches and the rating for each file. Clicking on the buttons should invoke a file chooser dialog. When saving, you should prompt the user for a filename, and save the results to a file with a custom file extension. Choosing the load a file should prompt the user to load an existing save-file matching your file extension, and replace the contents of the grid or list with the previous saved results including the search term, list of videos and rating for each video. Hint: you may wish to use the
- Filter widget: For each video result, users should be able to (locally) rate each video from 1 to 5 stars. A filter widget on the toolbar allows the user to filter the display to just show videos that have a minimum rating (e.g. clicking the 3-star search filter will show images with 3, 4, or 5 stars). You must provide a mechanism to clear the rating for a specific photo, and a method to clear the display filter (i.e. return to showing all-videos from last search result).
- Users can view the video thumbnails in two modes -- grid layout (which arranges the thumbnails in a grid format) or list layout (which arranges the thumbnails one after another, along with the metadata for each video).
- A toggle button to switch between the two layouts: when pressed, a button should appear and remain depressed until the other button is pressed.
- When the window is resized, the number of columns should increase or decrease to fill the space. You must support resizing from a single column up to at least three columns in width (you may expand to handle more columns at your discretion - we just need to see that you can handle a range of columns).
- Your application should adjust its contents based on the size of the window. More specifically, you should use Layout Managers to ensure that the number of columns shrinks or grows based on the available space. This behaviour is different based on the layout selected:
- Grid layout: The grid layout should adjust based on the size of the screen, so that columns wrap as needed. Metadata should be displayed below the image, regardless of the number of columns being displayed In no case, should a horizontal scrollbar appear
- List layout: The list layout can remain unchanged, since everything is already in a column. Just make sure that you can't resize the window smaller than the width of the column. In no case, should a horizontal scrollbar appear
Setup & Starter Code
For this assignment, you should be focusing and allocating a majority of the time in designing and presenting the visual aspects of the application, not mastering a specific web API (in this case, the YouTube API). Therefore, you are free to refer to the starter code for setting up communication with the YouTube API.
Additional guides and tutorials can be found here: https://developers.google.com/youtube/v3/code_samples/java#search_by_keyword
Important: You must first create an API key to be used by your application. Please use the following guide to create an API key: https://developers.google.com/youtube/registering_an_application#create_project
The starter code contains the following:ModelYouTube.java
This is an example model class that uses the YouTube API to retrieve information.
ModelYouTube(String apiKey)initialize the model with an API key.
void searchVideos(String query)example method to search for videos matching the query.
The application must be built in Java SE 8 (8u101 or later). You may implement it on Windows, macOS or Linux. You may use any classes included in the Java SDK, and the provided sample code. You should not use any other external classes.
Submit your assignment to your personal repository, under
a4/ directory at git.uwaterloo.ca:
- All files required to build and run your project
- A Makefile that will build, then execute, your project by typing only
make runfrom the command line
- A 'readme.txt' file that documents your application, icluding the platform you used for development and testing and any extensions or improvements that you made to the application
Late assignments will not be accepted. Markers will test your application by building and running your code from the Makefile. Your submission will be assessed as follows:
- Deliverables: Appropriate
README.txt, code compiles and runs.
- Application displays the required interface and functionality.
- Search and load video thumbnails from the YouTube thumbnail along with its metadata.
- The application fetches data asynchronously and stays responsive while searching.
- Rate videos, filter based on ranking.
- Serialization (save and load) of the list of videos and its ratings.
- MVC architecture properly realized.
- Grid and List layouts supported.
- Resizing and scrolling handled dynamically based on layout.
- 1.1. Mar 15, 2017. Initial version.
- 1.2. Mar 19, 2017. Added requirement to fetch data asynchronously.
- 1.3. Mar 22, 2017. Clarified how you should you should save/load search results.
- 1.4. Mar 23, 2017. Clarified that the publish date should be relative to the current date. Clarified how columns change based on width.