logo

Play Hello World Web Tutorial

Implementing Hello World

This tutorial provides the instructions for using sbt (simple build tool) from a command window to build the application, but you can also integrate Play projects with your favorite IDE.

To see how simple it is to work with Play, let's add a customized "Hello World" greeting to this tutorial app. The main steps include:

Create the Hello World page

Follow these instructions to add a new page:

  1. With any text editor, create a file named hello.scala.html and save it in the app/views directory of this tutorial project.
  2. Add the following contents to the file: 
    @main("Hello") {
  <section id="content">
    <div class="wrapper doc">
      <article>
        <h1>Hello World</h1>
      </article>  
      <aside>
        @commonSidebar()
      </aside>
    </div>
  </section>
}

    The Twirl and HTML markup for your new page accomplishes the following:

    • The @ sign tells the template engine to interpret what follows.

      In this case, @main("Hello") calls the main template, main.scala.html and passes it the page title of Hello.

    • The content section contains the Hello World greeting. The main template will insert this into the body of the page.
    • The <aside> section adds the TOC to the right side so that you will be able to navigate back to this page.

Add an action method

Next, add an action method that will render the new page. To keep things simple, you will add the new controller to the existing class. In a real application, you can organize controllers in multiple classes if you wish.

Open the app/controllers/HomeController.scala file and add the following method: 

def hello() = Action { implicit request: Request[AnyContent] =>
  Ok(views.html.hello())
}

This method has no input parameters and simply renders the new hello page.

Define a route

A route tells Play how to handle incoming requests and includes the request path, an HTTP method, and the controller action to invoke. When you add a route to the routes file, Play's routes compiler will automatically generate a router class that calls that action using an instance of that controller. For more information see HTTP Routing. By default, the controller instances are created using dependency injection. See Dependency Injection for more information.

To define a route for the new page:

  1. Open the conf/routes file.
  2. Below the tutorial page route, add the following line:

    GET /hello controllers.HomeController.hello

Test the new page:

  1. If you stopped the application for some reason, restart it with the sbt run command.
  2. Enter the URL http://localhost:9000/hello to view the results of your work. The browser should respond with something like the following:

    Add Request and response screen

Customize the greeting

As the final part of this tutorial, we'll modify the hello page to accept an HTTP request parameter that passes in a name. The steps include a deliberate mistake to demonstrate how Play provides useful feedback.

To customize the Hello World greeting, follow these steps:

  1. In the app/controllers/HomeController.scala file, modify the hello action method to accept a name: String parameter. The modified action should look like the following: 
    def hello(name: String) = Action {
  Ok(views.html.hello())
}
  2. In the conf/routes file, add a (name: String) parameter at the end of the /hello route:

    GET /hello controllers.HomeController.hello(name: String)

  3. In Twirl templates, all variables and their types must be declared. From the app/views/ directory, open the hello.scala.html file and do the following:
    • Insert a new line at the top of the file.
    • On that line, add an @ directive that declares the name parameter and its type: @(name: String).
    • To use the variable on the page, change the text in the <h2> heading from Hello World to <h2>Hello @name!</h2>.

    To test the cusomization:

    1. Open a new browser tab
    2. Enter the following URL and pass in any name as a query parameter to the hello method: http://localhost:9000/hello?name=MyName.

      Play responds with a helpful compilation error that tells you the file and line number causing the problem. The message shows that the render method in the return value requires a typed parameter:

      Error message

  4. To fix the compilation error, modify the hello action method in HomeController so that the it includes the name parameter when rendering the view:

    def hello(name: String) = Action {
  Ok(views.html.hello(name))
}

  5. Save the file and refresh the browser. Play detects the change, automatically recompiles, and reloads the page. The page should display a customized greeting similar to the following:

    Hello Malitha

Summary

Thanks for trying our tutorial. You learned how to use an action method, routes, Twirl template, and input parameter to create a customized Hello World greeting! You experienced how template compilation makes it easier to identify and fix problems and how auto-reloading saves time.

Next steps

To learn more about Play, check out these resources: