Joomla でカスタム フォーム フィールド タイプを作成し、モーダル選択の例を使用する

Joomla 5 で ModalSelect Form フィールド タイプを使用すると、拡張機能の開発時にカテゴリ、メーカー、検索を使用してモーダル ウィンドウでフィルタリングすることで、数千の中から適切な製品を簡単に見つけることができます。

イントロ

クライアントと協力する過程では、さまざまなレベルのタスクがあります。誰かが 5 ～ 6 ページのシンプルな Web サイトを必要としています。 REST API を使用してサードパーティ システムと統合された大規模な商品カタログやオンライン ストアが必要な場合があります。利用できる一般的なソリューションがない非標準の機能を必要とする人もいます。

Joomla は開発に適しており、メンテナンスが簡単なコードを作成できます。要件が CMS コアに従っている場合、これらすべてのケースに対する答えが得られます。

大規模なプロジェクトを完了するには、プロジェクトを小さなタスクに分割する必要があります。この記事では、これらのタスクの 1 つを解決する方法について説明したいと思います。

初期データ

顧客は、Joomla (JoomShopping) のオンライン ストアの人気コンポーネントの 1 つで製品カタログをすでに作成しています。製品のパラメータを選択し、カートに入れて購入することができます。すべていつも通りです。ただし、ここで、製品のグラフィック レイアウトを作成する機能を追加する必要があります。たとえば、商品がマグカップや T シャツであるとします。購入する前に、製品デザイナーにアクセスし、ロゴや写真をアップロードし、テキストを書くと、このレイアウトがオンライン ストアでの注文に添付されます。支払い後、レイアウトは直接制作に入り、画像とテキストがマグカップに適用され、住所に送信されます。

この機能の実装には非常に時間がかかるため、別のプロダクト デザイナー コンポーネントとして作成されます。また、データ プロバイダー プラグインがすでに作成されているため、1 つまたは別の e コマース コンポーネントを操作できるようになります。

小さな応用タスクの 1 つは、オンライン ストア コンポーネントの商品とプロダクト デザイナー コンポーネントの商品間の接続を作成することです。これは、将来コンテンツに取り組むコンテンツ管理者にとって便利で直感的なものとなるはずです。したがって、希望する製品の ID 番号を表示するテキストフィールドを作成するだけでは十分ではありません。オンライン ストアには数十の製品しかないかもしれませんが、コミュニケーション用の製品を選択することはそれほど難しくありません。数千の製品がある場合、パラメータによって製品を検索およびフィルタリングする機能が重要になります。製品のリストをカテゴリ、メーカーでフィルタリングしたり、数百もの製品の中から名前で検索したりできれば、作業がはるかに速く、簡単になります。

ビデオを見る

このフィールドは、エディター ボタン プラグイン (editors-xtd グループ) の機能に非常に似ており、選択用のデータ (記事へのリンク、モジュールの短いコードなど) がモーダル ウィンドウに表示されます。

ちょっとした理論

Joomla 管理者パネルには、他のコンポーネントからのデータを入力する必要があるさまざまなフィールドがあります。記事、メニュー項目、連絡先、製品などを指定します。通常、このようなフィールドは選択オプションのドロップダウン リストとして設計されています。 、データリストを使用して input type="text" として設計できますが、フィルタリング、検索、ページネーションを備えた必要なエンティティのリストを表示する便利なフィールドもあります。サイト内のソース (さまざまなコンポーネント、プラグイン) だけでなく、REST API 経由で利用できるサードパーティのサービス (CRM、配信サービス、外部データベース、他の Joomla サイトなど) もデータ ソースとして機能できます。

私たちは皆、「記事 - 単一の記事」、「連絡先 - 単一の連絡先」などのメニュー項目で記事を選択するとき、またはメニュー項目のエイリアス - 「システム リンク - メニュー」を作成するときに、これらのフィールドが動作しているのを見たことがあるでしょう。アイテムのエイリアス」。ただし、それらがどのようなものであるかを思い出してください。

モーダル記事選択ウィンドウ。

モーダルな単一の連絡先選択ウィンドウ。

Joomla のモーダル選択フィールドの可能性

これらのフィールドを詳しく見てみましょう。具体的に何ができるのかを見てみましょう。深いところでは、このフィールドの主な役割は選択されたエンティティの ID を取得し、この ID をテキスト フィールドに入力することであると理解しています。しかし、画面には別のものが表示されます。ID 番号の代わりに、記事のタイトルまたは連絡先が表示されます。素敵で便利です。 ID 1452704 の記事の名前を覚えておく必要はありません。また、ビデオでは、フィールドにすでに値がある場合、「クリア」ボタンが表示されることが明確に示されています。フィールドの値がリセットされ、[選択] ボタンを再度クリックできるようになります。

