Fork me on GitHub

Using a Third Party Autoloader

In this example the autoloading is disabled when registering the Jaxon classes, and a third-party autoloader is used to load them.

The autoloader used here is Keradus.

 
 
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"
                onchange="App.Test.Test.setColor(jaxon.$('hello-color-one').value); return false;">
            <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" onclick='App.Test.Test.sayHello(1); return false;' >CLICK ME</button>
        <button type="button" class="btn btn-primary" onclick='App.Test.Test.sayHello(0); return false;' >Click Me</button>
        <button type="button" class="btn btn-primary" onclick="App.Test.Test.showDialog(); return false;" >Tingle 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"
                onchange="Ext.Test.Test.setColor(jaxon.$('hello-color-two').value); return false;">
            <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" onclick="Ext.Test.Test.sayHello(1); return false;" >CLICK ME</button>
        <button type="button" class="btn btn-primary" onclick="Ext.Test.Test.sayHello(0); return false;" >Click Me</button>
        <button type="button" class="btn btn-primary" onclick="Ext.Test.Test.showDialog(); return false;" >Bootstrap Dialog</button>
    </div>
</div>

The exported classes

The Jaxon setup code.


<?php

use Jaxon\Jaxon;

$jaxon = jaxon();

$jaxon->setOption('js.lib.uri', '/js');
$jaxon->setOption('core.prefix.class', '');

// Dialog options
$jaxon->setAppOption('dialogs.default.modal', 'bootstrap5');
$jaxon->setAppOption('dialogs.default.alert', 'toastr');
$jaxon->setAppOption('dialogs.toastr.options.alert.closeButton', true);
$jaxon->setAppOption('dialogs.toastr.options.alert.positionClass', 'toast-top-center');
$jaxon->setAppOption('dialogs.lib.use', ['tingle']);

// Disable autoload
// $jaxon->disableAutoload();

// Register the namespaces with a third-party autoloader
$loader = new Keradus\Psr4Autoloader;
$loader->register();
$loader->addNamespace('App', ajaxDir('/namespace/app'));
$loader->addNamespace('Ext', ajaxDir('/namespace/ext'));

// Add class dirs with namespaces.
// The autoloading is disabled.
$jaxon->register(Jaxon::CALLABLE_DIR,
    ajaxDir('/namespace/app'), ['namespace' => 'App', 'autoload' => false]);
$jaxon->register(Jaxon::CALLABLE_DIR,
    ajaxDir('/namespace/ext'), ['namespace' => 'Ext', 'autoload' => false]);
The Javascript code is generated from this PHP template.


jaxon.dom.ready(() => {
    // call the helloWorld function to populate the div on load
    App.Test.Test.sayHello(0, false);
    // call the setColor function on load
    App.Test.Test.setColor(jaxon.$('hello-color-one').value, false);
    // Call the HelloWorld class to populate the 2nd div
    Ext.Test.Test.sayHello(0, false);
    // call the HelloWorld->setColor() method on load
    Ext.Test.Test.setColor(jaxon.$('hello-color-two').value, false);
});