Commit 7dee84cc by Nobuo Kihara

docs/guide-ja/structure-widgets.md - revised [ci skip]

parent 80213e83
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
============ ============
ウィジェットは、[ビュー](structure-views.md) で使用される再利用可能な構成ブロックで、 ウィジェットは、[ビュー](structure-views.md) で使用される再利用可能な構成ブロックで、
複雑かつコンフィギュレーション可能なユーザインタフェイス要素をオブジェクト指向のやり方で作成するためのものです。 複雑かつ構成可能なユーザインタフェイス要素をオブジェクト指向のやり方で作成するためのものです。
例えば、日付選択ウィジェットを使うと、入力として日付を選択することを可能にする素敵なデイトピッカーを生成することが出来ます。 例えば、日付選択ウィジェットを使うと、入力として日付を選択することを可能にする素敵なデイトピッカーを生成することが出来ます。
このとき、あなたがしなければならないことは、次のようなコードをビューに挿入することだけです: このとき、あなたがしなければならないことは、次のようなコードをビューに挿入することだけです:
...@@ -13,8 +13,8 @@ use yii\jui\DatePicker; ...@@ -13,8 +13,8 @@ use yii\jui\DatePicker;
<?= DatePicker::widget(['name' => 'date']) ?> <?= DatePicker::widget(['name' => 'date']) ?>
``` ```
数多くのウィジェットが Yii にバンドルされています。例えば、[[yii\widgets\ActiveForm|アクティブフォーム]] や、 数多くのウィジェットが Yii にバンドルされています。
[[yii\widgets\Menu|メニュー]]、[jQuery UI ウィジェット](widget-jui.md)[Twitter Bootstrap ウィジェット](widget-bootstrap.md) などです。 例えば、[[yii\widgets\ActiveForm|アクティブフォーム]] や、[[yii\widgets\Menu|メニュー]]、[jQuery UI ウィジェット](widget-jui.md)[Twitter Bootstrap ウィジェット](widget-bootstrap.md) などです。
下記では、ウィジェットに関する基本的な知識の手引きをします。 下記では、ウィジェットに関する基本的な知識の手引きをします。
特定のウィジェットの使い方について学ぶ必要がある場合は、クラス API ドキュメントを参照してください。 特定のウィジェットの使い方について学ぶ必要がある場合は、クラス API ドキュメントを参照してください。
...@@ -23,9 +23,8 @@ use yii\jui\DatePicker; ...@@ -23,9 +23,8 @@ use yii\jui\DatePicker;
ウィジェットは主として [ビュー](structure-views.md) で使われます。 ウィジェットは主として [ビュー](structure-views.md) で使われます。
ビューでウィジェットを使うためには、[[yii\base\Widget::widget()]] メソッドを使うことが出来ます。 ビューでウィジェットを使うためには、[[yii\base\Widget::widget()]] メソッドを使うことが出来ます。
このメソッドは、ウィジェットを初期化するための [コンフィギュレーション](concept-configurations.md) 配列を受け取り、ウィジェットのレンダリング結果を返します。 このメソッドは、ウィジェットを初期化するための [構成情報](concept-configurations.md) 配列を受け取り、ウィジェットのレンダリング結果を返します。
例えば、下記のコードは、日本語を使い、入力を `$model``from_date` 例えば、下記のコードは、日本語を使い、入力を `$model``from_date` 属性に保存するように構成された日付選択ウィジェットを挿入するものです。
属性に保存するように構成された日付選択ウィジェットを挿入するものです。
```php ```php
<?php <?php
...@@ -41,8 +40,8 @@ use yii\jui\DatePicker; ...@@ -41,8 +40,8 @@ use yii\jui\DatePicker;
]) ?> ]) ?>
``` ```
ウィジェットの中には、コンテンツのブロックを受け取ることが出来るものもあります。その場合、コンテンツのブロックは ウィジェットの中には、コンテンツのブロックを受け取ることが出来るものもあります。
[[yii\base\Widget::begin()]] と [[yii\base\Widget::end()]] の呼び出しの間に包むようにしなければなりません。 その場合、コンテンツのブロックは [[yii\base\Widget::begin()]] と [[yii\base\Widget::end()]] の呼び出しの間に包むようにしなければなりません。
例えば、次のコードは [[yii\widgets\ActiveForm]] ウィジェットを使ってログインフォームを生成するものです。 例えば、次のコードは [[yii\widgets\ActiveForm]] ウィジェットを使ってログインフォームを生成するものです。
このウィジェットは、`begin()``end()` が呼ばれる場所で、それぞれ、開始と終了の `<form>` タグを生成します。 このウィジェットは、`begin()``end()` が呼ばれる場所で、それぞれ、開始と終了の `<form>` タグを生成します。
その間に置かれたものは全てそのままレンダリングされます。 その間に置かれたものは全てそのままレンダリングされます。
...@@ -66,17 +65,15 @@ use yii\helpers\Html; ...@@ -66,17 +65,15 @@ use yii\helpers\Html;
<?php ActiveForm::end(); ?> <?php ActiveForm::end(); ?>
``` ```
[[yii\base\Widget::widget()]] がウィジェットのレンダリング結果を返すのとは違って、[[yii\base\Widget::begin()]] メソッドが [[yii\base\Widget::widget()]] がウィジェットのレンダリング結果を返すのとは違って、[[yii\base\Widget::begin()]] メソッドがウィジェットのインスタンスを返すことに注意してください。
ウィジェットのインスタンスを返すことに注意してください。返されたウィジェットのインスタンスを使って、ウィジェットのコンテンツを 返されたウィジェットのインスタンスを使って、ウィジェットのコンテンツを構築することが出来ます。
構築することが出来ます。
## ウィジェットを作成する <a name="creating-widgets"></a> ## ウィジェットを作成する <a name="creating-widgets"></a>
ウィジェットを作成するためには、[[yii\base\Widget]] を拡張して、[[yii\base\Widget::init()]] および/または [[yii\base\Widget::run()]] ウィジェットを作成するためには、[[yii\base\Widget]] を拡張して、[[yii\base\Widget::init()]] および/または [[yii\base\Widget::run()]] メソッドをオーバーライドします。
メソッドをオーバーライドします。通常、`init()` メソッドはウィジェットのプロパティを正規化するコードを含むべきものであり、 通常、`init()` メソッドはウィジェットのプロパティを正規化するコードを含むべきものであり、`run()` メソッドはウィジェットのレンダリング結果を生成するコードを含むべきものです。
`run()` メソッドはウィジェットのレンダリング結果を生成するコードを含むべきものです。レンダリング結果は、直接に "echo" レンダリング結果は、直接に "echo" しても、`run()` の返り値として文字列として返しても構いません。
しても、`run()` の返り値として文字列として返しても構いません。
次の例では、`HelloWidget``message` プロパティとして割り当てられたコンテンツを HTML エンコードして表示します。 次の例では、`HelloWidget``message` プロパティとして割り当てられたコンテンツを HTML エンコードして表示します。
プロパティがセットされていない場合は、デフォルトとして "Hello World" を表示します。 プロパティがセットされていない場合は、デフォルトとして "Hello World" を表示します。
...@@ -115,8 +112,7 @@ use app\components\HelloWidget; ...@@ -115,8 +112,7 @@ use app\components\HelloWidget;
<?= HelloWidget::widget(['message' => 'おはよう']) ?> <?= HelloWidget::widget(['message' => 'おはよう']) ?>
``` ```
下記は `HelloWidget` の変種で、`begin()``end()` の間に包まれたコンテンツを受け取り、それを 下記は `HelloWidget` の変種で、`begin()``end()` の間に包まれたコンテンツを受け取り、それを HTML エンコードして表示するものです。
HTML エンコードして表示するものです。
```php ```php
namespace app\components; namespace app\components;
...@@ -140,12 +136,10 @@ class HelloWidget extends Widget ...@@ -140,12 +136,10 @@ class HelloWidget extends Widget
} }
``` ```
ご覧のように、`init()` の中で PHP の出力バッファが開始され、`init()``run()` の呼び出しの間の全ての出力がキャプチャされ、 ご覧のように、`init()` の中で PHP の出力バッファが開始され、`init()``run()` の呼び出しの間の全ての出力がキャプチャされ、`run()` の中で処理されて返されます。
`run()` の中で処理されて返されます。
> Info|情報: [[yii\base\Widget::begin()]] を呼ぶと、ウィジェットの新しいインスタンスが作成され、ウィジェットのコンストラクタの > Info|情報: [[yii\base\Widget::begin()]] を呼ぶと、ウィジェットの新しいインスタンスが作成され、ウィジェットのコンストラクタの最後で `init()` メソッドが呼ばれます。
最後で `init()` メソッドが呼ばれます。[[yii\base\Widget::end()]] を呼ぶと、`run()` メソッドが呼ばれて、その返り値が `end()` [[yii\base\Widget::end()]] を呼ぶと、`run()` メソッドが呼ばれて、その返り値が `end()` によって echo されます。
によって echo されます。
次のコードは、この `HelloWidget` の新しい変種をどのように使うかを示すものです: 次のコードは、この `HelloWidget` の新しい変種をどのように使うかを示すものです:
...@@ -160,9 +154,10 @@ use app\components\HelloWidget; ...@@ -160,9 +154,10 @@ use app\components\HelloWidget;
<?php HelloWidget::end(); ?> <?php HelloWidget::end(); ?>
``` ```
場合によっては、ウィジェットが大きな固まりのコンテンツを表示する必要があるかもしれません。コンテンツを `run()` 場合によっては、ウィジェットが大きな固まりのコンテンツを表示する必要があるかもしれません。
メソッドの中に埋め込むことも出来ますが、より良い方法は、コンテンツを [ビュー](structure-views.md) の中に置いて、 コンテンツを `run()` メソッドの中に埋め込むことも出来ますが、より良い方法は、コンテンツを [ビュー](structure-views.md)
[[yii\base\Widget::render()]] を呼んでレンダリングすることです。例えば、 の中に置いて、[[yii\base\Widget::render()]] を呼んでレンダリングすることです。
例えば、
```php ```php
public function run() public function run()
...@@ -171,25 +166,24 @@ public function run() ...@@ -171,25 +166,24 @@ public function run()
} }
``` ```
既定では、ウィジェット用のビューは `WidgetPath/views` ディレクトリの中のファイルに保存すべきものです。ここで 既定では、ウィジェット用のビューは `WidgetPath/views` ディレクトリの中のファイルに保存すべきものです。
`WidgetPath` はウィジェットのクラスファイルを含むディレクトリを指します。したがって、上記の例では、ウィジェットクラスが ここで `WidgetPath` はウィジェットのクラスファイルを含むディレクトリを指します。
`@app/components` に配置されていると仮定すると、`@app/components/views/hello.php` というビューファイルがレンダリングされる したがって、上記の例では、ウィジェットクラスが `@app/components` に配置されていると仮定すると、`@app/components/views/hello.php` というビューファイルがレンダリングされることになります。
ことになります。[[yii\base\Widget::getViewPath()]] メソッドをオーバーライドして、ウィジェットのビューファイルを含むディレクトリを [[yii\base\Widget::getViewPath()]] メソッドをオーバーライドして、ウィジェットのビューファイルを含むディレクトリをカスタマイズすることが出来ます。
カスタマイズすることが出来ます。
## 最善の慣行 <a name="best-practices"></a> ## 最善の慣行 <a name="best-practices"></a>
ウィジェットはビューのコードを再利用するためのオブジェクト指向の方法です。 ウィジェットはビューのコードを再利用するためのオブジェクト指向の方法です。
ウィジェットを作成するときでも、MVC パターンに従うべきです。一般的に言うと、ロジックはウィジェットクラスに保持し、 ウィジェットを作成するときでも、MVC パターンに従うべきです。
表現は [ビュー](structure-views.md) に保持すべきです。 一般的に言うと、ロジックはウィジェットクラスに保持し、表現は [ビュー](structure-views.md) に保持すべきです。
ウィジェットは自己完結的に設計されるべきです。言い換えると、ウィジェットを使うときに、他に何もしないでも ウィジェットは自己完結的に設計されるべきです。
ビューに挿入することが出来るようにすべきです。この要求は、ウィジェットが CSS、JavaScript、画像などの外部リソースを必要とする場合は、 言い換えると、ウィジェットを使うときに、他に何もしないでもビューに挿入することが出来るようにすべきです。
扱いにくい問題になり得ます。幸いなことに、Yii はこの問題を解決するのに利用することが出来る [アセットバンドル](structure-assets.md) この要求は、ウィジェットが CSS、JavaScript、画像などの外部リソースを必要とする場合は、扱いにくい問題になり得ます。
のサポートを提供しています。 幸いなことに、Yii はこの問題を解決するのに利用することが出来る [アセットバンドル](structure-assets.md) のサポートを提供しています。
ウィジェットがビューコードだけを含む場合は、[ビュー](structure-views.md) と非常に似たものになります。実際のところ、この場合、 ウィジェットがビューコードだけを含む場合は、[ビュー](structure-views.md) と非常に似たものになります。
両者の唯一の違いは、ウィジェットが再配布可能なクラスである一方で、ビューはアプリケーション内に保持することが望ましい 実際のところ、この場合、両者の唯一の違いは、ウィジェットが再配布可能なクラスである一方で、
素の PHP スクリプトである、というぐらいの事です。 ビューはアプリケーション内に保持することが望ましい素の PHP スクリプトである、というぐらいの事です。
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment