Dynamic Content

Introduction

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.

Dynamic Content

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.

Understanding Placeholders

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 role of a placeholder is to statically representing 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.

Understanding Blocks

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 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 />
    <table>
       <!-- BEGIN Users -->
       <tr>
            <td>{UserName}</td>
       </tr>
       <!-- END Users -->
    </table>

  </body>
</html>

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 witch 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 example below:

<!DOCTYPE html>
<html>
  <head>
    <title>Site home page</title>
  </head>
  <body>
    <p>Welcome to the site Home Page</p>
    <br />
    <table>
       <!-- BEGIN Users -->
       <tr>
            <td>{UserName}</td>
            <td>
                  <select>
                     <!-- BEGIN UserSkills -->
                     <option>{UserSkillName}</option>
                     <!-- END UserSkills -->
                  </select>
            </td>
       </tr>
       <!-- END Users -->
    </table>
  </body>
</html>

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.