場合によっては、メニュー項目の作成プロセス中に、選択したタイプのエンティティ (記事、連絡先など) を作成する機会があります。このボタンは、ACL (Joomla でのアクセス権の分離) を考慮して機能します。

Web サイトを構築し、「連絡先」ページを作成していると想像してください。複雑な構造を持つ多数の支店がない場合、これは「未分類」カテゴリにある通常の Joomla 記事です。そして、すべての連絡先がテキストまたは変数の形式ですでに含まれています。昔は、最初に記事を作成してから、メニュー項目に移動して、その記事のメニュー項目を作成する必要がありました。今はその必要はありません。

フィールドにすでに値がある場合、場合によっては、メニュー項目の作成中に選択したエンティティ (記事、メニュー項目など) を編集することができます。

モーダル ウィンドウの選択フィールドを使用して、次のことができます。

• 選択
• 作成
• 編集
• クリア

これが私の目の前にあるものです。しかし、Joomla の奥深くには、選択した値をフィールドで指定された URL に送信できる興味深い urlCheckin パラメータもあります。 Joomla のこの機能は、かなり長い間徐々に開発されてきたことは注目に値します。ただし、ニーズに合わせて使用​​できる別のユニバーサル フィールド タイプは Joomla 5 でのみ登場しました。Joomla 4 にもありません。

Joomla 管理パネルインターフェイスのフォームコンストラクターのフィールドはどのように配置されていますか?

以前は、このコンストラクターは JForm と呼ばれていました。すべての読者が PHP Storm や VS Code のような IDE (開発環境) などの開発ツールを手にしているわけではないことを前提としているので、コード ベースをナビゲートするための追加のガイドラインを提供しようとします。

Joomla では、ロジックはビュー (実際の HTML 出力) から分離されているため、同時にいくつかの場所で調べます。

ロジックは Form クラスです

Logic は Form クラスです。 Joomla 5 では、Form クラス ファイルは libraries/src/Form にあります。これらのファイルを調べて、ロジック自体、データに何が起こるか、その操作方法を理解します。

つまり、Form コンストラクターはフィールドの説明を含む XML を受け取ります。データ (フィールド タイプ、addfieldprefix 属性からのカスタム フィールド クラス (存在する場合) など) を読み取り、FormHelper を使用して必要なフィールド クラスを読み込みます。フィールドに出力データをフィルタリングするためのルールがある場合 (FormRule クラスが使用されます)、ファイルリスト タイプの Joomla フィールドを覚えておいてください。フィルタリング パラメータを指定して、たとえば、php ファイルのみまたは CSS ファイルのみを選択できます。

Joomla Form フィールド クラス ファイル は libraries/src/Form/Field にあります。控えめに言っても、それらはたくさんあります。これは管理パネルの構築マテリアルであり、場合によってはフロントエンドでもあります。

クラス ファイルには、$type、$layout、その他動作に必要なクラス プロパティが記述されます。ほとんどのフィールドにはメソッド getInput() - 実際にフィールドの HTML 出力を返します、getLayoutData() - レンダリングに送信する前にフィールドのデータを前処理します、getLabel() - フィールド ラベルの操作などがあります。

フィールド クラスが親 FormField クラスを継承していることを思い出してください。クラス ファイル libraries/src/Form/FormField.php には、フィールドの可能な属性が記述されており、XML での記述に使用できます。それが何なのか、そしてその理由が簡単に説明されています。

子クラス (継承者) は、親クラスのメソッドを操作し、必要に応じてそれをオーバーライドすることができます。

Joomla 5 のフィールドの表示 (HTML 出力、レイアウト)

各フィールド クラスには HTML 出力があります。クラシック MVC では、ビューはデータ出力を即座に処理しますが、Joomla には追加レイヤーであるレイアウトがあり、この CMS の最も重要な機能の 1 つであるレイアウトをオーバーライドできます。 コア レイアウトは次のとおりです。このファイルは、サイトのルートの layouts フォルダー に配置されることが予想されます。 getLayoutData() メソッドから受け取ったすべてのデータを含む $displayData の配列を渡します。どの出力レイアウトを使用するかを $layout クラス プロパティで指定します。

<?php /**
 * Name of the layout being used to render the field
 *
 * @var    string
 * @since  3.7
 */
protected $layout = 'joomla.form.field.email';

