The play framework has its own template engine to generate HTML pages. This engine uses groovy as the expression language. You can directly use the groovy language to create dynamic web pages, but you do not need to learn all about groovy. What you need to know is a very close part of Java. Play stores all template files in the app/views directory, and all pages are instantly parsed upon request.
Next we will create a simple application:
Oschina@oschina.net :~ /Dev/play $/usr/share/play New Views
~ __
~ _ |
~ | '_ \ |/_' | _ |
~ | _/| _ | \____ | \__(_)
~ | _ | | __/
~
~ Play! 1.0.3, http://www.playframework.org
~
~ The new application will be created in/home/wichtounet/dev/play/Views
~ What is the application name? Views
~
~ OK, the application is created.
~ Start it with: Play run views
~ Have fun!
~
Next, check the generated file and go to the app/views directory. We can see the following content:
- Application: Template for storing the main controller program of the application
- Errors: stores error page templates, such as 404 and 500.
- Main.html: homepage Template
Open application/index.html with the following code:
# {Extends 'main.html '/}
# {Set title: 'home '/}
# {Welcome /}
The first line indicates that the template is extended from main.html. Next, the set command of the play framework is used to set the page title. These commands must be disabled, and the last line prints a line of welcome information.
Then let's take a look at the main.html template:
<! Doctype HTML>
<HTML>
<Head>
<Title >#{ get 'title'/} </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<LINK rel = "stylesheet" type = "text/CSS" Media = "screen" href = "@ {'/public/stylesheets/main.css'}">
# {Get 'morestyles '/}
<LINK rel = "shortcut icon" type = "image/PNG" href = "@ {'/public/images/favicon.png'}">
<SCRIPT src = "@ {'/public/javascripts/jquery-1.4.2.min.js'}" type = "text/JavaScript" charset = "UTF-8"> </SCRIPT>
# {Get 'scripts '/}
</Head>
<Body>
# {Dolayout /}
</Body>
</Html>
This template contains some special commands:
- # {Get 'title'/}: gets the title value of the variable. This value is only valid on the template page.
- @ {'/Public/stylesheets/main.css'}: introduces a static resource.
- # {Dolayout/}: insert the content of the sub-template here. In this example, the index.html page mentioned above is expanded from main.html.
How do I pass parameters between templates?
Passing parameters is very important. For example, we read some data in the Controller and pass the data to the view for display. You can use the render method in the play framework for processing. For example:
Package controllers;
Import play. MVC .*;
Public class application extends controller {
Public static void index (){
String Hello = "Hello world from controller! ";
Render (Hello );
}
}
In the index method, a variable named hello is passed to the template. To obtain the value of this variable in the template, you only need $ {Hello:
# {Extends 'main.html '/}
# {Set title: 'home '/}
Hello from the View
<Br/>
$ {Hello}
How is it easy?
Let's look at a more complex class.
Package models;
Public class book {
Private Final String title;
Public book (String title ){
Super ();
This. Title = title;
}
Public String gettitle (){
Return title;
}
}
Then, the following example is passed in the controller:
Public static void index (){
Book = New Book ("Hello play! ");
Render (book );
}
Next, obtain the object in the template.
# {Extends 'main.html '/}
# {Set title: 'home '/}
Hello from the View
<Br/>
I 've a book for you "$ {book. Title }".
The getting method of Javabean is used here, so our Bean must have the gettitle method.
The play framework transcodes all the dynamic content output to prevent cross-site XSS attacks. If you do not want to do so, you can use the raw () method, for example
$ {Book. Title. Raw ()}
But this is not a good habit. It is used only when you confirm the consequences.
The template is annotated as follows:
* {Will not be evaluated by the template engine }*
Array and list
In actual use, lists and arrays are frequently used. Below is an example of passing the list:
Public static void index (){
List <book> books = new arraylist <book> (3 );
Books. Add (New Book ("Hello play! "));
Books. Add (New Book ("Hello template! "));
Books. Add (New Book ("Hello engine! "));
Render (books );
}
The code for using the list object in the template is as follows:
# {Extends 'main.html '/}
# {Set title: 'home '/}
I 've some books for your:
<Ul>
# {List items: books, as: 'book '}
<Li >$ {book. Title} </LI>
# {/List}
</Ul>
Not very complicated :)
Script
If you need to perform more complex operations, we can use scripts in groovy. variables can be defined in the script and other variables can be used directly, for example:
# {Extends 'main.html '/}
# {Set title: 'home '/}
I 've some books for your:
<Ul>
# {List items: books, as: 'book '}
% {
Booktitle = book. Title. touppercase ();
} %
<Li >$ {booktitle} </LI>
# {/List}
</Ul>
You can do a lot of complex things, such as iterations and conditions, but remember, do not make too complex functions in the template, put these business logic in the Controller or models, the simpler the template, the better.
Define tags
The play framework comes with many tags, but you can create some by yourself. To create tags, we must create a subdirectory named tags under the views directory. For example, we create a booklist.html file, stored in the views/tags directory. The booklist.html code is as follows:
<Ul>
# {List items: _ items, as: 'book '}
% {
Booktitle = book. Title. touppercase ();
} %
<Li >$ {booktitle} </LI>
# {/List}
</Ul>
Use '_' to obtain the parameter. In this example, It is _ items.
With this custom tag, we can modify the template above:
# {Extends 'main.html '/}
# {Set title: 'home '/}
I 've some books for your:
# {Booklist items: Books /}
Use parameters to make tags more flexible.
Now we have introduced some basic elements of the play template. For more information about the template of the play framework, see the official documentation.