1. Home
  2. 開発者向け
  3. 開発者APIの紹介

開発者APIの紹介

概要

この Blocs 開発者APIにより、サードパーティはカスタムを作成できます Brics 内で使用できる Blocs デザイン環境。カスタムBricのコアコンポーネントは、HTML、JS、CSSを使用して作成されます(データとファイル構造の詳細については、 こちら)。 JavaScriptベースの言語を介してアクセスできるさまざまなAPIプロトコルがあります。

注意してください: Blocs 開発者APIは現在、初期のアルファフェーズにあるため、一部の機能とドキュメントが変更される可能性があります。

ブリックビルダー

Blocs Bric Builderと呼ばれる開発ツールが付属しており、カスタムの開発と作成を支援するように設計されています。 Brics。 経由でアクセスできます 開発者 > ブリックビルダー メインメニューでBric Builderを使用すると、カスタムオブジェクトの作成を簡単に開始できます。 Brics最初のカスタム Bric を作成するには、この基本ガイドに従うことをお勧めします。
 

インターフェースの構築

カスタムBricのユーザーインターフェースは、 Bric Builderツール。 [インターフェイス]タブの下には、カスタムのユーザーインターフェイスを追加および管理するためのさまざまなフィールドとコントロールがあります。 bric.

アイテムの追加

新しいユーザーインターフェイスコンポーネントを追加するには、[ + UIレイヤーツリーの右上にあるボタンをクリックし、追加するインターフェイスコンポーネントのタイプを選択します。

アイテムの並べ替え

ユーザーインターフェイスアイテムは、レイヤーツリーで関連するレイヤーをドラッグアンドドロップすることで並べ替えることができます。

アイテムの複製

ユーザーインターフェイスアイテムは、簡単に複製できます 右クリック レイヤーツリー内の関連するレイヤーと選択 重複ファイル コンテキストメニューから選択します。

初心者向けのヒント!

カスタム全体を複製することも可能です Brics by 右クリック Bric Builderの左側にあるメインリストでBricを選択し、 重複ファイル コンテキストメニューから選択します。

利用可能なUIコンポーネント

イベントタイトル –タイトルは、関数を呼び出さないビジュアルテキストコンポーネントです。

マルチラインラベル –複数行のラベルは、関数を呼び出さないビジュアルテキストコンポーネントです。

テキストフィールド –テキストフィールドは、割り当てられた編集機能に文字列値を渡します。

ステッパーフィールド –ステッパーコントロールを備えたテキストフィールドは、割り当てられた編集機能に整数値を渡します。

テキスト領域 –テキスト領域は、割り当てられた編集機能に文字列値を渡します。

よくイメージ –画像は、割り当てられた編集機能にファイルパスを渡します。

ドロップダウンメニュー –ドロップダウンメニューは、選択された整数インデックスとアイテム文字列値を、割り当てられた編集機能に渡します。

チェックボックス –チェックボックスは、割り当てられた編集関数にブール値を渡します。

ボタン –ボタンをクリックすると、割り当てられた編集機能が呼び出されます。

フォントセレクター –フォントの選択を割り当てられた編集機能に渡すドロップダウンメニュー。

ページセレクター –ページID、名前、属性、および選択したアイテム整数インデックスを、割り当てられた編集機能に渡すドロップダウンメニュー。 IDがデータ属性の下に保存されている限り、ページIDはエクスポート時に実際のページURLと交換されます。 データ-blocs-ページ.

IDセレクター –割り当てられた編集機能にIDを渡すドロップダウンメニュー。 このメニューには、からのすべての要素IDが自動的に入力されます。 現在のページ.

誇大広告セレクター –誇大広告プロジェクト名を割り当てられた編集機能に渡すドロップダウンメニュー。 このメニューには、すべてが自動的に入力されます .hyperresources 現在のプロジェクトに追加されたディレクトリ。

よく色 –カラーウェルは、割り当てられた編集機能にXNUMX進値を渡します。

スライダー –スライダーは、割り当てられた編集機能に整数値を渡します。

水平方向の配置制御 –セグメント化された整列コントロールは、割り当てられた編集関数に整数値を渡します(0 =左| 1 =中央| 2 =右)。

垂直方向の配置制御 –セグメント化された整列コントロールは、割り当てられた編集関数に整数値を渡します(0 =上| 1 =中| 2 =下)。

テキストの配置制御 –セグメント化された整列コントロールは、割り当てられた編集関数に整数値を渡します(0 =左| 1 =中央| 2 =右| 3 =位置合わせ)。

デバイスセレクトコントロール – デバイス セグメント化されたコントロールは、割り当てられた編集関数に整数値を渡します (1 = デスクトップ | 2 = タブレット | 3 = モバイル ランドスケープ | 4 = モバイル)。

エッジ選択コントロール – エッジ選択セグメント コントロールは、割り当てられた編集機能に整数値を渡します (0 = 左 | 1 = 上 | 2 = 右 | 3 = 下)。

方向選択制御 – 方向セグメント コントロールは、割り当てられた編集機能に整数値を渡します (0 = 左 | 1 = 上 | 2 = 右 | 3 = 下)。

分配器 –仕切りは、関数を呼び出さない視覚的なコンポーネントです。

UIコンポーネントのデータ属性

各ユーザーインターフェイスコンポーネントには、コンポーネントが操作されたときに呼び出される関数や、ユーザーがコンポーネント上にカーソルを移動したときに表示されるツールチップなど、主要な操作特性を設定するために使用されるさまざまなデータ属性があります。

イベントタイトル –インターフェイス要素のタイトル。 通常、サイドバーの左側に表示されます。

演算 –このインターフェース要素が相互作用するときに呼び出される関数名。 関数名のみを含め、()は含めないでください。

属性 –このインターフェース要素のデータ値を保管するために使用される属性名。

–このインターフェース要素の初期属性データ値。

ツールチップ –カーソルがコンポーネント上にあるときに表示されるツールチップテキスト。

関数の記述

カスタムBricのHTMLを操作するには、まず独自の(JavaScriptベースの)編集機能を記述する必要があります。これらの編集機能は、 Blocs デザイン環境で使用するものであり、カスタム Bric がエクスポートされたプロジェクトに含まれている場合は使用されません。これらの編集機能はすべて、カスタム Bric のヘッダーに読み込まれる単一の JS ファイル内に配置する必要があります。 Brics index.html ファイル。 編集機能は、ユーザーインターフェイスコンポーネントを介してユーザーインターフェイスコンポーネントにバインドされます 関数データ属性.

ユーザーインターフェイスコンポーネントが操作されると、指定された編集関数が呼び出され、値が割り当てられているターゲット属性とともに値が渡されます。 編集関数のデータペイロードは、それを呼び出すために使用されているユーザーインターフェイスコンポーネントのタイプによって異なります。 ペイロード変数を正しく宣言するように編集関数を作成する必要があります。 次の例では、チェックボックスで使用される編集関数は、最初にBOOLペイロードを受け取り、次にターゲット属性文字列値を受け取るように設定されています。

例:
function myCheckbox(isChecked,targetAttr)
{
if(isChecked)
{
// checkbox is checked
}
}

カスタムのデバッグ Brics

Blocs カスタムのデバッグに役立ついくつかの便利な機能が組み込まれています Brics。 これらの組み込みデバッグ機能の詳細については、 こちら.

23 年 2023 月 XNUMX 日更新

この記事は役に立ちましたか?

関連記事