phpMv UI

ไลบรารีส่วนประกอบภาพ (JQuery UI, Twitter Bootstrap, Semantic-UI) สำหรับเฟรมเวิร์ก php และ php MVC

เว็บไซต์ phpMv-UI

phpMv-UI คืออะไร

phpMv-UI เป็นไลบรารีส่วนประกอบภาพสำหรับ php : wrapper php สำหรับส่วนประกอบ jQuery และ UI (jQuery, Twitter Bootstrap, Semantic-UI)

เมื่อใช้การฉีดขึ้นต่อกัน ทำให้วัตถุ jQuery สามารถถูกฉีดเข้าไปใน คอนเทนเนอร์เฟรมเวิร์ก php ได้ ซึ่งช่วยให้สามารถสร้างสคริปต์ jQuery ในตัวควบคุม โดยคำนึงถึงรูปแบบการออกแบบ MVC

ข้อกำหนด/การพึ่งพา

• PHP >= 7.0
• เจคิวรี >= 2.0.3
• JQuery UI >= 1.10 [ตัวเลือก]
• Bootstrap ของ Twitter >= 3.3.2 [ตัวเลือก]
• Semantic-UI >= 2.2 หรือ Fomantic-UI >= 2.7 [ตัวเลือก]

ทรัพยากร

• เอพีไอ
• เอกสาร/การสาธิต
• Semantic-ui Fomantic-ui

ฉัน - การติดตั้ง

การติดตั้งผ่าน Composer

ติดตั้ง Composer ในตำแหน่งทั่วไปหรือในโปรเจ็กต์ของคุณ:

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

สร้างไฟล์ composer.json ในไดเร็กทอรีของแอปดังนี้:

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

ในไดเร็กทอรีแอป ให้รันโปรแกรมติดตั้ง composer :

php composer.phar install

การติดตั้งผ่าน Github

เพียงโคลนพื้นที่เก็บข้อมูลในตำแหน่งทั่วไปหรือภายในโปรเจ็กต์ของคุณ:

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

II การกำหนดค่าเฟรมเวิร์ก PHP

กำลังโหลดห้องสมุด

phpMv-UI สอดคล้องกับคำแนะนำ PSR-4 สำหรับคลาสการโหลดอัตโนมัติ ไม่ว่าเฟรมเวิร์ก php จะใช้อะไรก็ตาม กับ "ผู้แต่ง" ก็เพียงพอแล้วที่จะรวมไฟล์ออโต้โหลดของ Composer

 require_once ( " vendor/autoload.php " );

การกำหนดค่าความแพร่หลาย

กำลังโหลดห้องสมุด

ไลบรารีถูกโหลดตามค่าเริ่มต้นในไฟล์กำหนดค่า app/config/config.php :

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

ใช้ในคอนโทรลเลอร์

ตัวอย่างการสร้างปุ่ม Semantic-UI

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

การกำหนดค่าเหยี่ยว

กำลังโหลดห้องสมุด

หากไม่มี Composer ก็เป็นไปได้ที่จะโหลดไลบรารี่ด้วยไฟล์ app/config/loader.php :

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

การฉีดบริการ

จำเป็นต้องฉีดบริการ JQuery เมื่อเริ่มต้นแอปพลิเคชัน ในไฟล์บริการ app/config/services.php และหากจำเป็น ให้สร้างอินสแตนซ์ Semantic, Bootstrap หรือ Jquery-ui :

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

ใช้ในคอนโทรลเลอร์

ตัวอย่างการสร้างปุ่ม 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 ;
	}
}

การกำหนดค่า CodeIgniter

กำลังโหลดห้องสมุด

หากคุณต้องการให้ CodeIgniter ใช้ตัวโหลดอัตโนมัติของ Composer เพียงตั้งค่า $config['composer_autoload'] เป็น TRUE หรือเส้นทางที่กำหนดเองใน application/config/config.php

จากนั้นจึงจำเป็นต้องสร้างไลบรารี่สำหรับคลาส JsUtils

การสร้างห้องสมุด

