In the previous chapter, we briefly saw how to construct HTML templates by interleaving Scala snippets in an HTML file. We saw that templates are compiled to Scala functions, and we learned how to call these functions from the controllers.
In single-page applications, the majority of the logic governing what is actually displayed in the browser resides in the client-side JavaScript, not in the server. The pages served by the server contain the bare-bones HTML framework.
Let's create the HTML layout for our application. We will save this in views/index.scala.html. The template will just contain the layout for the application, but will not contain any information about any user's repositories. To fetch that information, the application will have to query the API developed in the previous chapter. The template does not take any parameters, since all the dynamic HTML generation will happen client-side.
We use the Bootstrap grid layout to control the HTML layout. If you are not familiar with Bootstrap layouts, consult the documentation at http://getbootstrap.com/css/#grid-example-basic.
// app/views/index.scala.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Github User display</title>
<link rel="stylesheet" media="screen"
href="@routes.Assets.versioned("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png"
href="@routes.Assets.versioned("images/favicon.png")">
<link rel="stylesheet" media="screen"
[email protected]("lib/nvd3/nv.d3.css") >
<link rel="stylesheet" media="screen"
[email protected](
"lib/bootstrap/css/bootstrap.css")>
</head>
<body>
<div class="container">
<!-- Title row -->
<div class="row">
<h1>Github user search</h1>
</div>
<!-- User search row -->
<div class="row">
<label>Github user: </label>
<input type="text" id="user-selection">
<span id="searching-span"></span> <hr />
</div>
<!-- Results row -->
<div id="response" class="row"></div>
</div>
</body>
</html>In the HTML head, we link the CSS stylesheets that we need for the application. Instead of specifying the path explicitly, we use the @routes.Assets.versioned(...) function. This resolves to a URI corresponding to the location where the assets are stored post-compilation. The argument passed to the function should be the path from target/web/public/main to the asset you need.
We want to serve the compiled version of this view when the user accesses the route / on our server. We therefore need to add this route to conf/routes:
# conf/routes GET / controllers.Application.index
The route is served by the index function in the Application controller. All this controller needs to do is serve the index view:
// app/controllers/Application.scala
package controllers
import play.api._
import play.api.mvc._
class Application extends Controller {
def index = Action {
Ok(views.html.index())
}
}Start the Play framework by running activator run in the root directory of the application and point your web browser to 127.0.0.1:9000/. You should see the framework for our web application. Of course, the application does not do anything yet, since we have not written any of the JavaScript logic yet.
