Lab06 mvc view order page

Goal¶

In this lab you will create a server-side generated web page that will show order information for an order.

A. Return a Static Page¶

First you'll return a static version of the Coffee Order View page to make sure everything is annotated and configured properly.

Create a new controller class for the web pages called CoffeeOrderWebController.

// ?? What annotation do you need on the class here to make this a web controller ??
public class CoffeeOrderWebController {
  // your GET mapping method will go here (see below)
}

Add a method that is mapped to a GET to localhost:8080/coffee-order/{id}:

    // ?? What annotation do you need for this method ??
    public String coffeeOrderView(/* ?? What annotation goes here ?? */ String coffeeOrderId) {
      return "coffee-order-view";
    }

Create a templates directory underneath the /src/main/resources directory.

Create a new HTML file (with the content below) named coffee-order-view.html and put it in the /src/main/resources/templates directory:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
  <meta charset="UTF-8">
  <title>Coffee Order Info</title>
</head>
<body>
<h1>Coffee Order: 99</h1>
<p>Price: 100</p>
</body>
</html>

Try out the static page above by going to localhost:8080/coffee-order/1 to make sure you see the above HTML page.
- If you just see the text coffee-order-view, you probably have the wrong annotation for the web controller class. Check the docs here: http://engineering.pivotal.io/post/must-know-spring-boot-annotations-controllers/

Do not continue until you see the static page.

B. Templatize the Page¶

Instead of returning a static page, you will use Spring MVC to "fill in" parts of the page with information that comes from the coffee order.

"Templatize" the <h1>Coffee Order</h1> and the <p>Price</p> elements so that it displays the information from the coffee order by using the th:text attribute.
- For example, if you wanted to templatize the 99 for the order ID and have it be replaced with the actual ID, you'd surround the 99 with a span tag like this:
  
  <h1>Coffee Order: <span th:text="${coffeeOrder.id}">99</span></h1>
- Do the same for the Price display

In the coffeeOrderView method, add a new parameter, Model model, e.g.:

public String coffeeOrderView(@PathVariable("id") String coffeeOrderId, Model model)

Look up the CoffeeOrder in the CoffeeOrderRepository, convert to an CoffeeOrderResponse instance, and then add it into the Model. This is similar to what you did in the HTTP API-based lab. For example:

// lookup the order in the repository by the ID
// ...
// convert to an coffeeOrderResponse object
// ...
// add the coffeeOrderResponse to the Model for the page view
model.addAttribute("coffeeOrder", coffeeOrderResponse);

Restart and try out the page by going to localhost:8080/coffee-order/1.

C. Replace ID With Name¶

Update the coffee-order-view.html template and replace showing the coffee order's ID with showing its name (e.g., coffeeOrder.name).
Restart the application and try it out at localhost:8080/coffee-order/0 and also localhost:8080/coffee-order/1.

Once you've completed the above steps,
check in with the instructor to review your code.