Fork me on GitHub

A Jaxon package

This example demonstrates a simple Jaxon package.

The exported classes are listed in the package config, and not in the application config.

 
 
The HTML code.


<div class="row">
    <div class="col-md-12" id="hello-text-one">
        &nbsp;
    </div>
    <div class="col-md-4 select">
        <select class="form-select form-control" id="hello-color-one" name="hello-color-one" <?= attr()
            ->on('change', rq('App.Test.Test')->setColor(Jaxon\select('hello-color-one'))
                ->confirm('Set color to {1} not {2}?', jq('#hello-color-one')->val(), jq('#hello-color-two')->val())) ?>>
            <option value="black" selected="selected">Black</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
        </select>
    </div>
    <div class="col-md-8 buttons">
        <button type="button" class="btn btn-primary" <?= attr()
            ->click(rq('App.Test.Test')->sayHello(1)) ?>>CLICK ME</button>
        <button type="button" class="btn btn-primary" <?= attr()
            ->click(rq('App.Test.Test')->sayHello(0)) ?>>Click Me</button>
        <button type="button" class="btn btn-primary" <?= attr()
            ->click(rq('App.Test.Test')->showDialog()) ?>>Show Dialog</button>
    </div>

    <div class="col-md-12" id="hello-text-two">
        &nbsp;
    </div>
    <div class="col-md-4 select">
        <select class="form-select form-control" id="hello-color-two" name="hello-color-two" <?= attr()
            ->on('change', rq('Ext.Test.Test')->setColor(Jaxon\select('hello-color-two'))
                ->confirm('Set color to {2} not {1}?', jq('#hello-color-one')->val(), jq('#hello-color-two')->val())) ?>>
            <option value="black" selected="selected">Black</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
        </select>
    </div>
    <div class="col-md-8 buttons">
        <button type="button" class="btn btn-primary" <?= attr()
            ->click(rq('Ext.Test.Test')->sayHello(1)) ?>>CLICK ME</button>
        <button type="button" class="btn btn-primary" <?= attr()
            ->click(rq('Ext.Test.Test')->sayHello(0)) ?>>Click Me</button>
        <button type="button" class="btn btn-primary" <?= attr()
            ->click(rq('Ext.Test.Test')->showDialog()) ?>>Show Dialog</button>
    </div>
</div>

The demo package config

The Jaxon setup code.


<?php

use Jaxon\Plugin\AbstractPackage;
use Jaxon\Dialogs\Dialog\Library\Bootbox;
use Jaxon\Dialogs\Dialog\Library\Toastr;

class DemoPackage extends AbstractPackage
{
    public static function config(): string
    {
        return realpath(__DIR__ . '/config/jaxon.php');
    }

    public function getHtml(): string
    {
        return '';
    }
}

$jaxonAppDir = __DIR__ . '/js';
$jaxonAppURI = '/package/js';

$jaxon = jaxon();

// $jaxon->setOption('core.debug.on', true);
$jaxon->setOption('core.prefix.class', '');
$jaxon->setOption('js.lib.uri', '/js');
$jaxon->setOption('js.app.export', false);
$jaxon->setOption('js.app.dir', $jaxonAppDir);
$jaxon->setOption('js.app.uri', $jaxonAppURI);
$jaxon->setOption('js.app.minify', false); // Optionally, the file can be minified

// Dialog options
$jaxon->setAppOption('dialogs.default.modal', Bootbox::NAME);
$jaxon->setAppOption('dialogs.default.alert', Toastr::NAME);
$jaxon->setAppOption('dialogs.toastr.options.alert.closeButton', true);
$jaxon->setAppOption('dialogs.toastr.options.alert.positionClass', 'toast-top-center');

$jaxon->registerPackage(DemoPackage::class);
The Javascript code is generated from this PHP template.


jaxon.dom.ready(() => {
    <?= rq('App.Test.Test')->sayHello(0, false) ?>;
    <?= rq('App.Test.Test')->setColor(Jaxon\select('hello-color-one'), false) ?>;
    <?= rq('Ext.Test.Test')->sayHello(0, false) ?>;
    <?= rq('Ext.Test.Test')->setColor(Jaxon\select('hello-color-two'), false) ?>;
});