Contents

Buttons

The ever reliable button is one of the common controls used throughout any web project to perform an action.

The Button control class has several properties in addition to the standard control:

setConfirmMessage($confirmMessage)
Sets the confirmation alert message that should be presented when the Button is pressed.
setButtonText($buttonText)
Sets the text to be displayed within the Button.

ButtonViewBridge Placeholder for all ButtonViewBridge Events

Simple button

The below example will show how to implement a basic Button into your View. Once the button is pressed it update the Views Model and will output the value that has set on the model to the screen.

Click the button below to see what happens?
SimpleButton.phpSimpleButtonModel.phpSimpleButtonView.php
<?php

namespace Rhubarb\Leaf\Controls\Common\Examples\SimpleButton;

use Rhubarb\Leaf\Leaves\Leaf;
use Rhubarb\Leaf\Leaves\LeafModel;

class SimpleButton extends Leaf
{

    /**
     * Returns the name of the standard view used for this leaf.
     *
     * @return string
     */
    protected function getViewClass()
    {
        return SimpleButtonView::class;
    }

    /**
     * Should return a class that derives from LeafModel
     *
     * @return LeafModel
     */
    protected function createModel()
    {
        return new SimpleButtonModel();
    }
}
                                    
<?php

namespace Rhubarb\Leaf\Controls\Common\Examples\SimpleButton;

use Rhubarb\Leaf\Leaves\LeafModel;

class SimpleButtonModel extends LeafModel
{
    public $simpleButtonText = '';

    /**
     * SimpleButtonModel constructor.
     */
    public function __construct()
    {
        $this->simpleButtonText = '';
    }
}
                                    
<?php

namespace Rhubarb\Leaf\Controls\Common\Examples\SimpleButton;

use Rhubarb\Leaf\Controls\Common\Buttons\Button;
use Rhubarb\Leaf\Views\View;

class SimpleButtonView extends View
{
    /** @var SimpleButtonModel $model */
    protected $model;

    protected function createSubLeaves()
    {
        parent::createSubLeaves();

        $this->registerSubLeaf(
            $simpleButton = new Button("SimpleButton", "Click Me", function () {
                $this->model->simpleButtonText = 'You just clicked the Simple Button.';
            })
        );
    }

    protected function printViewContent()
    {
        parent::printViewContent();

        if ($this->model->simpleButtonText) {
            print $this->model->simpleButtonText;
        } else {
            print 'Click the button below to see what happens?';
        }

        print $this->leaves["SimpleButton"];
    }
}

Simple XHR button

The below example shows you how to implement a basic Button into your View. That utilises Ajax to be able to retrieve a response from the Server and button an element on the page.

This text should change when you click the Ajax Button below
SimpleAjaxButton.phpSimpleAjaxButtonModel.phpSimpleAjaxButtonView.phpSimpleAjaxButtonViewBridge.js
<?php

namespace Rhubarb\Leaf\Controls\Common\Examples\SimpleAjaxButton;

use Rhubarb\Leaf\Leaves\Leaf;
use Rhubarb\Leaf\Leaves\LeafModel;

class SimpleAjaxButton extends Leaf
{

    /**
     * Returns the name of the standard view used for this leaf.
     *
     * @return string
     */
    protected function getViewClass()
    {
        return SimpleAjaxButtonView::class;
    }

    /**
     * Should return a class that derives from LeafModel
     *
     * @return LeafModel
     */
    protected function createModel()
    {
        return new SimpleAjaxButtonModel();
    }
}
                                    
<?php

namespace Rhubarb\Leaf\Controls\Common\Examples\SimpleAjaxButton;

use Rhubarb\Leaf\Leaves\LeafModel;

class SimpleAjaxButtonModel extends LeafModel
{
    /**
     * SimpleAjaxButtonModel constructor.
     */
    public function __construct()
    {
    }
}
                                    
<?php

namespace Rhubarb\Leaf\Controls\Common\Examples\SimpleAjaxButton;

use Rhubarb\Leaf\Controls\Common\Buttons\Button;
use Rhubarb\Leaf\Leaves\LeafDeploymentPackage;
use Rhubarb\Leaf\Views\View;

class SimpleAjaxButtonView extends View
{
    /** @var SimpleAjaxButtonModel $model */
    protected $model;

    protected function createSubLeaves()
    {
        parent::createSubLeaves();

        $this->registerSubLeaf(
            $simpleAjaxButton = new Button("SimpleAjaxButton", "Click Me I am Ajax Enabled", function () {
                return 'You just clicked the amazing Simple Ajax Button';
            }, true)
        );
    }

    protected function printViewContent()
    {
        print '<span id="simple-ajax-button-span">This text should change when you click the Ajax Button below</span>';
        print $this->leaves["SimpleAjaxButton"];
    }

    protected function getViewBridgeName()
    {
        return "SimpleAjaxButtonViewBridge";
    }

    public function getDeploymentPackage()
    {
        return new LeafDeploymentPackage(__DIR__ . "/SimpleAjaxButtonViewBridge.js");
    }
}
                                    
var bridge = function (presenterPath) {
    window.rhubarb.viewBridgeClasses.ViewBridge.apply(this, arguments);
};

bridge.prototype = new window.rhubarb.viewBridgeClasses.ViewBridge();
bridge.prototype.constructor = bridge;

bridge.prototype.attachEvents = function () {
    var self = this,
        simpleAjaxButtonViewBridge = this.findChildViewBridge('SimpleAjaxButton');

    simpleAjaxButtonViewBridge.attachClientEventHandler('ButtonPressCompleted', function (response) {
       document.getElementById('simple-ajax-button-span').innerHTML = response;
    });
};

window.rhubarb.viewBridgeClasses.SimpleAjaxButtonViewBridge = bridge;