ExtJSでZend_Formを拡張する

Zend Frameworkには、便利なフォームレンダリングツールZend_Formが含まれています。 最も重要な利点は次のとおりです。 これに基づいて、サーバー側でのみ処理されるフォームを作成しても問題は発生しません。 しかし、今では誰にとっても驚きではありません。 Zendは動的に処理されるフォームを作成するためにDojoと積極的に協力していますが、この会社が開発したウィジェットはExtJSと比較して多くの要望があります。 この観点から、最良のオプションはZend_Formクラスでフォームのレンダリングを調整することです



最も興味深いのは、ExtJSとZendの共生です。 Ext.form.BasicFormウィジェットのフィールドのビルトイン検証は、サーバー側バリデーターと調整できます。 フィールドをチェックする際にさまざまな哲学を使用するため、重大な問題が発生する可能性があります。 たとえば、ExtJSはフィールドタイプと追加のバリデータを使用し、 Zend_Formにはバリデータのみが存在します。 しかし、この問題は解決可能です、なぜなら クライアント側では、Zendに実装されている検証機能に対応する独自のデータ型を作成できます。



この段階で更新されたコンポーネントは、データの検証とフィルタリング、フォームのレンダリングという2つの主要なタスクを実行する必要があります。 したがって、まず、フォームコンポーネント( Zend_FormExtJS.form.BasicForm )の最終処理に使用される2つのライブラリの機能の比較が行われました。 そして、どちらかでは、タスクを解決するための手段が開発されました。 したがって、主な問題は、各ライブラリの機能の相互調整です。



要件のステートメント:

1.フォームのレンダリング;

2.クライアント上のデータの検証(動的に、つまりデータを入力した直後、フォームを送信する前);

3.メッセージテキストを設定する機能を備えたエラーメッセージの出力(動的に、つまりデータを入力した直後、およびサーバーでエラーが既に検出されている場合はフォームを送信した後);

4.クライアント上のデータのフィルタリング(無効な文字の入力の禁止、長さの制限など);

5.サーバー上のデータ検証。

6.サーバー上のデータをフィルタリングします。



1.最初の問題を解決するには、 Zend_Form_Element_ *パッケージに含まれる標準クラスと、 Zend_View_Helper_ *パッケージの形式の対応するヘルパーを使用してフォームコンポーネントのレンダリングを使用するのが最も簡単です 。 これらのクラスは、画面にフォームフィールドを表示する責任があります。 フォーム自体の外観、つまり 画面上の要素の位置、署名などは、クラスZend_Form_Decorator_ *のパッケージによって決定されます。 私の意見では、CSSのみを使用してフォームに目的の外観を与えることができない場合にのみ、新しいデコレータを追加するようにしてください。

ExtJSライブラリから、フォームを操作するための最も柔軟な要素はExt.form.BasicFormオブジェクトで、これにはフォームフィールドを管理するための基本的な機能が含まれています。 重要なプラスは、このオブジェクトを既存のHTMLフォームに「投げる」機能です。 したがって、 Zend_Formクラスを使用してフォームをレンダリングするとき、新しいExt.form.BasicFormオブジェクトとの通信を担当する追加のJavaScriptコードが挿入されます。 サーバー側で作成されたフォームの構成が、クライアント側のオブジェクトのフィールドオプションを決定することが重要です。 つまり 構成配列は、 Ext.form.BasicFormオブジェクト({...})のコンストラクター、 およびフィールドExt.form.BasicForm.add({...})を追加する関数に渡されます。 したがって、標準フォームをサーバー上で一度設定するだけでレンダリングできます。 これにより、新しいフォームを数回開発するのにかかる時間が短縮されます。



2.4。 ExtJSライブラリには、入力時に直接データ検証に必要な機能が含まれています。 これを行うには、 Ext.form.HtmlEditor (FCKEditorの簡易アナログ)、 Ext.form.DateField (Yahoo UIのカレンダーのアナログ)などの特別なオブジェクトのコンストラクターを使用してフィールドを追加します。 また、静的オブジェクトExt.form.VTypesで定義されているフィールドの特別なサブタイプを設定することもできます。 重要なことは、このオブジェクトに新しいサブタイプを追加できることです。これにより、Zend FrameworkとExtJSバリデーターの同期が簡単になります。

