Published — v. 5
/
コードウィジェットプロパティパネルのカスタマイズ

コードウィジェットプロパティパネルのカスタマイズ

Owned by YUKA SAITO
Last updated: Apr 16, 2021Version comment

概要

コードウィジェットプロパティパネルは、次の3つのコンポーネントに分けられます。

  • パラメーター
  • セクション
  • パネル

パラメーターは、ユーザーが値を変更するために使用するコントロールです。次の例で「Name（名前）」や「Video URL（ビデオURL）」は両方ともパラメーターです。パラメーターのJavaDocは、こちらを参照してください。

セクションはパラメーターのコンテナであり、書式設定オプションのような類似のパラメーターのグループを含みます。

セクションは通常展開や縮小が可能であり、次のスクリーンショットでは、実際のところ5つのセクションがあります。


スクリーンショットの3つのセクション（Size & Location; サイズと位置、Background Formatting; 背景の書式、Actions; アクション）は、すべて展開することができます。

他の2つのセクション（Name; 名前、Video URL; ビデオURL）は、「常に展開」されたセクションのため、ユーザーには単一のセクションのように表示されます。しかしこれらは、コードの観点から見ると2つのセクションに分かれています。


コードウィジェットパネルでは、好きな場所に独自のセクションを追加することができます。そのためには、CanvasWidgetPanelを拡張するクラスを実装します。これはデフォルトで、次のセクションを提供します。

  • Name（名前）
  • Size & Location（サイズと位置）
  • Background Formatting（背景の書式）
  • Actions（アクション）


コードウィジェットプロパティパネルの構築

次の例の完全なコードは、こちらから参照できます。

今回の例の目的は、以下のようなパネルを構築することです。


パネルを作成するには、次の手順に従います。

  1. CanvasWidgetPanelを拡張します。
  2. buildSections関数を上書きします。
  3. ユーザーへ利用可能にするセクションを追加します。
VideoWidgetPanel.java
package com.hof.video;
 
import com.hof.mi.widgetcanvas.panelcollection.CanvasWidgetPanel;
import com.hof.mi.widgetcanvas.panelcollection.CanvasWidgetPanelInfo;
 
public class VideoWidgetPanel extends CanvasWidgetPanel {
 
    public VideoWidgetPanel(CanvasWidgetPanelInfo info) {
        super(info);
    }
     
    /**
     * Helper function that allows
     */
    @Override
    protected void buildSections() {
        super.buildSections();
        sections.add(1, new VideoWidgetURLSection());
        sections.add(2, new CollapsedVideoOptionsSection());     
    }   
}


今回の例では、buildSectionsを上書きしています。これは、Yellowfinがフロントエンドで表示するパネルを生成するときに呼び出されます。super.buildSections()を呼び出すと、自動的にデフォルトセクションを追加するので、パネルにデフォルトセクションが必要ない場合は、super.buildSections()を呼び出してはいけません。

URLとオプションのセクションをパネルの上部に追加したいので、section.add(Integer, Section)を使用して、関連する場所に追加することができます。

2つのセクションのJavaはこちらです。

VideoWidgetURLSection.java
package com.hof.video;
 
import com.hof.parameters.GeneralPanelOptions;
import com.hof.parameters.InputType;
import com.hof.parameters.Parameter;
import com.hof.parameters.ParameterDisplayRule;
import com.hof.parameters.ParameterImpl;
import com.hof.parameters.ParameterSection;
import java.util.LinkedList;
import java.util.List;
import java.util.Map;
 
public class VideoWidgetURLSection extends ParameterSection {
 
    /**
     * SectionKey is used by the front-end to create a unique panel/section combination to allow
     * quick removal, what is returned here should be unique
     */
    @Override
    public String getSectionKey() {
        return "youtube-url";
    }
 
    /**
     * The name of the Section that will be displayed to the user, if the section has display name
     * turned on
     */
    @Override
    public String getName() {
        return "Video URL";
    }
 
    /**
     * Parameters that will be available to a user in this section
     */
    @Override
    public List<Parameter> getParameters() {
        List<Parameter> parameterList = new LinkedList<>();
         
        ParameterImpl p = new ParameterImpl();
        p.setName("Video URL"); //Name that will be displayed to the user when they are editing this.
        p.setProperty("videoURL"); //Property that this will be stored as in the database, and the name of the property to access when using getFormatValue
        p.setInputType(InputType.TEXTBOX); //Define this option as a textbox
        p.setModelKey("formats"); //All of the options are saved in formats.
        p.addViewOption("width", "240px"); //Set the display width of the textbox to 250px
        parameterList.add(p);
        return parameterList;
    }
     
    @Override
    public List<ParameterDisplayRule> getDisplayRules() {
        return null;
    }
 
    @Override
    public GeneralPanelOptions getSectionOptions() {
        return null;
    }
 
    @Override
    public Map<String, ?> getData() {
        return null;
    }
 
}


CollapsedVideoOptionsSection.java
package com.hof.video;
 
import com.hof.parameters.GeneralPanelOptions;
import com.hof.parameters.InputType;
import com.hof.parameters.Parameter;
import com.hof.parameters.ParameterDisplayRule;
import com.hof.parameters.ParameterImpl;
import com.hof.parameters.ParameterSection;
import java.util.LinkedList;
import java.util.List;
import java.util.Map;
 
public class CollapsedVideoOptionsSection extends ParameterSection {
 
    /**
     * SectionKey is used by the front-end to create a unique panel/section combination to allow
     * quick removal, what is returned here should be unique
     */
    @Override
    public String getSectionKey() {
        return "video-collapsed";
    }
 
    /**
     * The name of the Section that will be displayed to the user, if the section has display name
     * turned on
     */
    @Override
    public String getName() {
        return "Video Options";
    }
 
    /**
     * Parameters that will be available to a user in this section
     */
    @Override
    public List<Parameter> getParameters() {
        List<Parameter> parameterList = new LinkedList<>();
         
        ParameterImpl p = new ParameterImpl();
        p.setName("Video Start Time"); //Name that will be displayed to the user when they are editing this.
        p.setProperty("videoStartTime"); //Property that this will be stored as in the database, and the name of the property to access when using getFormatValue
        p.setInputType(InputType.TEXTBOX); //Define this option as a textbox
        p.setModelKey("formats"); //All of the options are saved in formats.
        p.addViewOption("width", "240px"); //Set the display width of the textbox to 250px
        parameterList.add(p);
        return parameterList;
    }
    
    @Override
    public List<ParameterDisplayRule> getDisplayRules() {
        return null;
    }
 
    /**
     * Create the options for this section so that we can display in a
     * collapsed or expanded mode.
     */
    @Override
    public GeneralPanelOptions getSectionOptions() {
        GeneralPanelOptions options = new GeneralPanelOptions();
        options.setShowName(true);
        options.setExpandable(true);
        options.setExpanded(false);
        return options;
    }
 
    @Override
    public Map<String, ?> getData() {
        return null;
    }
 
}



次のステップ

ここまでで、バックエンドおよびフロントエンドコードの記述が完了しているはずです。上記のステップを使用してコードウィジェットプロパティパネルのカスタマイズをしたら、jarファイルにコードをバンドルし、Yellowfinにアップロードするステップへ進む準備は完了です。

コードウィジェット開発をさらにサポートする、サンプルコードやAPIリンク、より詳細な説明は、こちらからご確認いただけます。