Jaxon

The base classes for Jaxon components provide a wide range of functions, including views, sessions, file upload, logging, data sharing (with databags and stash).

The other component features are described below.

Call an other component

The cl() method returns an instance of another registered Jaxon class. It takes the full name (with namespace) of the class as a parameter.

class ComponentA extends \Jaxon\App\FuncComponent
{
    public function doA()
    {
        // Call the method doB() of the ClassB class
        $this->cl(ClassB::class)->doB();
    }
}

The Response object

All the components have access to the same Response object, through their response attribute, which is automatically initialized by the library.

class ComponentA extends \Jaxon\App\FuncComponent
{
    public function doA()
    {
        $this->response()->alert('ComponentA::doAB() called.');
        // Call the doB() method of this class
        $this->doB();
    }

    public function doB()
    {
        $this->response()->alert('ComponentA::doB() called.');
        // Call the doA() method
        $this->doA();
        // Call the doB() method of class ClassB
        $this->cl(ClassB::class)->doB();
    }
}

class ClassB extends \Jaxon\App\FuncComponent
{
    public function doB()
    {
        $this->response()->alert('ClassB::doB() called.');
    }
}

The NodeResponse object

The Jaxon\App\NodeComponent class has a node() method that returns a special response, which is bound to the attached node.

The page content and style edition functions in this object no longer have the string $sTarget parameter, as they will only apply on the attached node.

The Request Factory

The rq() method returns a request to its calling class. It provides a fluid interface that transforms a call to any of its method into a request to the same method, which can be bound to an event on an element in the web page.

class ComponentA extends \Jaxon\App\FuncComponent
{
    public function doA()
    {
        // Bind the click on the button with id "btn-a" to an ajax call to the doB() method in this class
        $this->response()->jq('#btn-a')->on('click', $this->rq()->doB());

        // Bind the click on the button with id "btn-b" to an ajax call to the doB() method in class ClassB
        $this->response()->jq('#btn-b')->on('click', $this->rq(ClassB::class)->doB());
    }
}

The request factory will often be used in templates to define event handlers.

Component data

The Jaxon\App\ComponentDataTrait trait adds a data array to a component. It provides the methods set(string $sKey, mixed $xValue): static, has(string $sKey): bool, and get(string $sKey, mixed $xDefault = null): mixed, respectively to save, check, or read the data associated with a key in the array.

This array is used to share data between the methods of a component, or to pass data to a component.

$this->cl(UiComponent::class)->set('value', $value)->render();

It will therefore be used as an alternative to stash, for data local to a component.

Component extension

The protected function setupComponent(): void method allows the application to customize the component setup. It is called once, right after the component is created.

The public function extend(string $target, Closure $extension) allows the application to customize some component properties. The $target parameter can take item or html as values, depending on the atribute to be customized. The provided closure will take the initial attribute value as parameter, and must return the new value.

The extend() method will often be called in the setupComponent() method.

In the pagination components, the item attribute extension will automatically be also applied to the pagination links component.

Component override

Sometimes it might useful to be able to display multiple UI components in the same HTML element in a page. This is the case for example when setting up a navigation menu, where each item displays different content on a page.

A first UI component then needs to be attached to the element, and the other UI components will be setup to override that first one.

<div class="page-content" <?= attr()->bind(rq(FirstComponent::class)) ?>>
</div>

class SecondComponent extends \Jaxon\App\NodeComponent
{
    /**
     * @var string
     */
    protected string $overrides = FirstComponent::class;
}

class ThirdComponent extends \Jaxon\App\NodeComponent
{
    /**
     * @var string
     */
    protected string $overrides = FirstComponent::class;
}

Note: the overrides relationship cannot be chained: a component cannot override a component that is already overriding another one.

Component duplication

The same component can be displayed multiple times on the same page. Each instance of the component must then be given a different identifier, which will then be used to distinguish them.

<div class="row" <?= attr()->bind(rq(UiComponent::class), 'first') ?>>
</div>

<div class="row" <?= attr()->bind(rq(UiComponent::class), 'second') ?>>
</div>

class FuncComponent extends \Jaxon\App\FuncComponent
{
    public function doB()
    {
        // Render the component with the "second" identifier.
        $this->cl(UiComponent::class)->item('second')->render();
    }
}

Dialogs and alerts helpers

The Jaxon\App\Dialog\DialogTrait trait provides the alert() and dialog() methods, which display dialogs and messages in the page.

use Jaxon\App\Dialog\DialogTrait;

class ComponentA extends \Jaxon\App\FuncComponent
{
    use DialogTrait;

    public function doA()
    {
        $this->alert()->title('Information')->info('This is an information');
    }

    public function doB()
    {
        $title = 'Modal Dialog';
        $content = '<div>This is a modal dialog</div>';
        $buttons = [
            ['title' => 'Close', 'class' => 'btn btn-danger', 'click' => 'close'],
        ];
        $this->dialog()->show($title, $content, $buttons);
    }
}