カスタムウィジェットの概要

HTML、CSS、JavaScriptを使ってTulipで自分だけのウィジェットを作ろう

アプリにドラッグ＆ドロップするアイテムをウィジェットと呼びます。ウィジェットは、ボタン、画像、入力ボックス、その他ツールバーから利用可能なものです。

{height="" width=""} カスタムウィジェットを使用すると、独自のウィジェットを作成することができます。

カスタムウィジェットを使用すると、独自のコードを記述して独自のウィジェットを作成し、アプリケーションにドラッグ＆ドロップして操作することができます。この機能により、TulipユーザーはTulipで可能なことの限界を広げることができます。

この機能の概要については、以下の概要ビデオをご覧ください：

Tulip Libraryでカスタムウィジェットをチェックしましょう！

カスタムウィジェットの基本

カスタムウィジェット管理画面は、アカウント設定ページにあります。ここでウィジェットの作成と削除ができます。カスタムウィジェットエディタでは、ウィジェットコードの記述、小道具とイベントの作成、ウィジェットのプレビューができます。以下は、小道具とイベントの説明図です：

{height="" width="800"}.

**プロップ：**プロップは、カスタムウィジェットとTulipアプリケーションの間で共有されるデータです。プロップはアプリケーションエディタで公開され、アプリケーションエディタがどの変数、テーブルレコード、またはその他の情報をプロップに関連付けるかを選択できるようになります。

{高さ="" 幅="550"}。

**イベント：**イベントは、ウィジェットがアプリケーションに送信できるシグナルです。イベントは、アプリケーションがトリガーで応答することを可能にし、情報を一緒に運ぶことができます。

{高さ="" 幅="550"}。

カスタムウィジェットは、アプリエディタのカスタムダウンセレクタからアクセスできます。

{height="" width="800"} カスタムウィジェットは、アプリエディタのカスタムダウンセレクタからアクセスできます。

ウィジェットの作成

ウィジェット・エディター画面は4つのセクションに分かれています。プレビューセクションをクリックすると、左下のセクションに書いたコードがプレビューセクションに表示されます。Propの値は、テストのためにプレビューセクションで直接変更することができます。

{height="" width=""}.

小道具とイベントを操作するための特別な関数があります。

プロップの値の取得

// 小道具の値を取得する getValue('My Prop');``// 小道具を変数に格納する let myVariable = getValue('My Prop')；

Prop が変更されたときに何かを行う

// プロップの値が変更されたらいつでも何かを行う getValue('My Prop', (internalVariable) => { doSomething(internalVariable);})；

プロップの値の設定

プロップの値を設定する setValue('My Prop',value_to_set)；

//テキスト Prop の値を 'hello!' に設定する setValue('My Text Prop', 'hello!')；

オブジェクトのアイテムの値を設定する setValue('My Object Prop', { 'オブジェクト内部のキー': '新しい値' });```; //オブジェクトのアイテムの値を設定する setValue('My Text Prop', 'hello!

イベントを発生させる

イベントを発生させる fireEvent('event',payload)；

// ペイロードなしでイベントを発生させる fireEvent('My Event')；

//イベントをペイロード付きで発生させる fireEvent('My Event', myVariable);```.

次の図は、アプリのカスタムウィジェットを介した情報の流れを示しています。入力変数のデータは、prop に格納されます。値の変更は、トリガが出力変数にデータを格納するイベントを通知します。

{height=""幅=""}」を参照してください。

ウィジェット構築例ビデオ

ウィジェットのビルド例

アプリのインポート/エクスポート

エクスポート

1. カスタムウィジェットの概要から、エクスポートしたいウィジェットの横にある3つの点を選択します。

{height="" width=""}.

1. エクスポート "を選択します。

{高さ="" 幅="800"}。

インポート

1. カスタムウィジェットの概要画面から、一番上の3つの点を選択します。

{height="" width="800"}.

1. インポート」を選択します。

{height="" width="350"} "インポート "を選択します。

1. .jsonカスタムウィジェットファイルを見つけてください。

外部ライブラリの有効化

外部ライブラリは、カスタムウィジェットでできることをさらに拡張します。外部ライブラリは、JavaScriptで直接htmlを記述する際の面倒な作業の多くを処理します。外部ライブラリを使用したい各ウィジェットで、外部ライブラリを有効にする必要があります。

1. ウィジェットで、リボンの3ドットメニューをクリックしてください。

{height="" width=""}.

1. 外部ライブラリを有効にする "を選択します。

{height="" width="250"} を選択します。

1. 有効にしたい拡張機能を選択します。

{height="" width="450"} を選択します。

以下は、それぞれの機能の基本的な説明です。多くの拡張機能が多くの分野で優れているので、自由に探索してください。

• jQuery- 要素の操作とともに、より合理的なhtml要素の選択を可能にします。
• **D3 -**データのビジュアライゼーションのゴールドスタンダード。
• **Google Visualization -**その名の通り、ビジュアライゼーションを行うための素晴らしいツール。
• **javaascript-Ip-solver -**Ip ソルバーは、方程式を解くための複雑な計算を処理できる外部ライブラリです。
• **Lodash -**Lodash は javascript のデータ型を簡単に扱うためのツールをたくさん提供しています。
• **ChartJS -**シンプルなグラフライブラリ。
• **Moment -**Moment は日付や時刻を扱うためのたくさんのツールを提供しています。