Twirl Flow
for
Twirl templates are located in the app/views folder and typically have the .scala.html extension. Let's create a simple template that demonstrates the use of variables, loops, and conditionals.
- Create a new file called
list.scala.htmlin theapp/viewsdirectory. - Add the following content to
list.scala.html:
@(items: List[String], title: String)
<!DOCTYPE html>
<html>
<head>
<title>@title</title>
</head>
<body>
<h1>@title</h1>
@if(items.isEmpty) {
<p>No items to display.</p>
} else {
<ul>
@for(item <- items) {
<li>@item</li>
}
</ul>
}
</body>
</html>
This template accepts a list of strings (items) and a title (title), displaying each item in a list. It also demonstrates how to use conditionals to display a message if the list is empty.
Creating a Controller
Now, let's create a controller that uses our template to render a page.
- Create a new controller file named
ListController.scalain theapp/controllersdirectory. - Add the following Scala code to the controller:
package controllers
import play.api.mvc._
class ListController @Inject()(cc: ControllerComponents) extends AbstractController(cc) {
def showList = Action {
val fruits = List("Apple", "Banana", "Cherry")
Ok(views.html.list(fruits, "Fruit List"))
}
}
This controller defines an action called showList that creates a list of fruits and passes it to the list template, along with a title.
Defining Routes
To make the showList action accessible via a web browser, you need to define a route in the conf/routes file.
- Open the
conf/routesfile. - Add the following line to define a route for your action:
GET /list controllers.ListController.showList
This route maps GET requests to /list to the showList action in the ListController.
if
Imagine you have a web application where you need to display a welcome message to logged-in users and a different message to guests. You can use an if statement in a Twirl template to achieve this.
First, create a new Twirl template in the app/views directory of your Play application. Let's name it welcome.scala.html. In this template, you'll check whether the user is logged in by evaluating a boolean parameter isLoggedIn.
@(isLoggedIn: Boolean)
<!DOCTYPE html>
<html>
<head>
<title>Welcome Page</title>
</head>
<body>
@if(isLoggedIn) {
<h1>Welcome back, user!</h1>
} else {
<h1>Welcome, guest!</h1>
<p>Please log in to enjoy our services.</p>
}
</body>
</html>
In this example, the @if(isLoggedIn) statement checks if isLoggedIn is true. If it is, the template renders a welcome back message for the user. If isLoggedIn is false, it displays a welcome message for guests and prompts them to log in.
if-else
You can also use if-else statements to handle multiple conditions. For example, you might want to display different messages based on the user's role:
@(userRole: String)
<!DOCTYPE html>
<html>
<head>
<title>Role-Based Message</title>
</head>
<body>
@if(userRole == "admin") {
<h1>Welcome, Admin!</h1>
} else if(userRole == "member") {
<h1>Welcome, Member!</h1>
} else {
<h1>Welcome, Guest!</h1>
}
</body>
</html>
In this template, userRole is checked to determine the user's role. Based on the role, a corresponding message is displayed. This example shows how you can use else if to add more conditions to your logic.
Integrating with Play Controllers
To render the template with dynamic data, you would pass the necessary information (e.g., isLoggedIn or userRole) from your Play controller when returning the template as a response. Here's an example controller method that renders the first template:
def welcomePage = Action {
val userIsLoggedIn = checkIfUserIsLoggedIn() // Assume this is a method that checks the user's login status
Ok(views.html.welcome(userIsLoggedIn))
}