phpMv UI

Bibliothèque de composants visuels (JQuery UI, Twitter Bootstrap, Semantic-UI) pour les frameworks php et php MVC

Site Web phpMv-UI

Qu'est-ce que phpMv-UI ?

phpMv-UI est une bibliothèque de composants visuels pour php : un wrapper php pour les composants jQuery et UI (jQuery, Twitter Bootstrap, Semantic-UI).

Grâce à l'injection de dépendances, l'objet jQuery peut être injecté dans le conteneur du framework php , permettant la génération de scripts jQuery dans les contrôleurs, respectant le modèle de conception MVC.

Exigences/dépendances

• PHP >= 7.0
• JQuery >= 2.0.3
• Interface utilisateur JQuery >= 1.10 [facultatif]
• Twitter Bootstrap >= 3.3.2 [facultatif]
• Semantic-UI >= 2.2 ou Fomantic-UI >= 2.7 [facultatif]

Ressources

• API
• Documentation/démo
• Interface utilisateur sémantique Interface utilisateur fomantique

I-Installation

Installation via Composer

Installez Composer dans un emplacement commun ou dans votre projet :

curl -s http://getcomposer.org/installer | php

Créez le fichier composer.json dans le répertoire de l'application comme suit :

{
    "require" : {
        "phpmv/php-mv-ui" : " ^2.3 "
    }
}

Dans le répertoire de l'application, exécutez le programme d'installation du compositeur :

php composer.phar install

Installation via Github

Clonez simplement le référentiel dans un emplacement commun ou dans votre projet :

 git clone https://github.com/phpMv/phpMv-UI.git

Configuration des frameworks PHP II

Chargement de la bibliothèque

phpMv-UI est conforme aux recommandations PSR-4 pour les classes à chargement automatique. Quel que soit le framework php utilisé, avec "composer", il suffit d'intégrer le fichier autoload Composer.

 require_once ( " vendor/autoload.php " );

Configuration de l'ubiquité

Chargement de la bibliothèque

La bibliothèque est déjà chargée par défaut dans le fichier de config app/config/config.php :

	" di " => array (
			" @exec " => array ( " jquery " => function ( $ controller ){
						return  Ajax  php  ubiquity JsUtils:: diSemantic ( $ controller );
					})
			),

Utilisation dans les contrôleurs

Exemple de création d'un bouton Semantic-UI

 /**
 * @property AjaxphpubiquityJsUtils $jquery
 */
class ExempleController extends Controller{
	public function index (){
		$ semantic = $ this -> jquery -> semantic ();
		$ button = $ semantic -> htmlButton ( " btTest " , " Test Button " );
		echo $ button ;
	}
}

Configuration Phalcon

Chargement de la bibliothèque

Sans Composer, il est possible de charger la bibliothèque avec le fichier app/config/loader.php :

 $ loader = new  Phalcon  Loader ();
$ loader -> registerNamespaces ( array (
		' Ajax ' => __DIR__ . ' /../vendor/phpmv/php-mv-ui/Ajax/ '
))-> register ();

Injection du service

Il faut injecter le service JQuery au démarrage de l'application, dans le fichier du service app/config/services.php , et si besoin instancier Semantic, Bootstrap ou Jquery-ui :

 $ di -> set ( " jquery " , function (){
    $ jquery = new Ajax  php  phalcon  JsUtils ();
    $ jquery -> semantic ( new Ajax  Semantic ()); //for Semantic UI
    return $ jquery ;
});

Utilisation dans les contrôleurs

Exemple de création d'un bouton Semantic-UI

 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 ;
	}
}

Configuration de CodeIgniter

Chargement de la bibliothèque

Si vous souhaitez que CodeIgniter utilise un chargeur automatique Composer, définissez simplement $config['composer_autoload'] sur TRUE ou un chemin personnalisé dans application/config/config.php .

Ensuite, il faut créer une bibliothèque pour la classe JsUtils

Création de bibliothèque

Créez la bibliothèque XsUtils (le nom est libre) dans le dossier application/libraries

 use Ajax  php  ci  JsUtils ;
class XsUtils extends Ajax  php  ci JsUtils{
	public function __construct (){
		parent :: __construct ([ " semantic " => true , " debug " => false ]);
	}
}

Injection du service

Ajouter le chargement de la bibliothèque XsUtils dans le fichier application/config/autoload.php

Le membre jquery sera accessible dans les contrôleurs

 $ autoload [ ' libraries ' ] = array ( ' XsUtils ' => ' jquery ' );

