How are web pages generated in the Play! Framework?

Question

I'm having a hard time wrapping my head around this whole Play! Framework-thing and I could really use your help. At this point every answer I find seems to give me five new questions. I would prefer not to read some lengthy tutorial or documentation. Instead, I would like to dive right in but that seems impossible.

Allright, so I downloaded the activator and created a new application with it. Starting the application I get to the main page with my browser:

localhost:9000

(why we are using port 9000 for HTTP and not 80 is beyond me)

Now I naturally want to understand how this main page is generated so that I can directly tweak that html-template and the content providing Java and get on with my life.

The main page tells me that the conf/routes file is calling the index()-method in app/controllers/Application.java. I open up the file to see the line

return ok(index.render("Your new application is ready."));

On the main page it is explained that this calls the file app/views/index.scala.html for the content. I know nothing about Scala or Groovy but I'll have a look at the file. I do not know what the @-characters and brackets do, but the main page is telling me that the following lines

@main("Welcome to Play") {
    @play20.welcome(message, style = "Java")
}

are responsible for calling yet another file app/views/main.scala.html. This file is finally giving me some HTML, but only the headers. After that there are only the lines

<body>
    @content
</body>

At this point the main page bows and thanks me for my time. The rest is apparently left as an exercise for the reader.

What is this @content doing? Where is it getting its template from? Where is the rest of the almost 200 lines long HTML-source that I am seeing on the main page??

Btw. I am working on a Windows 7 computer and I would like to edit my Java code in Eclipse.

I know nothing about Scala - I think this is the main problem for now. When you learn it a little bit, you could easily recoqnize its syntax within templates and will understand how they work — Odomontois
But if in short - scala templates are compiling to pure scala, like JSP to java, but at compile time. @ element is window from html to scala syntax like <% %> tags — Odomontois
@content is filled with the template var content. This is like php include. It provides template inheritance mecanism. You can change the default port in your application.config file. Play comes with a application server useful when developing. @ content will contain all the .html files you write later. Your main file is basically the Main view template, so you change your content based on page/action you render in the controller preserving the main. Main template may contain the header/footer and sections, including CSS e JS links — Yuri Blanc
@YuriBlanc, I understand that @ content must work as an include, but the content it's including must come from somewhere within the application folder, right? ..or is it evaluated to an URL and taken straight from playframework.com?? — Muuse
It's avaluated from the framework as long as your render different pages from the controller and you extends the child view with the same main view. — Yuri Blanc

Kris Kris · Accepted Answer · 2015-11-27T13:31:50

I think you got pretty far for a first try without reading much of a tutorial. You've got a simple controller and and view going. That's already 2/3 of the MVC pattern. :)

Seriously, I'd recommend the docs on the Play page. They explain the most important stuff in a short way with examples.

And you don't have to understand Scala to do Play - Java is enough. Although Play's templates are written in Twirl, which is Scala based, it's pretty simple to understand without knowing anything about Scala.

(why we are using port 9000 for HTTP and not 80 is beyond me)

It's just convention to use a different port for development - other frameworks use 8080, Play uses 9000.

How are web pages generated in the Play! Framework?

1 Answers