Web page rendering

A web page rendered by XirtCMS can be built up using several components allowing flexibility in both content and the final look & feel of the page. These components — being templates, modules and widgets — are highly configurable and interact to create the final output. In this article, the three components and their relations are explained.

Web page components

For any web page, the look & feel is determined by the template used: it contains the main (X)HTML structure of the web page and can include additional resources like CSS stylesheets, images and scripts to enrich the page. Furthermore, a template should contain a placeholder for a module and can contain one or more placeholders (also known as "positions") for widgets.

The main content of each web page is determined by the module targeted in request. This module can be used to display a large variety of content like an article, an overview of items within a category or a sitemap. Developers can create their own modules providing them the flexibility to display any content required.

Finally, the web page can be enriched using one or more widgets: small snippets of code that are loaded in predetermined template positions and that can also differ per page. They can be directly related to the module loaded (and use its properties / data), but this is not mandatory.

Component interaction

It is important to have a good understanding on how the various components interact during web page creation in order to know their possibilities and limitations. The visualization below gives a high level overview of how interaction takes place within a simple application. On top of the depicted relationships, it is also possible for widgets to retrieve properties and/or data of the loaded module which adds more flexibility to the page rendering. As this relationship is not part of the default flow of the application (it is actually determined within the code of the widget itself), it has not been included here.

Visualization of the page rendering process within XirtCMS

  1. As shown in the application workflow, the controller of the targeted module is the first component to be initialized. Using models, views and other resources, it will generate the main output of the page which is saved temporary within the application so it can be included within the template.
  2. Once the main content has been generated, the application will determine which template is to be loaded for the requested page. This chosen template will be loaded and parsed to check for any placeholders where the output is expected to be enriched. The placeholder for the main content will then be replaced with the earlier saved content of the module, while placeholders for widgets require some additional logic to determine their final content.
  3. If a placeholder is found in the template for widgets, then the system will check whether any widgets have been configured for the found position / module combination. If a widget is found matching the required criteria, then the widgets code will be loaded and parsed using the specific settings configured for this instance. This allows for great flexbility throughout an application as the same widget code can generate different outputs depending on the page and module loaded. The output of the widget is immediatly included in the template at the placeholders position finalizing the web page for output to the client.

Once the module, template and all required widgets have been loaded, the system will flush the output buffer as a response to the request. The generated code is send back after which the requesting browser can render it for usage:

Example visualization of a rendered web page using XirtCMS

Responses (0)

There are no responses to display. Be the first to react!
XirtCMS - Copyright © 2018. All rights reserved. | GNU General Public License v3.0