Clever Geek Handbook

Dojoで独自のウィジェットを作成する



Dojo Toolkitは、最も強力で使用頻度の低いJavaScriptフレームワークです。 DojoはAMDモジュールで構成されており、そのほとんどはウィジェットです。 ウィジェットは通常、JavaScriptロジックとHTMLテンプレートで構成されます。 将来のバージョン2.0はWebComponentsのサポートを要求します。 Dojoを使用すると、まったく新しいウィジェットを簡単に作成したり、既存のウィジェットを拡張または変更したりできます。 この投稿では、その方法を説明します。



シンプルなウィジェットを作成する



最初に、最も単純なウィジェットを作成します。



ステップ1：構造の作成


ウィジェットを宣言するには、次のコンテンツを含むJavaScriptファイルを作成する必要があります。 

define([ "dojo/_base/declare", "dijit/_Widget", "dijit/_TemplatedMixin" ], function(declare, _Widget, _TemplatedMixin){ return declare([_Widget, _TemplatedMixin], {}); });


今のところ、 AMDモジュールを発表し、いくつかの依存関係を指摘しました。 declare関数の最初の引数は、作成されたモジュールを継承するモジュールの配列です。 このモジュールは、 dijit / _Widgetモジュールと、すべてのウィジェットの基本であるテンプレートエンジンによって提供される_TemplatedMixinモジュールを継承することが示されています。



ステップ2：HTMLビューを作成する


モジュールファイルの横に、テンプレートフォルダーとその中にHTMLファイルを作成します。 モジュールファイルと同じ方法で名前を付けることをお勧めします。 モジュールの名前をMyCustomWidget.jsとし、テンプレートファイルの名前をMyCustomWidget.htmlにします。 テンプレートファイルには、ウィジェットのHTML表現が含まれている必要があります。 さらに、ルートは1つでなければなりません。



テンプレートエンジンを使用すると、次のことができます。







ステップ3：パターンとデータをバインドする


テンプレートを接続します。 

 define([ "dojo/_base/declare", "dijit/_Widget", "dijit/_TemplatedMixin", "dojo/text!./templates/MyCustomWidget.html" ], function(declare, _Widget, _TemplatedMixin, template){ return declare([_Widget, _TemplatedMixin], { templateString: template }); });


実際、テンプレートを別のファイルに取り出すことさえできませんでしたが、すぐにtemplateStringプロパティの値としてHTMLを設定したり、変数に入れたりすることができましたが、これはコードの美しさを減らします。



ウィジェットの例として、姓と名を表示するウィジェットを作成します。 

 <div> <span data-dojo-attach-point="surnameNode">${surname}</span> <span data-dojo-attach-point="nameNode">${name}</span> </div>


そのため、ウィジェットがそのプロパティを変更するたびに、HTMLの値が変更されるため、プロパティセッターとattachPointsを接続する必要があります。 どのattachPointのどのプロパティがウィジェットのどのプロパティに対応するかを指定するか、独自のセッターを定義できます。



値の設定/取得がオブジェクトプロパティへのアクセスよりも複雑なプロパティがある場合、単純な命名規則に従って独自のセッター/ゲッターを定義する必要があります。「foo」プロパティの場合、これは_setFooAttr / _getFooAttrになります。 setおよびgetメソッドは自動的にそれらを見つけ、必要に応じて呼び出します。 

 define([ "dojo/_base/declare", "dijit/_Widget", "dijit/_TemplatedMixin", "dojo/text!./templates/MyCustomWidget.html" ], function(declare, _Widget, _TemplatedMixin, template){ return declare([_Widget, _TemplatedMixin], { templateString: template, _setSurnameAttr: { node: "surnameNode", type: "innerHTML" }, _setNameAttr: function(val){ this.nameNode.innerHTML = val; this._set("name", val); } }); });




おそらく既に推測したように、説明したウィジェットは、名前と場所を使用して接続できます。 モジュールJSファイルへの直接パスを使用するか、dojo、dijit、dojoxと同様にパッケージを宣言し、そこからファイルをインクルードできます。 別の方法は、 declare関数を呼び出した結果をすぐに使用することです。



ここで作成したコードの表示方法。



他のウィジェットで構成されるウィジェット



ウィジェットは、他のウィジェットで構成されている場合があります。 コンポーネントウィジェットは、ウィジェットの作成中に動的に追加できますが、テンプレートですぐに宣言する方が便利です。 これを行うには、 dijit / _WidgetsInTemplateMixinをウィジェットの継承元のモジュールに追加します。



テンプレートの例として、水平スライダーと入力テキストフィールドで構成されるスライダーテンプレートのフラグメントを考えます。 







 <div> <div> <div data-dojo-type="dijit/form/HorizontalSlider" data-dojo-attach-point="slider" name="${name}" value="${value}" maximum="${maximum}" minimum="${minimum}" step="${step}" showButtons="${showButtons}" intermediateChanges="${intermediateChanges}" style="width:150px"> </div> <div data-dojo-type="dijit/form/TextBox" value="${value}" type="number" data-dojo-attach-point="textbox"> </div> <span data-dojo-attach-point="legendNode"></span> </div> <div data-dojo-attach-point="descriptionNode"></div> </div>


このフラグメントでは、 dijit / form / Horizo​​ntalSliderウィジェット（水平スライダー）と、 dijit / form / TextBoxウィジェット、 入力テキストフィールドを宣言しました。



すべてのウィジェットは、すぐに特別なレイアウトで内接され、次のものがあります。



また、組み込みウィジェットにdata-dojo-attach-point属性を提供して、ウィジェットプロパティとして参照できるようにしました。 つまり 入力フィールドの値を取得する場合は、次のように記述する必要があります。 

 this.textbox.get("value");


APS JS SDKの同様のウィジェットは、 APS Fiddleで見ることができます。



ウィジェットのライフサイクル



ウィジェットのライフサイクルにより、何がいつ発生するかを正確に把握できます。



次のメソッドを拡張またはオーバーライドできます。







継承


メソッドをオーバーライドする場合、このメソッドで発生する重要な何かを継承のチェーンで失わないようにすることは常に役立ちます。 したがって、コードの前または後にthis.inheritedを呼び出すことを忘れないでください。 

 postCreate: function(){ // do my stuff, then... this.inherited(arguments); }




便利なリンク



ウィジェット作成の別の例 。

ウィジェットの作成に関する詳細。

ウィジェットのライフサイクルに関する詳細情報。


More articles:


All Articles