phpMv UI

Visuelle Komponentenbibliothek (JQuery UI, Twitter Bootstrap, Semantic-UI) für PHP- und PHP-MVC-Frameworks

phpMv-UI-Website

Was ist phpMv-UI?

phpMv-UI ist eine visuelle Komponentenbibliothek für PHP: ein PHP-Wrapper für jQuery- und UI-Komponenten (jQuery, Twitter Bootstrap, Semantic-UI).

Mithilfe der Abhängigkeitsinjektion kann das jQuery-Objekt in den PHP-Framework-Container eingefügt werden, wodurch die Generierung von jQuery-Skripten in Controllern unter Berücksichtigung des MVC-Entwurfsmusters ermöglicht wird.

Anforderungen/Abhängigkeiten

• PHP >= 7.0
• JQuery >= 2.0.3
• JQuery-Benutzeroberfläche >= 1.10 [optional]
• Twitter Bootstrap >= 3.3.2 [optional]
• Semantic-UI >= 2.2 oder Fomantic-UI >= 2.7 [optional]

Ressourcen

• API
• Dokumentation/Demo
• Semantische Benutzeroberfläche Fomantische Benutzeroberfläche

I - Installation

Installation über Composer

Installieren Sie Composer an einem gemeinsamen Speicherort oder in Ihrem Projekt:

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

Erstellen Sie die Datei „composer.json“ im App-Verzeichnis wie folgt:

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

Führen Sie im App-Verzeichnis das Composer-Installationsprogramm aus:

php composer.phar install

Installation über Github

Klonen Sie das Repository einfach an einem gemeinsamen Speicherort oder in Ihrem Projekt:

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

II Konfiguration des PHP-Frameworks

Laden der Bibliothek

phpMv-UI entspricht den PSR-4-Empfehlungen für das automatische Laden von Klassen. Unabhängig vom verwendeten PHP-Framework reicht es bei „Composer“ aus, die Composer-Autoload-Datei einzubinden.

 require_once ( " vendor/autoload.php " );

Ubiquity-Konfiguration

Laden der Bibliothek

Die Bibliothek ist standardmäßig bereits in der Konfigurationsdatei app/config/config.php geladen:

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

Verwendung in Controllern

Beispiel für die Erstellung einer Semantic-UI-Schaltfläche

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

Phalcon-Konfiguration

Laden der Bibliothek

Ohne Composer ist es möglich, die Bibliothek mit der Datei app/config/loader.php zu laden:

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

Injektion des Dienstes

Es ist notwendig, den JQuery-Dienst beim Anwendungsstart in die Dienstdatei app/config/services.php einzufügen und bei Bedarf Semantic, Bootstrap oder Jquery-ui zu instanziieren:

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

Verwendung in Controllern

Beispiel für die Erstellung einer Semantic-UI-Schaltfläche

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

CodeIgniter-Konfiguration

Laden der Bibliothek

Wenn Sie möchten, dass CodeIgniter einen Composer-Autoloader verwendet, setzen Sie einfach $config['composer_autoload'] auf TRUE oder einen benutzerdefinierten Pfad in application/config/config.php .

Anschließend muss eine Bibliothek für die JsUtils-Klasse erstellt werden

Bibliothekserstellung

Erstellen Sie die Bibliothek XsUtils (der Name ist frei) im Ordner application/libraries

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

Injektion des Dienstes

Fügen Sie das Laden der XsUtils -Bibliothek in der Datei application/config/autoload.php hinzu

Auf das JQuery-Mitglied kann in den Controllern zugegriffen werden

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

Nach dem Laden können Sie mit dem $jquery- Member auf Ihre Klasse in Controllern zugreifen:

 $ this -> jquery -> some_method ();

Laravel-Konfiguration

Laden der Bibliothek

Wenn Sie die Composer-Autoloader-Datei nicht verwenden, können Sie phpMv-UI auch mit Composer.json laden:

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

Injektion des Dienstes

Registrieren Sie einen Singleton in der Datei „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 ;
});

Dann ist es möglich, die JsUtils -Klasse in den Konstruktor des Basisklassen-Controllers einzufügen:

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

Yii-Konfiguration

Laden der Bibliothek

Die Klassen in den installierten Composer-Paketen können mit dem Composer-Autoloader automatisch geladen werden. Stellen Sie sicher, dass das Eingabeskript Ihrer Anwendung die folgenden Zeilen enthält, um den Composer-Autoloader zu installieren:

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

Registrieren Sie in derselben Datei eine neue Abhängigkeit:

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

Injektion des Dienstes

Der JsUtils- Singleton kann dann in Controller eingefügt werden

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

Symfony-Konfiguration

Laden der Bibliothek

Wenn Sie die Composer-Autoloader-Datei nicht verwenden, können Sie phpMv-UI auch mit Ps4ClassLoader laden:

 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

Erstellen Sie einen Dienst, der von JquerySemantic erbt

 namespace App  Services  semantic ;

use Ajax  php  symfony  JquerySemantic ;

class SemanticGui extends JquerySemantic{
}

Überprüfen Sie, ob Autowiring in config/services.yml aktiviert ist:

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

Anschließend können Sie die Abhängigkeitsinjektion für Eigenschaften, Konstruktoren oder Setter verwenden:

 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

Injektion des Dienstes

Erstellen Sie zwei Dienste in der Datei app/config/services.yml :

• Der erste für die JsUtils-Instanz
• Der zweite für den Controller

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

Anschließend ist es möglich, den Symfony-Container und den JsUtils-Dienst in den Controller-Konstruktor einzufügen:

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

CakePHP-Konfiguration

Komponentenerstellung

Kopieren Sie die Datei JsUtilsComponent.php aus Vendor/phpmv/php-mv-ui/Ajax/php/cakephp in den Ordner src/controller/component Ihres Projekts

Laden von Komponenten in Controller

Fügen Sie die JsUtils- Komponente hinzu, die in der Initialisierungsmethode des Basiscontrollers AppController geladen wird, der sich in src/controller/appController.php befindet

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

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

Verwendung

Auf das JQuery-Objekt im Controller kann über $this->JsUtils->jquery zugegriffen werden

Code-Vervollständigung in der IDE

Bei den meisten IDEs (wie Eclipse oder phpStorm) müssen Sie die folgende Eigenschaft in der Controller-Dokumentation hinzufügen, um die Code-Vervollständigung auf der $jquery Instanz zu erhalten:

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