About this example : TreeDemo MVC Assembly source Code

Controller

controllers/examples/cms/TreeDemo.php

<?php
/**
 * Class TreeDemo
 *
 * {ControllerResponsability}
 *
 * @package controllers\examples\cms
 * @category Application Controller
 * @author  {AuthorName} - {AuthorEmail}
 */

namespace controllers\examples\cms;

use framework\Controller;
use framework\Model;
use framework\View;
use models\examples\cms\TreeDemo as TreeDemoModel;
use views\examples\cms\TreeDemo as TreeDemoView;
use framework\components\TreeStructure;

class TreeDemo extends Controller
{
    protected $view;
    protected $model;

    /**
     * Object constructor.
     *
     * @param View $view
     * @param Model $mode
     */
    public function __construct(View $view = null, Model $model = null)
    {
        $this->view = empty($view) ? $this->getView() : $view;
        $this->model = empty($model) ? $this->getModel() : $model;
        parent::__construct($this->view, $this->model);
    }

    /**
     * Autorun method. Put your code here for running it after object creation.
     * @param mixed|null $parameters Parameters to manage
     *
     */
    protected function autorun($parameters = null)
    {
        $tree = new TreeStructure();

        $tree->setName("MyTree");
        $tree->setNodeIdField("id");
        $tree->setNodeParentIdField("parent_id");
        $tree->setNodeDescriptionField("description");
        $tree->setNodeLinkField("link");

        $tree->disableNodeLevel();
        //$tree->disableNodeLink();

        // Init JS and CSS
        $tree->initCCSJS($this,$this->view);

        $tree->buildTree($this->model->getResultSet());
        $this->bindComponent($tree);

        $this->hide("LinkClickBlock");
    }

    /**
     * linkClickDemo()
     * A simple method for handling the link click of item id 10 contained
     * into the tree structure
     *
     * @return void
     */
    public function linkClick()
    {
        $this->hide("TreeBlock");
        $this->render();
    }

    /**
     * Inizialize the View by loading static design of /examples/cms/tree_demo.html.tpl
     * managed by views\examples\cms\TreeDemo class
     *
     */
    public function getView()
    {
        $view = new TreeDemoView("/examples/cms/tree_demo");
        return $view;
    }

    /**
     * Inizialize the Model by loading models\examples\cms\TreeDemo class
     *
     */
    public function getModel()
    {
        $model = new TreeDemoModel();
        return $model;
    }
}

Model

models/examples/cms/TreeDemo.php

<?php
/**
 * Class TreeDemo
 *
 * {ModelResponsability}
 *
 * @package models\examples\cms
 * @category Application Model
 * @author  {AuthorName} - {AuthorEmail}
 */

namespace models\examples\cms;

use framework\Model;

class TreeDemo extends Model
{
    /**
     * Object constructor.
     *
     */
    public function __construct()
    {
        parent::__construct();
        $this->autorun();
    }

    /**
     * Autorun method. Put your code here for running it after object creation.
     * @param mixed|array|null $parameters Additional parameters to manage
     *
     */
    protected function autorun($parameters = null)
    {
        $rows = array(
            array(
                'id' => 1,
                'parent_id' => 0,
                'description' => 'Item 1',
            ),
            array(
                'id' => 2,
                'parent_id' => 1,
                'description' => 'Item 2',
            ),
            array(
                'id' => 3,
                'parent_id' => 1,
                'description' => 'Item 3',
            ),
            array(
                'id' => 4,
                'parent_id' => 3,
                'description' => $this->getItemDescription(4),
                'link' => 'https://www.webmvcframework.com/webmvc/examples/',
            ),
            array(
                'id' => 5,
                'parent_id' => 3,
            ),
            array(
                'id' => 6,
                'parent_id' => 3,
            ),
            array(
                'id' => 7,
                'parent_id' => 2,
            ),
            array(
                'id' => 8,
                'parent_id' => 2,
            ),
            array(
                'id' => 9,
                'parent_id' => 6,
            ),
            array(
                'id' => 10,
                'parent_id' => 6,
                'description' => $this->getItemDescription(10),
                'link' => 'tree_demo/link_click',

            ),
        );
        $this->setResultSet($rows);
    }

