-
Notifications
You must be signed in to change notification settings - Fork 16
Dynamic Content
The code described in the previous example shows in the browser the static web page designed in the file home.html.tpl. Now, consider the typical situation where you have to manage dynamic web pages.
In this paragraph, we expose a structure for defining dynamic content by using some static entities designed into the Template. The static structure we are going to present will be later managed by the View for generating dynamic pages.
Pages with dynamic content, have the information contained in the pages that change automatically, generally, the changes are based on the contents of variables, arrays or database.
WebMVC handles the dynamic content of web pages firstly by giving it a static representation in the Template. For this purpose WebMVC use two elementary elements:
- Placeholder
- Block
Then it uses some features provided by the View for transforming the static representation of placeholders and blocks into dynamic content.
A placeholder is rather than a simple string enclosed with braces, which is located somewhere in the template.
For example to define a placeholder named "UserName" located somewhere in the previous templates\home.html.tpl see the code below:
<!DOCTYPE html>
<html>
<head>
<title>Site home page</title>
</head>
<body>
<p>Welcome to the site Home Page</p>
<br />
<p>Welcome {UserName}</p>
</body>
</html>The static output of a template like this is:
<p>Welcome to the site Home Page</p>
<br />
<p>Welcome {UserName}</p>
As you guess from the output we built a static structure that predisposes the showing of a name dinamically.
The role of a placeholder is to statically represent a place inside the HTML page where a value will be dynamically shown at run-time by the View. In other terms, a placeholder, at run-time, is bound to a value.
Note that placeholder doesn't invalidate HTML syntax. It doesn't introduce any new tags or pseudo code. It'is a simple string enclosed in braces.
Important: For naming a placeholder you don't must use space or starting the name with a number.
We will give you some practical examples on the next page about the dynamic handling of placeholders by using the Template, View, and Controller.
A block is a generic HTML text encapsulated inside two special HTML comments. A block, like a placeholder, is also located somewhere in the template. The content of a block can also contain placeholders.
For example to define a block named "Users" located somewhere in a new teplate named templates\user_manager.html.tpl see the code below:
<!DOCTYPE html>
<html>
<head>
<title>Users list</title>
</head>
<body>
<h1>Users list</h1>
<table>
<thead>
<tr>
<th>User</th>
<th>Email</th>
<tr>
</thead>
<tbody>
<!-- BEGIN Users -->
<tr>
<td>{UserName}</td>
<td>{UserEmail}</td>
</tr>
<!-- END Users -->
</tbody>
</table>
</body>
</html>The static output of this template is:
| User | |
|---|---|
| {UserName} | {UserEmail} |
As you guess from the output we built a static structure that predisposes the creation of a user list highlighting, for each user, name and email.
A block has different roles. Statically it just represents a place inside the HTML page where live some text. This text may be characterized by any type of HTML/CSS/JavaScript code, also containing placeholders. At run-time, the View can perform many actions against this static text (doing a different purpose to the text):
- It can dynamically assign values to its placeholders
- It can dynamically repeat N times this static text
- It can dynamically repeat N times this static text by dynamically assigning at each repetition some values to placeholders which it contains
- It can dynamically replace this text with another one
- It can hide this text
Note that block doesn't invalidate HTML syntax. It doesn't introduce any new tags. It is text/HTML code enclosed in HTML comments.
Important: For naming a block you don't must use space or starting the name with a number.
A block can also contain nested block. See the templates\user_skills_manager.html.tpl template below:
<!DOCTYPE html>
<html>
<head>
<title>Users list</title>
</head>
<body>
<h1>Users list</h1>
<table>
<thead>
<tr>
<th>User</th>
<th>Email</th>
<th>Skills</th>
<tr>
</thead>
<tbody>
<!-- BEGIN Users -->
<tr>
<td>{UserName}</td>
<td>{UserEmail}</td>
<td>
<ul>
<!-- BEGIN UserSkills -->
<li>{UserSkillName}</li>
<!-- END UserSkills -->
</ul>
</td>
</tr>
<!-- END Users -->
</tbody>
</table>
</body>
</html>The static output is:
| User | Skills | |
|---|---|---|
| {UserName} | {UserEmail} |
|
By using blocks, placeholders, and the View you will able to implement different types of the dynamism of web pages, such as data tables, numbered and unnumbered lists, options select, divs repetition, content hiding and much more.
We will give you some practical examples on the block page about the dynamic handling of blocks and placeholders.
In the next section, we speak about how View can dynamically assign some values to the static content of placeholder