Une fois chargé, vous pouvez accéder à votre classe dans les contrôleurs en utilisant le membre $jquery :

 $ this -> jquery -> some_method ();

Configuration de Laravel

Chargement de la bibliothèque

Si vous n'utilisez pas le fichier autoloader Composer, vous pouvez également charger phpMv-UI avec composer.json :

 "autoload" : {
    "classmap" : [
        ...
    ],
    "psr-4" : {
        "Ajax \ " : " vendor/phpmv/php-mv-ui/Ajax "
    }
},

Injection du service

Enregistrez un Singleton dans le fichier bootstrap/app.php :

 $ app -> singleton ( Ajax  php  laravel JsUtils::class, function ( $ app ){
	$ result = new Ajax  php  laravel  JsUtils ();
	$ result -> semantic ( new Ajax  Semantic ());
	return $ result ;
});

Ensuite il est possible d'injecter la classe JsUtils dans le constructeur des contrôleurs de classe de base :

 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 ;
    }
}

Configuration Yii

Chargement de la bibliothèque

Les classes des packages Composer installés peuvent être chargées automatiquement à l'aide du chargeur automatique Composer. Assurez-vous que le script d'entrée de votre application contient les lignes suivantes pour installer le chargeur automatique Composer :

 require ( __DIR__ . ' /../vendor/autoload.php ' );
require ( __DIR__ . ' /../vendor/yiisoft/yii2/Yii.php ' );

Dans le même fichier, enregistrez une nouvelle dépendance :

Yii:: $ container -> setSingleton ( " AjaxphpyiiJsUtils " ,[ " bootstrap " => new Ajax  Semantic ()]);

Injection du service

Le singleton JsUtils peut ensuite être injecté dans les contrôleurs

 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 ;
	}
}

Configuration Symfony

Chargement de la bibliothèque

Si vous n'utilisez pas le fichier autoloader Composer, vous pouvez également charger phpMv-UI avec 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 ();

Symfony 4

Créer un service héritant de JquerySemantic

 namespace App  Services  semantic ;

use Ajax  php  symfony  JquerySemantic ;

class SemanticGui extends JquerySemantic{
}

Vérifiez que l'autowiring est activé dans config/services.yml :

 services :
    # default configuration for services in *this* file
    _defaults :
        autowire : true      # Automatically injects dependencies in your services.

Vous pouvez ensuite utiliser l'injection de dépendances sur des propriétés, des constructeurs ou des 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 " );
    }
}

Symfony 3

Injection du service

Créez 2 services dans le fichier app/config/services.yml :

• Le premier pour l'instance JsUtils
• Le deuxième pour le contrôleur

 parameters :
    jquery.params :
        semantic : true
services :
    jquery :
        class : AjaxphpsymfonyJsUtils 
        arguments : [%jquery.params%,'@router']
        scope : request
    app.default_controller :
        class : AppBundleControllerDefaultController 
        arguments : ['@service_container','@jquery']

Il est alors possible d'injecter le conteneur Symfony et le service JsUtils dans le constructeur du contrôleur :

 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 AjaxphpsymfonyJsUtils
	 */
	protected $ jquery ;

	public function __construct ( ContainerInterface $ container , JsUtils $ js ){
		$ this -> container = $ container ;
		$ this -> jquery = $ js ;
	}
}

Configuration de CakePhp

Création de composants

Copiez le fichier JsUtilsComponent.php situé dans supplier/phpmv/php-mv-ui/Ajax/php/cakephp dans le dossier src/controller/component de votre projet

Chargement des composants dans les contrôleurs

Ajoutez le chargement du composant JsUtils dans la méthode initialize du contrôleur de base AppController , situé dans src/controller/appController.php

    public function initialize (){
        parent :: initialize ();

        $ this -> loadComponent ( ' RequestHandler ' );
        $ this -> loadComponent ( ' Flash ' );
        $ this -> loadComponent ( ' JsUtils ' ,[ " semantic " => true ]);
    }

Usage

l'objet jquery dans le contrôleur sera accessible sur $this->JsUtils->jquery

Complétion du code dans l'EDI

Avec la plupart des IDE (tels qu'Eclipse ou phpStorm), pour obtenir la complétion du code sur l'instance $jquery , vous devez ajouter la propriété suivante dans la documentation du contrôleur :

 /**
  * @property AjaxJsUtils $jquery
  */
class MyController{
}