phpMv UI

適用於 php 和 php MVC 框架的視覺化元件庫（JQuery UI、Twitter Bootstrap、Semantic-UI）

phpMv-UI 網站

什麼是 phpMv-UI ？

phpMv-UI 是 php 的視覺化元件庫：jQuery 和 UI 元件（jQuery、Twitter Bootstrap、Semantic-UI）的 php 包裝器。

使用依賴注入，可以將 jQuery 物件注入到php 框架容器中，從而允許在控制器中產生 jQuery 腳本，尊重 MVC 設計模式。

要求/依賴關係

• PHP >= 7.0
• jQuery >= 2.0.3
• JQuery UI >= 1.10 [可選]
• Twitter Bootstrap >= 3.3.2 [可選]
• 語意 UI >= 2.2 或語意 UI >= 2.7 [可選]

資源

• 應用程式介面
• 文檔/演示
• 語意 ui 語意 ui

一、安裝

透過 Composer 安裝

在公共位置或專案中安裝 Composer：

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

在app目錄下建立composer.json文件，如下：

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

在應用程式目錄中，執行composer安裝程式：

php composer.phar install

透過 Github 安裝

只需將存儲庫克隆到公共位置或項目內即可：

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

二、PHP框架配置

庫載入

phpMv-UI 符合自動載入類別的 PSR-4 建議。無論使用什麼php框架，使用“composer”，整合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 ;
	}
}

Phalcon配置

庫載入

如果沒有 Composer，可以使用app/config/loader.php檔案載入函式庫：

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

服務的注入

有必要在應用程式啟動時在服務檔案app/config/services.php中註入 JQuery 服務，並在必要時實例化 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 使用 Composer 自動載入器，只需將$config['composer_autoload']設定為TRUE或application/config/config.php中的自訂路徑。

然後，需要為 JsUtils 類別建立一個庫

圖書館創建

在資料夾application/libraries中建立庫XsUtils （名稱隨意）

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

服務的注入

在檔案application/config/autoload.php中加入XsUtils函式庫的載入

jquery 成員將可以在控制器中存取

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

載入後，您可以使用$jquery成員在控制器中存取您的類別：

 $ this -> jquery -> some_method ();

Laravel 配置

庫載入

如果您不使用 Composer 自動載入器文件，您也可以使用 Composer.json 載入 phpMv-UI ：

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

服務的注入

在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 套件中的類別。確保應用程式的入口腳本包含以下行來安裝 Composer 自動載入器：

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

在同一文件中，註冊一個新的依賴項：

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

服務的注入

然後可以將JsUtils單例注入到控制器中

 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 配置

庫載入

如果您不使用 Composer 自動載入器文件，您也可以使用 Ps4ClassLoader 載入 phpMv-UI ：

 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

服務的注入

在app/config/services.yml檔案中建立 2 個服務：

• 第一個用於 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配置

組件創建

將位於vendor/phpmv/php-mv-ui/Ajax/php/cakephp中的檔案JsUtilsComponent.php複製到專案的src/controller/component資料夾中

控制器中的元件加載

在基本控制器AppController的初始化方法中加入JsUtils元件加載，位於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{
}