HMVC framework for WordPress plugin development Download

HM(V)C for Views

Views

Views are core part of presentation layer. View is a file that serve data to the browser. By separating your view from the business logic of your application, your code will be cleaner and easier to maintain.


Creating a Simple View

In WordPress Fuel, Views are located in the yourplugin/mvc/views directory and use the .php file extension. Views can be located in subdirectories.

Example View

//views/example/welcome.php
<!DOCTYPE html>
<html>
    <head>
        <title>Example View</title>
    </head>
    <body>
        Hello, <?php echo $name; ?>.
    </body>
</html>
  • Line 8: $name is a php variable

WordPress Fuel view files are very flexible and simple to use. You don't need to learn another template engine.

Binding Data To Views

Controller will request data from a model that the view needs to display. So, we need a way to inject the data to the view. Please read the following example:

class pluginslug_example_controller extends absController
{
    public function index()
    {
        //injects 'name' variable and render the view
         $this->ViewData('name', 'John Doe') 
               ->View('example/welcome');
    }

    public function action_sayhi()
    {
         //Passing an array of data to bind data:
         $view_data = array();
         $view_data['name'] = 'John Doe';

         //pass data
         $this->ViewData('view_data', $view_data);

         //renders the 'sayhi' view in the 'example' folder
         $this->View('example/welcome');
    }
}



  • License
    How to perform controller-view actions is covered in the controller page.


Masterpage Layouts

There are cases where templates in an application share common elements, like the header, footer, sidebar. Scenarios already do exist where you need to set different layout orientations for a particular module. Example of this could be setting up a blog post template with the ability to toggle sidebar position without touching the main content. A Masterpage layout allows you to build a base “layout” template that contains all the common elements of your application. Common elements are defined as placeholders. Masterpage layouts are set from the controller using a setter method.


  • In WordPress Fuel, Masterpage layouts are located in the yourplugin/mvc/views/_masterages directory and use the .php file extension.

Example - Master Layout

The following Masterage layout is divided into blocks. The header, footer, content and sidebar. Sidebar will be displayed on the left.

//_masterpages/left-layout.php
<?php echo $header_block; ?> <!--/ Header -->
<div class="container">
    <div class="row-fluid">
        <div class="span_3">
            <?php echo $sidebar_block; ?> <!--/ Sidebar -->
        </div>
        <div class="span_9">
            <?php echo $this->View($view); ?> <!--/ Child View Content -->
        </div>
    </div>
</div>
<?php echo $footer_block; ?> <!--/ Footer -->

Child Template Blocks

The following the the child layout/blocks to pass to "_masterpages/left-layout.php" masterpage layout.

Header Block

//_masterpages/parts/header.php
<!DOCTYPE html>
<html>
    <head>
        <title><?php echo $meta_title; ?></title>
        <link rel="stylesheet" href="assets/css/styles.css" type="text/css"  />
    </head>
<body>

Content Block

//views/content.php
<div class="container">
    <h1>Page Heading</h1>
    <p>Lorem ipsum Lorem ipsum.</p>
</div>

h4h3>Sidebar Block
//_masterpages/parts/sidebar.php
<div class="sidebar-wrapper">
    <div>Quick Navigation</div>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

Footer Block

//_masterpages/parts/footer.php
<div>(c) 2013 - All rights reserved.</div>
</body>
</html>


Let's see the controller class to render masterpage layout with blocks.


Controller

//wp-content/plugins/pluginfolder/mvc/controls/page.php
class pluginslug_pages_controller extends absController
{
    public function before()
    {
        $this->setMasterPage('left-layout');
    }
    
    public function index()
    {
        $header = $this->forward("parts/header");
        $footer = $this->forward("parts/footer");
        $sidebar = $this->forward("parts/sidebar");
        
        $this->ViewData('header', $header)
            ->ViewData('footer', $footer)
            ->ViewData('sidebar', $sidebar)
            ->View('pages/index');
    }
}
?>

Line 6: Special method used to set the masterpage layout.
Line 10-12: Forward method used to load all the needed blocks for the masterpage layout.
Line 15-17: Block data passed to the view.
Line 18: Renders the view response.


  • Alternatively you could also fetch content blocks using dispatchRequest method. This is an example of [HMVC], which makes it possible to create and read calls to other URLs within your plugin.

Alternative Method

The following Masterage layout uses $plugin object to load the block. $plugin is the absMVC_Plugin object which is always available to the view file.

Alternative Masterpage Layout

//_masterpages/alternative-left-layout.php
<?php echo $plugin->dispatchRequest("parts/header"); ?> <!--/ Header -->
<div class="container">
    <div class="row-fluid">
        <div class="span_3">
            <?php echo $plugin->dispatchRequest("parts/sidebar"); ?> <!--/ Sidebar -->
        </div>
        <div class="span_9">
            <?php echo $this->View($view); ?> <!--/ Child View Content -->
        </div>
    </div>
</div>
<?php echo $plugin->dispatchRequest("parts/footer"); ?> <!--/ Footer -->

Alternative Controller

//wp-content/plugins/pluginfolder/mvc/controls/page.php
class pluginslug_pages_controller extends absController
{
    public function before()
    {
        $this->setMasterPage('alternative-left-layout');
    }
    
    public function index()
    {
        $this->View('pages/index');
    }
}
?>


Nested Views

You can load other views within a view called 'web parts'. Nested views help you keep your view template small and modular. You can store web parts in any directory you like. But it's always nice to give a slightly different name (e.g. 'views/web.parts') to such directory for clean directory structure.

Example

<div class="wrapper">
    <?php echo $this->View('web.parts/heading',array(
            "heding" => "Page Heading", "tag" => "h1"
        )); 
    ?>
    <p>Page description</p>
</div>

Web Part

In the above example 'heading' web part was used from the following file:

//views/web.parts/heading.php
<div class="wrapper">
    <<?php echo $tag; ?>><?php echo $heding; ?></<?php echo $tag; ?>>
</div>