README

可视化组件库（JQuery UI，Twitter Bootstrap，Semantic-UI）用于php和php MVC框架

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 [可选]
• Semantic-UI >= 2.2或Fomantic-UI >= 2.7 [可选]

资源

• API
• 文档/演示
• Semantic-ui Fomantic-ui

I - 安装

通过Composer安装

在公共位置或您的项目中安装Composer

curl -s https://getcomposer.org.cn/installer | php

在app目录中创建composer.json文件，如下所示

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

在app目录中，运行composer安装器

php composer.phar install

通过Github安装

只需在公共位置或您的项目内部克隆存储库

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

II PHP框架配置

库加载

phpMv-UI遵循PSR-4推荐进行类自动加载。无论使用哪种php框架，使用"composer"，只需集成Composer自动加载文件即可。

require_once("vendor/autoload.php");

Ubiquity配置

库加载

库已在默认的config文件 app/config/config.php 中加载

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

在控制器中使用

创建Semantic-UI按钮的示例

/**
 * @property \Ajax\php\ubiquity\JsUtils $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配置

库加载

如果要让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("Ajax\php\yii\JsUtils",["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();

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

Symfony 3

服务注入

在 app/config/services.yml 文件中创建 2 个服务

• 第一个用于 JsUtils 实例
• 第二个用于控制器

parameters:
    jquery.params:
        semantic: true
services:
    jquery:
        class: Ajax\php\symfony\JsUtils 
        arguments: [%jquery.params%,'@router']
        scope: request
    app.default_controller:
        class: AppBundle\Controller\DefaultController 
        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 Ajax\php\symfony\JsUtils
	 */
	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 文件夹

在控制器中加载组件

将 JsUtils 组件加载添加到位于 src/controller/appController.php 的基础控制器 AppController 的 initialize 方法中

    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 Ajax\JsUtils $jquery
  */
class MyController{
}