Skip to content

Respond in HTML

When the (web) server receives browser's request, it must send down its response in a language that the browser understands, Hyper Text Markup Language, or HTML.

HTML

If you're totally new to web development world, HTML language might be new to you as well. You will find a wealth of resources at Mozilla's MDN Web Docs. Check out their page on HTML: Hypertext Markup Language.

Here is the anatomy of an HTML document (simplified!):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Title of the page!</title>
  </head>
  <body>
    <p>My cat is <strong>very</strong> grumpy.</p>
  </body>
</html>

HTML is verbose; it is a lot to type out (in a Java source code) to send down data to the client. So, are we just gonna have to concatenate a bunch of strings in our method? That would work, but it sure would be hard to maintain all those plus signs and new lines. There is a way around this, and a way to make very nice, maintainable design code. It's called templating.

Handlebars

Spark allows you to plug in several different templating languages. We are going to use one called handlebars.1 The really nice thing about handlebars is that you can use the same templating language in several programming languages including Java and JavaScript.

To use handlebars in Spark, you need to add the following to the dependencies clause of build.gradle:

1
2
compile 'com.sparkjava:spark-template-mustache:2.7.1'
compile 'com.sparkjava:spark-template-handlebars:2.7.1'

Tip

IntelliJ has a plugin for handlebars-mustache that helps with editing the template files. I highly recommend installing it.

CourseReVU Homepage

Make a file index.hbs in resources/templates with the following content:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CourseReVU App</title>
</head>
<body>
    <h1>Welcome to CourseReVU App</h1>
</body>
</html>

The hbs is the extension for handlebars files. The index.hbs will be converted into index.html which is typically used as the homepage for web applications. Note, at the moment, the content of index.hbs is plain HTML and we are not yet using any templating features.

Let's see how Spark collaborates with Handlebars:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
import static spark.Spark.*;

import spark.ModelAndView;
import spark.template.handlebars.HandlebarsTemplateEngine;

public class WebServer {
  public static void main(String[] args) {
    get("/", (req, res) -> {
      return new ModelAndView(null, "index.hbs"); 
    }, new HandlebarsTemplateEngine());
  }
}

After running the WebServer, point your browser to http://localhost:4567/ to see the effect!

  1. Handlebars is based on another templating language called {{ mustache }} (handlebars like a style of mustache; get it?). The latter is named mustache because if you look at a curly brace sideways, they kind of looks like mustaches (and the templating language makes extensive use of curly braces). It may be cute but I don't like it; it makes searching around difficult (Google Handlebars mustache). ↩