API呼び出し

概要

この Blocs 開発者APIは、カスタムとの対話に使用できる一連のルーチンとプロトコルを提供します Brics ユーザーインターフェイス、HTML出力、およびその他のさまざまな側面 Blocs 設計環境。

呼び出しはカスタム Bric の Javascript 関数を介して行われ、関数は任意の JS 形式、jQuery 2、jQuery 3 などで記述できます。

すべてのAPI呼び出しは、 WebKitメッセージハンドラー また、JSONディクショナリまたは文字列の形式で単一のデータセットを渡す必要があります。 API呼び出しのデータ値は、 投稿メッセージ ブラケット。

例:
window.webkit.messageHandlers.API_CALL.postMessage("VALUE");

UI呼び出し

カスタムブリックを選択すると、サイドバーはカスタムに基づいてUI値を自動的に入力します。 Brics 現在の値。サイドバーの UI 項目が操作されると、その項目の状態は自動的に更新されますが、次の API 呼び出しを使用すると、そのカスタム Bric の他の UI 項目とその値を操作できます。たとえば、チェックボックスをオンにすると、ドロップダウン メニューに別のメニュー項目が追加され、チェックボックスをオフにすると、ドロップダウンから追加項目が削除されます。

ユーザーインターフェイスAPI呼び出しには、ターゲットUIアイテムの属性と値を指定するJSONディクショナリが必要です。

setUIVal –サイドバーUIアイテムの値を設定します。 整数やブールを含むすべての値は、文字列として渡す必要があります。

ドロップダウンの例:
window.webkit.messageHandlers.setUIVal.postMessage('{"attr":"dropdown-data","value":"1","sync":"false"}');

チェックボックスの例:
window.webkit.messageHandlers.setUIVal.postMessage('{"attr":"checkbox-data","value":"1","sync":"false"}');

入力フィールドの例:
window.webkit.messageHandlers.setUIVal.postMessage('{"attr":"field-data","value":"Hello World","sync":"false"}');

アライメント制御の例:
window.webkit.messageHandlers.setUIVal.postMessage('{"attr":"align-data","value":"2","sync":"false"}');

setuistate –サイドバーUIアイテムの状態(有効/無効)を設定します。

例:
window.webkit.messageHandlers.setUIState.postMessage('{"attr":"my-name-data","enable":"false"}');

setUI編集可能 –UIアイテムのコンテンツを編集できるかどうかを設定します。

例: window.webkit.messageHandlers.setUIEditable.postMessage('{"attr":"my-name-data","editable":"true"}');

setUI非表示 –UIアイテムを非表示にするかどうかを設定します。

例: window.webkit.messageHandlers.setUIHidden.postMessage('{"attr":"my-name-data","hidden":"true"}');

ポップUIメニュー –ドロップダウンメニュー項目にオプションを入力します。

例:
window.webkit.messageHandlers.popUIMenu.postMessage('{"attr":"dropdown-data","items":"item 1,item 2,*seperator*,item 3", "value":"0"}');

プロジェクトコール

カスタム Bric を含むプロジェクトに追加のリソースを追加する必要がある場合があります。次の API 呼び出しを使用すると、プロジェクト リソースを追加できます。

プロジェクトリソース – プロジェクトにカスタム Bric リソースを追加します。追加すると、プロジェクト設定のプロジェクト添付ファイルに表示されます。現在、JS、CSS、PHP、HTML ファイルとディレクトリがサポートされています。添付された JS ファイルはエクスポートの /js ディレクトリに、CSS ファイルはエクスポートの /css ディレクトリに、PHP ファイルはエクスポートの /includes ディレクトリに配置されます。ページ コード内では、CSS リソースは終了ヘッド タグの前に配置され、JS リソースは終了ボディ タグの前に配置されます。カスタム Bric によって参照されるすべての追加リソースは、カスタム Bric に含める必要があります。 Brics リソースディレクトリ。

例:
window.webkit.messageHandlers.projectResource.postMessage('{"action":"add","name":"my-brics-assets-folder"}');

初心者向けメモ

この プロジェクトリソース api呼び出しは、プロジェクトにファイルを追加するためにのみ使用する必要があります。 あなたのすべて Brics 必須コード(エクスポート後にBricを機能させるために必要)は、 Brics ディレクトリが含まれています.

ページ呼び出し

カスタム Bric を含むページに追加のリソースを追加する必要がある場合があります。次の API 呼び出しを使用すると、追加のページ リソースを追加し、ページのエクスポート サフィックスを制御できます。

リソースを追加する。 – ページにカスタム Bric リソースを追加します。追加すると、ページ設定のページの添付ファイルに表示されます。現在、JS、CSS、PHP ファイルがサポートされています。添付された JS ファイルはエクスポートの /js ディレクトリに、CSS ファイルはエクスポートの /css ディレクトリに、PHP ファイルはエクスポートの /includes ディレクトリに配置されます。カスタム Bric によって参照されるすべてのリソースは、カスタム Bric に含める必要があります。 Brics リソースディレクトリ。

