Clever Geek Handbook

xtDojoPlugin。 dojoとsymfonyフレームワークを組み合わせる

こんにちは、％ユーザー名％。


symfony + dojo =？



symfonyフレームワークバージョン1.2 以降のxtDojoPluginを紹介します。 プラグインを使用すると、symfonyフレームワークで記述されたプロジェクトでdojo機能を使用できます。 このプラグインを作成するアイデアは、symfonyのWebサイトで見つかったソリューションが私の要件を満たさなかった後に生まれました。 2つのdgDojoPluginおよびsfDojoPluginプラグインが公式Webサイトで見つかりました。



利用可能なオプションを簡単に見てみましょう。



dgDojoPluginから始めましょう。 このプラグインはいくつかの理由で私には向いていませんでしたが、主なものはウィジェットを表示するためのヘルパーとクラスの使用です。 一方で、便利なように思えるかもしれませんが、もちろん、たくさんのdojo属性を覚える必要はありませんが、一方で、テンプレート内のPHPコードが多すぎるので、常に良いとは限りません。 たとえば、BorderContainerと2つのContentPaneを表示するコードは次のとおりです。

  1. <?php echo dojo_border ( array ( 'design' => 'headline' , 'liveSplitters' => 'true' ) ) ?> <?php echo dojo_content_pane ( 'The Title' , array ( 'region' => 'top' , 'minSize' => 50 , 'splitter' => 'true' , 'style' => 'height: 50px;' ) ) ?> < h1 > I'm content! < / h1 > < / div > <?php echo dojo_content_pane ( 'Another Pane' , array ( 'region' => 'center' ) ) ?> < h1 > I'm more content! < / h1 > < / div > < / div >



  2. <?php echo dojo_border ( array ( 'design' => 'headline' , 'liveSplitters' => 'true' ) ) ?> <?php echo dojo_content_pane ( 'The Title' , array ( 'region' => 'top' , 'minSize' => 50 , 'splitter' => 'true' , 'style' => 'height: 50px;' ) ) ?> < h1 > I'm content! < / h1 > < / div > <?php echo dojo_content_pane ( 'Another Pane' , array ( 'region' => 'center' ) ) ?> < h1 > I'm more content! < / h1 > < / div > < / div >



  3. <?php echo dojo_border ( array ( 'design' => 'headline' , 'liveSplitters' => 'true' ) ) ?> <?php echo dojo_content_pane ( 'The Title' , array ( 'region' => 'top' , 'minSize' => 50 , 'splitter' => 'true' , 'style' => 'height: 50px;' ) ) ?> < h1 > I'm content! < / h1 > < / div > <?php echo dojo_content_pane ( 'Another Pane' , array ( 'region' => 'center' ) ) ?> < h1 > I'm more content! < / h1 > < / div > < / div >



  4. <?php echo dojo_border ( array ( 'design' => 'headline' , 'liveSplitters' => 'true' ) ) ?> <?php echo dojo_content_pane ( 'The Title' , array ( 'region' => 'top' , 'minSize' => 50 , 'splitter' => 'true' , 'style' => 'height: 50px;' ) ) ?> < h1 > I'm content! < / h1 > < / div > <?php echo dojo_content_pane ( 'Another Pane' , array ( 'region' => 'center' ) ) ?> < h1 > I'm more content! < / h1 > < / div > < / div >



  5. <?php echo dojo_border ( array ( 'design' => 'headline' , 'liveSplitters' => 'true' ) ) ?> <?php echo dojo_content_pane ( 'The Title' , array ( 'region' => 'top' , 'minSize' => 50 , 'splitter' => 'true' , 'style' => 'height: 50px;' ) ) ?> < h1 > I'm content! < / h1 > < / div > <?php echo dojo_content_pane ( 'Another Pane' , array ( 'region' => 'center' ) ) ?> < h1 > I'm more content! < / h1 > < / div > < / div >



  6. <?php echo dojo_border ( array ( 'design' => 'headline' , 'liveSplitters' => 'true' ) ) ?> <?php echo dojo_content_pane ( 'The Title' , array ( 'region' => 'top' , 'minSize' => 50 , 'splitter' => 'true' , 'style' => 'height: 50px;' ) ) ?> < h1 > I'm content! < / h1 > < / div > <?php echo dojo_content_pane ( 'Another Pane' , array ( 'region' => 'center' ) ) ?> < h1 > I'm more content! < / h1 > < / div > < / div >



  7. <?php echo dojo_border ( array ( 'design' => 'headline' , 'liveSplitters' => 'true' ) ) ?> <?php echo dojo_content_pane ( 'The Title' , array ( 'region' => 'top' , 'minSize' => 50 , 'splitter' => 'true' , 'style' => 'height: 50px;' ) ) ?> < h1 > I'm content! < / h1 > < / div > <?php echo dojo_content_pane ( 'Another Pane' , array ( 'region' => 'center' ) ) ?> < h1 > I'm more content! < / h1 > < / div > < / div >



  8. <?php echo dojo_border ( array ( 'design' => 'headline' , 'liveSplitters' => 'true' ) ) ?> <?php echo dojo_content_pane ( 'The Title' , array ( 'region' => 'top' , 'minSize' => 50 , 'splitter' => 'true' , 'style' => 'height: 50px;' ) ) ?> < h1 > I'm content! < / h1 > < / div > <?php echo dojo_content_pane ( 'Another Pane' , array ( 'region' => 'center' ) ) ?> < h1 > I'm more content! < / h1 > < / div > < / div >