このタイプの録音は非常に一般的です。 Joomla では、layout は、サイトのルートにあるレイアウト フォルダーからレイアウト ファイルへのドット区切りのパスです。 つまり、エントリ $layout = 'joomla.form.field.email' は、次のことを意味します。レイアウトは、フィールド layouts/joomla/form/field/email.php.
をレンダリングするときに使用されます。

<?php use Joomla\CMS\Layout\LayoutHelper;

$displayData = [
                'src' => $this->item->image,
                'alt' => $this->item->name,
               ];

echo LayoutHelper::render(
                        'joomla.html.image',
                         $displayData
                    );

同様に、この例ではレイアウト layouts/joomla/html/image.php を使用します。一部のレイアウトは、サイト テンプレートと管理パネルの html フォルダーでオーバーライドできます。

したがって、最終的にどのようなデータがレイアウトに取り込まれ、どのように表示されるかを正確に確認したい場合は、レイアウト ファイルに移動して確認してください。

Joomla 5 のモーダル選択ウィンドウでデータ選択フィールドを作成する

それでは、この記事の主なタスクに戻りましょう。

サンプルは私たちが研究する上で重要です (この記事の執筆時点では Joomla 5.0.1):

• フィールドのメインクラスは libraries/src/Form/Field/ModalSelectField.php です。
• Joomla 記事モーダル選択フィールド - administrator/components/com_content/src/Field/Modal/ArticleField.php
• メニュー タイプ モーダル選択フィールド - administrator/components/com_menus/src/Field/MenutypeField.php
• メニュー項目モーダル選択フィールド - administrator/components/com_menus/src/Field/MenutypeField.php
• 出力レイアウト - layouts/joomla/form/field/modal-select.php

この記事の執筆時点では、com_contacts からの単一の連絡先モーダル選択フィールドはまだユニバーサル フィールド タイプに変換されておらず、(この記事が書かれた時点では Joomla 5.0.2 で) 管理者にのみ存在します。 /components/com_contact/src/Field/Modal/ContactField.php。 ModalSelectField ではなく、FormField を直接継承します。

独自のフィールドを追加するためのアクションのアルゴリズムは次のとおりです:

• XML ファイル内のフィールドを含む XML フォームを作成するか、SimpleXMLElement をプログラムで使用します。
• オンザフライで作業する場合は、onContentPrepareForm イベントのプラグインを使用して、XML フォームを目的のフォームに追加します (その前に $form->getName() を確認してください)
• フィールド クラスを作成します。
• 必要に応じて、フィールドの独自の HTML 出力 (レイアウト) を作成します。これについては、この記事の範囲外としておきます。 そしてそれはうまくいきます。 ## フィールド XML このコードで最も重要なのは、addfieldprefix 属性です。これは、フィールド クラスの名前空間を意味します。クラス名は、addfieldprefix "" type "Field" から形成されます。この場合、フィールド クラスは JoomlaPluginWtproductbuilderProviderjoomshoppingFieldProductlistField になります。

<?php /**
 * Name of the layout being used to render the field
 *
 * @var    string
 * @since  3.7
 */
protected $layout = 'joomla.form.field.email';

フィールドのHTML出力(レイアウト)

PHP で行われるすべてのことを明確にするには、まずフィールド出力のレイアウトを確認する必要があります。これはファイル layouts/joomla/form/field/modal-select.php 内にあります。実際、2 つの入力フィールドが出力されます。1 つは表示され、もう 1 つは非表示になります。選択した記事、連絡先、または製品のタイトルが、プレースホルダーの形式で表示されるフィールド ($valueTitle パラメーター) に入力されます。 2 番目は彼の ID - $value です。まだ何も選択していない場合は、フィールドに「記事を選択」または「製品を選択」などの語句が表示されるはずです。これは、XML フィールドまたはフィールド クラスの setup() メソッドのヒント属性に置く言語定数です。

出力レイアウトで使用できるすべてのパラメータ (プログラムまたは XML ファイルで使用できるパラメータを意味します):

<?php /**
 * Name of the layout being used to render the field
 *
 * @var    string
 * @since  3.7
 */
protected $layout = 'joomla.form.field.email';

PHPフィールドクラス

ご想像のとおり、フィールド クラスは私のプラグインにあります。その方法はplugins/wtproductbuilder/providerjoomshopping/src/Field/ProductlistField.phpです。私は単一のモーダル記事選択フィールドを基礎として、JoomShopping オンライン ストアから製品を選択するというニーズに合わせて再設計しました。親 ModalSelectField クラスを独自のクラスで拡張します。

私のタスクには製品の選択のみが含まれており、編集と作成は含まれていないため、記事の本文では製品の選択についてのみ話します。 PHP クラスは小さいので、全体を示してコメントします。

