Fork me on GitHub

Utiliser l'autoloader de Composer

Cet exemple montre l'utilisation de l'autoloader de Composer.

Par défaut, la librairie Jaxon enregistre tous les répertoires qui ont un namespace avec l'autoloader PSR-4, et tous les répertoires sans namespace avec l'autoloader classmap.

 
 
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']);

// Add class dirs with namespaces
$jaxon->register(Jaxon::CALLABLE_DIR,
    ajaxDir('/namespace/app'), ['namespace' => 'App']);
$jaxon->register(Jaxon::CALLABLE_DIR,
    ajaxDir('/namespace/ext'), ['namespace' => 'Ext']);
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);
});