Fork me on GitHub

Fichier de configuration


Dans cet exemple, la configuration de la librairie Jaxon et de ses plugins est lue dans un fichier au format Yaml. Les options de configuration se trouvent dans la section jaxon du fichier.

 
The HTML code.

<div class="row">
    <div class="col-md-12" id="hello-text-two">
        &nbsp;
    </div>
    <div class="col-md-4 select">
        <select class="form-select form-control" id="colorselect" name="colorselect" <?= attr()
            ->on('change', rq('HelloWorld')->setColor(Jaxon\select('colorselect'))) ?>>
            <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('HelloWorld')->sayHello(1)) ?>>CLICK ME</button>
        <button type="button" class="btn btn-primary" <?= attr()
            ->click(rq('HelloWorld')->sayHello(0)) ?>>Click Me</button>
        <button type="button" class="btn btn-primary" <?= attr()
            ->click(rq('HelloWorld')->showDialog()) ?>>Show Dialog</button>
    </div>
</div>

The Jaxon library config

The Jaxon setup code.

<?php

class HelloWorld
{
    public function sayHello(bool $isCaps, bool $bNotify = true)
    {
        $text = $isCaps ? 'HELLO WORLD!' : 'Hello World!';
        $xResponse = jaxon()->newResponse();
        $xResponse->assign('hello-text-two', 'innerHTML', $text);
        if($bNotify)
            $xResponse->dialog()->success("hello-text-two text is now $text");
    }

    public function setColor(string $sColor, bool $bNotify = true)
    {
        $xResponse = jaxon()->newResponse();
        $xResponse->assign('hello-text-two', 'style.color', $sColor);
        if($bNotify)
            $xResponse->dialog()->success("hello-text-two color is now $sColor");
    }

    public function showDialog()
    {
        $xResponse = jaxon()->newResponse();
        $buttons = [['title' => 'Close', 'class' => 'btn', 'click' => 'close']];
        $options = ['width' => 500];
        $xResponse->dialog()->show("Modal Dialog", "This modal dialog is powered by PgwJs!!", $buttons, $options);
    }
}

// Register object
$jaxon = jaxon();

$jaxon->app()->setup(configFile('config.yaml'));
The Javascript code is generated from this PHP template.

jaxon.dom.ready(() => {
    // Call the HelloWorld class to populate the 2nd div
    <?= rq('HelloWorld')->sayHello(0, false) ?>;
    // call the HelloWorld->setColor() method on load
    <?= rq('HelloWorld')->setColor(Jaxon\select('colorselect'), false) ?>;
});