<?php use Joomla\CMS\Layout\LayoutHelper;

$displayData = [
                'src' => $this->item->image,
                'alt' => $this->item->name,
               ];

echo LayoutHelper::render(
                        'joomla.html.image',
                         $displayData
                    );

これとは別に、getValueTitle() メソッドが導入されました。このメソッドは、すでに選択され保存されている場合に、選択されたエンティティの名前 (製品名、記事のタイトルなど) を表示します。つまり、メニュー項目を編集し、フィールドには触れませんが、単なるIDではなく、記事のタイトル/製品名を人々が理解できるようにしたいと考えています。このメソッドは、希望のタイトルを表示します。

<field type="productlist" name="product_id" addfieldprefix="Joomla\Plugin\Wtproductbuilder\Providerjoomshopping\Field" label="Field label" hint="Field placeholder"></field>

より複雑な機能が必要な一部のフィールド (多言語の関連付けなど) では、FormField クラスの基本メソッドをオーバーライドするフィールド クラスの他のメソッドがあります。

• setLayoutData() は、実際にフィールドをレンダリングする前にデータを前処理するメソッドです
• getRenderer() - レンダリング用の追加パラメータ など

私たちの場合、そのような必要はないので、使用しません。

モーダルウィンドウのコンテンツのHTML出力

「選択」ボタンをクリックすると、モーダル ブートストラップ ウィンドウが開き、製品のリストが

私のプラグインでは、onAjaxProviderjoomshopping() メソッドは製品リストの HTML 出力を返します。そこで、それらを使用して配列をループし、写真、名前、出力を取得します。コードは全体的に膨大なので、最も重要な部分を公開します。

簡略化されたループ コードの例:

<?php extract($displayData);

/**
 * Layout variables
 * -----------------
 * @var   string   $autocomplete    Autocomplete attribute for the field.
 * @var   boolean  $autofocus       Is autofocus enabled?
 * @var   string   $class           Classes for the input.
 * @var   string   $description     Description of the field.
 * @var   boolean  $disabled        Is this field disabled?
 * @var   string   $group           Group the field belongs to. <fields> section in form XML.
 * @var   boolean  $hidden          Is this field hidden in the form?
 * @var   string   $hint            Placeholder for the field.
 * @var   string   $id              DOM id of the field.
 * @var   string   $label           Label of the field.
 * @var   string   $labelclass      Classes to apply to the label.
 * @var   boolean  $multiple        Does this field support multiple values?
 * @var   string   $name            Name of the input field.
 * @var   string   $onchange        Onchange attribute for the field.
 * @var   string   $onclick         Onclick attribute for the field.
 * @var   string   $pattern         Pattern (Reg Ex) of value of the form field.
 * @var   boolean  $readonly        Is this field read only?
 * @var   boolean  $repeat          Allows extensions to duplicate elements.
 * @var   boolean  $required        Is this field required?
 * @var   integer  $size            Size attribute of the input.
 * @var   boolean  $spellcheck      Spellcheck state for the form field.
 * @var   string   $validate        Validation rules to apply.
 * @var   string   $value           Value attribute of the field.
 * @var   string   $dataAttribute   Miscellaneous data attributes preprocessed for HTML output
 * @var   array    $dataAttributes  Miscellaneous data attribute for eg, data-*
 * @var   string   $valueTitle
 * @var   array    $canDo
 * @var   string[] $urls
 * @var   string[] $modalTitles
 * @var   string[] $buttonIcons
 */

2番目。リンク タグ コードには、必要なデータを含むデータ属性が含まれている必要があります。この断片は商品出力サイクルのサンプルコードにありました。

<?php /**
 * Name of the layout being used to render the field
 *
 * @var    string
 * @since  3.7
 */
protected $layout = 'joomla.form.field.email';

JavaScriptの処理。から親ウィンドウのフィールドへのデータの送信

それでは、JavaScript の操作を始めましょう。記事を書く過程で、古い働き方と新しい働き方について話すことを可能にするニュアンスが生まれました。

作業の過程で、次の JS スクリプトを接続したことを思い出します

• media/system/js/fields/modal-fields.min.js - このファイルは記事選択フィールドのクラスに接続されました。しかし、今ではこれは時代遅れで時代遅れの仕事方法であると言えます。このファイルはもう必要ありません。 PHP クラスでコメントアウトしました。
• media/plg_wtproductbuilder_providerjoomshopping/js/providerjoomshopping.modal.js - 独自の js ファイル。

独自の JavaScript から始めましょう。ここでは、select-link クラスを使用して、すべてのセレクターを取得し、それらにクリック イベントのリスナーをハングします。

