Workshop Lab2 - The Swing GUI client

From Juneday education
Jump to: navigation, search


This workshop is means as a kick-start for the Lab 2 of the Exposing data over HTTP lab 2. We will talk about the code that you should download, how to get started and how to use the examples provided.

It is important that you have seen the videos about Lab 2 and about Swing GUIs before attending this workshop, since it will be assumed that you have a basic understanding of how to write a Swing GUI.

We assume that you have seen the video lectures necessary for the Lab 2 (see the lab 2 page and your course schedule for a list of videos) before taking this workshop.

Topics from various videos needed for understanding the Lab 2 include (but are not limited to):

  • GUI programming with Swing
  • The Lab 2 introductory videos (with Henrik and Rikard in front of a whiteboard)

What the Lab 2 is all about

We'll show you an overview of the files provided for you and what the different components actually do. We'll also explain that the GUI application you are writing in this lab, will not talk to the web API, but rather just create the correct URLs for doing so (which will be done in the last lab, lab 3 - tying it all together).

Files and getting started

We'll download the files for the lab 2 and show you how to unpack them and what's included. We'll run some examples and the GUI and talk a little about the Product class (and how it could be totally different from the Product class in Lab1).

The Swing GUI

We'll start with a walk-through of the GUI program, using this presentation (also as a video channel on Vimeo: Exposing data over http, Lab 2).

A deeper look at the example


This example shows how you can create a correct query string for querying the Servlet Web Api for products according to the user's input in the text fields for minium price, maximum price etc.

The purpose of this example is to give you a working example of code which creates a query string from the user input, and also, for those who like that idea, even create a clickable link which opens your browser and points it to the corresponding query for JSON from the Web Api.

The custom Java API for Lab 2 - Query, Param, ApiAccess

UML class diagram for Lab 2

This part of the workshop will let you investigate the custom API we provided for you with classes for representing a Query (which consists of a list of Param objects), and how we can represent an ApiAccess (which could use a Query for fetching products).

The focus here is to give you an understanding of our design.

The idea behind our design

Our design for the programming API (the Java classes and interfaces used by the Swing client) for Lab 2 is based on the idea of abstraction.

We have provided abstractions for the way the client will communicate with a web api. The main concept is the interface ApiAccess. It defines the following methods:

List<Product> fetch(Query query)

That is, an ApiAccess object (of some class implementing the ApiAccess interface) can "fetch" products, using a "Query". A Query is an abstraction for an encoded request for a specific selection of products according to the Web Api protocol for filtering products.

So what is a Query, then?

A Query is an interface for the abstraction of a request consisting of a list of parameters to send to some API. It defines three methods:

void addParam(Param param)

String toQueryString()

String get(String key)

The first method, addParam(Param p), accepts a Param argument which is an object holding a key-value pair. An example could be a Param object representing the minimum price for our query for products. It could then have the key "min_price" and the value "50.90". The Query holds an internal list of potentially many such Param objects, and can thus represent a full query to the Web API you wrote in Lab 1.

The method toQueryString() is a useful method. It can return a String with a query which works for accessing a Web API like the one you wrote in Lab 1.

The idea is that you will start with an empty query and add parameters to it. When you are done (when you have the full query you want to use for fetching products), you call toQueryString() and get a String which you can use for accessing the Web API over HTTP (e.g. using a browser, or as you will learn in Lab 3 using HTTP from Java). It is this String you shall print to standard out in this lab 2, and verify that it works as a URL query for your good old Web API from Lab 1.

What about the ApiAccess and its fetch(Query) method? In this lab, you will not do the actual fetching of the products from the Web API. We haven't learned yet how to do that. So you will create an implementation of ApiAccess, FakeApiAccess which returns a list of the same products every time, silently ignoring the Query you send as an argument.

In the next lab, lab 3, you will implement a functioning implementation of ApiAccess which really connects to the Web API using the query string, reads the JSON and parses the JSON into an actual List<Product> and updates the GUI.

Questions and answers session

We are sure you have plenty of questions for the lab 2 and here we open up for that.