例:
window.webkit.messageHandlers.resource.postMessage('{"action":"add","name":"my-custom-resource.js"}');

ページサフィックス –現在のページサフィックスを設定します(例:HTML、PHP)。

例:
window.webkit.messageHandlers.pageSuffix.postMessage("php");

テンプレート呼び出し

エクスポートされたサイトに含まれる追加のファイル内にユーザー定義の値を含める必要がある場合があります。 次のAPI呼び出しでは、これを行うことができます。

ストアカスタムブリックテンプレート値 – カスタムBricテンプレートファイル内に含まれるユーザー定義の値を保存します。テンプレートファイルはCSS、JS、JSON、PHPのいずれかで、カスタムBricコンテンツ内の次のディレクトリに追加する必要があります。 テンプレート.

例:
window.webkit.messageHandlers.storeCustomBricTemplateVal.postMessage('{"attr":"my-attr","value":"Hello World","template":"custom-bric-js.js","force-newfile":"no"}');

キー値:
この ストアカスタムブリックテンプレート値 API呼び出しには、次のキー値を含める必要があります。

ATTR –属性値は、エクスポート時にテンプレートファイルで置き換えられる領域を識別するために使用されます。 この属性をテンプレートファイル内で使用する場合は、%でラップする必要があります(例:%my-attr%)。
–テンプレートファイルの属性を置き換える値。
template –テンプレートファイル名。 このファイルは、という名前のディレクトリに配置する必要があります テンプレート あなたの中で Brics 内容。
強制新規ファイル –XNUMXつの場合 Brics 異なる値を使用して同じテンプレートファイルに書き込み、これをYESに設定すると、別のテンプレートファイルが作成されます(例:custom-bric-js-1.js。

ショートコード
それも注目に値する ショートコード テンプレートファイルでも使用できます。

DOMの変更

カスタム Brics メインの設計環境の外で操作される場合、このメソッドは開発者にカスタムを操作する完全な自由を与えます Brics 「DOM」(ドキュメントオブジェクトモデル)、あらゆるタイプのJSベースの言語。 関数がカスタムに変更を加えた後 Brics DOM、それを呼び出す必要があります sync DOMの変更をメインのカスタムBricに同期するためのプロトコル Blocs デザインキャンバス。

sync – DOM操作が行われた後、syncAPI呼び出しは変更をメインに同期します Blocs デザインキャンバス。 同期中に前処理やレンダリングはなく、すべてが瞬時に行われます。 次のことを考慮することも重要です。 sync このプロトコルは、現在のドキュメントに元に戻す状態も作成するため、変更が行われた場合にのみこの呼び出しを使用します。それ以外の場合は、不要な元に戻す状態が作成されます。

初心者向けのヒント

同期プロトコルは、通常、ユーザーがカスタムBricを操作してHTMLが変更された後に使用されます。 init(bricVersion,framework) 新しく導入された機能をサポートするためにカスタム Bric の HTML を更新するなどの特定のタスクを実行している場合を除き、この機能は使用できません。

例:
window.webkit.messageHandlers.sync.postMessage("changes");

フィードバックコール

カスタム Bric に加えた変更に基づいて、ユーザーに情報をフィードバックすることが重要な場合があります。次の呼び出しは、それを行うためのさまざまな方法を提供します。

通知 –表示されないアプリ内通知を表示する block完全なUIアクセス。 通知IDがユーザーによって却下されると、呼び出されても再度表示されないため、各タイプの通知には独自のID値が必要です。

例:
window.webkit.messageHandlers.notification.postMessage('{"message":"Hey, this is a notification.","id":"my-bric-notification"}');

することも可能です 通知をリセットする リセット属性を使用すると、ID属性を使用して単一のIDまたは通知IDの配列を送信できます。

例:
window.webkit.messageHandlers.notification.postMessage('{"reset":"true","id":"my-bric-notification-1,my-bric-notification-2"}');

アラート –アラートを投稿する(blocksアプリは却下されるまで完全なUI)。

例:
window.webkit.messageHandlers.alert.postMessage('This is a basic alert');

コールバックアラート –アラートを投稿する(blocksアプリは却下されるまで完全なUI)であり、ユーザーが選択する必要があります。 ユーザーの選択は、BOOL値として関数に返されます。

例:
window.webkit.messageHandlers.callbackAlert.postMessage('{"message":"Do you want to get a pizza?","function":"pizzaFunction"}');

オープンURL –ユーザーのWebブラウザーでURLを開きます。

例:
window.webkit.messageHandlers.openURL.postMessage('https://blocsapp.com/');

その他

開発に使用されるその他の呼び出し。

debug –に表示されるデバッグメッセージを投稿します 開発者コンソールウィンドウ.

例:
window.webkit.messageHandlers.debug.postMessage('Hello World!');

16年2023月XNUMX日に更新

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

関連記事