php および php MVC フレームワーク用のビジュアル コンポーネント ライブラリ(JQuery UI、Twitter Bootstrap、Semantic-UI)
phpMv-UI Webサイト
phpMv-UI は、php のビジュアル コンポーネント ライブラリです。jQuery および UI コンポーネント (jQuery、Twitter Bootstrap、Semantic-UI) の php ラッパーです。
依存関係注入を使用すると、jQuery オブジェクトをphp フレームワーク コンテナーに注入でき、MVC 設計パターンを尊重してコントローラーで jQuery スクリプトを生成できるようになります。
Composer を共通の場所またはプロジェクトにインストールします。
curl -s http://getcomposer.org/installer | php
次のように、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 ();
アプリケーションの起動時に 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 で 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フォルダーにコピーします。
src/controller/appController.phpにあるベース コントローラーAppControllerの初期化メソッドにロードするJsUtilsコンポーネントを追加します。
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{
}