Play! framework. template "include"

T

3

10

I'm planning my website structure as following:

header.scala.html

XXX

footer.scala.html

now, instead of "xxx" there should be a specific page (i.e. "UsersView.scala.html").
what I need is to include (like with well-known languages) the source of the footer and the header into the the middle page's code.

so my questions are:

How do you include a page in another with scala templating?
Do you think it's a good paradigm for Play! framework based website?

Tortoise answered 1/8, 2012 at 16:48 Comment(0)

G

16

A common pattern is to create a template that contains the boilerplate, and takes a parameter of type HTML. Let's say:

main.scala.html

@(content: HTML)

@header
// boilerplate

@content

// more boilerplate
@footer

In fact, you don't really need to separate out header and footer with this approach.

Your UsersView.scala.html then looks like this:

@main {

// all your users page html here.

}

You're wrapping the UsersView with main by passing it in as a parameter.

You can see examples of this in the samples

My usual main template is a little more involved and looks roughly like this:

@(title: String)(headInsert: Html = Html.empty)(content: Html)(implicit user: Option[User] = None)
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>@title</title>
  // bootstrap stuff here
  @headInsert
</head>
<body>
  @menu(user)
  <div id="mainContainer" class="container">  
    @content
  </div>

</body>
</html>

This way a template can pass in a head insert and title, and make a user available, as well as content of course.

Gambrell answered 1/8, 2012 at 17:2 Comment(2)

how do you handle the case where a page needs to add additional script and stylesheet tags to the HEAD? – Fright 10/7, 2013 at 16:23

In the final example, see the headInsert parameter? You can pass in HTML to be inserted into head using that. You'd call it something like: @main("title"){ <script /><link /> }{ ...content... } – Gambrell 10/7, 2013 at 22:52

A

33

Just call another template like a method. If you want to include footer.scala.html:

@footer()

Aimless answered 11/8, 2012 at 4:26 Comment(0)

G

16

A common pattern is to create a template that contains the boilerplate, and takes a parameter of type HTML. Let's say:

main.scala.html

@(content: HTML)

@header
// boilerplate

@content

// more boilerplate
@footer

In fact, you don't really need to separate out header and footer with this approach.

Your UsersView.scala.html then looks like this:

@main {

// all your users page html here.

}

You're wrapping the UsersView with main by passing it in as a parameter.

You can see examples of this in the samples

My usual main template is a little more involved and looks roughly like this:

@(title: String)(headInsert: Html = Html.empty)(content: Html)(implicit user: Option[User] = None)
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>@title</title>
  // bootstrap stuff here
  @headInsert
</head>
<body>
  @menu(user)
  <div id="mainContainer" class="container">  
    @content
  </div>

</body>
</html>

This way a template can pass in a head insert and title, and make a user available, as well as content of course.

Gambrell answered 1/8, 2012 at 17:2 Comment(2)

how do you handle the case where a page needs to add additional script and stylesheet tags to the HEAD? – Fright 10/7, 2013 at 16:23

In the final example, see the headInsert parameter? You can pass in HTML to be inserted into head using that. You'd call it something like: @main("title"){ <script /><link /> }{ ...content... } – Gambrell 10/7, 2013 at 22:52

G

2

Play provide a very convenient way to help implement that!

Layout part from official docs:

First we have a base.html (that's we call in django -_-)

// views/main.scala.html
@(title: String)(content: Html)
<!DOCTYPE html>
<html>
  <head>
    <title>@title</title>
  </head>
  <body>
    <section class="content">@content</section>
  </body>
</html>

How to use the base.html?

@main(title = "Home") {

  <h1>Home page</h1>

}

More information here

Glick answered 29/12, 2015 at 15:39 Comment(0)

Recommended topics

Hot tags