Fork me on GitHub

Utiliser un autoloader d'une tierce partie

Dans cet exemple l'autoloading est désactivé dans la déclaration des classes, et un autoloader d'une tierce partie est utilisé pour les charger.

L'autoloader utilisé ici est 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);
});