    public function getItemDescription($itemId)
    {
        $locale = (empty(@$_GET["locale"])) ? $_SESSION["CurrentLocale"] : $_GET["locale"];
        $descriptions = array();
        $descriptions[4]["it-it"] = "Item 4 (link all'indice degli esempi)";
        $descriptions[4]["en"] = "Item 4 (has a link to example index)";
        $descriptions[10]["it-it"] = "Item 10 (link al metodo linkClick del Controller corrente)";
        $descriptions[10]["en"] = "Item 10 (has a link to method linkClick of current Controller)";
        return $descriptions[$itemId][$locale];
    }
}

View

views/examples/cms/TreeDemo.php

<?php
/**
 * Class TreeDemo
 *
 * {ViewResponsability}
 *
 * @package controllers\examples\cms
 * @category Application View
 * @author  {AuthorName} - {AuthorEmail}
*/
namespace views\examples\cms;

use framework\View;

class TreeDemo extends View
{

    /**
    * Object constructor.
    *
    * @param string|null $tplName The html template containing the static design.
    */
    public function __construct($tplName = null)
    {
        if (empty($tplName))
            $tplName = "/examples/cms/tree_demo";
        parent::__construct($tplName);
    }
    
}

HTML Template

templates/examples/cms/tree_demo.html.tpl

<!DOCTYPE html>
<html>
<head>
    <title>Tree Structure Demo</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"
          media="screen">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
    <![endif]-->

</head>
<body>
<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">{RES:ProjectName}</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="">Home</a></li>
                <li><a href="#about">{RES:Contacts}</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">{RES:Setting} <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-header">{RES:LanguageSettings}</li>
                        <li><a href="?locale=en">{RES:English}</a></li>
                        <li><a href="?locale=it-it">{RES:Italian}</a></li>
                        <li role="separator" class="divider"></li>
                        <li class="dropdown-header">{RES:GuiSettings}</li>
                        <li><a href="">{RES:LookAndFeel}</a></li>
                    </ul>
                </li>
                <li><a href="https://www.webmvcframework.com/webmvc/examples/">{RES:Exit}</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="container">
    <h1>{RES:TreeStructureMsg}</h1>
    <hr>

    <!-- BEGIN TreeBlock -->
    <div id="tree-div-container" style="display:none">
        <ul class="tree" id="mytree">
            {TreeStructure:MyTree}
        </ul>
    </div>
    <a id="exp_tree" href="#">{RES:ExpandTree}</a> | <a id="col_tree" href="#">{RES:CollapseTree}</a>
    <!-- END TreeBlock -->

    <!-- BEGIN LinkClickBlock -->
    Method <b>linkClick</b>
    <br><a href="https://www.webmvcframework.com/webmvc/examples/cms/tree_demo">Back</a>
    <!-- END LinkClickBlock -->

    <hr>
    <a href="https://www.webmvcframework.com/webmvc/examples/about/example/tree_demo" class="btn btn-info">Show source code</a>
    <a href="https://www.webmvcframework.com/webmvc/examples/cms/tree_demo/" class="btn btn-success">Template</a>
    <a href="https://www.webmvcframework.com/webmvc/examples/cms/tree_demo" class="btn btn-success">Run again</a>
    <a href="https://www.webmvcframework.com/webmvc/examples/" class="btn btn-primary">Examples TOC</a>
</div>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script>
    jQuery(document).ready(function ($) {

        /* Init Tree */
        $(".tree").tree();

        /*Custom page initialization */

        /* Collapse drom level 2 */
        $("#mytree ul:nth-child(2)").css("display", "none");

        /* Show div containing the tree (by default it was manually hidden for hiding collapse effects) */
        $("#tree-div-container").css("display", "");

        /* Custom Expand Tree link action */
        $("#exp_tree").click(function () {
            $("#mytree ul:nth-child(2)").css("display", "block");
        });

        /* Custom Collapse Tree link action */
        $("#col_tree").click(function () {
            $("#mytree ul:nth-child(2)").css("display", "none");
        });
    });
</script>
</body>
</html> 


Back