Book Image

Play Framework Cookbook - Second Edition

By : Alexander Reelsen, Giancarlo Inductivo
Book Image

Play Framework Cookbook - Second Edition

By: Alexander Reelsen, Giancarlo Inductivo

Overview of this book

<p>As web and mobile systems become more sophisticated, anchoring systems in a mature, solid framework has become increasingly important. Play 2 provides developers with the necessary tools to build robust web applications.</p> <p>This book is a compilation of useful recipes aimed at helping developers discover the power of Play 2. The introductory section serves as a primer to Play Framework, wherein all the fundamentals of the framework are covered extensively. It then explains the usage of controllers and how modules can be leveraged for optimal performance. Next, the book walks you through creating and using APIs, followed by extensive real-world applications. Finally, you will learn to manage applications post production.</p>
Table of Contents (15 chapters)
Play Framework Cookbook Second Edition
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
Index

Using View layouts and Includes


For this recipe, we will create a main layout View template that will include a defined header and footer view. This will allow our View template to inherit a consistent look and feel by including this main View template and manage all UI changes in a single file. Our Products view will utilize the main layout view in this example.

How to do it...

For Java, we need to take the following steps:

  1. Run the foo_java application with Hot-Reloading enabled.

  2. Create the main layout view file mainLayout.scala.html in foo_java/app/views/common

  3. Add the contents of the main layout view file:

      @(title: String)(content: Html)
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <title>@title</title>
        </head>
        <body>
          <header>@header()</header>
          <section class="content">@content</section>
          <footer>@footer()</footer>
        </body>
      </html>
  4. Create the header view file header.scala.html in foo_java/app/views/common and add the following code:

      <div>
        <h1>Acme Products Inc</h1>
      </div>
  5. Create the footer view file footer.scala.html in foo_java/app/views/common and add the following code:

      <div>
        Copyright 2014
      </div>
  6. Edit the products view file foo_java/app/views/products.scala.html to use the main layout View template by replacing all the file contents with the following code:

      @(products: Collection[String])
    
      @import tags._
      @import common._
    
      @mainLayout(title = "Acme Products") {
        @productsIterator(products)
      }
  7. Reload the updated products page using a web browser:

    http://localhost:9000/products
    

For Scala, we need to take the following steps:

  1. Run the foo_scala application with Hot-Reloading enabled.

  2. Create the main layout view file mainLayout.scala.html in foo_scala/app/views/common

  3. Add the contents of the main layout view file:

      @(title: String)(content: Html)
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <title>@title</title>
        </head>
        <body>
          <header>@header()</header>
          <section class="content">@content</section>
          <footer>@footer()</footer>
        </body>
      </html>
  4. Create the header view file header.scala.html in foo_scala/app/views/common and add the following code:

      <div>
        <h1>Acme Products Inc</h1>
      </div>
  5. Create the footer view file footer.scala.html in foo_scala/app/views/common and add the following code:

      <div>
        Copyright 2014
      </div>
  6. Edit the products view file foo_scala/app/views/products.scala.html to use the main layout view template by replacing all the file contents with following code:

      @(products: Seq[String])
    
      @import tags._
      @import common._
    
      @mainLayout(title = "Acme Products") {
        @productsIterator(products)
      }
  7. Reload the updated products page using a web browser:

    http://localhost:9000/products
    

How it works...

In this recipe, we created a main layout view template that can be reused throughout the Play application. A common layout view removes the need to duplicate the view logic in related views and makes it a lot easier to manage parent views and child views.