สร้างไลบรารี XsUtils (ชื่อฟรี) ในโฟลเดอร์ แอปพลิเคชัน/ไลบรารี

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

การฉีดบริการ

เพิ่มการโหลดไลบรารี XsUtils ในไฟล์ application/config/autoload.php

สมาชิก jquery จะสามารถเข้าถึงได้ในคอนโทรลเลอร์

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

เมื่อโหลดแล้ว คุณจะสามารถเข้าถึงคลาสของคุณในคอนโทรลเลอร์โดยใช้สมาชิก $jquery :

 $ this -> jquery -> some_method ();

การกำหนดค่า Laravel

กำลังโหลดห้องสมุด

หากคุณไม่ได้ใช้ไฟล์ Composer autoloader คุณสามารถโหลด phpMv-UI ด้วย composer.json :

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

การฉีดบริการ

ลงทะเบียน Singleton ในไฟล์ 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 ;
});

จากนั้นจึงเป็นไปได้ที่จะฉีดคลาส JsUtils ในตัวสร้างตัวควบคุมคลาสพื้นฐาน:

 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

กำลังโหลดห้องสมุด

คลาสในแพ็คเกจ Composer ที่ติดตั้งสามารถโหลดอัตโนมัติได้โดยใช้ Composer autoloader ตรวจสอบให้แน่ใจว่าสคริปต์รายการแอปพลิเคชันของคุณมีบรรทัดต่อไปนี้เพื่อติดตั้งตัวโหลดอัตโนมัติของ Composer:

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

ในไฟล์เดียวกัน ให้ลงทะเบียนการขึ้นต่อกันใหม่ :

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

การฉีดบริการ

JsUtils singleton สามารถถูกฉีดเข้าไปในคอนโทรลเลอร์ได้

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

การกำหนดค่าซิมโฟนี

กำลังโหลดห้องสมุด

หากคุณไม่ได้ใช้ไฟล์ Composer autoloader คุณยังสามารถโหลด phpMv-UI ด้วย 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 ();

ซิมโฟนี 4

สร้างบริการที่สืบทอดมาจาก JquerySemantic

 namespace App  Services  semantic ;

use Ajax  php  symfony  JquerySemantic ;

class SemanticGui extends JquerySemantic{
}

ตรวจสอบว่าเปิดใช้งานการเดินสายอัตโนมัติใน config/services.yml :

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

จากนั้นคุณสามารถใช้การพึ่งพาการฉีดกับคุณสมบัติ ตัวสร้าง หรือตัวตั้งค่า:

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

ซิมโฟนี 3

การฉีดบริการ

สร้าง 2 บริการในไฟล์ app/config/services.yml :

• ครั้งแรกสำหรับอินสแตนซ์ JsUtils
• ประการที่สองสำหรับตัวควบคุม

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

จากนั้นจึงเป็นไปได้ที่จะฉีดคอนเทนเนอร์ Symfony และบริการ JsUtils ในตัวสร้างคอนโทรลเลอร์:

 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

การสร้างส่วนประกอบ

คัดลอกไฟล์ JsUtilsComponent.php ที่อยู่ใน vendor/phpmv/php-mv-ui/Ajax/php/cakephp ไปยังโฟลเดอร์ src/controller/component ของโปรเจ็กต์ของคุณ

กำลังโหลดส่วนประกอบในคอนโทรลเลอร์

เพิ่มการโหลดส่วนประกอบ JsUtils ในวิธีการเริ่มต้นของตัวควบคุมฐาน AppController ซึ่งอยู่ใน src/controller/appController.php

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

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

การใช้งาน

วัตถุ jquery ในคอนโทรลเลอร์จะสามารถเข้าถึงได้บน $this->JsUtils->jquery

การเติมโค้ดให้สมบูรณ์ใน IDE

ด้วย IDE ส่วนใหญ่ (เช่น Eclipse หรือ phpStorm) เพื่อให้โค้ดสมบูรณ์บนอินสแตนซ์ $jquery คุณต้องเพิ่มคุณสมบัติต่อไปนี้ในเอกสารประกอบของคอนโทรลเลอร์:

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