このようなパターンを理解するのは非常に難しいことをデザイナーに伝えることに多くの人が同意すると思います。



sfDojoPluginに進みましょう。 このプラグインは、私を喜ばせたとしましょう。 JSとCSSを自動的に接続してバージョン管理するためのフィルター、コンソールを介してプラグインを使用して特定の操作を実行するためのコンソールタスク、およびdojoの動作を担当するクラスがいくつかありました。 残念ながら、これでは十分ではありませんでした。 たとえば、上記のプラグインと同じコードのセクションを提供します。

  1. < div dojotype = "dijit.layout.BorderContainer" design = "headline" liveSplitters = "true" >
  2. < div dojoType = "dijit.layout.ContentPane" title = "The Title" region = "top" minSize = "50 " split = "true" style = "height：50px;" >
  3. < h1 >私は満足しています！ < / h1 >
  4. < / div >
  5. < div dojoType = "dijit.layout.ContentPane" title = "Another Pane" region = "center" >
  6. < h1 >もっと満足です！ < / h1 >
  7. < / div >
  8. < / div >


このコードは、レイアウト設計者が理解しやすくなります。 しかし、私の意見では、これも非常に正しい決定ではありません。



したがって、自分にふさわしいものを見つけられなかったので（私は主張しませんが、見た目がひどかったかもしれません）、すべての要件を満たすプラグインを作成することにしました。 以下の主要な目標が設定されました。 そのため、プラグインは以下を行う必要があります。



すべての目標と欲望を設定した後、プラグインの作業が始まりましたが、この時点でほぼ終了していました。 プラグインは、公開前にすぐに表示されるように、最後のテストチェックに合格します。 すべての目標は完全または部分的に実現されました。 コードはいくつかの機能ブロックに分割されます。これらは設定（config）、ハンドラー（handler）、タスク（task）、フィルター（filter）、補助クラスのブロックです。 すべてを詳細に検討しましょう。

  1. 設定ブロックはメイン構成ファイルであり、dojo JSファイルへのすべてのパスといくつかの追加パラメーターが示されています
  2. ハンドラーブロック-ウィジェットを記述し、ウィジェットをテンプレート要素にバインドするdojo.ymlファイルを処理するように設計されたクラスを包含します。 この機能については、以下で詳しく説明します。
  3. タスクブロック-symfony cliを介して実行されるコマンド。 現在、最小限のパラメーターで2つのコマンドを使用できます。 1つ目はsymfony dojoです。initは初期ディレクトリ構造を初期化し、必要なファイルを作成します。 将来的には、dojoソースコードをリモートで受信し、目的のフォルダーに展開することが計画されています。この段階では、これを手動で行う必要があります。 2番目のsymfony dojo：buildコマンドは、運用環境で使用するためにdojo JSをコンパイルします。 この段階では、このコマンドで使用できるパラメーターはありません。すべてが手動で登録されます。 将来のバージョンでは、この機能は開発される予定です
  4. フィルターブロック-すべての必要なdojoファイルの自動接続を提供し、ハンドラーを呼び出し、ページの表示に必要なデータを選択します
  5. ヘルパークラスは、プラグインが正しく機能するためのサービス機能を実行します


