Never confuse education with intelligence, you can have a PhD and still be an idiot.
- Richard Feynman -

Difference between revisions of "Assignment:Exposing data over http lab2 GUI Client"

From Juneday education
Jump to: navigation, search
(Getting started with Part 2 -)
(Getting started with Part 2 -)
Line 158: Line 158:
==Getting started with Part 2 - ==
==Getting started with Part 2 ==
Open the file <code>se/itu/systemet/rest/</code> in an editor and add code to make the method <code>query</code> return a list of (at least) one product. You did this in lab1 so reuse that solution.
Open the file <code>se/itu/systemet/rest/</code> in an editor and add code to make the method <code>query</code> return a list of (at least) one product. You did this in lab1 so reuse that solution.
==Getting started with Part 3 ==
==Knowing when you are done==
==Knowing when you are done==

Revision as of 14:57, 28 December 2017

Prerequisites - introductory workshop etc

Before starting with this assignment, you should attend the workshop for Lab2, the manuscript for which can be found here (TODO).

Lab 2 - Writing the GUI Client

In this second sub-assignment, we'll write a small GUI client in Java/Swing. This sub-assignment has two goals: You should have a graphical Java application which can

  • display a table of product from the Systembolaget product line.
  • allow the user to enter values for filtering the products, and produce the correct API call for such filters

Technologies which are the focus of this sub assignment include:

  • Swing
  • HTTP URLs (with GET query parameters)
  • Using factories and interfaces to hide implementations
  • Using fake data to be able to postpone some technical parts of the application, yet be able to test it
  • Printing URLs to verify that the filters are correctly produced from the user interface

Software introduction

Your client software consists of a few software modules:

  • The graphical user interface
    • Written in Swing
    • Mainly focused around a JTable and a custom JTableModel
  • The domain class Product (represents a Java object for a Product) TODO: products as exposed by JSON, as opposed to product stored in DB)
    • This is the data type for the JTableModel
  • A REST Query API for producing REST queries from the user's filter input TODO: write a human version of this sentence'
    • You'll use a factory to get an ApiAccess object, which let's you access an API TODO: via an interface????
    • You'll implement a FakeApiAccess class which always returns the same set of products, regardless of what Query you send it
  • The REST Query API will also represent a Query (which is what you send to the ApiAccess object)
  • A Query object
    • has a list of parameters
      • A Param (represents a parameter) has a key and a value
    • let's the programmer add parameters to its internal list
    • can return the value from a given key
    • can represent itself as a query string

You'll need to attend (take part (opens up for watching video???)the workshop in order to fully understand the architecture and design of the client. And you need to study some basic stuff, in order to get something out of the workshop.

There's an online API at progund's github.

Swing User interface

The Swing user interface presents the user with a graphical application which lists a set of products in a tabular form. The GUI also presents the user with four input fields:

  • Min price
  • Max price
  • Min alcohol
  • Max alcohol

The GUI will react immediately to input changes in the text fields.

The table has a table model, which is capable of displaying rows with Product objects, and also sorting the rows (when the user clicks a column header).

In this sub-assignment, you will get the data (products) from an ApiAccess object, sending it a Query. As in lab1, however, you will totally fake the fetching of products. You will create a fake ApiAccess class, which will always return the same objects, regardless of what Query it gets as an argument. Added: The idea behind faking data is to reduce the complexity of the system.

The first goal of this sub-assignment is for you to see how you can display a table of products in a Swing GUI. Added: We provide a GUI for you. Your job is to understand the code and find out where you need to add code to populate the table.

TODO: explain table model - the word is used a lot

The second goal of this sub-assignment, is for you to verify that the GUI can create the correct Queries for fetching products from the Web API.

Note, that you will not actually contact the Web API in this sub-assignment, only verify that your GUI creates the correct URLs for doing so.

If the user enters 10 in the Min price text field, and 100 in the Max price text field, this should generate a Query for the Web API which reads:


