适用于 php 和 php MVC 框架的可视化组件库(JQuery UI、Twitter Bootstrap、Semantic-UI)
phpMv-UI 网站
phpMv-UI 是 php 的可视化组件库:jQuery 和 UI 组件(jQuery、Twitter Bootstrap、Semantic-UI)的 php 包装器。
使用依赖注入,可以将 jQuery 对象注入到php 框架容器中,从而允许在控制器中生成 jQuery 脚本,尊重 MVC 设计模式。
在公共位置或项目中安装 Composer:
curl -s http://getcomposer.org/installer | php
在app目录下创建composer.json文件,如下:
{
"require" : {
"phpmv/php-mv-ui" : " ^2.3 "
}
}
在应用程序目录中,运行composer安装程序:
php composer.phar install
只需将存储库克隆到公共位置或项目内即可:
git clone https://github.com/phpMv/phpMv-UI.git
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 ;
}
}
如果没有 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 ();
如果您不使用 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 ;
}
}
可以使用 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 ;
}
}
如果您不使用 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 ();
创建一个继承自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 " );
}
}
在app/config/services.yml文件中创建 2 个服务:
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 ;
}
}
将位于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(例如 Eclipse 或 phpStorm),要在$jquery
实例上完成代码,您必须在控制器文档中添加以下属性:
/**
* @property AjaxJsUtils $jquery
*/
class MyController{
}