ハンドラーとフィルターのおかげで、テンプレートできれいなコードを実現し、要素とウィジェットのすべての説明を個別のdojo.ymlファイルに入れることができました。 プラグインが正常に機能するためには、symfonyアプリケーションのconfigディレクトリ、および必要に応じて、アプリケーションのあるフォルダーと他のプラグインのフォルダーの両方にあるモジュールのフォルダーに1つのメインdojo.ymlが必要です。

メインのdojo.ymlファイルの構造は次のとおりです。

  1. ＃<project_dir> / apps / <app_name> /config/dojo.yml
  2. デフォルト ： ＃ドキュメントのメイン構造を示す識別子
  3. テーマ ： ＃dojoテーマに関連付けられた設定ブロック
  4. name ： 'dojo theme' ＃表示に使用されるテーマの名前
  5. css ： [ 'css_file' 、 'another_css_file' ] ＃dojoに必要な追加のcssファイルを示すオプションの要素
  6. アクション ： ＃dijitブロックが使用されるakshin設定ブロック
  7. all ： [ group_name 、 another_group_name ] ＃すべてのアクションに存在するブロックを示す必須要素
  8. action_name ： [ group_name ] ＃特定のアクションで厳密に使用されるdijitのグループ
  9. dijits ： ＃dijit グループ設定ブロック
  10. group_name ： ＃dijitグループ名
  11. block_id ： { dojotype ： 'desired dojoType' } ＃テンプレートおよび属性内のブロックIDの束
  12. another_block_id ： { dojotype ： 'desired dojoType' } ＃テンプレートと属性のブロックIDの束
  13. another_group_name ： ＃dijitグループの名前


追加のdojo.ymlは、モジュールごとに変化する構造を決定するために使用され、次の構造を持ちます。

  1. ＃<project_dir> / apps / <app_name> / modules / <module_name> /config/dojo.yml
  2. デフォルト ： ＃ドキュメントの説明を上書きするために使用されるメインファイルと同様、オプション
  3. all ： ＃デフォルトブロックに似ていますが、テーマコントロールブロックはありません。 このブロックの構成は、再定義することなくメインの構成に追加されます。


したがって、構造を定義するこの方法を使用すると、テンプレートにdojo属性を記述する必要がなくなり、上で引用したコードは次のようになります。

  1. < div id = "borderConteiner" >
  2. < div id = "topPane" title = "The Title" >
  3. < h1 >私は満足しています！ < / h1 >
  4. < / div >
  5. < div id = "centerPane" >
  6. < h1 >もっと満足です！ < / h1 >
  7. < / div >
  8. < / div >


dojo.ymlファイルで次の定義が必要になります。

  1. デフォルト ：
  2. テーマ ： 「ツンドラ」
  3. アクション ：
  4. all ： [ 'レイアウト' ]
  5. dijits ：
  6. レイアウト ：
  7. borderConteiner ： { dojoType ： 'dijit.layout.BorderContainer' 、 デザイン ： 'headline' 、 liveSplitters ： 'true' }
  8. topPane ： { dojoType ： 'dijit.layout.ContentPane' 、 領域 ： 'top' 、 minSize ： '50' 、 スプリッター ： 'true' 、 スタイル ： 'height：50px' }
  9. centerPane ： { dojoType ： 'dijit.layout.ContentPane' 、 地域 ： 'center' 、 タイトル ： 'Another Pane' }


残念ながら、このソリューションでは、テンプレート内の道場属性が完全に排除されるわけではありません。 たとえば、動的コードでは、この段階で通常の定義を使用する必要がある場合がありますが、将来この問題を解決できると思います。 このソリューションのパフォーマンスに関しては、主観的にはかなり高いレベルであり、すぐにプラグインが公開され、それを望む人は誰でも長所と短所を評価できるようになります。



結論の代わりに：数日以内に、プラグインのリリースバージョンが準備され、コードがクリーンになり、わずかに最適化されます。 その後、プラグインを試すことができます。 当初、彼はそれをgithub.comに置くことを計画しており、少し後にsymfonyリポジトリから利用できるようになります。



UPD：

プラグインはgithub.comでレビューできます

プラグインを見る

UPD2：

また、プラグインはsymfonyのWebサイトから入手できます

xtDojoPlugin



ご清聴ありがとうございました。


More articles:


All Articles