jQuery Semantic-UI

By default, Ubiquity uses the phpMv-UI library for the client-rich part.
PhpMv-UI allows to create components based on Semantic-UI or Bootstrap and to generate jQuery scripts in PHP.

This library is used for the webtools administration interface.

Integration

By default, a $jquery variable is injected in controllers at runtime.

This operation is done using dependency injection, in app/config.php:

app/config.php

...
"di"=>array(
             "@exec"=>array(
                             "jquery"=>function ($controller){
                                     return \Ubiquity\core\Framework::diSemantic($controller);
                                     }
                             )
             )
...

So there’s nothing to do,
but to facilitate its use and allow code completion in a controller, it is recommended to add the following code documentation:

app/controllers/FooController.php

 /**
 * Controller FooController
 * @property \Ajax\php\ubiquity\JsUtils $jquery
 **/
class FooController extends ControllerBase{

     public function index(){}
}

jQuery

Href to ajax requests

Create a new Controller and its associated view, then define the folowing routes:

app/controllers/FooController.php

namespace controllers;

class FooController extends ControllerBase {

     public function index() {
             $this->loadview("FooController/index.html");
     }

     /**
      *
      *@get("a","name"=>"action.a")
      */
     public function aAction() {
             echo "a";
     }

     /**
      *
      *@get("b","name"=>"action.b")
      */
     public function bAction() {
             echo "b";
     }
}

The associated view:

app/views/FooController/index.html

     <a href="{{path('action.a')}}">Action a</a>
     <a href="{{path('action.b')}}">Action b</a>

Initialize router cache:

Ubiquity init:cache -t=controllers

Test this page in your browser at http://127.0.0.1:8090/FooController.

Transformation of requests into Ajax requests

The result of each ajax request should be displayed in an area of the page defined by its jQuery selector (.result span)

app/controllers/FooController.php

namespace controllers;

/**
 * @property \Ajax\php\ubiquity\JsUtils $jquery
 */
class FooController extends ControllerBase {

     public function index() {
             $this->jquery->getHref('a','.result span');
             $this->jquery->renderView("FooController/index.html");
     }
     ...
}

app/views/FooController/index.html

     <a href="{{path('action.a')}}">Action a</a>
     <a href="{{path('action.b')}}">Action b</a>
<div class='result'>
     Selected action:
     <span>No One</span>
</div>
{{ script_foot | raw }}

Note

The script_foot variable contains the generated jquery script produced by the renderView method. The raw filter marks the value as being “safe”, which means that in an environment with automatic escaping enabled this variable will not be escaped.

Let’s add a little css to make it more professional:

app/views/FooController/index.html

<div class="ui buttons">
     <a class="ui button" href="{{path('action.a')}}">Action a</a>
     <a class="ui button" href="{{path('action.b')}}">Action b</a>
</div>
<div class='ui segment result'>
     Selected action:
     <span class="ui label">No One</span>
</div>
{{ script_foot | raw }}

If we want to add a new link whose result should be displayed in another area, it is possible to specify it via the data-target attribute

The new action:

app/controllers/FooController.php

namespace controllers;

class FooController extends ControllerBase {
     ...
     /**
      *@get("c","name"=>"action.c")
      */
     public function cAction() {
             echo \rand(0, 1000);
     }
}

The associated view:

app/views/FooController/index.html

<div class="ui buttons">
     <a class="ui button" href="{{path('action.a')}}">Action a</a>
     <a class="ui button" href="{{path('action.b')}}">Action b</a>
     <a class="ui button" href="{{path('action.c')}}" data-target=".result p">Action c</a>
</div>
<div class='ui segment result'>
     Selected action:
     <span class="ui label">No One</span>
     <p></p>
</div>
{{ script_foot | raw }}

Definition of the ajax request attributes:

In the folowing example, the parameters passed to the attributes variable of the getHref method:

• remove the history of the navigation,
• make the ajax loader internal to the clicked button.

app/controllers/FooController.php

namespace controllers;

/**
 * @property \Ajax\php\ubiquity\JsUtils $jquery
 */
class FooController extends ControllerBase {

     public function index() {
             $this->jquery->getHref('a','.result span', [
                     'hasLoader' => 'internal',
                     'historize' => false
             ]);
             $this->jquery->renderView("FooController/index.html");
     }
     ...
}

Note

It is possible to use the postHref method to use the POST http method.

Classical ajax requests

Semantic components

HtmlButton sample