...
Section | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
|
コードウィジェットパネルでは、好きな場所に独自のセクションを追加することができます。そのためには、CanvasWidgetPanelを拡張するクラスを実装します。これはデフォルトで、次のセクションを提供します。
...
今回の例の目的は、以下のようなパネルを構築することです。
パネルを作成するには、次の手順に従います。
...
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
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リンク、より詳細な説明は、こちらからご確認いただけます。ここまでで、バックエンドおよびフロントエンドコードの記述が完了しているはずです。上記のステップを使用してコードウィジェットプロパティパネルのカスタマイズをしたら、jarファイルにコードをバンドルし、Yellowfinにアップロードするステップへ進む準備は完了です。
コードウィジェット開発をさらにサポートする、サンプルコードやAPIリンク、より詳細な説明は、こちらからご確認いただけます。