フォームフィールドタイプへの設定の追加

フォームフィールドタイプへの設定の追加

ファストトラック記事は、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

Form Field Typeを開発したら、設定を追加する必要があるかもしれません。 たとえば、Timeフィールドは異なる時間形式を受け入れる場合があります。 ここでは、前のチュートリアルで作成したTimeフィールドタイプに マスクプレースホルダー を追加して、フォームフィールドタイプに設定を追加する方法を学習します。

フォームフィールドタイプに設定を追加するには、次の手順を実行します。

  • デフォルトのフィールドタイプ設定 DefaultDDMFormFieldTypeSettingsを拡張するインターフェイスを記述します。

  • * FormFieldType を更新して、前の手順で作成された新しいインターフェイスを参照します。

  • * FormFieldRenderer 更新して、新しい構成オプションをJavaScriptコンポーネントやレンダリング用のSoyテンプレートで利用できるようにします。

  • JavaScriptコンポーネント(この例では time_field.js で定義)を更新して、新しい設定とそのデフォルト値を構成します。

  • Soyテンプレートを更新して、フォーム(この例ではプレースホルダー)でレンダリングする必要がある設定を含めます。

まず、フィールドの設定を制御するインターフェイスを作成します。

デフォルトのタイプ設定の拡張

タイプ設定を追加するには、 DefaultDDMFormFieldTypeSettingsを拡張する * TypeSettings クラスが必要です。 この例はTimeフィールドタイプで機能するため、 TimeDDMFormFieldTypeSettingsと呼びます。

このクラスは、 フィールドタイプ 構成フォームをセットアップします。

図1:カスタムフィールドタイプと同様に、テキストフィールドタイプの設定はJavaインターフェースで構成されます。

これは次のようなものです。

package com.liferay.dynamic.data.mapping.type.time;

import com.liferay.dynamic.data.mapping.annotations.DDMForm;
import com.liferay.dynamic.data.mapping.annotations.DDMFormField;
import com.liferay.dynamic.data.mapping.annotations.DDMFormLayout;
import com.liferay.dynamic.data.mapping.annotations.DDMFormLayoutColumn;
import com.liferay.dynamic.data.mapping.annotations.DDMFormLayoutPage;
import com.liferay.dynamic.data.mapping.annotations.DDMFormLayoutRow;
import com.liferay.dynamic.data.mapping.form.field.type.DefaultDDMFormFieldTypeSettings;

@DDMForm
@DDMFormLayout(
    paginationMode = com.liferay.dynamic.data.mapping.model.DDMFormLayout.TABBED_MODE,
    value = {
        @DDMFormLayoutPage(
            title = "%basic",
            value = {
                @DDMFormLayoutRow(
                    {
                        @DDMFormLayoutColumn(
                            size = 12,
                            value = {
                                "label", "required", "tip", "mask",
                                "placeholder"
                            }
                        )
                    }
                )
            }
        ),
        @DDMFormLayoutPage(
            title = "%properties",
            value = {
                @DDMFormLayoutRow(
                    {
                        @DDMFormLayoutColumn(
                            size = 12,
                            value = {
                                "dataType", "name", "showLabel", "repeatable",
                                "type", "validation", "visibilityExpression"
                            }
                        )
                    }
                )
            }
        )
    }
)
public interface TimeDDMFormFieldTypeSettings
    extends DefaultDDMFormFieldTypeSettings {

    @DDMFormField(label = "%mask", predefinedValue="%I:%M %p")
    public String mask();

    @DDMFormField(label = "%placeholder-text")
    public String placeholder();

}

実行する必要がある作業のほとんどは、クラスの注釈にあります。

このクラスは、フォームフィールドタイプに必要なすべての設定で動的フォームを設定します。 ここに示すフォームレイアウトは、フォームにネイティブフォームフィールドタイプのルックアンドフィールを与えます。 このフォームで使用されるDDMアノテーションの詳細については、以下のメモを参照してください。

注意すべきことは、すべてのデフォルト設定が設定フォームに存在する必要があるということです。 上記の各タブ(それぞれ @DDMFormLayoutPage)に存在する設定のリストに注意してください。 フィールドタイプの設定フォームでデフォルト設定の1つを使用不可にする必要がある場合は、フィールドに 非表示ルール を設定します。 フォームフィールドルールは、 @DDMFormRule アノテーションを使用して構成されます。

インターフェイスは DefaultDDMFormFieldTypeSettings拡張します。 そのため、マスクとプレースホルダーに必要であったように、クラスで設定せずにクラス注釈でデフォルト設定を使用できます。

* TypeSettings クラスが終了したら、フォームフィールドタイプの * Type クラスを更新します。

型クラスの更新

クラス TimeDDMFormFieldType 現在、1つのメソッド getNameあり、現在のフォームフィールドの名前を返します。 Timeフィールドの特定の設定を保持する TimeDDMFormFieldTypeSettings を参照する新しいメソッドを追加します。 このメソッドはすでに基本クラス(BaseDDMFormFieldType)に存在するため、オーバーライドします:

@Override
public Class<? extends DDMFormFieldTypeSettings>
    getDDMFormFieldTypeSettings() {

    return TimeDDMFormFieldTypeSettings.class;
}

次に、新しい時間フィールド設定をレンダリングします。

« レンダリングフィールドタイプレンダリングフォームフィールドの設定 »
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています