Layout

Introduction

The BF sees the layout (HTML template) as a completly independent entity of your application. It means you don’t need to include any PHP code, marks or macros within your HTML files to render your content. This is a great advantaged, since will be easier to maintain and change your layouts. For example, to make a new template available to your application, you just need to copy any HTML template structure and place in the templates folder, including all HTML, CSS and images, for example:

public/templates/default/css/style.css
public/templates/default/images/logo.png
public/templates/default/index.html
(...)

Configuration

Developers must define which template should be render based on the URL is requested. Such configuration can be done in the config.inc.php or in the Routes Administration, for example:

Developers would like to load the template (templates/default/shoppping.html) when the following URL is requested:
http://localhost/product
http://localhost/product/1
http://localhost/product/all

Developers would like to load the template (templates/default/index.html) when any other URL is requested:
http://localhost/home
http://localhost/contact
(...)


To have those defintion on the BF, developers can simply change the $route in the config.inc.php, for example:

$route = array(
               ''        => array('template_path'=>'default/index.html', 'template_area'=>'content', 'template_recursive'=>'1'),
               'login'   => array('template_path'=>'default/login.html', 'template_area'=>'content'),
               'admin'   => array('template_path'=>'default/admin.html', 'template_area'=>'content', 'template_recursive'=>'1'),
               'product' => array('template_path'=>'default/shopping.html', 'template_area'=>'content', 'template_recursive'=>'1'),
               );

For the configurations above:

  • template_path indicates which template should be render,
  • template_area indicates the ID property from the HTML tag where the content must be placed;
  • template_recursive means that the configuration should be consider recursively.

 

NOTE: All paths in your files to resources within your template folder can be used as relative links. But, for resources or links outside your template folder, you should consider the template folder as your root directory, since the BF will automatically includes the tag <base href=”/templates/your_template_folder”> in your template.

 

How it works

The BF reads the template and uses the property ID of your HTML tags to find the destination of the content requested. But, if no container is defined in your configuration, the BF will use the tag with id=’content’ as the default container.

For example, if you have a module modules/Clients/Clients.class.php as:

<?php

namespace modules\Clients;

use bossanova\Module\Module;

class Clients Extends Module
{
    public method __default()
    {
        echo ‘Hello world’;
    }
}
if you have a template such as:

<html>
<head></head>
<body>

<div id=’content’></div>

</body>
</html>

Then your HTML return will be:

<html>
<head>
<base href=”/templates/default/”>
<body>

<div id=’content’>Hello world</div>

</body>
<!—Some bossanova JS definitions -->
</html>

 

Content rendering

Multiple content rendering

One of the most important features for any developer is the ability to have multiple and different contents based on a single request. It means, for example, you would like to run different methods from different classes and place each result within different HTML tags.

A simple example to illustrate this, is when you would like to have your HTML template with a dynamic top menu, an icon in the top showing which user is logged in your application, or even the number of items in your shopping cart.

So, how is possible to run different methods from different classes in a single URL request? The BF has different ways to deal with that, such as:

 

Multiple content loader (ajax loader)

The BF can automatically trigger AJAX calls after the document is fully loaded. You just need to specify in your template which methods should be called by defining the tag property class=’bossanova’ for the correct containers, for example:

<html>
<head></head>
<body>

<div id=’icon’ class=’bossanova’></div>
<div id=’menu’ class=’bossanova’></div>
<div id=’any_other’ class=’bossanova’></div>
<div id=’content’></div>

</body>
</html>

In that example, if I request the URL:
http://localhost/clients

Then, after the BF renders the complete layout with the result from clients, will automatically trigger some AJAX requests: http://localhost/clients/icon, http://localhost/clients/menu, http://localhost/clients/any_other and will place the return in the related container.

 

Multiple content loader (runtime)

Using the BF Admin Panel > Routes Administration you can define secundary content and methods to be placed on your template based on a single URL request. Basically, you will define as much extra contents should be rendered within your request. More information about how to use the interface.
 

Meta information and SEO

When working with web systems, is a common situation have the same template used in different sections of your application. Of course, this raises some problems when dealing with crawlers. For example, when basic meta tags or title must be quite unique and should describe each section of your application.

The recommendation, in that case, is to remove any title, meta description, author and keywords from the template. So, the BF can handle the dynamic meta information for you. If you are using the Nodes Administration, then BF automatically will add that for you. But if you are working with your custom modules, you can add that information as follow:

<?php

namespace modules\Clients;

use bossanova\Module\Module;

class Clients Extends Module
{
    public function __default()
    {
        $this->setAuthor("Paul Hodel");
        $this->setDescription("This is the description from the TAG meta");
        $this->setKeywords("This is the keywords from the TAG meta");
    }
}

Disable or change the layout

If you would like to overwrite the rendering behaviour in runtime, you can use the setLayout( [boolean]$render, [string]$template_path ) method.

@argument $render - Render layout (true or false)
@argument $template_path - Path to the template. i.e. (public/templates/default/index.html)

 

Views

Loading a view

There is two ways to load a view. Firstly, the automatic way where you request a URL that matches a view name. For example:

A URL request such as:
http://localhost/clients/form

And, the second argument of your URL matches the view filename available at:
modules/Clients/views/form.html

 

An alternative way to load a view is by using the loadView( [string]$viewname ) method, for example:

<?php

namespace modules\Clients;

use bossanova\Module\Module;

class Clients Extends Module
{
    public method __default()
    {
        // Load the view file: modules/Clients/views/form.html
        return $this->loadView(‘form’);
    }
}

Passing data to a view

The public variable $view in your class will be shared in the same scope of your view. So, you can share variables from controllers to views in a very simple way, for example:

In your your PHP (modules/Clients/Clients.class.php)

<?php

namespace modules\Clients;

use bossanova\Module\Module;

class Clients Extends Module
{
    public method form()
    {
        $this->view[‘name’] = “Bossanova Framework”;
    }
}

And your view (modules/Clients/views/form.html)

<p><?php echo $this->view[‘name’] ?>