また、ExtJSにはExt.form.HtmlEditorExt.form.DateFieldなどの追加フィールドがあることを考慮する必要があります。したがって、これらのUIコンポーネントを簡単かつ正確に操作するには、 Zend_Form_Element_ *パッケージのサーバークラスと対応するZend_View_Helper_ *クラスを実装する必要があります。 将来的には、同様のメカニズムを使用して、ExtJSライブラリで許可されるクライアントオブジェクトと、対応するサーバーの対応物を開発することにより、新しいUI要素を追加することが可能になります。 したがって、コンポーネントのセットは、異なる人々によって独立して補充できます。 Zend FrameworkとExtJSの2つの公開標準に準拠します。

クライアント側でのデータのフィルタリングも、上記のオブジェクトとサブタイプを使用して実行されます。この項目をさらに詳しく説明することは意味がありません。



3. ExtJSはExt.QuickTipsコンポーネントを使用してエラーを表示します。 メッセージ付きポップアップを表示するための4つのオプションがあり、 Ext.form.Field.msgTargetプロパティによって設定されます。 したがって、このメカニズムを使用するには、標準オブジェクトを初期化し、通知のタイプを設定する必要があります。

フォームでの作業の受け入れられたスキーム(設定全体がサーバー側にインストールされます)に従って、エラーメッセージのテキストはZend_Formクラスのオブジェクトに設定されます。これは、 Zend_Translateクラスのオブジェクトを含むプロパティを設定することによって行われます。 後者には、すべてのフォームフィールドのエラーメッセージが含まれます。 ただし、フォーム要素ごとにテキストを直接設定するオプションがある場合があります。 この問題には追加の調査が必要です。

クライアント側では、ExtJSライブラリが提供する機能を使用して、エラーテキストを設定することもできます。 したがって、タスクは、 Zend_FormオブジェクトとZend_Form_Element_ *オブジェクトの構成を使用する場合、フォームレンダリングの段階で実行されるクライアントとサーバーのコードを同期することです 。Ext.BasicFormオブジェクトのjavascriptコードは、必要なすべてのフィールドが追加されて作成されます。



5,6。 この機能は、 Zend_Validate_ *およびZend_Filter_ *の 2つのパッケージを使用してZend Frameworkに実装されています。 Zend_Formオブジェクトを作成するとき、フォーム要素ごとに複数のバリデーターまたはフィルターを指定できます。 送信されたデータをチェックするための2つのオプションがあります: Zend_Form :: isValid()関数は配列を受け入れ、すべてのデータの正確性をチェックします。Zend_Form:: isValid()関数は、例えばAjaxチェック中に部分的に送信されたデータを検証します。 したがって、 Zend_Validate_Interfaceインターフェースを使用していつでも独自のバリデーターを追加できます。



これらのフォームを操作するための既存のメカニズムの唯一の重大な欠点は、たとえば、そのパスワードのチェックとパスワードの一致の確認など、いくつかのフィールドで一度に検証がサポートされないことです。 さらに、一部のメカニズムでは、データを検証するためにAjaxリクエストが必要であることに注意してください。 これは、MVC Zend Frameworkのフォームモジュールとして実装する必要があります。 ほとんどの場合、これらは標準クエリになります。

したがって、特定の構成に従って自動的に検証されたフォームを作成するための非常に便利なメカニズムを取得します。 ただし、より徹底的な分析を行い、このメカニズムがどのように機能するかの詳細な仕様を作成する必要があります。



PS実際のエンコード処理を開始する前に、健全な批判を聞きたいと思います。 ほとんどの場合、現在は何かが考慮されていないため、この記事が十分な抽象度でこの機能を設計するのに役立つことを願っています。 作業が完了したら、このコンポーネントのコードをHabroパブリックコートに提示します。



All Articles