phpMv UI
Callista 2.4.16 release
Visual components library (JQuery UI, Twitter Bootstrap, Semantic-UI) for php and php MVC frameworks
phpMv-UI website
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.
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 AjaxphpubiquityJsUtils::diSemantic($controller);
})
),Example of creating a Semantic-UI button
/**
* @property AjaxphpubiquityJsUtils $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 PhalconLoader();
$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 AjaxphpphalconJsUtils();
$jquery->semantic(new AjaxSemantic());//for Semantic UI
return $jquery;
});Example of creating a Semantic-UI button
use PhalconMvcController;
use AjaxphpphalconJsUtils;
/**
* @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 AjaxphpciJsUtils;
class XsUtils extends AjaxphpciJsUtils{
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(AjaxphplaravelJsUtils::class, function($app){
$result= new AjaxphplaravelJsUtils();
$result->semantic(new AjaxSemantic());
return $result;
});Then it is possible to inject the JsUtils class in the base class controllers constructor :
use AjaxphplaravelJsUtils;
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("AjaxphpyiiJsUtils",["bootstrap"=>new AjaxSemantic()]);The JsUtils singleton can then be injected into controllers
namespace appcontrollers;
use yiiwebController;
use AjaxphpyiiJsUtils;
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 SymfonyComponentClassLoaderPsr4ClassLoader;
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 AppServicessemantic;
use AjaxphpsymfonyJquerySemantic;
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 AppController;
use SymfonyBundleFrameworkBundleControllerAbstractController;
use AppServicessemanticSemanticGui;
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 :
parameters:
jquery.params:
semantic: true
services:
jquery:
class: AjaxphpsymfonyJsUtils
arguments: [%jquery.params%,'@router']
scope: request
app.default_controller:
class: AppBundleControllerDefaultController
arguments: ['@service_container','@jquery']It is then possible to inject the Symfony container and the JsUtils service in the controller constructor :
namespace AppBundleController;
use SensioBundleFrameworkExtraBundleConfigurationRoute;
use SymfonyBundleFrameworkBundleControllerController;
use SymfonyComponentDependencyInjectionContainerInterface;
use AjaxphpsymfonyJsUtils;
use AppBundleAppBundle;
/**
* @Route(service="app.default_controller")
*/
class DefaultController extends Controller{
/**
* @var AjaxphpsymfonyJsUtils
*/
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 AjaxJsUtils $jquery
*/
class MyController{
}
