Visual components library (JQuery UI, Twitter Bootstrap, Semantic-UI) for php and php MVC frameworks
phpMv-UI is a visual components library for php : a php wrapper for jQuery and UI components (jQuery, Twitter Bootstrap, Semantic-UI).
Using the dependency injection, the jQuery object can be injected into php framework container, allowing for the generation of jQuery scripts in controllers, respecting the MVC design pattern.
- PHP >= 7.0
- JQuery >= 2.0.3
- JQuery UI >= 1.10 [optional]
- Twitter Bootstrap >= 3.3.2 [optional]
- Semantic-UI >= 2.2 or Fomantic-UI >= 2.7 [optional]
Install Composer in a common location or in your project:
curl -s http://getcomposer.org/installer | phpCreate the composer.json file in the app directory as follows:
{
"require": {
"phpmv/php-mv-ui": "^2.3"
}
}In the app directory, run the composer installer :
php composer.phar installJust clone the repository in a common location or inside your project:
git clone https://github.com/phpMv/phpMv-UI.git
phpMv-UI complies with PSR-4 recommendations for auto-loading classes. Whatever the php framework used, with "composer", it is enough to integrate the Composer autoload file.
require_once("vendor/autoload.php");
The library is already loaded by default in the config file app/config/config.php :
"di"=>array(
"@exec"=>array("jquery"=>function ($controller){
return \Ajax\php\ubiquity\JsUtils::diSemantic($controller);
})
),Example of creating a Semantic-UI button
/**
* @property \Ajax\php\ubiquity\JsUtils $jquery
*/
class ExempleController extends Controller{
public function index(){
$semantic=$this->jquery->semantic();
$button=$semantic->htmlButton("btTest","Test Button");
echo $button;
}
}
Without Composer, It is possible to load the library with the app/config/loader.php file :
$loader = new \Phalcon\Loader();
$loader->registerNamespaces(array(
'Ajax' => __DIR__ . '/../vendor/phpmv/php-mv-ui/Ajax/'
))->register();It is necessary to inject the JQuery service at application startup, in the service file app/config/services.php, and if necessary instantiate Semantic, Bootstrap or Jquery-ui :
$di->set("jquery",function(){
$jquery= new Ajax\php\phalcon\JsUtils();
$jquery->semantic(new Ajax\Semantic());//for Semantic UI
return $jquery;
});Example of creating a Semantic-UI button
use Phalcon\Mvc\Controller;
use Ajax\php\phalcon\JsUtils;
/**
* @property JsUtils $jquery
*/
class ExempleController extends Controller{
public function indexAction(){
$semantic=$this->jquery->semantic();
$button=$semantic->htmlButton("btTest","Test Button");
echo $button;
}
}
If you want CodeIgniter to use a Composer auto-loader, just set $config['composer_autoload'] to TRUE or a custom path in application/config/config.php.
Then, it's necessary to create a library for the JsUtils class
Create the library XsUtils (the name is free) in the folder application/libraries
use Ajax\php\ci\JsUtils;
class XsUtils extends Ajax\php\ci\JsUtils{
public function __construct(){
parent::__construct(["semantic"=>true,"debug"=>false]);
}
}Add the loading of the XsUtils library in the file application/config/autoload.php
The jquery member will be accessible in the controllers
$autoload['libraries'] = array('XsUtils' => 'jquery');Once loaded you can access your class in controllers using the $jquery member:
$this->jquery->some_method();
If you do not use the Composer autoloader file, you can also load phpMv-UI with composer.json :
"autoload": {
"classmap": [
...
],
"psr-4": {
"Ajax\\": "vendor/phpmv/php-mv-ui/Ajax"
}
},Register a Singleton in bootstrap/app.php file :
$app->singleton(Ajax\php\laravel\JsUtils::class, function($app){
$result= new Ajax\php\laravel\JsUtils();
$result->semantic(new Ajax\Semantic());
return $result;
});Then it is possible to inject the JsUtils class in the base class controllers constructor :
use Ajax\php\laravel\JsUtils;
class Controller extends BaseController{
use AuthorizesRequests, AuthorizesResources, DispatchesJobs, ValidatesRequests;
protected $jquery;
public function __construct(JsUtils $js){
$this->jquery = $js;
}
public function getJquery() {
return $this->jquery;
}
}
The classes in the installed Composer packages can be autoloaded using the Composer autoloader. Make sure the entry script of your application contains the following lines to install the Composer autoloader:
require(__DIR__ . '/../vendor/autoload.php');
require(__DIR__ . '/../vendor/yiisoft/yii2/Yii.php');In the same file, register a new dependency :
\Yii::$container->setSingleton("Ajax\php\yii\JsUtils",["bootstrap"=>new Ajax\Semantic()]);The JsUtils singleton can then be injected into controllers
namespace app\controllers;
use yii\web\Controller;
use Ajax\php\yii\JsUtils;
class SiteController extends Controller{
protected $jquery;
public function __construct($id, $module,JsUtils $js){
parent::__construct($id, $module);
$this->jquery=$js;
}
}
If you do not use the Composer autoloader file, you can also load phpMv-UI with Ps4ClassLoader :
use Symfony\Component\ClassLoader\Psr4ClassLoader;
require __DIR__.'/lib/ClassLoader/Psr4ClassLoader.php';
$loader = new Psr4ClassLoader();
$loader->addPrefix('Ajax\\', __DIR__.'/lib/phpmv/php-mv-ui/Ajax');
$loader->register();Create a service inheriting from JquerySemantic
namespace App\Services\semantic;
use Ajax\php\symfony\JquerySemantic;
class SemanticGui extends JquerySemantic{
}Check that autowiring is activated in config/services.yml:
services:
# default configuration for services in *this* file
_defaults:
autowire: true # Automatically injects dependencies in your services.You can then use dependency injection on properties, constructors or setters:
namespace App\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use App\Services\semantic\SemanticGui;
BarController extends AbstractController{
/**
* @var SemanticGui
*/
protected $gui;
public function loadViewWithAjaxButtonAction(){
$bt=$this->gui->semantic()->htmlButton('button1','a button');
$bt->getOnClick("/url",'#responseElement');
return $this->gui->renderView("barView.html.twig");
}
}Create 2 services in the app/config/services.yml file :
- The first for the JsUtils instance
- The second for the controller
parameters:
jquery.params:
semantic: true
services:
jquery:
class: Ajax\php\symfony\JsUtils
arguments: [%jquery.params%,'@router']
scope: request
app.default_controller:
class: AppBundle\Controller\DefaultController
arguments: ['@service_container','@jquery']It is then possible to inject the Symfony container and the JsUtils service in the controller constructor :
namespace AppBundle\Controller;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\DependencyInjection\ContainerInterface;
use Ajax\php\symfony\JsUtils;
use AppBundle\AppBundle;
/**
* @Route(service="app.default_controller")
*/
class DefaultController extends Controller{
/**
* @var Ajax\php\symfony\JsUtils
*/
protected $jquery;
public function __construct(ContainerInterface $container,JsUtils $js){
$this->container=$container;
$this->jquery= $js;
}
}
Copy the file JsUtilsComponent.php located in vendor/phpmv/php-mv-ui/Ajax/php/cakephp to the src/controller/component folder of your project
Add the JsUtils component loading in the initialize method of the base controller AppController, located in src/controller/appController.php
public function initialize(){
parent::initialize();
$this->loadComponent('RequestHandler');
$this->loadComponent('Flash');
$this->loadComponent('JsUtils',["semantic"=>true]);
}the jquery object in controller will be accessible on
$this->JsUtils->jquery
With most IDEs (such as Eclipse or phpStorm), to get code completion on the $jquery instance, you must add the following property in the controller documentation:
/**
* @property Ajax\JsUtils $jquery
*/
class MyController{
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent