はじめに
また, Blocs 開発者APIにより、サードパーティはカスタムを作成できます Brics 内で使用できる Blocs 設計環境。 カスタムのコアコンポーネント Bric HTML、JS、CSSを使用して作成されています(データとファイル構造の詳細を読むことができます ここから)。 JavaScriptベースの言語を介してアクセスできるさまざまなAPIプロトコルがあります。
注意してください: Blocs 開発者APIは現在、初期のアルファフェーズにあるため、一部の機能とドキュメントが変更される可能性があります。
Bric ビルダー
Blocs と呼ばれる開発者ツールが付属しています Bric カスタムの開発と作成を支援するように設計されたビルダー Brics。 経由でアクセスできます 開発者> Bric ビルダー メインメニューで。 ザ・ Bric Builderは、カスタムの作成を開始する最も簡単な方法です Brics、最初のカスタムを作成するには、この基本ガイドに従うことをお勧めします Bric.
インターフェースの構築
カスタムのユーザーインターフェイス Bric を使用して作成する必要があります Bric ビルダーツール。 [インターフェイス]タブの下には、カスタムのユーザーインターフェイスを追加および管理するためのさまざまなフィールドとコントロールがあります。 bric.
アイテムの追加
新しいユーザーインターフェイスコンポーネントを追加するには、[ + UIレイヤーツリーの右上にあるボタンをクリックし、追加するインターフェイスコンポーネントのタイプを選択します。
アイテムの並べ替え
ユーザーインターフェイスアイテムは、レイヤーツリーで関連するレイヤーをドラッグアンドドロップすることで並べ替えることができます。
アイテムの複製
ユーザーインターフェイスアイテムは、簡単に複製できます 右クリック レイヤーツリー内の関連するレイヤーと選択 重複ファイル コンテキストメニューから選択します。
利用可能な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コンポーネントのデータ属性
各ユーザーインターフェイスコンポーネントには、コンポーネントが操作されたときに呼び出される関数や、ユーザーがコンポーネント上にカーソルを移動したときに表示されるツールチップなど、主要な操作特性を設定するために使用されるさまざまなデータ属性があります。
役職 –インターフェイス要素のタイトル。 通常、サイドバーの左側に表示されます。
演算 –このインターフェース要素が相互作用するときに呼び出される関数名。 関数名のみを含め、()は含めないでください。
属性 –このインターフェース要素のデータ値を保管するために使用される属性名。
値 –このインターフェース要素の初期属性データ値。
ツールチップ –カーソルがコンポーネント上にあるときに表示されるツールチップテキスト。
関数の記述
カスタムのHTMLを操作するには Bric、最初に独自の(javascriptベースの)編集機能を作成する必要があります。 これらの編集機能は、 Blocs 設計環境であり、カスタム時に使用されません Bric エクスポートされたプロジェクトに含まれています。 これらの編集機能はすべて、カスタムのヘッダーに読み込まれる単一のJSファイル内に配置する必要があります Brics index.htmlを ファイル。 編集機能は、ユーザーインターフェイスコンポーネントを介してユーザーインターフェイスコンポーネントにバインドされます 関数データ属性.
ユーザーインターフェイスコンポーネントが操作されると、指定された編集関数が呼び出され、値が割り当てられているターゲット属性とともに値が渡されます。 編集関数のデータペイロードは、それを呼び出すために使用されているユーザーインターフェイスコンポーネントのタイプによって異なります。 ペイロード変数を正しく宣言するように編集関数を作成する必要があります。 次の例では、チェックボックスで使用される編集関数は、最初にBOOLペイロードを受け取り、次にターゲット属性文字列値を受け取るように設定されています。
例:
function myCheckbox(isChecked,targetAttr)
{
if(isChecked)
{
// checkbox is checked
}
}
カスタムのデバッグ Brics
Blocs カスタムのデバッグに役立ついくつかの便利な機能が組み込まれています Brics。 これらの組み込みデバッグ機能の詳細については、 ここから.