Assignment 4: Web services, visual design, and dynamic layout

YouTube Video Gallery

Due: Tuesday, April 4 at 5:00 PM
This is a firm deadline, no extensions!

Starter code is available from this link.


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 Goals



  1. When first launched, the application launches an empty window with a toolbar at the top.
  2. 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 Serializable interface.
    • 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).
  3. Video result: For every search result, you should display, at the minimum, a 5-star rating control, a thumbnail image corresponding to the video, video title, and published date. For the published date, you should display the date relative to the current date (e.g. "1 year, 4 days ago", not "Mar 19, 2016"). You may choose to display additional information as it suits your layout.
  4. Video item
  5. Clicking on the video thumbnail (as seen in the mockup below) should open the default web browser and go to the youtube video page (format<VIDEO_ID>)
  6. Video rating: a custom control that allows users to specify a rating a video (indicated by the number of stars, ranging from 1 to 5). Users can rate each video by selecting the number of stars to assign to that video.
  7. Support switching between grid and list layout formats which the user can toggle. See the next section for more details.

Supported Layouts

  1. 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).
  2. A toggle button to switch between the two layouts: when pressed, a button should appear and remain depressed until the other button is pressed.
  3. 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).
  4. 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:
  5. 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
  6. Grid Layout
  7. 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
  8. List layout

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:

Important: You must first create an API key to be used by your application. Please use the following guide to create an API key:

The starter code contains the following:

This is an example model class that uses the YouTube API to retrieve information.

Technical Requirements

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


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 Makefile and 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.