It is enough if your GUI client prints the queries to standard out, for you to be able to test that they are correct and work.

Note, again, that the products displayed in the GUI will not be filtered according to the user input. That's for the third sub-assignment!

This software module is responsible for:

  • Creating a GUI
  • Displaying products in the GUI
  • Allowing for user input in text fields for filtering products

Domain objects

This module (package) only contains the Product class which represents a product from the Systembolaget API.

The REST Query API

This module lets you create Query objects (consisting of key-value pairs) which you can send to an ApiAccess object.

An ApiAccess object, should, given a Query, return a list of Product objects. Again, in this sub-assignment, how the ApiAccess object actually fetches the products, is totally fake. Always returning some objects, allows you to test that the GUI is capable of displaying objects in a tabular fashion.

Your GUI will, given input from the user via the text fields, build up a Query which you can print to the standard out to see that it actually creates a URL which would work for accessing the Web API (Servlet).

Directory overview

The directory layout is as follows:

some files here

Part 1 - Building and running the GUI application

Here we simply learn how to compile everything and run the gui application.

Part 2 - Finish the FakeApiAccess class

You will add code to the class FakeApiAccess. This class implements the ApiAccess interface, and which returns a list of fake products when its fetch(Query) method is called. Currently the list is empty, which can be seen if you run the GUI.

A big part of this part is to understand the design and architecture of the gui client provided to you by the teachers.

Faking products you already know how to do, from Lab1.

Part 3 - Printing the generated queries and testing them on the Web API

In this part, you will print the queries generated from the GUI to standard out and use that output to test that the generated query strings actually would work and return the correct JSON from the Servlet Web API.

Challenge - Part 4

If you want something challenging, you can add a checkbox to the form, indicating that the user is over 20 years. If the checkbox isn't checked (default), the only products allowed are products with alcohol of 0% (max_alcohol=0). Note that this will not affect the products shown, since they are from a fake API access, and the GUI in this lab number 2 doesn't update the product list.

Here are some hints to get you started:

  • Add a private JCheckBox called ageCheckBox as a component
  • Add a private boolean instance variable called is20

In lab 3, if you want to keep this, you need to change the constructor of the SearchGUI class so that it loads only zero alcohol products when the GUI is created.

Some more hints for the init() method:

  • change the form JPanel to be of size 3,4 (three rows and 4 cols)
  • initialize the ageCheckBox to new JCheckBox("I am over 20")
  • add the checkbox to the form
  • add a new JPanel to the form (an empty panel next to the checkbox)
  • disable the alcohol text fields using the setEnabled() method

Some hints for the addListeners() method

  • add an ItemListener to the checkbox
  • in the itemStateChanged(ItemEvent e) method,
    • set the is20 variable to whether e.getStateChange() is ItemEvent.SELECTED
    • if not is20, then set the alco text fields to the empty string
    • set the alco text fields enabled state to whatever is20 is
    • call newFilter()

Getting started

Getting started with part 1

Setting up your environment

No extra software needed so nothing to do for you.

Build and start your client

In this section we list the steps needed to build the source code. These steps need to be done every time you:

  • want to build (compile) to check that your source code edits were ok
  • run the GUI with the latest changes

To build:

$ ./

To run the GUI:

$ ./

Doing both (the second only of the first is successful):

$ ./ && ./

Note: Expand using link to the right if you can't execute the script.

$ chmod u+x *.sh # make all scripts executable

Getting started with Part 2

Open the file se/itu/systemet/rest/ in an editor and add code to make the method query return a list of (at least) one product. You did this in lab1 so reuse that solution.

Getting started with Part 3

Knowing when you are done

You are done with this task when the following is true:

  • You understand how to
    • build
    • deploy
    • run
    the GUI
  • Can manually query your Web API via HTTP using your generated query strings, and see that the requests works

You shall write in your diary (see workshop for details) what you have written and how that code works. You shall also explain how the overall system works and is intended to work.