<?php use Joomla\CMS\Layout\LayoutHelper;

$displayData = [
                'src' => $this->item->image,
                'alt' => $this->item->name,
               ];

echo LayoutHelper::render(
                        'joomla.html.image',
                         $displayData
                    );

ID とタイトルについてはすべて直感的ですが、データ オブジェクトと postMessage に関しては、Joomla の操作に慣れている人にはわかりにくいかもしれません。

Joomla 3 および Joomla 4 と同様

以前、Joomla 2.5、3.x、さらには 4.x でも、次のアプローチが使用されていました。フィールド出力のレイアウトでは、インライン スクリプトを使用してハンドラー関数をウィンドウにハングし、< から;iframe>これを window.parent[functionName] と呼びました。このコードを見てください

<field type="productlist" name="product_id" addfieldprefix="Joomla\Plugin\Wtproductbuilder\Providerjoomshopping\Field" label="Field label" hint="Field placeholder"></field>

このフォームでは、記事/連絡先/メニュー項目のリスト内の各リンクの data-function 属性に関数名を指定しました。また、関数自体はインラインに配置され、場合によってはその名前が追加の ID と統合されました。たとえば、"jSelectArticle_".$this->id.

jSelectArticle() 関数または同様のもの (jSelectProduct() があります) は、ファイル modal-fields.min.js の標準 processModalSelect() 関数のラッパーです。次に、 processModalParent() 関数を呼び出し、実行後にモーダル ウィンドウを閉じます。

この関数が機能するには、エンティティのタイプ (記事、連絡先など)、フィールドのプレフィックス (実際には HTML フィールド セレクターの ID であることが判明)、実際の ID などの一連のパラメーターを指定する必要がありました。タイトルと必要なパラメータなど

1 つの機能で、あらゆる機会に対応するすべてが収集されました。そこにデータがフィールドに配置されました。

Joomla 5 ではどうなったのか

ただし、Joomla 5 では、このファイルは必要なくなりました。フィールド出力の標準レイアウトを使用する場合、modal-content-select-field アセットがそれに接続され、新しい方法で動作します。

現在、Joomla 5 フロントエンドは JavaScript postMessages の使用に切り替わっています。すべての古い拡張機能がまだ新しいレールに切り替える準備ができているわけではないため、JoomlaExpectingPostMessage フラグが実装されています。これにより、古いイベント呼び出しメソッドを区別できるようになります。説明した作業方法とは間接的な関係がありますが、誰かにとって役立つかもしれません。このフラグは、postMessages への完全な移行後に削除されます。

したがって、呼び出される関数の名前を持つリンクの追加の属性は必要なくなりました。代わりに、postMessage メカニズムを使用します。これを行うには、データ オブジェクトで、joomla:content-select と等しい messageType パラメーターを指定する必要があります。なぜ？ JavaScript の観点から見ると、Joomla での作業は次のようになります:

• リンクをクリックしてリンク属性を取得する
• 親ウィンドウにメッセージを送信 window.parent.postMessage(data)
• media/system/js/fields/modal-content-select-field.js ファイルは、メッセージ イベントのリスナーを持つ親ウィンドウに接続されます。
• メッセージ タイプをチェックし、joomla:content-select の場合は、値が必須フィールドに配置され、モーダル ウィンドウが閉じます

Joomla のコア コードを研究し、解決策を探す過程で、自然に jSelectArticle() などの関数に出会いました。その後、postMessage に出会い、長い一意の名前を付けて MessageType を作成することにしました。これを機能させるために、(結局のところ、時代遅れであることが判明した) processModalSelect() 関数を呼び出して、独自の処理を記述しました。そして、データがフィールドに正しく挿入されたにもかかわらず、モーダルウィンドウが決して閉じようとしないという事実に直面しました。さらに検索を続けると、まず正しいタイプのイベントが見つかり、次に不必要なスクリプトが削除され、コード全体が簡素化されました。

まとめ

Joomla は、サードパーティ ソースからデータを操作および取得し、それをコード内で使用するための豊富なツール セットを開発者に提供します。 JForm フィールドの操作は、開発者が独自の拡張機能を作成する場合、特に一般的な範囲を超えるタスクを解決する必要がある場合に重要です。もちろん、このようなモーダル ウィンドウとその中でのデータの選択はかなり特殊なケースですが、この方法では、他の JForm フィールドをオーバーライドすることも、独自の UX ロジックで独自の型を作成することもできます。

Joomla コミュニティ リソース

• https://joomla.org/
• Joomla コミュニティ マガジンのこの記事

以上がJoomla でカスタム フォーム フィールド タイプを作成し、モーダル選択の例を使用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。